16 replies [Last post]
Gaia
Offline
Regular
in a box
Last seen: 16 years 28 weeks ago
in a box
Joined: 2005-07-12
Posts: 45
Points: 0

I made a layout for my site and becuase css always draws a blank with me i used tables to create it. Now, i want to try and clean up my code alittle, and with that i want to convert it to css. This is abit of a challenge to me becuase i am new to css when it comes to creating a layout. I can never seem to get the boxes/content to end up where i want them and everytime i check the layout in another resolution it is completely off.

http://eternal-realm.net

That is the current layout that i am trying to convert to css. This is what i have so far and i must say that it is a complete mess and i have no clue even where to start fixing it.

style.css

body {
  background: #000000;
  font-size: 80%;
  color: #ffffff;
}

p {
  color: #ffffff;
  background-color: #006699;
}

em {
  color: #aaaaaa;
}

a:link, a:visited {
  color: #999999;
  border-style: solid;
  border-width: 2px;
  background-color: #ffffff;
}

a:hover {
  color: #888888;
  border-style: dotted;
  border-width: 1px;
  background-color: #000000;
}

#logo {
  position: absolute;
  top: 5px;
  left: 200px;
  border: dotted 1px #ffffff;
}

#container {
   position: absolute;
   top: 160px;
   left: 200px;
   width: 600px;
   border: 1px solid #000000;
   background: #006699;
   }
   
#container #left {
  float: left;
  width: 40px;
  padding: 4px;
     }

#container #center {
  margin-left: 70px;
  padding: 4px;
  border-left: 1px solid #ffffff;
  }
     
#container #right {
  margin-left: -23px;
  padding: 4px;
  border-left: 1px solid #ffffff;
     }

div.spacer {
clear: both;
margin: 0;
     }

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Dev 2 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" href="style3.css" type="text/css" />
</head>
    <body>
    <div id="logo"><img src="logo.gif" /></div>


     <div id="container">
       <div id="left">
         <p>Navigation</p>
       </div>
       <div id="center">
       <p>Test Test</p>
       </div>
       <div id="right">
         <p>Content</p>
       </div>
       <div class="spacer"></div>
     </div>

    </body>
</html>

I have seen a few tutorials and css tips but still can't seem to grasp how to alter/use css for a layout. if anyone can help me here it'd be much appreciated.

Thanks!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

tables to css

The structure of your HTML seems right. Try to avoid absolute positioning of elements though. The positioning of #container seems a bit odd too - well down from the top and off to the left. Going on the design you're aiming for, I'd say your container shouldn't have any top or left positioning at all.
As for #left, #center & #right: you want #left to float: left and #right to float: right. Try giving #center a margin-right wider than the width of #right. Don't give #right a negative margin because that will pull it into the same space as #center but do give it a width.
My code for a similar layout looked like this:

#leftcolumn {
	float: left;
	width: 162px;
	margin: 0;
	padding: 10px;
}
#middlecolumn {
	margin: 0 190px;
	padding-top: 15px;
}
#rightcolumn {
	float: right;
	width: 162px;
	margin: 0;
	padding: 10px;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Gaia
Offline
Regular
in a box
Last seen: 16 years 28 weeks ago
in a box
Joined: 2005-07-12
Posts: 45
Points: 0

tables to css

Hmm i removed the top/position/left from the container and replaced my part of the css with yours and this is what i came out with

http://eternal-realm.net/testsite/dev2/

this is my css code.

body {
  background: #000000;
  font-size: 80%;
  color: #ffffff;
}

p {
  color: #ffffff;
  background-color: #006699;
}

em {
  color: #aaaaaa;
}

a:link, a:visited {
  color: #999999;
  border-style: solid;
  border-width: 2px;
  background-color: #ffffff;
}

a:hover {
  color: #888888;
  border-style: dotted;
  border-width: 1px;
  background-color: #000000;
}

#logo {
  position: absolute;
  top: 5px;
  left: 200px;
  border: dotted 1px #ffffff;
}

