No replies
alazanski
alazanski's picture
Offline
Regular
Last seen: 5 years 36 weeks ago
Timezone: GMT+1
Joined: 2010-12-16
Posts: 20
Points: 33

Hello,

I'm sorry for posting so many new posts, but I just can't seem to get my stylesheet to work the way I want it... So I'm working on this somewhat complex website (http://products.gratita.com/grey_brain/). If you look at the website and outline the block level elements, you can see that everything is a bit messed up (the divs are positioned very strange, there are some blank spaces between the divs and so on). Can you please help me "clean" up the stylesheet, so that it won't be so messed?

Another thing that bothers me, is that I have this big header, and it's full height is 200px. The top navigation's height is 25px, the main navigation's height is 50px and the header's middle has a height of 125px. When I make new divs on this header, I have to make them a couple of px smaller, so that everything fits... Why is that? How can I correct it?

And the last thing is the main menu. I can't seem to get it working (I can't seem to get it to look the way I want). I want it to look something like the menu on Tuts23 (http://tuts23.com/). How can I do that? What must I change/edit?

My website's stylesheet and HTML is below.

<body>
 
<div id="wrapper"><!--wrapper start-->
 
<div id="header_bg"><!--header_bg start-->
 
<div id="inner_wrapper"><!--inner_wrapper start-->
 
<div id="header"><!--header start-->
 
<div id="top_navi"><!--top_navi start-->
 
<ul class="top_navi_left">
    <li><a href="#">about ut</a></li>
    <li><a href="#">contact us</a></li>
    <li><a href="#">write for us</a></li>
    <li><a href="#">advertise with us</a></li>
    <li><a href="#">sitemap</a></li>
</ul>
 
</div><!--//top_navi-->
 
<div id="middle_header"><!--middle_header start-->
 
<a href="index.html"><img src="images/logo.png" class="logo" /></a>
 
<div id="header_banner"><!--header_banner start-->
 
</div><!--//header_banner-->
 
</div><!--//middle_header-->
 
<div id="main_navi"><!--main_navi start-->
 
<ul class="menu_navi"><!--menu_navi start-->
    <li><a href="#">Web Design </a></li>
    <li><a href="#">Graphic Design</a></li>
    <li><a href="#">CMS</a></li>
    <li><a href="#">Blogging</a></li>
    <li><a href="#">Forums</a></li>
</ul><!--//menu_navi-->
 
</div><!--//main_navi-->
 
</div><!--//header-->
 
</div><!--//inner_wrapper-->
 
</div><!--//header_bg-->
 
</div><!--//wrapper-->
 
</body>

body {
    background-color: #CCCCCC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0;
}
 
/*///// CONTAINERS /////*/
 
#wrapper {}
 
#header_bg {
    background-image: url(../images/header_bg.png);
	background-repeat: repeat-x;
	height: 200px;
	width: 100%;
}
 
#inner_wrapper {
    width: 960px;
	margin: 0 auto;
}
 
#header {
    width: 100%;
	margin: 0;
	height: 200px;
}
 
#top_navi {
    font-size: 10px;
	width: 100%;
	height: 25px;
}
 
#middle_header {
    width: 100%;
	height: 122px;
	float: left;
	margin-left: -15px;
}
 
#main_navi {
    height: 50px;
	width: 100%;
	float: left;
}
 
#header_banner {
    width: 500px;
	height: 70px;
	float: right;
	margin-top: 20px;
}
 
/*///// CLASSES /////*/
 
.top_navi_left {
    float: left;
	margin-left: -15px;
	padding: 0;
}
 
.top_navi_left li {
    list-style: none;
	float: left;
	padding-left: 15px;
	margin-top: -4px;
}
 
.top_navi_left li a {
    color: #CCCCCC;
	text-decoration: none;
	display: block;
}
 
.top_navi_left li a:hover {
    text-decoration: underline;
}
 
.logo {
    margin-top: 20px;
}
 
.menu_navi {
    padding: 0;
	float: left;
	margin-left: -30px;
	margin-top: 0px;
}
 
.menu_navi li {
    list-style: none;
	float: left;
	padding-left: 30px;
}
 
.menu_navi li a {
    display: block;
	text-decoration: none;
	color: #000000;
	font-size: 15px;
	font-weight: bold;
	padding: 13px;
}
 
.menu_navi li a:hover {
    background-color: #6F6F6F;
	color: #FFFFFF;
}

Thank you very much for all your help, Big smile