[sapiensfossor]

First off, to the makers of this and to the people that help, thank you so much, you are very kind.

Now on to business

I am an editor of our High School newspaper staff and am considered the "technology master". Someone created a web site for us and I was assigned to get it working. The design looked nice, but when I opened up the code for the web site, I was shocked and dismayed. Not only did it use tables and not css, but it wasn't even standard HTML and looked like crap on all browsers besides Internet Explorer 6. The original table layout can be found here.

So I made it my duty to convert it to proper HTML and not use any tables. I consider myself a decent coder and can make an average layout, but converting this layout to CSS proved harder than I imagined. I basically tried to merge this tutorial (how to make a fixed 2 column layout with header and footer) into this tutorial (how to make a rounded box). I used a lot of guess and check techniques. My attempts at the css layout can be found here.

As you can see, I have the general shape matched, but it still does not look nearly as good. The top nav bar needs some help, I don't know how to get it to look the same way. I also don't know how to make the footer look like the footer from the table layout nor can I get the nav column on the left side's background color to extend all the way to the bottom.

If you could help me to get my CSS layout to match the table layout (or even go above and beyond) I will be forever in your debt. I hope I have a good starting foundation, but if not, I'm willing to scrap it all and start over.

Thanks again so much for any help.

[Advertisements]

Hello and welcome to geeks to go.

It does too kind of nice in IE, till you try and view the pages source.

This is quite complex, so I don't want to write a post on every change you need, for this one I just want to get your header sorted out.

First I would delete all stuff before and after the class="xboxcontent" the <b> tags I think bad, and the two other <div>s useless.

Now, I think there is a better header.gif in the table base layout, you seamed to have edited it. I would copy it over to your table less layout.

Now I would change

<div id="header"><img src="images/header.gif"></div>

to

<h1>The Iliad</h1>

this should help your Google rank a little bit since every thing in the <h1></h1> carries a big more weight then other text does. Now to put the image in, and remove the text do this in the css.

h1 {
color#fff;
font-size:0;
background-image:url('header.gif');
width:676px;
height:164px;
padding:0;
margin:0;
}

We can move down the page progressively as we get each bit sorted out.

Edited by Michael, 23 April 2007 - 02:21 AM.

[Michael]

Hello and welcome to geeks to go.

It does too kind of nice in IE, till you try and view the pages source.

This is quite complex, so I don't want to write a post on every change you need, for this one I just want to get your header sorted out.

First I would delete all stuff before and after the class="xboxcontent" the <b> tags I think bad, and the two other <div>s useless.

Now, I think there is a better header.gif in the table base layout, you seamed to have edited it. I would copy it over to your table less layout.

Now I would change

<div id="header"><img src="images/header.gif"></div>

to

<h1>The Iliad</h1>

this should help your Google rank a little bit since every thing in the <h1></h1> carries a big more weight then other text does. Now to put the image in, and remove the text do this in the css.

h1 {
color#fff;
font-size:0;
background-image:url('header.gif');
width:676px;
height:164px;
padding:0;
margin:0;
}

We can move down the page progressively as we get each bit sorted out.

Edited by Michael, 23 April 2007 - 02:21 AM.

[sapiensfossor]

Hi Michael,

Thank you so much for your help!

First I would delete all stuff before and after the class="xboxcontent" the <b> tags I think bad, and the two other <div>s useless.

Doing this will make it lose the rounded corners (the code makes no sense, but hey, it works). Is there a better way to do rounded corners?

Now, I think there is a better header.gif in the table base layout, you seamed to have edited it. I would copy it over to your table less layout.

The actual header gif file is the same on both the css and table layouts, but I did not put in the horizontal navigation images (the images below the header file) onto the css layout because I figured the same thing could be accomplished without using images and only using css. Should I put those images back in?

this should help your Google rank a little bit since every thing in the <h1></h1> carries a big more weight then other text does. Now to put the image in, and remove the text do this in the css.

That's a very handy code, thanks a lot It is a little off centered now, but I'm guessing that's easy to fix.

We can move down the page progressively as we get each bit sorted out.

Thank you thank you thank you so much for your help, our newspaper staff thanks you tremendously

[Michael]

Just a quick response before before I go to bed (it is past mid night)

Doing this will make it lose the rounded corners (the code makes no sense, but hey, it works). Is there a better way to do rounded corners?

I know, I will fix that as we go.

[sapiensfossor]

I removed all of that "xbox" and "xsnazzy" crap and cleaned up the css code considerably. Updated layout can be found here:
http://onthewebland.com/iliad/css/

I fixed it so that the left column nav bar's colors go all the way to the bottom (simply by making the wrap's background color be the same as the nav bar's).

The layout isn't centered anymore, however

Thanks again so much for your help and goodnight

[Michael]

The background on the warp div will interfere with the rounded corners on the header. So you will have to remove it, along with change the margin to get it back in the center, so

#wrap
{
background:#EEEEEE;
margin:1em;
width:676px;
}


becomes

#wrap
{
margin:1em auto;
width:676px;
}


Also remove

#header
{
background:#fff;
}

and the rounded corners on the header should come though.

To fix the side bar again, warp it and the main div in a div with an id of content and set the background on that.

I set this css on the menu to get it to look right.

[codebox]#nav {
background:#2D3D1E;
padding-top:4px;
}

#nav ul {
margin:0;
padding:0;
height:28px;
list-style:none;
}