#container {
   width: 600px;
   border: 1px solid #000000;
   background: #006699;
   }
   
#leftcolumn {
   float: left;
   width: 162px;
   margin: 0;
   padding: 10px;
   border: 1px dotted #ffffff;
}
#middlecolumn {
   margin: 0 190px;
   padding-top: 15px;
   border: 1px dotted #ffffff;
}
#rightcolumn {
   float: right;
   width: 162px;
   margin: 0;
   padding: 10px;
   border: 1px dotted #ffffff;
}

div.spacer {
clear: both;
margin: 0;
     }

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

tables to css

Put #logo inside your container, give it the same width as your body so that it pushes everything else below it and take off the absolute positioning, top and left.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Gaia
Offline
Regular
in a box
Last seen: 16 years 28 weeks ago
in a box
Joined: 2005-07-12
Posts: 45
Points: 0

tables to css

ok.

I think i almost have the box positions correct ( http://eternal-realm.net/testsite/dev2/ ) but the right column needs to me moved up more to match the left and center column and the right column 2 needs to be beside the news column.

here is my new css.

body {
  background: #000000;
  font-size: 80%;
  color: #ffffff;
}

p {
  color: #ffffff;
  background-color: #006699;
}

em {
  color: #aaaaaa;
}

a:link, a:visited {
  color: #999999;
  border-style: solid;
  border-width: 2px;
  background-color: #ffffff;
}

a:hover {
  color: #888888;
  border-style: dotted;
  border-width: 1px;
  background-color: #000000;
}

#logo {
  width: 600px;
  border: dotted 1px #ffffff;
}

#container {
   width: 600px;
   border: dotted 1px #ffffff;
   background: #006699;
   }

#navigation {
  width: 600px;
  border: dotted 1px #ffffff;
  }

#leftcolumn {
   float: left;
   width: 162px;
   margin: 0;
   padding: 5px;
   border: 1px dotted #ffffff;
}
#middlecolumn {
   margin: 0 190px;
   padding-top: 5px;
   border: 1px dotted #ffffff;
}
#rightcolumn {
   float: right;
   width: 162px;
   margin: 0;
   padding: 5px;
   border: 1px dotted #ffffff;
}

#newscolumn {
  float: left;
  width: 400px;
  margin: 0;
  padding: 5px;
  border: 1px solid #ffffff;
}

#rightcolumn2 {
  float: right;
  width: 200px;
  margin: 0 10px;
  padding: 5px;
  border: 1px rigid #ffffff;
  
}

#footer {
  width: 600px;
  border: 1px dotted #ffffff;
  }


div.spacer {
clear: both;
margin: 0;
     }


gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

tables to css

You need to move the right column ahead of the center column in the source. The floats must precede the static elements for all to be on the same level.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Gaia
Offline
Regular
in a box
Last seen: 16 years 28 weeks ago
in a box
Joined: 2005-07-12
Posts: 45
Points: 0

tables to css

I do..

       <div id="leftcolumn">
         <p>Left column</p>
       </div>
       <div id="centercolumn">
       <p>center column</p>
       </div>
       <div id="rightcolumn">
         <p>right column</p>
       </div>
       <div class="spacer"></div>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

tables to css

kk5st wrote:
You need to move the right column ahead of the center column in the source. The floats must precede the static elements for all to be on the same level.

cheers,

gary

Verschwindende wrote:
  • CSS doesn't make pies

Gaia
Offline
Regular
in a box
Last seen: 16 years 28 weeks ago
in a box
Joined: 2005-07-12
Posts: 45
Points: 0

tables to css

I don't understand, i do have the right column after the center column....0_o.

DeprecatedDiva
DeprecatedDiva's picture
Offline
Enthusiast
NW Louisiana
Last seen: 15 years 6 weeks ago
NW Louisiana
Timezone: GMT-6
Joined: 2005-06-12
Posts: 135
Points: 0

tables to css

