Elements Are Skipping To Next Lines And I Don't Know Why

[Asfastasdark]

I'm making a simple page but I have a few problems. I'll post the relevant code.XHTML:

<div class="body"><div class="nav">	<a href="#" id="navhome"></a>	<a href="#" id="navprojects"></a>	<a href="#" id="navabout"></a>	<a href="#" id="navcontact"></a></div><div class="main"><p><img src="images/txtwelcome.png" alt="Welcome to MyndSpace" class="title" /></p><p>This is your webrealm to share everything that is you with others at SMHS. This website will become a product of your creation—assuming an identity through your creative endeavors.			</p></div></div>

CSS:

.main {width: 768px;margin: 0px auto 10px auto;display: block;color: #ffffff;font-family: "Verdana", sans-serif;text-align: justify;text-indent: 50px;}.title {display: block;margin: 0px auto 10px auto;position: relative;}.nav {width: 875px;margin: 0px auto 0px auto;display: block;}.nav a {background-position: top left;background-repeat: no-repeat;text-decoration: none;display: block;}

For some reason, each of my nav items (.nav a) appear on a new line. Does anyone know how I can fix it, and check my code for things that people do or don't commonly do? Thanks in advance .

[dsonesuk]

Well! they would do? if you give '.nav a' a 'display: block;' that IS, what it is supposed to do! unless you add a float:left; causing it to become one row of block elements, size permitting.

[Asfastasdark]

Well the thing is, if I remove "display: block;" for ".nav a," the images don't show at all. Do you know why that is?

[dsonesuk]

did you define width and height......no doesn't look like it, well that's whyyou define the anchor as display:block, then define a width and height to accommodate the background image you intend to use.

[Asfastasdark]

Well I defined width and height for ".nav a #navhome," ".nav a #navprojects," etc (I just didn't include it in the code shown here). So that would define the width and height there, wouldn't it?Edit:

.nav a#navhome:link, a#navhome:visited {background-image: url("images/navhome.png");height: 72px;width: 190px;}.nav a#navhome:hover {background-image: url("images/navhomehover.png");height: 72px;width: 190px;}.nav a#navprojects:link, a#navprojects:visited {background-image: url("images/navprojects.png");height: 72px;width: 236px;}.nav a#navprojects:hover {background-image: url("images/navprojectshover.png");height: 72px;width: 236px;}.nav a#navabout:link, a#navabout:visited {background-image: url("images/navabout.png");height: 72px;width: 196px;}.nav a#navabout:hover {background-image: url("images/navabouthover.png");height: 72px;width: 196px;}.nav a#navcontact:link, a#navcontact:visited {background-image: url("images/navcontact.png");height: 72px;width: 253px;}.nav a#navcontact:hover {background-image: url("images/navcontacthover.png");height: 72px;width: 253px;}

That's the code I used.

[dsonesuk]

.nav a {background-position: top left;background-repeat: no-repeat;text-decoration: none;display: block;width:150px; /*example*/height:26px; /*example*/float:left;}/*:visited is used as some browsers will display an empty background if not define when page has been visited*/.nav a#navhome, .nav a#navhome:visited{background-image:url(navhomeimage.png);}.nav a#navprojects, .nav a#navprojects:visited{background-image:url(navprojectimage.png);}.nav a#navhome:hover{background-image:url(navhomeimage_hover.png);}.nav a#navprojects:hover{background-image:url(navprojectimage_hover.png);}

[Asfastasdark]

Why do I have to define width and height in ".nav a" and not in the separate .nav elements?

[dsonesuk]

just seen you edited post, and did not realize they where all, well most of different widths. but the the height can still stay as it does not change.saves repeating the height.mostly the :link :hover etc would contain the changes required images, background color, color of text styling, the styling which never change. can be stored as default settings of element, as used in .nav a{...}

[Asfastasdark]

But still my question wasn't answered: Why do the ".nav a"'s disappear when I remove "display: block"?

[Ingolme]

But still my question wasn't answered: Why do the ".nav a"'s disappear when I remove "display: block"?

Because of three things:

1. Height and width can only be applied to block elements.
2. The size of an inline element depends on how much content is in it.
3. Your <a> elements have nothing in them.

[Asfastasdark]

Because of three things:

1. Height and width can only be applied to block elements.
2. The size of an inline element depends on how much content is in it.
3. Your <a> elements have nothing in them.

OK, #1 is taken care of. But for #3, if I define a width and height for the <a> elements shouldn't that determine how large the inline element is? If not, what should I do to make it so that the <a> elements are all in one line?

[Ingolme]

OK, #1 is taken care of. But for #3, if I define a width and height for the <a> elements shouldn't that determine how large the inline element is? If not, what should I do to make it so that the <a> elements are all in one line?

You can't apply height and width to inline elements. <a> elements are inline elements, so height and width will be ignored.You can display them as block elements, and then use the float property so that they'll all be on the same line.

[Asfastasdark]

You can't apply height and width to inline elements. <a> elements are inline elements, so height and width will be ignored.You can display them as block elements, and then use the float property so that they'll all be on the same line.

I tried doing that, but then there is another problem: The entire group of <a> elements (so everything with class .nav) needs to be centered horizontally, and of course there is no "float: center;" so is there a way I could do that?

[jlhaslip]

http://cssplay.co.uk has a centred, variable width Horizontal nav bar built using a ul/li/a method.

[dsonesuk]

Well yes! there is way to do this.(1) create a outer container for the menu<div id="nav_outer"><div class="nav"> <a href="#" id="navhome"></a> <a href="#" id="navprojects"></a> <a href="#" id="navabout"></a> <a href="#" id="navcontact"></a></div></div>(2) then add, amend css to below.outer{overflow:hidden;}.nav {float:left; position:relative; left:50%;}.nav a{ display:block; height: 72px; background-position:top left; background-repeat: no-repeat; text-decoration:none; float:left; position:relative; right: 50%; }AND NOW! you should have what you require.

[Asfastasdark]

Woohoo! All right, dsonesuk! Works perfectly ! But if possible I'd like to understand how the thing you did works, could you explain it?

[dsonesuk]

just realized, it does not seem to work in IE? sworn I used it before with no problems.anyway use this one, which use inline-table for other browser, and inline block for IE, with conditional for IE which removes float for IE<style type="text/css">#nav_outer{overflow:hidden; text-align:center; background-color:#0033FF; } /*text-align: centers display:table*/.nav {display:table; margin: 0 auto; }/*display: table other browsers - margin - All*/.nav a{ display:inline-block; height: 33px;width: 185px; background-position:top left; background-repeat: no-repeat; text-decoration:none; float:left; } /*inline-block IE - Float Left other - rest all*/</style>place below above styling<!--[if IE]><style type="text/css">.nav a{float:none;}</style><![endif]-->works for IE6-7 (not test in 8), Firefox, Chrome, Safari and Opera

[Asfastasdark]

just realized, it does not seem to work in IE? sworn I used it before with no problems.anyway use this one, which use inline-table for other browser, and inline block for IE, with conditional for IE which removes float for IE<style type="text/css">#nav_outer{overflow:hidden; text-align:center; background-color:#0033FF; } /*text-align: centers display:table*/.nav {display:table; margin: 0 auto; }/*display: table other browsers - margin - All*/.nav a{ display:inline-block; height: 33px;width: 185px; background-position:top left; background-repeat: no-repeat; text-decoration:none; float:left; } /*inline-block IE - Float Left other - rest all*/</style>place below above styling<!--[if IE]><style type="text/css">.nav a{float:none;}</style><![endif]-->works for IE6-7 (not test in 8), Firefox, Chrome, Safari and Opera

Kinda late on this, but now it doesn't center in IE, and in both IE and FF the buttons are behind the background and the home button doesn't display unless you hover over it. Know what happened? Also, I'm using this in an external CSS file instead of in the source, does that matter?Edit: I put it into the HTML file and it still only centers in FF. Also, the buttons are behind the background of the main content. Do you know what I should do?Edit #2: I realized I hadn't changed the length and the width in your CSS to match the buttons' dimensions. The buttons being behind the background is not a problem any longer. But still, they don't center in IE. No idea why...?

[dsonesuk]

you should have something similar to 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"><head><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /><meta http-equiv="Content-Language" content="en" /><meta name="description" content="" /><meta name="keywords" content="" /><meta name="copyright" content="Copyright © 2009 MyndSpace.org" /><title>MyndSpace.org | Share your Mind</title><style type="text/css">#body{background-color: #101010;}.main {width: 768px;margin: 0px auto 10px auto;display: block;color: #ffffff;font-family: "Verdana", sans-serif;text-align: justify;text-indent: 50px;}.title {display: block;margin: 0px auto 10px auto;position: relative;}/*Nav Button constant settings*/#nav_outer{overflow:hidden; text-align:center;}.nav {display:table; margin: 0 auto; }/*display:table other browsers - margin all*/.nav a{ display:inline-block; height: 72px; background-position:top left; background-repeat: no-repeat; text-decoration:none; float:left; } /*inline-block IE - float Left other browsers - rest all*//*Nav Button Individual widths*/.nav a#navhome{width:190px;}.nav a#navprojects{width:236px;}.nav a#navabout{width:196px;}.nav a#navcontact{width:253px;}/*Nav Button Normal*/.nav a#navhome:link, a#navhome:visited {background-image: url(images/navhome.png);}.nav a#navprojects:link, a#navprojects:visited {background-image: url(images/navprojects.png);}.nav a#navabout:link, a#navabout:visited {background-image: url(images/navabout.png);}.nav a#navcontact:link, a#navcontact:visited {background-image: url(images/navcontact.png);}/*Nav Button Hover*/.nav a#navcontact:hover {background-image: url(images/navcontacthover.png);}.nav a#navhome:hover {background-image: url(images/navhomehover.png);}.nav a#navprojects:hover{background-image: url(images/navprojectshover.png);}.nav a#navabout:hover {background-image: url(images/navabouthover.png);}</style><!--[if IE]><style type="text/css">.nav a{float:none;}</style><![endif]--></head><body><div id="body"><div id="nav_outer"><div class="nav"><a href="/index.html" id="navhome"></a><a href="/showcase.html" id="navprojects"></a><a href="/about.html" id="navabout"></a><a href="/contact.html" id="navcontact"></a></div></div><div class="main"><p><img src="images/txtwelcome.png" alt="Welcome to MyndSpace" class="title" /></p><p>This is your webrealm to share everything that is you with others at SMHS. This website will become a product of your creation—assuming an identity through your creative endeavors. </p></div></div></body></html>

[Asfastasdark]

OK, the buttons now don't show in FF except for if you hover over them, and they don't center in IE :S. I went through your code and fixed a few errors too so I don't think that's the problem.

[dsonesuk]

well it works perfectly for me! , firefox centred, hover correct, same with ie6, ie7 and ie8.lets see all your code.

[Asfastasdark]

You, sir, are God. That problem's out of the way now! Woo, thanks so much!