PDA

View Full Version : Help!!

Chris
10-08-2003, 05:11 PM
I'm not sure whether i should have posted this in CSS or HTML, so i posted it in here. I though if i posted in CSS i might not get a reply, so anywho, here is my question (and its kinda confusing so bear with me plz)

I made a css, and thats fine.

If you go to:
http://thechrisbpage.bravehost.com/index.html

you will see the css in action.

then if u go to:
http://thechrisbpage.bravehost.com/index_wrong.html

you will see the same page, but with a flash title at the top.

What i want is the two dark blue bits at either side to be in line with the white bit in the middle that says "main page". I can't figure out how to do this, so could someone help?

Here are the two codes im using for the index.html and layout.css:

First, the index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>The ChrisB Page</title>
<style type="text/css" media="screen">@import "layout.css";</style>

</head>

<body>
<div class="content">
<h1>Main Title</h1>
<p>Main text will go here.</p>
<p>More text will go here.</p>
</div>

<div class="content">
<h2>News/Updates</h2>
<p>The news/updates will go here.</p>
</div>

<div class="content">
<a href="link1.html" title="">&lt; Link One</a> &nbsp;::&nbsp; <a href="link2.html" title="">Link 2</a>
</div>

<div id="navAlpha">
<h2>Menu</h2>
<p>
<a href="http://www.1.com/" title="A List Apart: For People Who Make Websites">A List Apart</a><br>
<a href="" title="">Menu Item 1</a><br>
<a href="" title="">Menu Item 2</a><br>
<a href="" title="">Menu Item 3</a><br>
<a href="" title="">Menu Item 4</a><br>
<a href="" title="">Menu Item 5</a><br>
<a href="" title="">Menu Item 6</a><br>
<a href="" title="">Menu Item 7</a><br>
<a href="" title="">Menu Item 8</a><br>
</p>
</div>

<div id="navBeta">
<h2>Login</h2>
<p>The login script will go here.</p>
</div>

</body>
</html>


next, the css:



body {
color:#333;
background-color:#0099FF;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
font-weight:900;
color:#009999;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}

a {
color:#0099FF;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#0099FF;}
a:visited {color:#0099FF;}
a:hover {background-color:#EEEEEE;}


/* All the content boxes belong to the content class. */
.content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:0px 210px 20px 170px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}

#navAlpha {
position:absolute;
width:150px;
top:20px;
left:20px;
border:1px dashed black;
background-color:#0033CC;
padding:10px;
z-index:2;
font-size:28px;
font-weight:900;
color:#FFFFFF;


voice-family: "\"}\"";
voice-family:inherit;
width:128px;
}

body>#navAlpha {width:128px;}

#navBeta {
position:absolute;
width:190px;
top:20px;
right:20px;
border:1px dashed black;
background-color:#0033CC;
padding:10px;
z-index:1;
font-size:28px;
font-weight:900;
color:#FFFFFF;

voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}

body>#navBeta {width:168px;}




need any more info, reply to the post, and if u can help, PLZ PLZ PLZ do!!

THANKS

Chris (Sorry this is such a long thread!!!!)
MaGiCSuN
10-08-2003, 05:16 PM
#navAlpha {
position:absolute;
width:150px;
top:20px;
left:20px;
border:1px dashed black;
background-color:#0033CC;
padding:10px;
z-index:2;
font-size:28px;
font-weight:900;
color:#FFFFFF;

you should change those values for top and left in the absolute position above to something else.. Becuase the page contains banners you have to absolute position them below the banners.... on that page the box is only 20px from top and 20px from left.

Try the same with the other box

Love,
Mirna
Chris
10-08-2003, 05:44 PM
ah!

Thank alot!!

Chris