Jump to content

Need an unordered list to be inside this DIV, examples inside


sw0o0sh

Recommended Posts

My structure is as follows:

 

<body>
<div id='wrap'>
	<div id='banner'><a href='index.html'></a></div>
	<div id='menu'>
		<ul>
			<li>Home</li>
			<li>Forum</li>
			<li>Affiliates</li>
		</ul>
	</div>
	<div id='content'>
		Content<br />
		Content<br />
		Content<br />
	</div>
	<div id='footer'>
		Footer
	</div>
</div>
</body>

 

Both menu, as well as the footer, use a gradient for the background. Here's an example of the output:

 

examplehv.png

 

See how the gradient on the footer wraps around the inner text? I basically need to do the same thing, except around the unordered list. As you can see for some reason the top gradient looks "cramped" above the unordered list, when I want the UL inside that div (which displays a gradient).

 

Here's my style:

 

*{
margin:0;
padding:0;
}
body{
background-color:#2e2542;
}
body,div{
font-size:13pt;
font-family:helvetica;
}
div#wrap{
margin-left:auto;
margin-right:auto;
width:780px;
border:1px solid #000000;
}
div#banner{
clear:both;
width:100%;
border-bottom:1px solid #000000;
}
div#banner a{
width:100%;
height:120px;
background-image:url('include/ban.png');
display:block;
}
div#menu, div#footer{
background-image:url('include/gradi.png');
}
div#menu, div#content, div#footer{
padding:3px 0px 3px 0px;
}
div#menu{
border-bottom:1px solid #000000;
}
div#menu ul {
    margin: 0 auto;
    padding: 0;
width:100%;
}
div#menu ul li{
    text-align: left;
float:left;
    list-style: none;
padding:1px;
margin:3px;
    border: 1px solid #CCC;
}
div#content{
clear:both;
background-color:#46326e;
border-bottom:1px solid #000000;
}
div#footer{
}

 

How would I fix this?

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.