Help, something's wrong

fr33sty13 · #1 (**permalink**) May 28th, 2008, 05:43

Hey I was assigned to make a website for a community.

I managed to do so, but I had made a terrible mistake and I cannot fix it.

visit this website :
www.newzealand.wnso.org

Try with firefox first, then try it with internet explorer and you will find a alot of trouble.

here is the code of my css:

Code: Select all

@charset "utf-8";
/* CSS Document */

body {background-image:url(bg22.gif); background-repeat:repeat-x;
height:1000px;
background-attachment:fixed;
margin:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;

}

#header {background-color:#1c242a;
width:500px; background-repeat:no-repeat;
height:70px;
margin:auto;
border-left:1px solid #999999;
border-right:1px solid #999999;
text-align:center;
color:#0066CC;
}

#nav {background-color:#1c242a;
width:170px; background-repeat:repeat;
height:500px;
margin:5px auto auto 5px;
color:#333333;
border:1px solid #999999;
float:left;
list-style-image:url(lostar.gif);
text-align:left;

}
#nav ul li { background-image:url(libg.gif);
margin:8px 1px auto 8px;
color:#666666;
list-style-image:url(lostar.gif);
text-align:left;    

}



#nav ul li a {
color:#FC871D;
list-style-image:url(lostar.gif);
text-decoration:none;
margin: 3px auto auto 3px;
text-align:left;
display:block;

}



#nav ul li a:hover {
background-image:url(libg2.gif);
list-style-image:url(lostarover.gif);
color:#FFCC00;
}

#content {background-color:#1c242a;
width:800px; background-repeat:repeat-y;
color:#8CB9F0;
margin:auto;
text-align:justify;
border:1px solid #999999;
}

#content a {
height:100%;
color:#FC871D;
margin:auto;
text-align:center;

}

#content ul li {
list-style-image:url(lostarover.gif);
}

#content ul li a {
width:100%; background-repeat:repeat; 
height:100%;
color:#FC871D;
margin:auto;
text-align:center;
list-style-image:url(lostarover.gif);
}

#content ul li a:link {
list-style-image:url(lostarover.gif);
color:#00CCCC;
}

#content ul li a:hover {
color:#FFCC00;
list-style-image:url(lostar.gif);
}

#content a:link {
color:#0099FF;
}

#content a:hover {
color:#FFCC00;
}


h2 {text-decoration:underline;
}

#memberbox {
float:left;
}

Can someone please help me?

Aso · #2 (**permalink**) Jun 1st, 2008, 11:53

Try this;

HTML: Select all

<div id="wrapper">

   <div id="header"></div>

   <div id="nav"><!-- nav content --></div>

   <div id="content"><!-- main content --></div>

</div>

And for your CSS, add these rules (remove any old rules that might conflict with these);

Code: Select all

#wrapper {
width: 800px;
margin: 0 auto
}
#nav {
width: 220px;
float: left;
}
#content {
width: 570px;
float: right
}

What in fact you are doing is placing a wrapper around the whole site in order to contain and centre it.

Then you are floating the nav to the left and the content to the right, giving them widths that total slightly less than the width of the wrapper.

You might also want to add;

Code: Select all

* {
margin: 0;
padding: 0
}

at the start of your CSS. This is known as a 'browser reset', and applies all elements.

This helps ensure consistency across browsers (which by default apply their own paddings and margins).

fr33sty13 · #3 (**permalink**) Jun 3rd, 2008, 03:43

Thank you for this, I have learned something today.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Who Is Right or Wrong ?	saltedm8	Webforumz Cafe	28	Feb 25th, 2008 19:28
What am I doing wrong??	PunkManager	Starting Out	3	Sep 4th, 2007 12:54
Something wrong	Daniel	Webforumz Cafe	11	Jul 20th, 2007 18:08
What's gone wrong?	Alsilver	Web Page Design	2	Oct 22nd, 2006 14:11
what am i doing wrong?	bsadaz	Web Page Design	4	Oct 16th, 2006 11:41

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Help, something's wrong