CSS Forum

**Chris_123K** · 04:07 PM

Hey forum!

I'm quite new at this and have been trying to make a new page,

http://ubuntu.asterhag.se/kummel/web/?main=1

The cow/giraffe image is supposed to be in the bottom right corner of the page. How does one do this?

Thanks for looking at my problem.

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>K. Soulutions</title>

<style>


A:link {text-decoration: none; color: #9c5862;}
A:visited {text-decoration: none; color: #9c5862;}
A:active {text-decoration: none; color: #9c5862;}
A:hover {text-decoration: underline overline; color: #FFFF99;}


body 
{
color: #000000;
background:#2B1515;
font-family: /*Tahoma,*/ Arial, Tahoma, Geneva, sans-serif;
}

div.page
{
background-image: url(./images/bg.png);
background-repeat:repeat-x;
background: #99CCFF;
border:#006600 solid 2px;
margin:0 auto;
}

div.header
{
position:absolute;
top:1%;
left:140px;
height:auto; 
margin:1%;
}

div.menu
{
float: left; 
width: 105px;
overflow: auto;
border:#006600 dotted 2px;
padding: 15px 10px 15px 20px;
margin-top: 70px;
margin-left: 10px;
}

div.content
{
float:left;
width: 40%;
height: 1000px; 
overflow: auto;
border:#006600 dotted 2px;
padding: 15px 10px 15px 20px;
margin-top: 70px;
margin-left: 10px;
margin-bottom: 25px;
}

div.animalold
{
clear:both;
width:100%;
height:351px;
z-index:-1;
positioning:absolute;
bottom:100px;
}

div.animal
{
height:351px;
z-index:-1;
positioning:absolute;
bottom:100px;
}

div.bottom
{
clear:both;
width:100%;
height:100px;
background-image: url(./images/daytimegrass.png);
background-repeat:repeat-x;
padding-bottom:0px;
margin-bottom:0px;
}

div.down
{
clear:both;
width:100%;
background: #2B1515;
color:#99CCFF;
padding:0px;
border-top:5px ridge #006600;
}




</style>

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>

<div class="page">

<div class="header">
<img src="http://www.webmaster-talk.com/images/ksol.png" height="10%"/>
</div>

<div class="menu">
<table width="300%"  border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td>
<p><b>Welcome!</b></p>
<p><a href="?main=1">About Us</a></p>  
<p><a href="?main=2">View Blog</a></p>  
<p><a href="?main=3">Contact Us</a></p> 

<p><b>Portfolio</b></p>
<p><a href="?main=4">Websites</a></p> 
<p><a href="?main=5">Logos</a></p>

<p><b>Get Invloved!</b></p> 
<p><a href="?main=6">Get Quote</a></p>
    </td> 
  </tr> 
</table> 
</div>

<div class="content"> 
<table width="100%"  border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td>
 
<?php

if ($_GET["main"]=="1") 
{include("./nav/about.php");}
elseif ($_GET["main"]=="2") 
{include("./blog/blog.php");}
elseif ($_GET["main"]=="3") 
{include("./nav/about.php");}
elseif ($_GET["./nav/main"]=="4") 
{include("./nav/about.php");}
elseif ($_GET["main"]=="5") 
{include("./nav/about.php");}
elseif ($_GET["main"]=="6") 
{include("./nav/about.php");}
else
{include ("./nav/welcome.php");}

?>

    
</td> 
</tr> 
</table> 
</div>

<div class="animal">
<img src='images/cowraff.png' align="right"/> 
</div>

<div class="bottom">
&nbsp;
</div>

</div>

<div class="down">
<P>&nbsp; K. Solutions &copy;. All rights reserved.</P>
</div>



</div>
</body>
</html>

**LadynRed** · 08-31-2009, 04:15 PM

Code:

positioning:absolute;

is incorrect, it's simply "position".

Quote:

div.animal
{
height:351px;
z-index:-1;
positioning:absolute;
bottom:100px;
}

I would put this image in as a background on your div.page, then set it to:

Code:

background:#99CCFF url(images/cowraff.png) no-repeat right bottom;

**Chris_123K** · 08-31-2009, 04:27 PM

thanks for the quick reply LadynRed,

ps. this forum is great.