kk5st wrote:
You need to move the right column ahead of the center column in the source. The floats must precede the static elements for all to be on the same level.

cheers,

gary

Gaia wrote:
I don't understand, i do have the right column after the center column....0_o.
Move the right column BEFORE the center column.

[edited to fix quotes]

DeprecatedDiva

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

tables to css

http://www.google.com/search?hl=en&client=ig&q=define%3Aahead&btnG=Google+Search

Definitions of ahead on the Web:

Quote:

# at or in the front; "I see the lights of a town ahead"; "the road ahead is foggy"; "staring straight ahead"; "we couldn't see over the heads of the people in front"; "with the cross of Jesus marching on before"

# In front of.
www.amya.org/sailmanual/appendix2.html

# Being in front of or leading something
jove.prohosting.com/mshambli/UniversalADG/a/a.htm

http://www.google.com/search?hl=en&client=ig&q=define%3Aprecede&btnG=Google+Search

Definitions of precede on the Web:

Quote:
* predate: be earlier in time; go back further; "Stone tools precede bronze tools"
* come before; "Most English adjectives precede the noun they modify"
* be the predecessor of; "Bill preceded John in the long line of Susan's husbands"
* move ahead (of others) in time or space
* furnish with a preface or introduction; "She always precedes her lectures with a joke"; "He prefaced his lecture with a critical remark about the institution"
www.cogsci.princeton.edu/cgi-bin/webwn2.1

* to go or come before, as in: The bridesmaids will precede the bride down the aisle at the wedding.
www.business-words.com/dictionary/P_2.html

In case that wasn't subtle enough:

<div id="leftcolumn">
         <p>Left column</p>
       </div>
       <div id="rightcolumn">
         <p>right column</p>
       </div>
       <div id="centercolumn">
       <p>center column</p>
       </div>
       <div class="spacer"></div> 

Verschwindende wrote:
  • CSS doesn't make pies

Gaia
Offline
Regular
in a box
Last seen: 16 years 28 weeks ago
in a box
Joined: 2005-07-12
Posts: 45
Points: 0

tables to css

oooh i get it >_< ahead as infront of. Now i feel stupid :oops: . Meh, i failed English for a reason i guess :roll:

Thanks for that, but just one more problem, i think. I changed the source of my news column and right column 2 but the right column 2 won't seem to fall into place beside the news column

http://eternal-realm.net/testsite/dev2/

The CSS is the same as my previous post above.

Thanks for your patience with me lol.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

tables to css

Make the right column hold all right column stuff. Use margins and borders to create separation.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Electric
Offline
Regular
Last seen: 16 years 28 weeks ago
Joined: 2005-07-15
Posts: 50
Points: 0

tables to css

what i've found helps when you first start out is to throw all of your current html knowledge out the door ...

http://www.sitepoint.com/article/tables-vs-css

this article is the sole reason why i can create CSS layouts - if it wasn't for that i'd still be using tables !

good luck

Gaia
Offline
Regular
in a box
Last seen: 16 years 28 weeks ago
in a box
Joined: 2005-07-12
Posts: 45
Points: 0

tables to css

Thanks, i'm hoping to get rid of tables for layout purposes. Though i do find them easier so far but i guess that's becuase i am more used to them and margins are scary lol.

I think i only have one last question (i think lol).

As you can see( http://eternal-realm.net/testsite/dev2/ ) i have the 3 content boxes at the top(left, center, right columns) and 2 below them (news column and right column2).

How can i fix it so that the left, center, and right columns are all the same size and the news column is the same length as the left and center and the right column 2 is the same as the right column?

Hopefully that made sense >_<.

Here is my new css

body {
background: #666666;
font: 80%;
color: white;
}

p {
  color: #ffffff;
  background-color: #006699;
}

em {
  color: #aaaaaa;
}

a:link, a:visited {
  color: #9a5c1f;
  text-decoration: none;
  border-bottom: 1px dotted #ffffff;
  font-size: 11;
  font-weight: none;
}

a:hover {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px dotted #9a5c1f;
  font-size: 11;
}

#logo {
  width: 600px;
  background-color: #2c2a2a;
}

