CSS Forum

**franklindeleon** · 01-12-2007, 05:26 PM

ok I'm new to the whole css thing and I am working on switching my site from tables to css, and I have to questions:
first I think I got the the banner, the navigation bars and the footer but now, HOw do I place my content which is supposed to go at the right sife os the left nav bar, if I insert a new <div> it is gonna show up underneath the left nav instead of the right, please tell me how to go this.
Here's my second question since I am new to this I wan to make sure I get things right, so once I have all my pages done I palce a link between the <head> </head> tag pionting to the stylesheet containing atributes such as this for example:
body
{
background-color:#9C9C9C;
text-align: center;
}
p {font: 12px verdana
}
li {font: verdana 14px
}
h1 {font: verdana 14px
}
h2 {font: verdana 14px
}
ul {font verdana 14px
}
a:hover
{color:#ffffff;
}
a
{
color: #000000;
text-decoration: none;
font-family: verdana;
font-size:12px;
}
meaning that I don't nedd to put this code into all of the pages as long as I palce the link into every single one of them and of course upload it to the root file, did I get it right?
here's the link http://fdvisions.com/css.html
Please guys let me know what you think, before I lose my mind over this css thing.
thank you

**gringo** · 01-12-2007, 05:57 PM

Hi Franklin,

Adam's got some good css layouts that you can use here: http://www.searchenginefriendlylayouts.com/

There might be some that you can use.

Yes, you are spot on with relocating your css to an external file with code similar to this:

HTML Code:

 <link rel="stylesheet" href="styles.css" type="text/css" />

**LadynRed** · 01-12-2007, 09:26 PM

Another very important thing that you need is a valid DOCTYPE. The DOCTYPE declaration goes BEFORE your opening <html> tag on every page.
Read about choosing the right DOCTYPE here:
http://alistapart.com/stories/doctype/

Suggestions:
1 - Wrap your entire layout in a 'container' div, I even call mine #container. If your layout is a fixed width, give #container that width, then set add
position:relative.

2- There is no such thing as 'float: center' as you have on your footer. The proper attributes are right, left, or none. If you want to center a fixed-width layout you have to do it like this:

body{
text-align: center /* so IE 6 and below will center everything */
margin: 0;
padding: 0;
}

#container{
position: relative;
width: xxxpx /* for fixed -width layouts */
margin: 0 auto /* zeros out top/bottom margins, sets right/left margins to auto */
text-align: left; /*gets your text back where it normally belongs inside #container */
}

Learn to use floats properly, look out for the inevitable IE bugs (6 and below), and read up on conditional comments to target IE6 and below.

**franklindeleon** · 01-20-2007, 11:29 AM

ok guys, I've done some changes on the site, and I think I need some more help, I have some questions I hops someone can help me.
1.I like the banner with the name and the mouse pic, I want to keep the look nice, clean and professional but I feel like there's something missing in there, maybe the "FDVISIONS.COM' logo should be in a diferent font? what do you guys think.
2. I want the top navigation ber aligned to the right, but how do i separete the options a little more? they're to close to each other.
3. When I try to type my content or insert a image it all appears on top of the left navigation, how do I move it over to the right.
4.The footer it's supposed to have a gray background and be text centered, what I'm I doing wrong?.
As always thank you for your help.
here's the link: http://www.fdvisions.com/test.html
Have a good one.

**LadynRed** · 01-21-2007, 06:39 PM

Quote:

I want the top navigation ber aligned to the right, but how do i separete the options a little more? they're to close to each other.

Put your top nav into a list. You have this:

Quote:

<div id="top_nav">
<a class="white" href="#">HOME</a> |
<a class="white" href="#">ABOUT</a> |
<a class="white" href="#">PORTFOLIO</a> |
<a class="white" href="#">CONTACT</a> |
</div>

Make it into this:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a><li>
<li><a href="#">Porfolio</a><li>
<li><a href="#">Contact</a><li>
</ul>

Then you style the list items, controlling the spacing and the appearance of the list and the <a>'s inside them.

Quote:

3. When I try to type my content or insert a image it all appears on top of the left navigation, how do I move it over to the right.

Create another div for your content and give it a wide enough left margin to push it over past the left nav area. It is not necessary to float it either.

You've got a LOT of floated elements, mostly unnecessary too. The only thing I see that you would really want to float is the left nav and maybe the top nav UL.

Quote:

4.The footer it's supposed to have a gray background and be text centered, what I'm I doing wrong?.

Couple of things.
First, get rid of the duplicate <html> tag at the top.

Second, if you're going to use floats you must learn to CLEAR them. You have not cleared any of your floats. There are several methods:
http://css-discuss.incutio.com/?page=ClearingSpace

Once you clear your floats, I think you'll find your footer where it belongs.