4 Replies - 3077 Views - Last Post: 05 April 2009 - 08:10 PM

#1 jamillion  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 7
  • View blog
  • Posts: 83
  • Joined: 23-July 08

i want my page to touch the top and bottom of the browser

Posted 05 April 2009 - 01:17 AM

Im making a website and i've managed to center my page, im new to css so i thought if i typed
position:absolute;
top:0px;
bottom:0px;


it would make it go to the top and bottom of the browser but it either goes to the top or the bottom of the browser and it make it so its not centered can anyone help please?
Heres the html
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="webstyle.css">
</head>

<body>
<div id="wrapper">
 <div id="content">
<!--banner-->
<img src="banner1.png" id="banner">
 
 <!--Nav menu-->

<ul id="nav-menu"> 
<li><a href="indexnew.html"><b>Home</b></a></li>
<li><a href="news.html"><b>News</b></a></li>
<li><a href="gallery.html"><b>Gallery</b></a></li>
<li><a href="contact.html"><b>Contact</b></a></li>
<li><a href="links.html"><b>Links</b></a></li>
</ul>

<center><h1>HEADING</h1></center>
<center><p>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph 
paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph
paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph 
paragraph paragraph paragraph paragraph paragraph </p></center>
</div>

</div>
</body>
</html>



heres the CSS
#wrapper {
	margin: 0 auto;
	width: 800px;
}


#content
{
background-color:#D3D3D3;
border-style:ridge;
border-width:5px;
border-color:black;
 width: 100%;
}

body
[
background-color:#000000;
}

#banner
{
border-style:solid;
border-width:4px;
border-color:#666666;
}


#nav-menu 
{
list-style: none;
padding: 0;
margin: 0;
} 

#nav-menu li
{
float: left;
margin: 0 0.15em;
} 

li
{
background-color:#666666;
border-style:ridge;
border-width:3px;
border-color:#000000;
}

li:hover
{
background-color:#FFFFFF;
}



Is This A Good Question/Topic? 0
  • +

Replies To: i want my page to touch the top and bottom of the browser

#2 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1641
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: i want my page to touch the top and bottom of the browser

Posted 05 April 2009 - 09:45 AM

Moved to HTML & CSS :)
Was This Post Helpful? 0
  • +
  • -

#3 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: i want my page to touch the top and bottom of the browser

Posted 05 April 2009 - 10:49 AM

if you use this css code:
body {
     margin: 0;
}



then a regular DIV element will line up flush with the top of the page, if it's the first element in the body. But why do you need it to be the entire height of the page? I don't think there's a way to do that with straight HTML & CSS. But you can use some Javascript to get the page's height and then set the element's height to that value.
Was This Post Helpful? 0
  • +
  • -

#4 crazyjugglerdrummer  Icon User is offline

  • GAME OVER. NERD WINS.
  • member icon

Reputation: 119
  • View blog
  • Posts: 690
  • Joined: 07-January 09

Re: i want my page to touch the top and bottom of the browser

Posted 05 April 2009 - 05:41 PM

why would you want the page to touch the top and bottom? Why would it do anything else? The page sits in the browser and scrolls up and down, so the browser doesn't have a defined height. The page will fill up the browser vertically as it is resized, always taking up 100% of it. If you wanted to specify a width you could just use a value of 100% for the body and that would fill the whole page horizontally (i think).

Hope this helps! :)
Was This Post Helpful? 0
  • +
  • -

#5 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: i want my page to touch the top and bottom of the browser

Posted 05 April 2009 - 08:10 PM

i dont really see a possible way with html and css, if only height: 100%; actually worked
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1