...

View Full Version : positioning of image in slider div and Doc



jarv
12-15-2010, 12:21 PM
Hi, on my site: SOLVED!

I have an image of Giraffes and then my website DOC div falls beneath this, How can I put my site above the image? the giraffes has to be an image and not background image.

Please help?!

here is my code:



<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>FAB</title>
<meta name="description" content="xxx" />
<meta name="keywords" content="xxx" />
<meta name="Content-Language" content="en-gb" />
<meta name="robots" content="FOLLOW,INDEX" />
<meta name="revisit-after" content="2 days" />
<meta name="distribution" content="Global" />
<meta name="resource-type" content="document" />
<link rel="stylesheet" type="text/css" href="css/reset-style.css" />
<link rel="stylesheet" type="text/css" href="css/sitestyle.css" />
</head>
<body>
<div id="slider">
<img src="images/giraffes.jpg" alt="Giraffes" />
</div>
<div id="doc">
<div id="hd">
<h1>The Fabulous Experience Company</h1>
<ul>
<li><a href="#" class="menuselected" title="About">About</a></li>
<li><a href="#" target="_blank" title="Gallery">Gallery</a></li>
<li><a href="#" title="Calendar">Calendar</a></li>
</ul>
</div>
<div id="bd">
<div class="yui-g">
<div class="topcontent"> </div>
<div id="leftcolumn" class="yui-u first">
<h2>Header 2</h2>
<p><a href="#" title="linky">Linky</a></p>
<p>Text</p>
</div>
<div class="yui-u" id="rightcol">
<h2>Right</h2>
<p>texty</p>
</div>
</div>
</div>
</div>
<div id="ft">
<p>All rights reserved &copy; Copyright 2010 fab.com</p>
</div>
</div>
</body>
</html>


css


html{
background-color:#000000;
}
p{
padding: 5px 0px 10px 0px;
line-height:20px;
}
body{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #333333;

}
a{
font-size: 14px;
color: #333333;
font-weight: bold;
text-decoration: none;
}
a:hover {
}
#hd .logo{
}
h1 { font-size:40px; color:#FFFFFF; position:absolute; top:62px; left:162px; }

#doc{
width:950px;
color: #333;
position:relative;

}
#hd{
background-color: #333333;
height:197px;
position: relative;
}
#hd ul{
position:absolute;
top:163px;
width:950px;
}

#bd{ background-color: #FFFFFF; }

.yui-g h2{
font-size:24px; }
#ft{
}
#ft p{
position:absolute; right:30px; font-size:10px; color:#cccccc;
}
.yui-g{
padding:30px;
}
#leftcolumn{
width:600px;
}
#leftcolumn h2{
font-size:24px;
margin-bottom:10px;
}
#rightcol{
width:274px;
position:relative;
}
#slider{
clear:both;
z-index:1;
}

Excavator
12-15-2010, 12:31 PM
Hello jarv,
You can stack those elements with positioning and z-index like this -
#slider{
position: relative;
top: 0;
left: 0;
z-index:1;
}
#doc{
width:950px;
color: #333;
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -475px;
z-index: 2;

}

jarv
12-15-2010, 02:09 PM
Thanks!!!! x



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum