Forum: web design and graphics community

Celestial Star Forum > Web Development > Coding > Trouble with Horizontal Nav

Pages: [1]

« previous next »

Author

Topic: Trouble with Horizontal Nav (Read 773 times)

padme_

Skogul

Posts: 26

Trouble with Horizontal Nav

« on: February 01, 2008, 10:49:49 AM »

I just can never seem to get this right. I do the bar fine, but then the last link just jumps down to the next line and I can't ever get it back up. Can someone please help me?

http://www.brilliantcrimson.com/

CSS:

Code:

body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, "Times New Roman";
font-size: 10px;
color: #a17b4c;
text-align: center;
}

#topbanner {
background: url(/images/BPTop.jpg) no-repeat;
margin: auto 0px;
height: 288px;
width: 1261px;
}

a {
color: #af9270;
text-decoration: none; }

a:hover, a:active {
color: #997c5a;
text-decoration:none; }

#content {
float: left;
width: 835px;
text-align: center;
margin-left: 220px;
padding-top: 10px;
padding-bottom: 20px;
}

#wrapper {
padding: 0;
background: url(/images/BPBG.jpg);
margin: 0 auto;
width: 1261px;
text-align: center;
}

ul {
float: left;
width: 875px;
list-style-type: none;
}

#mainNav {
float: left;
text-decoration: none;
width: 905px;
height: 54px;
list-style: none;
margin: 0;
padding-left: 158px;
}

#mainNav li{
float: left;
}

#mainNav li a {
display: block;
background: #deeaea;
width: 111px;
height: 54px;
text-align: center;
color: #af9270;
padding: 5px;
padding-top: 20px;
background: #fad4a5 url(images/BP1.jpg) repeat-x;
text-decoration: none;
list-style-type: none;
}

ul .last a {
background: none;
}

#mainNav li a:hover {
background: #58321b;
color: #fdeecd;
background: #fad4a5 url(images/BP2.jpg) repeat-x;
}

HTML:

Code:

<html>
<head>
<title>Brilliant Crimson - About the Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="bp.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="topbanner">
</div>
<div id="mainNav">
<ul>
<li><a id="first" href="/index.php">home</a></li>
<li><a href="/Avatars.html">avatars</a></li>
<li><a href="/Brushes.html">brushes</a> </li>
<li><a href="/Writing.html">writing</a> </li>
<li><a href="/wallpapers.html">wallpapers</a> </li>
<li><a href="/About.html">about the site</a> </li>
<li><a href="/astap/index.html">ASTAP</a></li>
<li><a id="last" href="http://www.skyefairy.net/">skyefairy</a></li>
</ul>
</div>
<div id="content">
<b>About the site!</b><br><br>Name: Padme<br>Age: 16<br>Location: America! Sorry, you're not getting any more than that.<br><br><b>Why did I make a site?</b><br><br>I just love going to all these sites where they put up graphics, avatars, layouts, and other things. I've always been interested in coding and art so I decided to finally make myself a site and join them. Who knows? Maybe I'll even be up there some day.
<br><br><b>Credits!</b>
<br><br>
Image: <a href="http://community.livejournal.com/foto_decadent">Foto Decadent</a>
<br><br>
<b>Inspiration:</b><br><br>These pictures were SO gorgeous! I love Foto Decadent, all the stuff is just so strange and wonderful. I saw the pics and knew I had to do something with them! The quote there is by me, just something odd to fill up.
</div>
<div id="footer">
<br><br><br><br><br>
</div>
</div>
</body>
</html>


	Logged

EternalSorrow

Retribution

Posts: 162

Got milk duds?

Re: Trouble with Horizontal Nav

« Reply #1 on: February 01, 2008, 11:50:09 AM »

Could you be more specific about the problem? What bar? What link? Which line?


	Logged

padme_

Skogul

Posts: 26

Re: Trouble with Horizontal Nav

« Reply #2 on: February 01, 2008, 12:42:22 PM »

Sorry ^_^;

Well, for one I'm using IE. I haven't looked at it in firefox, so I don't really know if there are any problems on that..yet. X_X But in IE, all of the links are fine except the very last one, 'skyefairy'. On my browser it isn't connected to the 7 others, but it's just skipped down a line as if I'd broken it.

That help?


	Logged

EternalSorrow

Retribution

Posts: 162

Got milk duds?

Re: Trouble with Horizontal Nav

« Reply #3 on: February 01, 2008, 01:36:37 PM »

I'm using both IE7 and Firefox 2, and there's nothing wrong with the links area other than in Firefox the entire box is moved to the right. Also, the layout is too wide for my screen (1024x768), so there's a horizontal scrolling bar at the bottom of the screen.


	Logged

padme_

Skogul

Posts: 26

Re: Trouble with Horizontal Nav

« Reply #4 on: February 01, 2008, 06:09:52 PM »

Really? o_o

It might be my desktop, then..I've got a 1280x800 resolution. Is that what's making the links look warped to me?


	Logged

EternalSorrow

Retribution

Posts: 162

Got milk duds?

Re: Trouble with Horizontal Nav

« Reply #5 on: February 01, 2008, 07:25:22 PM »

Here are a few problems with your code:

First, the width of your layout is 1261px, much too large for most people to view without the horizontal scroll bar. I recommend a width no larger than 800px, but if you want to keep the layout the same width than shrink it to 898px (the smallest it can be without cutting off the sides).

Also, both the container and the navigation are floated to the left, meaning they are overlapping one another. I recommend floating the container to the left and the navigation to the right, and then using padding to align them how you want them.

Finally, the trouble with the final link. The problem may lie with the id assigned to it, which I can't see a reason for. Try deleting the id and see what the links do.

EDIT - After revisiting your site, and realizing you've changed the layout, you'll probably have to re-submit your coding to the post.


« Last Edit: February 02, 2008, 07:22:58 PM by EternalSorrow »	Logged

padme_

Skogul

Posts: 26

Re: Trouble with Horizontal Nav

« Reply #6 on: February 03, 2008, 02:29:29 PM »

Oh crap..I did it again. I forgot to say that I was looking at the stuff on the About page, which was the new layout, which is what I'm having trouble with. T_T Sorry!!!


	Logged

EternalSorrow

Retribution

Posts: 162

Got milk duds?

Re: Trouble with Horizontal Nav

« Reply #7 on: February 03, 2008, 10:56:51 PM »

Fortunately, some of my suggestions still stand for either layout, but with some additions:

First, the layout is still to wide. If you want people to stay at your site on the first visit, optimize the size to suit most resolutions (the average is 1024x768 pixels).

Also, I am still unsure of what the following code is used for:

Quote

ul .last a {
background: none;
}

Why not have all the links uniform in style?

For the problem of the link on the next line, the width of the ul is set to 875px, 13 pixels too short to fit the 8 navs set at 111px each. Because the ul takes priority over the mainnav, the 905px is being ignored in favor of the smaller 875px so the ul width needs to be deleted or changed to 888px. The image background for the li is also unnecessarily repeating. I recommend a no-repeat instead of the current repeat-x.

As a final note, is there supposed to be a repeating background for the entire height of the layout, or does it just end at the banner image?


	Logged

Pages: [1]

« previous next »

Jump to:

Forum: web design and graphics community

General

Art boards

Web development

Off-topic