| You are here: DEVPPL ‹ Forum ‹ Programming ‹ CSS Forum |
NOTIFICATIONS
|
|
|||||||||||||||
Login |
Help: Css background image problems
9 posts
• Page 1 of 1
0
Help: Css background image problems
by Inthedogbox » Fri Jun 27, 2008 4: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:
anyway. here's the site code.
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.
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:
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
- Reputation: 0
- Posts: 18
- Joined: Fri Jun 27, 2008 4:02 pm
- Highscores: 0
- Arcade winning challenges: 0
Help: Css background image problems - Sponsored results
- Sponsored results
0
by Inthedogbox » Fri Jun 27, 2008 4: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?
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
- Reputation: 0
- Posts: 18
- Joined: Fri Jun 27, 2008 4:02 pm
- Highscores: 0
- Arcade winning challenges: 0
0
by Rangana » Fri Jun 27, 2008 11: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.
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.
- Rangana
- Reputation: 1
- Posts: 935
- Joined: Wed Feb 27, 2008 6:14 am
- Location: Cebu City Philippines
- Highscores: 0
- Arcade winning challenges: 0
0
by Inthedogbox » Sat Jun 28, 2008 6:44 am
how do i ajust the width?
it's a 860x80 file.
so i have to ajust it in my css? :S
it's a 860x80 file.
so i have to ajust it in my css? :S
- Inthedogbox
- Reputation: 0
- Posts: 18
- Joined: Fri Jun 27, 2008 4:02 pm
- Highscores: 0
- Arcade winning challenges: 0
0
by Inthedogbox » Sat Jun 28, 2008 6:56 am
hmm.. okay. why is it that im getting a smaller version on page?
i dont think thats normal
also, i added
but it says it's not vallid?
it's im my head tags and everything :S
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
- Reputation: 0
- Posts: 18
- Joined: Fri Jun 27, 2008 4:02 pm
- Highscores: 0
- Arcade winning challenges: 0
0
by Rangana » Sat Jun 28, 2008 7: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
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
- Rangana
- Reputation: 1
- Posts: 935
- Joined: Wed Feb 27, 2008 6:14 am
- Location: Cebu City Philippines
- Highscores: 0
- Arcade winning challenges: 0
- Inthedogbox
- Reputation: 0
- Posts: 18
- Joined: Fri Jun 27, 2008 4:02 pm
- Highscores: 0
- Arcade winning challenges: 0
|
|