okay, so i have 4 divs, one is a header and it has a logo, another is a content one with all the content, another is a sidebar with links, and lastly a footer one.
okay, so my problem is, I'm having trouble getting them all ligned up, I've gotten them pretty well ligned up, but if i resize the browser window, everything gets REALLY messed up, so i dno what to do
Code:
HTML:
<html>
<head>
<link rel="stylesheet"
type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"stylesheet4.css" />
</head>
<div id="header">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"titlebar.jpg" ALt= "titlebar">
</div>
</div>
<div id="sidebar">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.csnation.net"> CsNation </a><br><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webmonkey.com"> webmonkey </a><br><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.alistapart.com"> A List Apart (ALA) </a><br><br>
</div>
</body>
<div id="content">
<body>
<p class ="margin">
main content here main content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content here
</P>
</div>
<div id="footer">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:email here">Contact Me</a>
</html>
and CSS:
body {background-color: #999999}
}
body {
margin: auto;
text-align: center;
}
#content {
float: left;
width: 576px;
text-align: left;
border: 1px solid #000
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #FFF;
}
#header {
width: 576px;
}
#footer {
width: 576px;
border: 1px solid #000
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
background-color: #ccccff;
}
#sidebar {
float: left;
width: 100px;
border: 1px solid #000;
padding-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
padding-top: 1em;
HEIGHT: 100px;
background-color: #ccccff;
margin-left: 88px;
margin-top: 0;
}
if you go onto a list apart web site, and resize your browser, nothing gets messed up.
Thanks!!You need to start with valid HTML - then apply CSS to it.that is a valid html... Or do you mean i have to finish my whole HTML file, and then apply CSS to it?
thanks.Your opening BODY tag and closing BODY tag are in the wrong placeokay, i changed the body tag but it didn't change anything, nor did i think it would. My question is, how do i get my page using divs to stay aligned if the browsers is re sized?
<!-- w --><a class="postlink" href="http://www.simplebits.com">www.simplebits.com</a><!-- w --> accomplishes this and it uses divs
thanks.Originally posted by Chrisab508
okay, i changed the body tag but it didn't change anything, nor did i think it would. My question is, how do i get my page using divs to stay aligned if the browsers is re sized?
<!-- w --><a class="postlink" href="http://www.simplebits.com">www.simplebits.com</a><!-- w --> accomplishes this and it uses divs
thanks.
SimpleBits uses a background image.
Read about it here:
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/thats">http://www.alistapart.com/articles/fauxcolumns/thats</a><!-- m --> what i use too, i use faux columns, i mean my divs in the columns for text, when i resize it gets all messed up, the text goes all over the place, on simplebits it doesn't.
thanksHere's my variation on what you've got. The main thing you need to do is sit back and maybe sketch out what your page design looks like. One of the biggest problems with your code (after the aforementioned syntax errors) is you've got a #sidebar that's about 120px wide that supposed to cozy up to a content area that's about 600px wide and the both of them are supposed to fit inside a 576px column. It just ain't possible.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
body {
background-color: #999999;
margin: auto;
text-align: center;
}
#header {
width: 576px;
background-color: #ffc;
}
#container {
width: 576px;
}
#sidebar {
float: left;
width: 100px;
border: 1px solid #000;
padding: 1em 10px 10px 10px;
background-color: #ccccff;
}
#sidebar a { display:block; margin-bottom: 2em; }
#content {
float: right;
width: 430px;
text-align: left;
border: 1px solid #000;
padding: 10px;
background-color: #FFF;
}
#footer {
width: 576px;
border: 1px solid #000;
padding: 0;
background-color: #ccccff;
clear:both;
}
</style>
<title>
</title>
</head>
<body>
<div id="header">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"titlebar.jpg" alt="titlebar">
</div>
<div id="container">
<div id="sidebar">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.csnation.net">CsNation</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webmonkey.com">webmonkey</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.alistapart.com">A List Apart (ALA)</a>
</div>
<div id="content">
<p class="margin">
main content here
</p>
</div>
</div>
<div id="footer">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:email%20here">Contact Me</a>
</div>
</body>
</html>
okay, so my problem is, I'm having trouble getting them all ligned up, I've gotten them pretty well ligned up, but if i resize the browser window, everything gets REALLY messed up, so i dno what to do
Code:
HTML:
<html>
<head>
<link rel="stylesheet"
type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"stylesheet4.css" />
</head>
<div id="header">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"titlebar.jpg" ALt= "titlebar">
</div>
</div>
<div id="sidebar">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.csnation.net"> CsNation </a><br><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webmonkey.com"> webmonkey </a><br><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.alistapart.com"> A List Apart (ALA) </a><br><br>
</div>
</body>
<div id="content">
<body>
<p class ="margin">
main content here main content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content heremain content here
</P>
</div>
<div id="footer">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:email here">Contact Me</a>
</html>
and CSS:
body {background-color: #999999}
}
body {
margin: auto;
text-align: center;
}
#content {
float: left;
width: 576px;
text-align: left;
border: 1px solid #000
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #FFF;
}
#header {
width: 576px;
}
#footer {
width: 576px;
border: 1px solid #000
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
background-color: #ccccff;
}
#sidebar {
float: left;
width: 100px;
border: 1px solid #000;
padding-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
padding-top: 1em;
HEIGHT: 100px;
background-color: #ccccff;
margin-left: 88px;
margin-top: 0;
}
if you go onto a list apart web site, and resize your browser, nothing gets messed up.
Thanks!!You need to start with valid HTML - then apply CSS to it.that is a valid html... Or do you mean i have to finish my whole HTML file, and then apply CSS to it?
thanks.Your opening BODY tag and closing BODY tag are in the wrong placeokay, i changed the body tag but it didn't change anything, nor did i think it would. My question is, how do i get my page using divs to stay aligned if the browsers is re sized?
<!-- w --><a class="postlink" href="http://www.simplebits.com">www.simplebits.com</a><!-- w --> accomplishes this and it uses divs
thanks.Originally posted by Chrisab508
okay, i changed the body tag but it didn't change anything, nor did i think it would. My question is, how do i get my page using divs to stay aligned if the browsers is re sized?
<!-- w --><a class="postlink" href="http://www.simplebits.com">www.simplebits.com</a><!-- w --> accomplishes this and it uses divs
thanks.
SimpleBits uses a background image.
Read about it here:
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/thats">http://www.alistapart.com/articles/fauxcolumns/thats</a><!-- m --> what i use too, i use faux columns, i mean my divs in the columns for text, when i resize it gets all messed up, the text goes all over the place, on simplebits it doesn't.
thanksHere's my variation on what you've got. The main thing you need to do is sit back and maybe sketch out what your page design looks like. One of the biggest problems with your code (after the aforementioned syntax errors) is you've got a #sidebar that's about 120px wide that supposed to cozy up to a content area that's about 600px wide and the both of them are supposed to fit inside a 576px column. It just ain't possible.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
body {
background-color: #999999;
margin: auto;
text-align: center;
}
#header {
width: 576px;
background-color: #ffc;
}
#container {
width: 576px;
}
#sidebar {
float: left;
width: 100px;
border: 1px solid #000;
padding: 1em 10px 10px 10px;
background-color: #ccccff;
}
#sidebar a { display:block; margin-bottom: 2em; }
#content {
float: right;
width: 430px;
text-align: left;
border: 1px solid #000;
padding: 10px;
background-color: #FFF;
}
#footer {
width: 576px;
border: 1px solid #000;
padding: 0;
background-color: #ccccff;
clear:both;
}
</style>
<title>
</title>
</head>
<body>
<div id="header">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"titlebar.jpg" alt="titlebar">
</div>
<div id="container">
<div id="sidebar">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.csnation.net">CsNation</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webmonkey.com">webmonkey</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.alistapart.com">A List Apart (ALA)</a>
</div>
<div id="content">
<p class="margin">
main content here
</p>
</div>
</div>
<div id="footer">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:email%20here">Contact Me</a>
</div>
</body>
</html>