PDA

View Full Version : I need help with background image.



effpeetee
Aug 17th, 2009, 12:03 PM
This page (http://www.exitfegs.co.uk/Deviousxx.html)is just to test a faux columns routine, but it does not work. The faux.gif is there but is not being used.:confused:

What have I done/not done that makes it fail?:D

Not bothered about anything else at present.


<!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" />
<base href="http://devious-design.co.uk/main_test.html" />
<title>Devious Design</title>
<style type="text/css">

*{
margin:0;
padding:0;
}

body {
background:url("faux1.gif") repeat-y ;
}
#wrapper {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
background-position: center;
background-color: #FFF;
overflow: auto;
border:6px solid red;
}

#sidebar {
width: 30%;

float: right;
background-color: #DDD;
color: white;
padding: 5px;
overflow: auto;
border:5px solid green;
}

.sidebar_text {
font-size: 12px;
color:#000;
}

.footer_text {
font-size: 10px;
color: #FFF;
}
#footer {
margin-left: auto;
margin-right: auto;
width: 780px;
margin-bottom: 0px;
border:2px solid red;
}

.text_spacing {
margin-left: 35px;
margin-right: 269px;
}

.central {
text-align: center;
}

ul {
margin: 0;
padding: 0;
list-style: none;
}

ul li {
position: relative;
float: left;
width: 130px;
}

li ul {
position: absolute;
top: 30px;
display: none;
}

ul li a {
display: block;
text-decoration: none;
text-align: center;
line-height: 20px;
color: #fff;
padding: 5px;
background: #000;
margin: 0px;
}




</style>
</head>

<body>ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffff
</body>
</html>


Frank.

abduraooft
Aug 17th, 2009, 01:14 PM
http://devious-design.co.uk/faux1.gif is not there!
Also, you'd need to add

html,body{
height:100%;
} to see it properly (after uploading that image)

effpeetee
Aug 17th, 2009, 01:52 PM
thanksabduraooft,but I have checked the site and it is there. I uploaded it again and got the response "faux1.gif already exists, do you want to replace it. I answered yes.

faux1.gif is 4px by 1024 px long and is in the root directory.

The program still doesn't work I'm afraid. Not even on my own computer site. No error message either. I've added the extra code and re-posted it.

As I say, it doesn't work even on my editor.

Frank

abduraooft
Aug 17th, 2009, 02:01 PM
You have
<base href="http://devious-design.co.uk/main_test.html" />, so the code
body {
background:url(faux1.gif) top right repeat-y;}
looks at http://devious-design.co.uk for the image faux1.gif, which is not there.
Either remove that base or change your CSS like

body {
background:url(http://exitfegs.co.uk/faux1.gif) top right repeat-y;}

effpeetee
Aug 17th, 2009, 02:29 PM
Thanks abduraooft.

Oh wotta nah Siam. I had totally forgotten that <base>. No wonder it couldn't find the gif.

It's here. (http://www.exitfegs.co.uk/Deviousxx.html)

Thanks for staying with me.
All I need to do now is to produce the correct gif profile.

Frank

effpeetee
Aug 18th, 2009, 09:25 AM
Just remove the below code in style and put this within body style, Just try this, i am not sure
*{
margin:0;
padding:0;
}
Not sure what you mean.

That code has to start the css. It resets all browsers to zero for padding and margin.It gives all browsers a level starting point with respect to these.

What do you mean by body style. css must go in the <head> of the page.

Frank

effpeetee
Aug 18th, 2009, 10:00 AM
This is as far as I have got (http://exitfegs.co.uk/Design.html). I will have to leave it to somebody else now. I have reached the limit of my css.

Frank

bazz
Aug 18th, 2009, 04:09 PM
tut tut frank :D whats with the loads of br's and the table for the footer?

also, you don't need the


<div id='sidebar'>
<div class='p'>


just add this to your css for the 'p' section



#sidebar p {
stuff here
}


and if you want a gap between the


<div class='text_spacing'>

<h2>Welcome to Devious Design </h2>


either add a margin to the top of the h2 tag or padding to the top of the div.

bazz

effpeetee
Aug 18th, 2009, 05:49 PM
It's not my site bazz. I am helping another poster.

This is where I am at now (http://devious-design.co.uk/main_test.html). Still more to do. I want the original poster to carry on from here.

Frank

bazz
Aug 18th, 2009, 05:53 PM
ah OK. I thought it was your own thing and I was kiddin' you.
bazz