PDA

View Full Version : HTML/CSS Issue (NavBar & Floating) - Help!


chewbakarox
10-01-2009, 03:00 PM
I've been using DW to create a new site as a tool to code the HTML and CSS. I've been using this site and finding a ton of awesome info here - it's such a great resource! I'm trying to use CSS positioning instead of HTML tables. I've searched for answers to my question but haven't been successful, so I'm hoping you experts can assist. I'm having two problems so far:

1. I have a div container set at 700px, with my Navigation Bar set to 100% width within the container. I'd like my six links to be spaced evenly across the entire Nav Bar, so I've set the width to 16.6%. However, the links somehow spill over into another row. I've searched a ton on this issue and it doesn't seem like there is an easy answer!

2. Below my nav bar, I simply want to float an image to the left side of my container. Somehow, it keeps centering to the middle of the page! I have a feeling the problem in my code is obvious, but I can't seem to find it.

Here's my HTML:


<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Homegrown Creation - Self Sufficient | Independent</title>
</head>
<body>
<div id="container">
<!-- HGC Banner -->
<h1 class="imagecenter">
Homegrown Creation</h1>
<!-- Navigation Bar -->
<div id="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="store.html"> SHOP</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<!-- Slide Image -->
<div class="slide">
<img src="Slide.jpg"></div>
</div>
</div>
</body>
</html>


And here's the CSS:


/* global elements */
html {
margin: 0;
padding: 0;
}
body {
color: white;
background-color: gray;
font-family: Arial, Verdana, Sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
/* specific divs */
#container {
width: 700px;
margin: 0;
position: relative;
}
h1.imagecenter {
width: 100%;
height: 125px;
background: url("Banner.jpg");
text-indent: -9999px;
margin-bottom: 0;
}
#navbar {
background-color: green;
width: 100%;
height: 20px;
line-height: 20px;
}
#navbar ul {
font-weight: bold;
font-size: 75%;
color: white;
}
#navbar li {
list-style-type: none;
display: inline;
float: left;
width: 16.6%;
{
#navbar li a {
color: white;
text-decoration: none;
}
#navbar li a:link {
color: white;
text-decoration: none;
}
#navbar li a:visited {
color: red;
text-decoration: none;
}
#navbar li a:hover {
color: black;
}
#slide {
float: left;
width: 500px;
height: 350px;;
}


Excuse me if these are dumb questions, but I figure a beginner has to start somewhere. I've tried my best to find the answers on my own, but obviously haven't been successful. Thanks in advance.

domedia
10-01-2009, 06:43 PM
1. There might be various reason for this, default margins etc. I would study the nav system here tyo get a feel how you can use html lists for nav:
http://css.maxdesign.com.au/listamatic/

2. There is nothing to float the image next to. So you can remove all the styles in #slide. If you still have a problem with it, upload it to a temporary place on the web and post the URL.

chewbakarox
10-01-2009, 09:33 PM
Domedia - Thanks for the response. I took your advice and checked out the tutorials on creating nav bars, and incorporated one that looks much better. However, I'm still having some trouble getting the text to expand and space to 100% of the width of the nav bar. It seems like there is some kind of margin on the left that isn't allowing the "Home" link to go all the way to the left side.....Thoughts?

Also, I deleted all of the styles from the #slide div, and it still comes out centered. I tried adding a "text-align: left" style as well, but it didn't work either.

Anyways, here's a link to the page:

http://www.homegrowncreation.com/media/index_test.html

And here's the revised CSS:


/* global elements */
html {
margin: 0;
padding: 0;
}
body {
color: white;
background-color: gray;
font-family: Arial, Verdana, Sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
/* specific divs */
#container {
width: 700px;
margin: 0;
position: relative;
}
h1.imagecenter {
width: 100%;
height: 125px;
background: url("Banner.jpg");
text-indent: -9999px;
margin-bottom: 0;
}
#navcontainer {
margin: 0 auto;
width: 100%;
}
#navlist {
width: 100%;
text-align: left;
margin: 0 auto;
padding: 0;
text-indent: 0;
list-style-type: none;
}
#navlist li {
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}
#navlist li a {
letter-spacing: -1px;
text-decoration: none;
color: #ccc;
font-size: 1em;
padding: 0 2px;
border-top: .5em solid green;
}
#navlist li a:hover,#navlist a#current {
color: #333;
border-top: none;
font-size: 1.5em;
}
#navlist a#current {
color: #fc6;
}
#slideshow {
}


Any input would be much appreciated! :)

domedia
10-01-2009, 11:49 PM
For now you need to :
1. Add a document type, I use HTML 4.01 strict
2. The amount of opening and closing DIV tags does not add up.

chewbakarox
10-02-2009, 02:46 PM
For now you need to :
1. Add a document type, I use HTML 4.01 strict
2. The amount of opening and closing DIV tags does not add up.

Domedia - Thanks for catching these problems. You're input helped me get the issue figured out!:mrgreen:

domedia
10-02-2009, 03:47 PM
Excellent. Next time make sure you validate your document during development.
These are issues that a validator will always catch.