I know someone better will come along and probably answer you better.
This is the style-sheet I use for one of my sites (not up yet, I'm still working on it).
#header {
position: absolute;
width: 400;
height: 90;
top: 5;
right: 0;
bottom: auto;
left: 95;
z-index: 1;
}
#sidebar {
position: absolute;
width: 100;
height: 300;
top: 0;
right: 0;
bottom: 100px;
left: 0;
background-color: gray;
}
#sidebar1 {
position: absolute;
width: 100;
height: 295;
top: 305;
right: 0;
bottom: auto;
left: 0;
color: orange;
word-wrap: break-word;
overflow: auto;
}
#main {
position: absolute;
width: 565;
height: 387;
top: 110;
right: 0;
bottom: 100px;
left: 110;
word-wrap: break-word;
color: orange;
overflow: auto;
z-index: 1;
}
#news1 {
position: absolute;
width: 100;
height: 500;
top: 50;
right: auto;
bottom: auto;
left: 339;
z-index: 0;
}
#news {
position: absolute;
width: 90;
height: 400;
top: 150;
right: auto;
bottom: auto;
left: 683;
word-wrap: break-word;
color: white;
overflow: auto;
}
#update {
position: absolute;
width: 90;
height: 50;
top: 560;
right: auto;
bottom: auto;
left: 683;
word-wrap: break-word;
text-align: center;
font-weight: bold;
color: orange;
}
#footer {
position: absolute;
width: 565;
height: 100;
top: 500;
right: 0;
bottom: 0;
left: 110;
word-wrap: break-word;
color: lime;
}Make sure you've got the
word-wrap: break-word;or the text will spill out of the areas.
You'll notice the
background-color: gray; on one or more section, that way I can position things EXCACTLY where I want them, then I just turn off the color.
I don't like relative positioning, I have this need to use absolute positioning, so when I tell it that its going to be 100px from the top, it is. But that's just me
Attached is a screenshot of the page that I work on sometimes, depends on the mood
and the the HTML showing the divs etc.
<html>
<head>
<title>SuicideTechie.COM</title>
<link rel="stylesheet" href="./css/template.css"
</head>
<body bgcolor="black">
<!-- Header -->
<div id="header">
<img src="./images/header.png" id="header1" alt="When stupid people make you wanna kill yourself... Suicide Techie.COM" />
</div>
<!-- Navigation Sidebar -->
<div id="sidebar">
<img src="./images/st.png" id="logo" alt="Logo" /><br />
<a href="./index.html" id="home"><img src="./images/home.png" id="home1" alt="Home" border="0" /></a><br />
<a href="./index.html" id="faqs"><img src="./images/faqs.png" id="faqs1" alt="FAQs" border="0" /></a><br />
<a href="./index.html" id="forum"><img src="./images/forum.png" id="forum1" alt="Forum" border="0" /></a><br />
<a href="./index.html" id="contact"><img src="./images/contact.png" id="contact1" alt="Contact Info" border="0" /></a>
</div>
<!-- Topics Sidebar -->
<div id="sidebar1">
<center><b>Hot Topics</b></center>
</div>
<!-- Main -->
<div id="main">
<center>
<h3>Dedicated to technical support staff around the world...</h3>
Please note, if you are actually Suicidal, go here -> <a href="http://www.save.org" id="save">SAVE.ORG</a>
</center>
<br />
This is the initial page for SuicideTecie.COM, where techies can help other techies with their problems, or just blow off steam.<br />
<center>
<h2>Rules</h2>
</center>
<ol>
<li>No Names:
<ul>
<li>Do not use a customer's name, use either "customer" or "Bob"</li>
<li>Do not use a company name, use "company", "the Man", or "[bleep]"</li>
<li>Using your own name is up to you, but please don't use your last name.</li>
</ul>
</li>
<li>No Flames:
<ul>
<li>Don't flame other user for their posts. You came here to help or be helped.</li>
</ul>
</li>
<li>Follow the rules:
<ul>
<li>I made this site to give my fellow techies a place to blow off steam, or get help for ourselves. I'm paying for the hosting fees out of my own pocket, which means I decide what goes here. Flame once, I'll warn you. Flame twice, I'll kick you.</li>
</ul>
</li>
</ol>
</div>
<!-- News Sidebar -->
<div id="news1">
<img src="./images/news.png" id="news1" alt="News" /><br />
</div>
<!-- News -->
<div id="news">
<hr color="orange" />
<center>Thursday, June 23, 2005</center>
<hr color="orange" />
<center>Welcome to my desktop muahahaha!</center>
<br />
</div>
<!-- Updated -->
<div id="update">
Last Updated<br />
06/23/2005
</div>
<!-- Footer -->
<div id="footer">
<center>
<img src="./images/footer.png" id="footer1" alt="Brought to you by stupidity..." />
</center>
</div>
</body>
</html>
[attachment=2838:attachment]
Sign In
Create Account
