I'm working on the CSS file for a beginner's Internet Programming course I am taking. The problem is that whenever I made the image in the section into a link, it screwed up the alignment with the rest of the section. I have a Nav List on the side above where this image is, and the Image and Link below it are aligning under the nav bar, while everything else below THAT are staying aligned.
Here is the code:
<p>If you click on the Personal link, you can browse my favorite Halloween pictures,
stories, and films. And if you join my email list, I will keep you up-to-date on
all things Halloween.</p>
<h2>Product of the Week</h2>
<a href="products/cat.html">
<img src="images/cat1.jpg" alt="20'' Deranged Cat">
</a>
<br>
20" Deranged Cat
<h2>My guarantee</h2>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it
for a full refund.
<strong>No questions asked!</strong></p>
Here's the CSS:
/* Section */
section
{
margin: 20px 25px 25px 25px;
}
section h1
{
font-size: 150%;
margin-bottom: .5em;
margin-left: 200px;
}
section h1:first-letter
{
font-size: 250%;
}
section h2
{
font-size: 125%;
margin: .8em 0 .5em 0;
margin-left: 200px;
}
section p
{
margin-bottom: .5em;
margin-left: 200px;
}
/*Formatting for added Product of Week Request in Section 6 Bullet 4*/
/*Changed for Section 7, Bullet 3*/
section img a
{
margin: 300px;
}
section a
{
display: inline;
}
/* Footer */
Please tell me what I'm doing wrong!
Damann23, welcome to SO...to align items you have to get familiar with several properties such as
float:left;
display:inline;
I put your code in a fiddle and although it needs work, this coould give you an idea of how to start. But remember, organizing your code in sections (divs) it's always a smart thing to do instead of running everything in a sheet. That way you can manage these sections individually
DEMO
Not really sure what it is you are trying to do but if you are trying to have them both on the same line you could wrap the text in a span tag and place the image and text in the a tag like so...
check the updated fiddle js fiddle
<a href="products/cat.html">
<img src="images/cat1.jpg" alt="Cat">
<span>20" Deranged Cat</span>
</a>
Related
I'm creating my website and making it mobile-friendly with #media tags on CSS. I have an image of the empire state building that aligns to the right instead of center whenever the viewport is less than 1235px. I was wondering what the root of this problem is? I tried using a #media tag to center the image with "text-align: center;" but no luck.
It currently looks like this
The target image that I want to center is called "NYC_icon"
Here is my HTML:
<div class="section1">
<div id="NYC_icon">
<img src="C:\Users\LYind\OneDrive\Documents\Full-Stack Developer 2020 Course\Personal Website HTML\Images\home2.png"
alt="NYC">
</div>
<div id="Mini_Bio">
<h1>
Linda Ye
</h1>
<h2>
<i>NYC
</i>
</h2>
<p>
Aspiring <strong> coder</strong>, business
<strong> woman</strong>, avid
<strong> runner</strong>, and weekend
<strong> chef</strong>.
</p>
</div>
</div>
Here is my CSS:
.section1 {
margin: 80px;
padding: 30px 20px;}
#NYC_icon {
display: inline-block;
margin-left: 200px;
vertical-align: top;}
#media (max-width:1278px) {
#NYC_icon img{
text-align: center;}}
You can try applying the text-align: center to the div that contains the image. And also specify margrin: 0 when width of the screen is less than 1235px. so it allows that the image can be horizontally centered.
#media (max-width:1235px) {
#NYC_icon {
display: block;
margin: 0;
text-align: center;
}
}
First of all I would recommend that you head over to MDN and review the basics of layout. I do not understand what your are trying to do with the div which contains the image.
With regards to this particular case, experiment with the following changes:
Open the browser developer tools and inspect the element in questions. See what styles are applied.
I would recommend that if you are a beginner, set a 1px solid black border on all elements to visually see if what you are trying to do is working as you expect.
Finally, with regards to this particular problem, you can try many different things. I think that if you change the style of the img to {display:block; margin: 0px auto} it will be centered. Just drop the containing div altogether.
Also have a look at this resource.
The <img> is not centered at all, Not at more nor less than 1235px viewport.
I made the relevant changes to the code to make the images centered at all times, The code is heavily commented, If you have any questions please do ask.
/* To illustrate Not needed */
body * {
padding: 10px;
border: 1px solid;
}
/* To illustrate Not needed */
.section1 {
margin: 10px;
padding: 30px 20px;
}
#NYC_icon {
/* To let the element fill the space so we can center the img inside */
display: block;
/* text-align on the parent of the element we want to align */
/* text-align proerty only aligns inline level elements */
/* inline level elements are elements with display value
* set to inline or inline-[something]
*/
text-align: center;
/* margin-left: 200px; removed not needed*/
/* vertical-align: top; removed not needed*/
}
<div class="section1">
<div id="NYC_icon">
<img src="https://picsum.photos/300" alt="NYC">
</div>
<div id="Mini_Bio">
<h1>
Linda Ye
</h1>
<h2>
<i>NYC
</i>
</h2>
<p>
Aspiring <strong> coder</strong>, business
<strong> woman</strong>, avid
<strong> runner</strong>, and weekend
<strong> chef</strong>.
</p>
</div>
</div>
Right now I am fairly happy with my navigation bar and it is centered how I would like it, however instead of the white background box ending at the end of the specified width, It is running the full length of the screen, as seen at www.rebeccahenrydesign.com/about.html
Does anyone know what I can to to give it a specified length.
Here is my html
<script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li>Home</li>
<li>Work
<ul>
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" >Contact</a>
</li>
and here is the css
.horizontalcssmenu ul{
padding: 0;
list-style-type: none;
background:white;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline-block;
float: none;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px white;
border-left-width: 0;
text-decoration: none;
background: white;
color: #f77bb1;
font: 20px Helvetica,sans-serif;
}
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px white;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}
/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: white;
border-width: 0 1px 1px 1px;
}
.horizontalcssmenu ul li a:hover{
background: #f77bb1;
color:white;
}
.horizontalcssmenu ul li ul li a:hover{
background: #f77bb1;
}
.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */
Please forgive me if the formatting of this post is incorrect (or if this is a stupid question). I have never coded anything before this and I have never posted on this site! Any feedback is appreciated. Thanks
Editing my answer as i look at the actual website... Also, you have some other errors that need to be corrected. Run your web page through this web site and correct the errors it indicates.
You have defined the class four times with the same name. This will not work. If you need to define four classes, they must all have different names.
http://validator.w3.org/
-----------Update-------
Okay, I fixed your problem. Here is the code, with my changes made as comments that you can delete. You should still run it through the validator, and fix problems.
The problem you asked about required setting a width and a margin in the div element. There are other things you should address, but this solves your main problem.
<!DOCTYPE html>
<html>
<head>
<!-- Declared character encoding --> <meta charset="utf-8">
<!-- Inserted required title element --> <title>About Rebecca Henry</title>
<!-- Moved link element from body to head --><link rel="stylesheet" type="text/css" href="csshorizontalmenu.css">
<!-- Moved Script to the head element --><script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
</head>
<body>
<h1>About Rebecca Henry</h1>
<!-- Added a width and a margin. This solves your white bar problem. --><div class="horizontalcssmenu" style="width: 556px; margin: auto">
<ul id="cssmenu1">
<li>Home</li>
<li>Work<span class="arrowdiv"> </span>
<ul style="top: 27px;">
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li>About</li>
<li>Contact
</li>
</ul>
</div>
<!--Split the menu from the table with separate div elements -->
<div>
<br>
<br>
<br>
<img src="images/profile.jpg" alt="Profile">
<!-- changed align center to margin auto inline style --><br><table style="width:410px; margin: auto">
<tbody><tr>
<td>
<p>
Hello Friends,
<br>
My name is Rebecca Henry and I am a Graphic
Designer out of Richmond Virginia. I love
working with different mediums, but print is
by far my favorite. Experimentation
and trial and <br> error are important factors in my work. I
try to think out of the box and try as many
things as I possibly can. The work on this site
is comprised mostly of work from my junior year
of college at Virginia Commonwealth University,
and also of the work I completed at an internship
with a local luxary car service by the name of
bioRide. I am passionate about useing my talent to help others in any way I can. My dream job would be to work with a non-profit creating meaningful work. I do not work in hopes of fame or foutune, but simply for the love of what I do. If you have any questions or comments
about the work, I am always happy to hear them.
My contact information can be found on the contact
page. I am currently a student, and always looking
for employment so please feel free to contact me
in those regards also. Thank you for visiting my page!
</p>
</td>
</tr>
</tbody></table>
<br>
<br>
<br>
<br>
<br>
</div></body></html>
Welcome aboard!
I wish you to find all the help you need on this great Q&A platform.
The "local" solution
This solution only resizes the list container. The advantage is that you can choose the width you want without impacting the rest of your page. The drawback is that whenever you add an element to your page, you have to align/size it manually.
Add this in your CSS file:
ul#cssmenu1 {
width: 580px; /* Edit this line */
margin: 0 auto;
}
The "global" solution
This solution resizes the entire page by resizing the body, which is the first displayed child element of the <html> element. The drawback is that you cannot expand your list container outside the body element (well, at least not without a hack or side effects). The advantage is that you have a consistent layout in your entire page, no matter what you add or edit in the future. Also, you can resize the entire page (if it's too small, or if you want to have a responsive version, ...) by updating just one value. That's definitely the direction I would take.
Start by resizing the entire body by adding this at the top of your CSS:
body {
width: 580px; /* Edit this line */
margin: 0 auto;
}
Now, in your HTML page, line 48, replace:
<table style="width:410px" align="center">
with the following:
<table>
Of course, I am not saying there are no other solutions, but that these two ones are the first ones that come to my mind.
Also, as Edward said in his answer, please use W3C's markup validator as using standard markup gives you - among other things - a better chance to be compliant with all sort of browsers. Results for the page you gave can be found here. Your CSS is also invalid, you can check it with the CSS validator.
I am learning how to code HTML and CSS, and I decided to make my own website in the process.
My question is: how would I align smaller text to a bigger object, for example, links to different pages on my website neatly aligned under my full name with the links flush to the of the beginning and end of my full name?
I know describing it may have been a bit confusing, so here's an image of what I mean:
Any suggestions?
Thanks!
You can approximate the look and design regardless of the header length, but in the end, CSS doesn't offer as precise typographical tools as you'd need and you will have to nudge the percentages one way or another once you know the length of your actual text.
Sample Jsfiddle
HTML:
<div id="container">
<h1>Large Title Here Etc</h1>
<div id="sub">
<span>music</span>
<span>film</span>
<span>web</span>
<span>photo</span>
</div>
</div>
CSS:
body {
text-align: center;
}
#container {
display: inline-block;
}
h1 {
font-size: 2em;
}
#sub {
font-size: 1em;
display: table;
width: 120%;
box-sizing: border-box;
margin: 0 -10%;
}
#sub span {
display: table-cell;
padding: 0 2%;
}
links flush to the beginning and end of my full name
Get out of the habit of thinking this way as you design websites. This will lead to endless headaches and frustrations for you, as it depends on browser rendering (and possibly rendering bugs), the user's font size, the user's font, and loads of other factors you cannot control. Instead of going for 'pixel precision', the idea is simply to make it look as good as you can on most things.
When designing things like this, consider the markup first. What is the structure of what you're actually writing? In your linked image, Full Name looks to me like a header (perhaps h1), while menus like that are normally done as styled unordered lists (ul) these days. Below is an example of how I might make something similar to what is in your image.
Here is the markup:
<div id="container">
<h1>Full Name</h1>
<ul>
<li>music</li>
<li>film</li>
<li>web</li>
<li>photo</li>
</ul>
</div>
and the CSS used, with comments:
#container { border: 1px solid; }
h1 {
margin-bottom: 0;
text-align: center;
}
ul {
margin: 0.5em;
/* remove default padding inserted by browser */
padding-left: 0;
/* no bullets */
list-style-type: none;
/* this works on inline objects, not just text */
text-align: center;
}
li {
/* hybrid of inline and block; obeys text-align */
/* Also note this does not work in IE <9. Workarounds exist. */
display: inline-block;
padding: 3px;
}
And here is the end result: http://jsfiddle.net/3PLgz/1/
Actually I'm new to web designing and I'm going to make my own social network and I'm using the amazing layout of Angelsmood.com music social network.
Everything is OK with designing except that I can't place the "Sign Up" button on the right place; it has a lot of margin on its right side. The problem is that there's no margin in my CSS code. Here's my code:
<div id="header_register">
Sign Up
<div>
Artists and their true fans are human angels.
Find them, connect with them and become one of them.
</div>
</div>
And Here's the CSS:
#header_register {
position: relative;
font-size: 12px;
}
#header_register a {
display: block;
height: 30px;
line-height: 30px;
background: ##810101;
color: #fff;
font-weight: bold;
font-size: 14px;
float: left;
text-decoration: none;
border: 1px #508F54 solid;
}
Please help me to fix this.
I made a fiddle and tried to fix your problem the best I could based on the information you gave us.
jsfiddle
Things I did... took your line-height out and moved the link after the div so you didn't have to use it... then I margin: 0 auto to center the <a> tag.
Instead of float: left;
I took it out added a width of the <a> tag so it did not span the width of the screen.
If you need this to function in a different way that I have illustrated ask and I will show you on the fiddle I posted.
Really simple question, how do I force a link to appear inline with a h2 heading?
I have the following code : http://jsfiddle.net/jezzipin/6DpPX/ and I'd just like the 'Back to top' link to appear inline with the 'Social Media' heading but everything I try doesn't seem to work. Even the use of spans.
Any help would be greatly appreciated.
jme1988
N.B. Just to be clear, this is the effect I am after:
Add this css
.b2t_link{
float:right;
margin-left:0;
}
.page_title{
display:inline-block;
vertical-align:top;
}
Demo
Apply the following styles:
.page_title{
font-size:18px;
font-family: Arial,Helvetica,sans-serif;
font-weight:400;
padding-left:16PX;
/*color:#053452; Dark Blue*/
color: #729ABD;
float:left; //Added float
}
.b2t_link{
float: right;
margin-left: 794px; //Reduced margin by width of page-title
font-family: 'FamiliarProBold',Arial,Helvetica,sans-serif;
font-size: 11px;
color: #729ABD;
}
.two_col_textAndImage_text{
width: 720px;
font-size: 11px;
display: block;
float: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 10px;
min-height: 300px;
}
#main-content{
clear:both;
}
Then in the html wrap the image and text in a div with id main-content.
<div id="main-content">
<div class="two_col_textAndImage_text">
<h2 class="item_title_no_image">Social Media Integrations</h2>
<p class="item_text_no_image">
Social Media is fast becoming a channel for advertising, promoting and applying for vacancies. Some organisations have fully embraced this within their recruitment strategies whilst others have not yet or do not wish to adopt this trend. Whatever the view of your own organisation's recruitment channels, ATS2go has been designed to integrate seamlessly with social media. <br/><br/>
Social Media buttons, such as Facebook, Twitter and LinkedIn can be embedded within you vacancy postings enabling visitors to your site to forward a link to their friends and contacts about your vacancies. In addition, ATS2go includes automative "Job Tweets" for your vacancies which include a link back to your recruitment page; people simply click on the link within the Tweet and can then find out more about the role and hopefully submit their application immediately - simple, easy and free! <br/><br/>
</p>
</div>
<div class="two_col_textAndImage_image">
<img / src="https://text-development.ats2go.com/img/content_images/social-media.jpg" width="250px"/>
</div>
</div>
Example: http://jsfiddle.net/6DpPX/8/
You could put the link inside your h2.
http://jsfiddle.net/lollero/49VNH/1
Alternative view: http://jsfiddle.net/lollero/49VNH/1/show
HTML:
<h2 class="page_title">
Social Media
Back to top
</h2>
CSS:
.b2t_link{
float: right;
}