PDA

View Full Version : Space under my background image



brownleaf
Dec 4th, 2008, 10:07 AM
------

Excavator
Dec 4th, 2008, 10:34 AM
Hello brownleaf,
it might be easier to see what's going on if you'd give us a link. It can be difficult to tell what an image is doing when we don't have the image.

The CSS you quote is doesn't load an image so that's not much help either. If you don't have a test site up that you can link us to, post the entire html and css.

brownleaf
Dec 4th, 2008, 11:50 AM
------

jerry62704
Dec 4th, 2008, 04:10 PM
Clean up your code would be a good first start. Multilple html for example. Lower case the tags so it will validate. It looks like your div tags are not balanced. Close all tags.

Once that is done, you might want to rethink the use of tables to position things. Further, you have css, why use so many break tags to position in that case?

I "pretty printed" the code so the two missing tags show up easily:


<!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" lang="en" xml:lang="en">
<head>
<title>SITE</title>

<style type="text/css">
/* Body */
html,body,#bgimg,#bgimg table,#bgimg td, #textdiv{
width:100%;
height:100%;
overflow:hidden;
}
body{
color : #000000;
font-size: 12px;
font-family: Arial;
}
/* Body End */

/* Headings */
h1{
font-weight: normal;
font-size: 50px;
color : #000000;
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
z-index:130;
padding: 20px 0px 20px 0px;
margin-bottom: 30px;
margin-top: 0px;
border-bottom:1px solid #D8D8D8;
}
h2{
text-transform: uppercase;
font-family: arial;
margin-left:-15px;
margin-right:-15px;
margin-top:-5px;
margin-bottom:5px;
padding: 5px 0px 5px 20px;
color:#000000;
font-weight: bold;
text-align: left;
font-size: 12px;
margin-bottom: 0px;
}
/* Headings End */

/* Background */
#bgimg div{
z-index:10;
position:absolute;
width:200%;
height:200%;
top:-50%;
left:-50%
}
#bgimg td{
z-index:10;
vertical-align:middle;
text-align:center
}
#bgimg img{
z-index:10;
min-height:50%;
min-width:50%;
margin:0 auto
}
/* Background End */

/* divs */
#textdiv{
font-family: arial;
font-size: 12px;
color: #000000;
position:absolute;
top:0;
left:0;
z-index:50;
overflow:auto;
line-height:150%;
}
.link a{
color: #ffffff;
background:#000000;
font-family: arial;
font-size: 12px;
line-height:150%;
text-decoration:none;
}
.link a:hover{
color: #000000;
background:#ffffff;
font-family: arial;
font-size: 12px;
white-space:nowrap;
line-height:150%;
text-decoration:none;
}
.white {
z-index:80;
position:absolute;
top:40px;
left:20%;
width:550px;
padding-bottom:10px
}
.white span{
right:550px;
position:absolute;
text-align: right;
width: 100%;
}
.white span a{
padding: 10px;
font-family: arial;
font-size: 12px;
color: #ffffff;
background:#000000;
line-height:150%;
text-decoration:none;
border:thin;
border-color:#FFFFFF;
border-style:solid;
}
.white span a:hover{
text-decoration:none;
font-family: arial;
font-size: 12px;
color: #000000;
background:#cccccc;
line-height:150%;
}
.white div{
z-index:80;
background:#ffffff;
padding:15px;
}
/* divs End */
</style>

</head>

<body>
<div id="bgimg">
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="nodollar.jpg"/></td></tr>
</table>
</div>
</div>

<div id="textdiv">
<div class="white">
<span><br /><br /><br />
<a href="http://google.com" class="nav">Info</a>
<br /><br /><br />
<a href="http://google.com" class="nav">Resume</a>
<br /><br /><br />
<a href="http://google.com" class="nav">Writing</a>
<br /><br /><br />
<a href="http://gmail.com" class="nav">Artwork</a>
<br /><br /><br />
<a href="http://google.com" class="nav">Shop</a>
<br /><br /><br />
</span>
<div>
<div class="link">
<h1><b>INFO</b></h1>
<h2>News Update</h2>
<p>A gs.</p>

<br /><br />
<a href="http://google.com">Next Page &raquo;</a>
</div>
</div>
</body>
</html>

Finally, you are using links in a span and using those <br>s to space them. It would be better to put them in a list.

Excavator
Dec 4th, 2008, 05:52 PM
There is still no image. Still can't see what's happening.
What size is <img src="nodollar.jpg"/>?

brownleaf
Dec 5th, 2008, 10:16 AM
It's 1392x1068 pixels

brownleaf
Dec 5th, 2008, 12:55 PM
Oh I figured it out! Thank you!