droidus Posted July 25, 2011 Share Posted July 25, 2011 how would i vertically align this? <div style="background-image:url(../Images/gradiant_nav_headers.png); background-repeat:repeat-x; height:3em; width:auto;"><span style="padding-left:15px;">Hello there!</span></div> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 25, 2011 Share Posted July 25, 2011 I assume you mean with the word THIS the span element inside the Div element? You probably would have found the solution if you would have just searched the forum with the key words vertical align anyway: the height of your div is 3em if you set the line-height of the span to 3em also it will be vertical aligned. Quote Link to comment Share on other sites More sharing options...
droidus Posted July 25, 2011 Author Share Posted July 25, 2011 it places it on the bottom then Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 25, 2011 Share Posted July 25, 2011 than your doing it wrong! Also If something isn't working although someone suggested something, place the code where you tried to implement the code. Much more useful. example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #wrapper{background:#f4a; height:3em;} #wrapper span{line-height:3em; } </style> </head> <body> <div id="wrapper"> <span>Hello World!</span> </div> </body> </html> -EDIT: keep in mind this only works for single line content (line-height) Quote Link to comment Share on other sites More sharing options...
droidus Posted July 26, 2011 Author Share Posted July 26, 2011 so what's the difference between my code, and yours?: <div style="background-image:url(../Images/gradiant_nav_headers.png); background-repeat:repeat-x; height:3em; width:99%; margin-left:auto; margin-right:auto;"><span style="font-weight:bolder; padding-left:15px; font-size:18px; line-height:3em; vertical-align:middle;">New Attractions :: Coming Soon!!</span></div> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 26, 2011 Share Posted July 26, 2011 Well, the difference is obvious, you use other styles. for instance a font-size in pixels and you combine that with em for the height. use em for you font <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #wrapper{background:#f4a; height:3em;} #wrapper span{line-height:3em;vertical-align: middle;} </style> </head> <body> <div id="wrapper"> <span>Hello World!</span> </div> <div style="background:yellow;background-image:url(../Images/gradiant_nav_headers.png); background-repeat:repeat-x; height:3em; width:99%; margin-left:auto; margin-right:auto;"><span style="font-weight:bolder; padding-left:15px; font-size:1em; line-height:3em;">New Attractions :: Coming Soon!!</span></div> </body> </html> edit: btw it might be good to know that the em is calculated based on the font size of the parent element. So in this case you better set a font-size for the div so the span inherits it. that way you can increase the value of the font-size. Quote Link to comment Share on other sites More sharing options...
droidus Posted July 26, 2011 Author Share Posted July 26, 2011 so i can't take that yellow background out? it looks kinda strange with it in there Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 26, 2011 Share Posted July 26, 2011 lol you are clearly missing the point. Your topic is about vertical alignment. You have a background image which i don't have. SO in order to see if something is vertical aligned i have to put some background in it to actually see it. SO yes you can take it out.. Just keep in mind the em is a relative measurement... Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 26, 2011 Share Posted July 26, 2011 Oh a small thing i found in my code The line height property needs to be set to the div, not the span, to make it easier to adjust the font-size in the span when using em. Seems i can't watch movies and code so as for logic it should be like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body{font-size:100%;font-size:1em;} #wrapper{line-height:3em;background:#f4a; height:3em;font-size:1.2em;} </style> </head> <body> <div id="wrapper"> <span>Hello World!</span> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
droidus Posted July 27, 2011 Author Share Posted July 27, 2011 ok, so i removed the background color, as well as the line-height for the span, and the second image is what i get. and i thought that ems is the better way since you see exactly how big something will be across the board? i heard that pixels isn't very reliable, so i try to use em's more... am i wrong to be doing so? [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 27, 2011 Share Posted July 27, 2011 PLease for the sake of simplicity, Post the complete code you used. or link to an online example. Images don't tell anyone here anything. The Code i provide works as is, use it as is play with it and see why it works. So just to repeat myself. I gave some code run that as is, and play with it. If you have troubles with code. POST the complete code you used or link to an online example. Quote Link to comment Share on other sites More sharing options...
droidus Posted July 28, 2011 Author Share Posted July 28, 2011 sorry--here is my code: <div style="background:yellow;background-image:url(../Images/gradiant_nav_headers.png); background-repeat:repeat-x; height:3em; width:99%; margin-left:auto; margin-right:auto;"><span style="font-weight:bolder; padding-left:15px; font-size:1em; line-height:3em;">New Attractions :: Coming Soon!!</span></div> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 28, 2011 Share Posted July 28, 2011 First of all that is not your complete code, second. If you run only that single line the span is working as intended being vertical aligned. The fact that it might not work for you is because there are other style declaration interfering hence the name CASCADING style sheet. I have a feeling you do not see why it working or how css works at all. I can be polite and deny this. But i rather don't, because that won't help. Sorry i can't help anymore. I hope someone else wants to give it a try, or you just read what has been written and apply and learn from it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.