View Full Version : Using DIVs instead of tables

02-28-2008, 10:57 PM
I am kind of new to CSS, I took a class, have about three books I work out of and right now Im trying to build a simple site. I am a graphic designer.

I started with tables, which got my design pretty close to where I wanted it. BUt I felt that using divs would be cleaner and more up to date.

It wrecked my whole layout and I am near tears and highly frustrated at being baffled by something so simple. It may be becuase I dont sleep enough.

I have gone and reviewed css from Css Zen Garden to not much help.

My main issue is i have a roll over navigation of four buttons which are to rest at the top center of the page. I cant get this to align like that within the div NOR a table.

My other links seem to go right where I want them.

I decided to put the Nav buttons in a div, and leave the rest of the links in a table which resulted in this: http://www.kurtcom.com/mers/ct_index_div.html

The roll overs for the PICS, and MAP are not showing up...and the table is far right. The bullets are still attached to the top nav, even though i have it not to be in the css.

How do I control the div to be center? and the Size and width of the div, as I put these elements in the css to which did nothing.

How do i get that table to align center?

The roll overs i think I can figure out to why they are not showing up.

I am aware this may all seem stupendously simple, but i really need some guidance, as im going to kill someone. ;)

02-28-2008, 11:15 PM
to centre the Nav links, use margins. "0 auto" for new Browsers and text-align: center for IE6 and older.
Also, set list-style: none to lose the markers on the li's.

#nav {
width: 568px;
height: 29px;
margin: 0 auto;
text-align: center; // for older IE
padding: 0;
ul { list-style: none; }

start with that and re-post to continue the repairs. One thing at a time so you can learn them slowly.

02-28-2008, 11:16 PM
If you want a div to be centered, set a width and set margins to auto. Example:

* {margin:0px; padding:0px;} /*Resets margins and padding*/
#div {margin:0 auto; width:800px;} /*centers the div*/


<div id="div">
This text is centered in the browser

And you should use an UL to arrange the navigation-points rather than divs.

02-28-2008, 11:20 PM
Hehe some people beat me to more specific stuff, so all I'll say is install Firebug (http://www.getfirebug.com/) for Firefox - makes working with CSS tons easier!

02-28-2008, 11:22 PM
Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" content-type="text/xhtml; charset=UTF-8">
<style type="text/css">
* {
html {
font: small/1.1 "Lucida Grande", Tahoma, sans-serif;
color: #c0c0c0;
body {
background: #000000 url(http://www.kurtcom.com/mers/cl_site-images/index_main.jpg) no-repeat top center;
#container {
#dj_nav {
margin:10px auto 0;
#dj_nav a {
margin: 0;
padding: 0;
display: block;
height: 28px;
width: 566px;
background: url(http://www.kurtcom.com/mers/cl_site-images/dj_menu.png);
text-indent: -9999px;
overflow: hidden;
font-size: 1&#37;;
float: left;
li#dor a {
left: 0;
width: 137px;
background-position: 0 0;
li#ale a {
width: 114px;
background-position: -137px 0;
li#sof a {
width: 219px;
background-position: -230px 0;
li#mdl a {
width: 92px;
background-position: -470px 0;
li#dor a:hover {
background-position: 0 -29px;
li#ale a:hover {
background-position: -137px -29px;
li#sof a:hover {
background-position: -230px -29px;
li#mdl a:hover {
background-position: -470px -29px;
a.logo {
padding: 0;
background: url(http://www.kurtcom.com/mers/cl_site-images/logo_link.png) no-repeat center;
width: 667px;
height: 90px;
text-indent: -9999px;
display: block;
a.logo:hover {
background: url(http://www.kurtcom.com/mers/cl_site-images/logo_link-hover.png);
width: 667px;
height: 90px;
a.add {
margin: 95px 0 0 25px;
background: url(http://www.kurtcom.com/mers/cl_site-images/location_link.png);
width: 254px;
height: 54px;
text-indent: -9999px;
float: left;
a.add:hover {
background: url(http://www.kurtcom.com/mers/cl_site-images/location_link-hover.png);
width: 254px;
height: 54px;
a.pol {
margin: 95px 0 0 25px;
a.pol:hover {
#main {
#footer {
<title>Club Transistor</title>
<div id="container">
<div id="navigation">
<ul id="dj_nav">
<li id="dor"><a href="http://www.kurtcom.com/dorian.html">Dorian</a></li>
<li id="ale"><a href="http://www.kurtcom.com/alex.html">Alex</a></li>
<li id="sof"><a href="http://www.kurtcom.com/softouch.html">Soft Touch</a></li>
<li id="mdl"><a href="http://www.kurtcom.com/mdlf.html">MDLF</a></li>
<a class="logo" href="http://www.kurtcom.com/nav_home.html">Nav Home</a>
<div id="main"> <a class="add" href="http://www.kurtcom.com/map.html">Map</a> <a class="pol" href="http://www.kurtcom.com/photos.html">Pics</a> </div>
<div id="footer">Club Transistor &copy; 2008. All rights Reserved.<br>
Site Design by <a href="http://www.arturobandinilives.com">ABL!</a></div>

Its probably not completely what you want but its a start.

02-29-2008, 03:52 AM
Thank you to everyone who replied. =) Im going to work on it right now using what people replied with.

lets hope i get it right.

02-29-2008, 05:06 AM
Aerospace....your code worked perfectly. I am so happy but also so disgusted with myself that I didn't figure it out on my own. This is SO helpful though, thank you so much. Now I can compare and see my mistakes and this simplifies what I couldn't simplify from the books. :o