#nav li {
float:left;
width:133px;
text-align:center;
margin:0;
padding:0;
}

#nav a {
text-decoration:none;
font-weight:900;
width:133px;
display:block;
border-left:1px solid #fff;
color:#ECECEC;
}

#nav a:hover {
color:#9FA392;
}[/codebox]

[sapiensfossor]

Once again, thanks so much Michael. The site is starting to look complete

I created a <div id="content"> and then in the CSS put:

#content
  {
  background:#EEEEEE;
  }

But it isn't working

I also tried to make the footer curved by making the background image be images/footer.gif, but it doesn't look right.

Other than that, I think all that's left is fixing the alignment errors on the top.

Thanks again

[Michael]

Just a quick one try this.

#content
{
background:#EEEEEE;
overflow:auto;
}

[sapiensfossor]

Working now

http://www.onthewebland.com/iliad/css/

[Michael]

I think this should fix most of the aliment problems,

change this

h1
{
color#fff;
font-size:0;
background-image:url('images/header.gif');
width:676px;
height:164px;
padding:0;
margin:0;
margin:0 10px;
letter-spacing:1px;
}

to

h1
{
color#fff;
font-size:0;
background-image:url('images/header.gif');
width:676px;
height:164px;
padding:0;
margin:0;
}

And try adding height:54px to the #footer in the css.

Edited by Michael, 24 April 2007 - 05:57 PM.

[sapiensfossor]

Michael, your code worked like a charm and I thank you again greatly

I worked on it and added some more code. The site is almost done, there's just a couple of minor minor things that I would like to be sorted out.

First, I added a subcontainer to the footer div in order to make it so that the text on the footer is aligned on the bottom. The only problem is now I can't get the text to center as well.

Second (and this is a very minor thing, if you don't know how to fix it then it's no big deal), the horizontal navigation bar is too wide by a few pixels so it doesn't line up exactly with the header gif. Is there a way to make it so it aligns perfectly with the header?

[Michael]

Change the first link in the menu to this
<li><a class="first" href="#">HOME</a></li>

and use this for the css, it has lots of little changes

[codebox]
body, html
{
margin:0;
padding:0;
background-image: url('images/bg.gif');
background-repeat: repeat;
color:#000;
min-width:676px;
}

#wrap
{
margin:1em auto;
width:676px;
}

#contentwrap
{
border-left:4px solid #fff;
border-right:4px solid #fff;
background:#EEEEEE;
overflow:auto;
}

#main
{
background:#fff;
float:right;
width:469px;
}

#sidebar
{
background:#EEEEEE;
float:left;
width:199px;
}

#footer
{
clear:both;
background-image: url('images/footer.gif');
height:52px;
}

#footerinside
{
padding-top:20px;
}

h1
{
font-size:0;
background-image:url('images/header.gif');
width:676px;
height:164px;
padding:0;
margin:0;
}

h2
{
font-family: georgia, tahoma;
font-weight: bold;
font-style: italic;
color: #20692A;
font-size: 17pt;
border:0;
padding-top:0.5em;
margin:0 10px;
letter-spacing:1px;
}

h3
{
padding-top:0.5em;
font-family: georgia, tahoma;
color: #20692A;
width: 189px;
font-size: 17pt;
margin:0 10px;
font-weight: normal;
}

p
{
padding-bottom:0.5em;
font-size: 8pt;
font-family: verdana,tahoma;
margin:0 10px;
letter-spacing:1px;
}

p.footertext
{
text-align: center;
color: #fff;
font-size: 7pt;
font-family: verdana,tahoma;
}

p.bold
{
font-weight: bold;
}


a:link
{
text-decoration: underline;
color: #333333;
cursor: default
}

a:visited
{
text-decoration: underline;
color: #333333;
cursor: default
}

a:hover
{
text-decoration: none;
color: #20692A;
cursor: default;
}

a:active
{
text-decoration: none;
color: #20692A;
cursor: default;
}

#nav
{
background:#2D3D1E;
border-left:4px solid #fff;
border-right:4px solid #fff;
}

#nav ul
{
margin:0;
padding:0;
height:28px;
list-style:none;
padding-top:4px;
border-left:4px solid #294F2D;
border-right:4px solid #294F2D;
}

#nav li
{
float:left;
width:132px;
text-align:center;
margin:0;
padding:0;
display:inline;
}

#nav a
{
text-decoration:none;
font-weight:900;
width:133px;
display:block;
border-left:1px solid #fff;
color:#DCE1CB;
}

#nav a.first
{
border-left:0;
}

#nav a:hover
{
color:#9FA392;
}

#sidebar ul
{
margin-top:0;
list-style: none;
font-size: 8pt;
font-family: verdana,tahoma;
}[/codebox]

Edited by Michael, 24 April 2007 - 09:12 PM.

[sapiensfossor]

Wow... Michael, you are a god. You have no idea how grateful I am for you helping me.

The updated layout is here, I like it so much: http://www.onthewebland.com/iliad/css/

Any final suggestions or tips to improve the layout?

[Michael]

The footer still seams 2 px to high and the and bit of gray in the footer is the wrong width, or else the menu is.

Haha your not the first person to have said something like that, check out other sites I have done. http://codefisher.org/design/ Ok that is cheating, 5 of them are my site, made to look radically different.

Oh, you might want to translate all the text into English

[sapiensfossor]

You are a very talented coder, the sites look great.

And I think the Latin really brings the whole site together, putting English would be so cliche