It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index Programming CSS Forum

Help: Css background image problems

Help: Css background image problems

Postby inthedogbox on Fri Jun 27, 2008 3:08 pm

Okay, so im designing a site for my new online community/magazine.
I'm not a wizzard with html/css, but i know what im doing.. enough to make a semi-decent site, anyway.

so ive got the code for page 1.
but with the background image for the header and footer (ill also be doing ones for the side and main divs when i fix this) im having a problem.

the footer div is 80px high, 860px wide.
i have an image for the background that is exactly the same dimensions.
but when i put it in for the background image, it apears smaller.. like this:
Image


anyway. here's the site code.
Code: Select all
<html><head><title> Keep Your Distance - Home </title>
<style type="text/css">
body{
   font-family: sans;
   font-size: 12px;
   font-color: white;
   background-color: #FFFFFF;}

a img{
   border: none;}

a:link{
   font-color: #777777;}

a:hover{
   font-color: white;}

a:active, visited{
   font-color: #7777777;}


.container{
   position: absolute;
   top: 0px;
   left: 15%;
   height: 1000px;
   width: 900px;
   z-index: 1;}

.head{
   position: absolute;
   top: 25px;
   left: 0px;
   height: 230px;
   width: 860px;
   border: 3px solid black;
   z-index: 2;
   background-color: #000000;
   background-image:
      url(/image/head_back.png);
      background-repeat: no-repeat;}

.nav{
   position: absolute;
   top: 270px;
   left: 0px;
   height: 70px;
   width: 860px;
   border: 0px;
   z-index: 2;
   letter-spacing: -5px;}

.main{
   position: absolute;
   top: 350px;
   left: 310px;
   height: 500px;
   width: 540px;
   border: 2px solid black;
   z-index: 2;
   padding: 5px;}

.side{
   position: absolute;
   top: 350px;
   left: 0px;
   height: 500px;
   width: 290px;
   border: 2px solid black;
   z-index: 2;
   padding: 5px;}

.foot{
   position: absolute;
   top: 890px;
   left: 0px;
   height: 80px;
   width: 860px;
   border: 3px solid black;
   z-index: 2;
   background-color: #000000;
   background-image:url(/image/foot_back.png);
   background-repeat: no-repeat;
   background-position: center;}

.banner_ad{
   position: absolute;
   top: 30px;
   left: 180px;
   height: 90px;
   width; 500px;
   border: 0px;
   background-color: transparent;
   z-index: 5;}

.logo_top{
   position: absolute;
   top: 120px;
   left: 35px;
   height: 110px;
   width: 490px;
   border: 0px;
   background-color: transparent;
   z-index: 3;}

.badge_top{
   position: absolute;
   top: 125px;
   left: 710px;
   height: 115px;
   width: 115px;
   border: 0px;
   background-color: transparent;
   z-index: 3;}




</style></head>
<body>
<div class="container">
   <div class="banner_ad">
      <a href="http://www.resistrecords.com" target="_blank"><img src="http://i304.photobucket.com/albums/   nn189/      carpathianx/isolationweb.gif"></a>
      </div>

   <div class="logo_top">
      <img src="http://i112.photobucket.com/albums/n181/hahaha_052/metro.png">
      </div>

   <div class="badge_top"></div>

   <div class="head"></div>

   <div class="nav"><center>
      <a href=""><img src="http://i112.photobucket.com/albums/n181/hahaha_052/home_nav.png"></a>
      <a href=""><img src="http://i112.photobucket.com/albums/n181/hahaha_052/content_nav.png"></a>
      <a href=""><img src="http://i112.photobucket.com/albums/n181/hahaha_052/win_nav.png"></a>
      <a href=""><img src="http://i112.photobucket.com/albums/n181/hahaha_052/friends_nav.png" height="70px" ></      a><a href=""><img src="http://i112.photobucket.com/albums/n181/hahaha_052/forum_nav.png"></a>
   </center></div>
   <div class="main">
      <img src="http://i112.photobucket.com/albums/n181/hahaha_052/news.png" width="200px"><br /><br /><br />
      <img src="http://guides.news.com.au/music/media/x350/141711_121703_carpathian_june_tour_06_1_.jpg" height="100px"          align="left">
      <b>Carpathian Release New CD And Announce Tour Dates</b><br />
      MELBOURNE'S Carpathian have released their newest CD, entitled "Isolation" on Resist Records.<br />
      Release tour across Australia throughout July and August.<br /><br />
      <a href="" align="right">>> Read More</a><br /><br /><br /><br />
      <img src="http://i112.photobucket.com/albums/n181/hahaha_052/sep_main.png" height="3px" width="500px">

   </div>
   <div class="side">
      <img src="http://i112.photobucket.com/albums/n181/hahaha_052/reviews.png" width="200px"><br /><br /><br />
      <img src="http://www.pyromusic.net/images/review_covers/Miles_Away-Rewind,_Repeat-Review.jpg"                width="60px" height="60px" align="left">
      <b align="top">Miles Away - "Rewind, Repeat.."</b><br />
      <a href="">>> Review</a><br /><br /><br /><br />
      <img src="http://i112.photobucket.com/albums/n181/hahaha_052/sep_side.png" height="2px" width="250px"><br /><br /><br />

      <img src="http://www.commonbondrecords.com/images/cd-cbr19.gif" width="60px" height="60px" align="left">
      <b>Break Even - "Young At Heart"</b><br />
      <a href="">>> Review</a><br /><br /><br /><br />
      <img src="http://i112.photobucket.com/albums/n181/hahaha_052/sep_side.png" height="2px" width="250px"><br /><br /><br />

      <img src="http://www.resistrecords.com/images/releases/h2o_nothingtoprove.jpg" width="60px" height="60px" align="left">
      <b>H20 - "Nothing To Prove"</b><br />
      <a href="">>> Review</a><br /><br /><br /><br />
      <img src="http://i112.photobucket.com/albums/n181/hahaha_052/sep_side.png" height="2px" width="250px"><br /><br /><br />

      <img src="http://ecx.images-amazon.com/images/I/51FgF054f7L.jpg"" width="60px" height="60px" align="left">
      <b>The Ghost Inside - "Fury And The<br />Fallen Ones"</b><br />
      <a href="">>> Review</a><br /><br /><br /><br />
      <img src="http://i112.photobucket.com/albums/n181/hahaha_052/sep_side.png" height="2px" width="250px"><br /><br /><br />
   </div>

   <div class="foot"><center><small>
      <font color="#FFFFFF"><br />
      copyright - all content - keep your distance<br />
      all rights reserved. 2008.<br /><br /><br />
      <a href="">contact</a> / <a href="">advertise with us</a>
      </font>
   </small></center></div>
</div>
</body></html>


it's not 100% finished. obviously.
and all other images are hosted externaly, so they'll work on your comp.
(about badge_top: still working on image for in here)

CC is apreciated, also.
inthedogbox
 
Posts: 18
Joined: Fri Jun 27, 2008 3:02 pm

Postby inthedogbox on Fri Jun 27, 2008 3:10 pm

oh, a little edit too:

i know the links dont go anywhere, yet.
and why arent my a: link etc css parts working?
what am i doing wrong there?
inthedogbox
 
Posts: 18
Joined: Fri Jun 27, 2008 3:02 pm

Postby rangana on Fri Jun 27, 2008 10:41 pm

First, don't miss a DTD on every pages.
Second, You've got a good number of deprecated tags and attributes.
You might also find it useful to validate your code:
http://validator.w3.org/ - HTML Validator
http://jigsaw.w3.org/css-validator/ - CSS Validator

Lastly, for your problem, adjust your image width.

Hope it helps.
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines

Postby inthedogbox on Sat Jun 28, 2008 5:44 am

how do i ajust the width?

it's a 860x80 file.
so i have to ajust it in my css? :S
inthedogbox
 
Posts: 18
Joined: Fri Jun 27, 2008 3:02 pm

Postby rangana on Sat Jun 28, 2008 5:48 am

No, adjust the image itself. Try to make it 900px.
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines

Postby inthedogbox on Sat Jun 28, 2008 5:56 am

hmm.. okay. why is it that im getting a smaller version on page?
i dont think thats normal



also, i added
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


but it says it's not vallid?
it's im my head tags and everything :S
inthedogbox
 
Posts: 18
Joined: Fri Jun 27, 2008 3:02 pm

Postby rangana on Sat Jun 28, 2008 6:03 am

See the article i've given, it explains better than I do ;)

Also, I don't know about how to explain it, but there really are times that we splice on photo-editor does'nt really match on what we expected them to be, as a result, make another image, but you should'nt be worried that much, just enlarge the width and puff, you're worries are over :)
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines

Postby inthedogbox on Sat Jun 28, 2008 6:25 am

its all fixed anyway :)
inthedogbox
 
Posts: 18
Joined: Fri Jun 27, 2008 3:02 pm

Postby rangana on Sat Jun 28, 2008 8:16 am

Glad to help ;)
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines


Who is online

Users browsing this forum: No registered users and 0 guests