2 Replies - 604 Views - Last Post: 24 February 2010 - 10:01 AM

#1 chicaloca  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

html and css layout question

Posted 24 February 2010 - 08:05 AM

hi

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 &copy; Kilmacolm Dramatic Society. A website by D Keenan</p>
            
	</div> 

</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: html and css layout question

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1167
  • View blog
  • Posts: 7,213
  • Joined: 07-September 06

Re: html and css layout question

Posted 24 February 2010 - 08:31 AM

At the moment you are closing your page-container div right after opening it, so it has no content:
<div id="page-container"> <!--this div will hold all the other elements of the page--> 
 
</div>


So, I would suggest moving all the other content into it and see if that helps.
Was This Post Helpful? 0
  • +
  • -

#3 chicaloca  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

Re: html and css layout question

Posted 24 February 2010 - 10:01 AM

hi

thanks yes it did! means everything is now more or less where it should be apart from one problem, the image should be right across from the menu bar but there seems to be a white space above it. ive screenshotted it, ive had a look at my css but not sure how to alter it to make the white bit disappear. . its probably another simple thing that i'm missing....

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1