New Topic/Question
Reply
i thought that i would get the layout i was looking for on my own with no help....buyt not quite! I'm probably overlooking something simple but I cant work out why the header and footer stretch right across the screen. i want them centered and 760px and cant quite see whats wrong. if someone could help that would help me a lot!
html, body { /*resets the margins and padding on both the html and body tags to 0 to ensure theres
no space between the top of the browser and the top of the page */
margin: 0;
padding: 0;
}
h1 {
margin: 0; /* takes away the default margin and padding on h1 tags */
padding: 0;
}
.hidden {
display: none; /* any element with this class wont be seen on the site */
}
#page-container { /* there is a # as this is an id, to be used once on the page only, not repeated elsewhere
this div's height will change depending on the content*/
width: 760px; /* sets the width of the container */
margin: auto; /* browser sets margin, should centre the div */
}
#header {
background: blue;
height: 70px;
width:760px;
}
/*Credits: css adpapted from Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.glossymenu {
list-style-type: none;
margin: 1px 0; /*creates a small gap between where logo will go and the navigation */
padding: 0;
float: left; /* floats sidebar to left of the screen */
border: 1px solid #9A9A9A;
border-bottom-width: 0;
width: 280px; /*the height is dependend on the content so no height will be set for the time being*/
}
.glossymenu li a{
background: black url(../images/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 5px;
text-decoration: none;
}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 280px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(../images/glossyback2.gif);
}
#content {
margin-left: 280px; /*creates a margin as wide as the sidebar to separate the sidebar information and the content */
}
#footer {
clear:both; /*When an element has the clear property assigned, if it comes into contact with a float it is placed right below where that float ends.*/
background: #CCCCFF;
height: 55px;
}
#footer p{font:10px;)
body>
<div id="page-container"> <!--this div will hold all the other elements of the page-->
</div>
<div id="header">
<h1> Kilmaclolm Dramatic Society logo to be placed here </h1>
</div>
<ul class="glossymenu">
<li><a href="#" >About KDS</a></li>
<li><a href="#" >Archive</a></li>
<li><a href="#"> FAQs</a></li>
<li><a href="#">Committee Members</a></li>
<li><a href="#">Membership Informaton</a></li>
<li><a href="#" style="border-bottom-width: 0">Contact Us</a></li>
</ul>
<div id="content">
<object width="480" height="300">
<param name="movie" value="content.swf"
<embed src="content.swf" width="480" height="300"> </embed>
</object>
</div>
<div id="footer"><!--floated divs dhould come first to avoid any IE issues-->
<div id="altnav">
<a href="#">About</a> -
<a href="#">Archive</a> -
<a href="#">FAQs</a> -
<a href="#">Committee</a> -
<a href="#">Membership</a> -
<a href="#">Contact</a>
</div>
<p> Copyright © Kilmacolm Dramatic Society. A website by D Keenan</p>
</div>
</body>
</html>
MultiQuote
| 