#container {
   width: 600px;
   border: dotted 1px #ffffff;
   background-color: #2c2a2a;
   margin: auto auto;
   }

#navigation {
  width: 600px;
  background-color: #2c2a2a;
  }

#leftcolumn {
   float: left;
   width: 200px;
   margin: 0 auto;
   padding: 5px;
   border: 1px dotted #ffffff;
}
#middlecolumn {
   width: 160px;
   padding-top: 5px;
   margin: 0 auto;
   border: 1px dotted #ffffff;
}
#rightcolumn {
   float: right;
   width: 200px;
   margin: 0;
   padding: 5px;
   border: 1px dotted #ffffff;
}

#newscolumn {
  float: left;
  width: 375px;
  margin: 0;
  padding: 5px;
  border: 1px solid #ffffff;
}

#rightcolumn2 {
  float: right;
  width: 200px;
  margin: 0;
  padding: 5px;
  border: 1px dotted #ffffff;
  
}

#footer {
  width: 600px;
  border: 1px dotted #ffffff;
  }


div.spacer {
clear: both;
margin: 0;
     }

Electric
Offline
Regular
Last seen: 16 years 28 weeks ago
Joined: 2005-07-15
Posts: 50
Points: 0

tables to css

looks to me like you need a margin-right: 3px; (or so) on your news column

give that a try

Gaia
Offline
Regular
in a box
Last seen: 16 years 28 weeks ago
in a box
Joined: 2005-07-12
Posts: 45
Points: 0

tables to css

Hmm, i'll try that but i don't think will fix the problem of not having the boxes equal sizes. My previous post is quoted below.

Gaia wrote:
Thanks, i'm hoping to get rid of tables for layout purposes. Though i do find them easier so far but i guess that's becuase i am more used to them and margins are scary lol.

I think i only have one last question (i think lol).

As you can see( http://eternal-realm.net/testsite/dev2/ ) i have the 3 content boxes at the top(left, center, right columns) and 2 below them (news column and right column2).

How can i fix it so that the left, center, and right columns are all the same size and the news column is the same length as the left and center and the right column 2 is the same as the right column?

Hopefully that made sense >_<.

Here is my new css

body {
background: #666666;
font: 80%;
color: white;
}

p {
  color: #ffffff;
  background-color: #006699;
}

em {
  color: #aaaaaa;
}

a:link, a:visited {
  color: #9a5c1f;
  text-decoration: none;
  border-bottom: 1px dotted #ffffff;
  font-size: 11;
  font-weight: none;
}

a:hover {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px dotted #9a5c1f;
  font-size: 11;
}

#logo {
  width: 600px;
  background-color: #2c2a2a;
}

#container {
   width: 600px;
   border: dotted 1px #ffffff;
   background-color: #2c2a2a;
   margin: auto auto;
   }

#navigation {
  width: 600px;
  background-color: #2c2a2a;
  }

#leftcolumn {
   float: left;
   width: 200px;
   margin: 0 auto;
   padding: 5px;
   border: 1px dotted #ffffff;
}
#middlecolumn {
   width: 160px;
   padding-top: 5px;
   margin: 0 auto;
   border: 1px dotted #ffffff;
}
#rightcolumn {
   float: right;
   width: 200px;
   margin: 0;
   padding: 5px;
   border: 1px dotted #ffffff;
}

#newscolumn {
  float: left;
  width: 375px;
  margin: 0;
  padding: 5px;
  border: 1px solid #ffffff;
}

#rightcolumn2 {
  float: right;
  width: 200px;
  margin: 0;
  padding: 5px;
  border: 1px dotted #ffffff;
  
}

#footer {
  width: 600px;
  border: 1px dotted #ffffff;
  }


div.spacer {
clear: both;
margin: 0;
     }