Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question positioning of image in slider div and Doc

    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:

    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
    Code:
    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;
    }
    Last edited by jarv; 12-15-2010 at 04:01 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello jarv,
    You can stack those elements with positioning and z-index like this -
    Code:
    #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;
    
    }
    Last edited by Excavator; 12-15-2010 at 12:46 PM. Reason: centered #doc
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    jarv (12-15-2010)

  • #3
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    Thanks!!!! x


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •