Jump to content

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


Asfastasdark
 Share

Recommended Posts

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 :) .

Edited by Asfastasdark
Link to comment
Share on other sites

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.

Edited by Asfastasdark
Link to comment
Share on other sites

.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);}

Link to comment
Share on other sites

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{...}

Edited by dsonesuk
Link to comment
Share on other sites

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.

Edited by Ingolme
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.

Edited by dsonesuk
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...
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...? Edited by Asfastasdark
Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...