Quick Web Design Question

J

jarryd09

New Member
Hey everybody,

I had a quick question about Web.

I'm creating a website right now, about marine life. I want to put my header inside of another header.

HTML CODE:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Marine Information</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<div id="topsurroundingbanner">Container for Banner</div>
<div id="container">
<div id="topbanner">Top Banner </div>
<div id="navigation bar">
<a href="index.html?home">Home</a>
<a href="index.html?home">Facts</a>
<a href="index.html?home">Species</a>
<a href="index.html?home">Information</a>
</div>
<div id="main_content">Main Content</div>
</div>
<div id="footer">Footer</div>


</body>
</html>


CSS CODE:
@charset "UTF-8";
/* CSS Document */

#topsurroundingbanner {
background-color:#39618e;
height:250px;
z-index:1;
}


#topbanner {
background-color:#036;
font: arial;
height: 200px;
background-image:url(images/header.png);
top: 250px;
z-index:2;
}

#navigation bar {
width:auto;
display:block;
heigth:28px;
line-height:28px;
padding:0 8px;
display:inline;
}

#container {
width:901px;
margin-left:auto;
margin-right:auto;
}

#main_content {
background-color:#396;
height: 500px;
width:901px;
}

#footer {
background-color:#CC9;
background-repeat:repeat-x;
height: 200px;
}



I basically want to put #topbanner inside of #topsurrounding banner.

However, there's a container that's 900px wide, and I want the #topsurrounding banner to repeat-x...but at the same time, keep everything else centered inside the main container.
 
v2Media

v2Media

Member
Here's the first step. An child AP div in a parent RP div. Give it a whirl and post the result.

HTML
<div id="topsurroundingbanner">Container for Banner<div id="topbanner">Top Banner </div></div>

CSS
#topsurroundingbanner {
background-color:#39618e;
height:450px;
z-index:1;
position: relative;
}
#topbanner {
background-color:#036;
font: arial;
height: 200px;
background-image:url(images/header.png);
position: absolute;
top: 250px;
left: 0px;
z-index:2;
}
 
Last edited:
C

crazijoleni

New Member
HEEEEEEEELP!!! Im a graphic designer and I'm designing an online magazine, Ive had a brilliant idea, Ive designed an amazing looking website in Photoshop sliced it up and now im utterly stuck in dreamweaver, I've looked at all the lynda.com tuts and I'm still stuck becasue my navigation design for the website is more Flash suited then it is HTML (or i feel that way as I know a lot more about designing sites in Flash as oposed to using html) basicaly i want to know how i can make the centre of my page have a table in it in which i will be able to load an swf file which will display the magazine and use buttons to animate the turning of pages and update the picture with each turn of the page.

If you know any good site building companies that arent too expensive but have a good quality finish I am open to having someone build it for me, as my deadline is fast approaching.
 
You must log in or register to reply here.
Top