Eljol
09 Apr 2011, 09:20 AM
Hey I just begun learning css and html and am having a problem with my webpage.
I noticed that when I previewed the page I had created in notepad++, it only filled a small part of the left side of the screen. What i want to know is how do I get my webpage to cover up the whole page like almost every site on the internet does? All i see is white on the other side of the screen, please help
Here is my css code :
#container {
width:900px
}
#header{
width:900px;
height:100px;
border-bottom:2px solid #999;
background-color:#036;
}
#leftnav {
float:left;
width:140px;
height:300px;
background-color:#03C;
border-right: 1px dashed #03F;
}
#rightnav {
float:right;
width:140px;
height:300px;
background-color:#0CF;
border-left:1px #0F6;
}
#midsection{
width:600px;
background-color:#30C;
}
#footer {
clear:both;
background-color:#F00;
}
and here is my html code :
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="leftnav">
<ul>
<li><a href="http://www.w3schools.com/">Homepage</a></li>
<li><a href="http://www.w3schools.com/">About Us</a></li>
<li><a href="http://www.w3schools.com/">New Releases</a></li>
<li><a href="http://www.w3schools.com/">Upcoming events</a></li>
</ul>
</div>
<div id="rightnav">
<li><a href="http://www.w3schools.com/">Visit W3Schools</a></li>
<li><a href="http://www.w3schools.com/">Visit W3Schools</a></li>
<li><a href="http://www.w3schools.com/">Visit W3Schools</a></li>
<li><a href="http://www.w3schools.com/">Visit W3Schools</a></li>
</div>
<div id="body">
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Ps: notice that the colors and links are just examples that will be changed, and I apoligize if I have specefied to much information, first time posting here so I hope you guys don't mind
I noticed that when I previewed the page I had created in notepad++, it only filled a small part of the left side of the screen. What i want to know is how do I get my webpage to cover up the whole page like almost every site on the internet does? All i see is white on the other side of the screen, please help
Here is my css code :
#container {
width:900px
}
#header{
width:900px;
height:100px;
border-bottom:2px solid #999;
background-color:#036;
}
#leftnav {
float:left;
width:140px;
height:300px;
background-color:#03C;
border-right: 1px dashed #03F;
}
#rightnav {
float:right;
width:140px;
height:300px;
background-color:#0CF;
border-left:1px #0F6;
}
#midsection{
width:600px;
background-color:#30C;
}
#footer {
clear:both;
background-color:#F00;
}
and here is my html code :
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="leftnav">
<ul>
<li><a href="http://www.w3schools.com/">Homepage</a></li>
<li><a href="http://www.w3schools.com/">About Us</a></li>
<li><a href="http://www.w3schools.com/">New Releases</a></li>
<li><a href="http://www.w3schools.com/">Upcoming events</a></li>
</ul>
</div>
<div id="rightnav">
<li><a href="http://www.w3schools.com/">Visit W3Schools</a></li>
<li><a href="http://www.w3schools.com/">Visit W3Schools</a></li>
<li><a href="http://www.w3schools.com/">Visit W3Schools</a></li>
<li><a href="http://www.w3schools.com/">Visit W3Schools</a></li>
</div>
<div id="body">
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Ps: notice that the colors and links are just examples that will be changed, and I apoligize if I have specefied to much information, first time posting here so I hope you guys don't mind