19 replies [Last post]
polomolo
Offline
Regular
Last seen: 14 years 32 weeks ago
Joined: 2007-06-10
Posts: 16
Points: 0

hi,
I'm still a beginner in CSS, but i know quite well as i've practiced on templates and such on how to set it up right. But i have problems with starting from scratch where i don't get all that scructural stuff in it. But i'll learn hopefully.
anyway my problem is that i'm trying to add an image into the header to have the Main Header (bgheader.gif) in the div tag. I can see it in the design bit on the bottom of Dreamweaver, but whenever i view it in a browser (any) it just doesn't show, all i can see is the background color.
But when i try and type in a simple text in the header div tag it does show up in the browser. this is so frustrating i just don't get why its not showing up! last time i had this problem i tried fixing it and it worked when i saved the image (in photoshop) as Save for Web and saved it as a low sized file. thats when it actually came up (for some reason). But i do have the size pretty small now its like 35k...and as i said i've got the width and hight right for the header tag that i am being able to see the image right in that square.

Please help, this is due next week, i didn't think i'd have problems like this. Thank you.

Paul

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 27 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Sorry to ask the obvious but

Sorry to ask the obvious but is the path to your image correct?

Fat Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

polomolo
Offline
Regular
Last seen: 14 years 32 weeks ago
Joined: 2007-06-10
Posts: 16
Points: 0

yehh, if you meant the path

yehh, if you meant the path in the in the css file, yes the image file is right

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 27 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

can you provide a link please

can you provide a link please

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

polomolo
Offline
Regular
Last seen: 14 years 32 weeks ago
Joined: 2007-06-10
Posts: 16
Points: 0

my uni server isn't working

my uni server isn't working so i'm not able to put it on the net yet. But i can send you a screenshot of it.

polomolo
Offline
Regular
Last seen: 14 years 32 weeks ago
Joined: 2007-06-10
Posts: 16
Points: 0

if i try to replace an image

if i try to replace an image with another one in a template that Does Work, it still doesn't show, it just shows a blank space. so its obviously a problem with the image.

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 27 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Just paste ALL your html and

Just paste ALL your html and css for this page
We'll have a look at it

Fat Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

polomolo
Offline
Regular
Last seen: 14 years 32 weeks ago
Joined: 2007-06-10
Posts: 16
Points: 0

ok here are the files, their

ok here are the files, their not much just a simple page, i havn't done much either.

I couldnt add css files (i don't think i'm allowd) so i hope its okay in a txt file. also the gif file is only the header bit of the website.

many thanks!

AttachmentSize
index.html 502 bytes
css.txt 510 bytes
bgheader_01.gif 21.82 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

background-image:url(Images/b

background-image:url(Images/bgheader_01_01.gif);

So your image directory is a sub directory of your CSS directory?

As that is where your asking the stylesheet to look for the image.

If is as more normal your image directory is off the document root as is the CSS directory i.e they are both at the same level then you need to back up one directory, out of the CSS one, back up to the doc root to find the image directory which would be /images/ or ../images/ (I wouldn't uppercase the I)

But I'm presuming you have tried playing with alternate paths as it's the obvious answer and easy to check.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 27 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Hugo

Hugo wrote:
background-image:url(Images/bgheader_01_01.gif);

So your image directory is a sub directory of your CSS directory?

As that is where your asking the stylesheet to look for the image.

If is as more normal your image directory is off the document root as is the CSS directory i.e they are both at the same level then you need to back up one directory, out of the CSS one, back up to the doc root to find the image directory which would be /images/ or ../images/ (I wouldn't uppercase the I)

But I'm presuming you have tried playing with alternate paths as it's the obvious answer and easy to check.

By George ...I think he's cracked it!

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

polomolo
Offline
Regular
Last seen: 14 years 32 weeks ago
Joined: 2007-06-10
Posts: 16
Points: 0

Okay i got some luck... for

Okay i got some luck...
for some reason i tried doing something about the images folder like Hugo said and out of nowhere it came up. lol...
any tips on how to put the image in the middle of the page? i got the background-position set to center top. isn't that enough to tell it what to do?

polomolo
Offline
Regular
Last seen: 14 years 32 weeks ago
Joined: 2007-06-10
Posts: 16
Points: 0

fatfreddy wrote:Hugo

fatfreddy wrote:
Hugo wrote:
background-image:url(Images/bgheader_01_01.gif);

So your image directory is a sub directory of your CSS directory?

As that is where your asking the stylesheet to look for the image.

If is as more normal your image directory is off the document root as is the CSS directory i.e they are both at the same level then you need to back up one directory, out of the CSS one, back up to the doc root to find the image directory which would be /images/ or ../images/ (I wouldn't uppercase the I)

But I'm presuming you have tried playing with alternate paths as it's the obvious answer and easy to check.

By George ...I think he's cracked it!

who's cracked what?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Came up out of nowhere!

Came up out of nowhere! that's helpfull Smile any actual ideas as to what was wrong?

By the looks of the graphic, it's width 800px, the header width 800px, it's not the background you need to be centering but the layout i.e a wrapper of some description that holds your layout elements and to which you apply auto margins to center it in the viewport, or you could apply width to the body element and center that.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

polomolo
Offline
Regular
Last seen: 14 years 32 weeks ago
Joined: 2007-06-10
Posts: 16
Points: 0

i'll get it to work somehow

i'll get it to work somehow lol...thanks for all the help.
about the problem i really seem to not know what the problems are whenever they come up in dreamweaver and then i do stuff add things and take some out, and outa nowhere it works. But one thing that i can think of is the fact that i put the background-repeat seperately to the background in the layer...like this:

#header {
width: inherit;
height: 223px;
background-image:url(Images/bgheader_01_01.gif);
background-repeat: no-repeat;
background-position:center top;
}

the image just disappearing as soon as i put them both together.

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 27 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

I meant that Hugo hd got the

I meant that Hugo hd got the correct answer!

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

polomolo wrote:i'll get it

polomolo wrote:
i'll get it to work somehow lol...thanks for all the help.
about the problem i really seem to not know what the problems are whenever they come up in dreamweaver and then i do stuff add things and take some out, and outa nowhere it works. But one thing that i can think of is the fact that i put the background-repeat seperately to the background in the layer...like this:

#header {
width: inherit;
height: 223px;
background-image:url(Images/bgheader_01_01.gif);
background-repeat: no-repeat;
background-position:center top;
}

the image just disappearing as soon as i put them both together.

Firstly DW is a piece of **** well a large part of it is so don't rely on anything it shows you.

With property declarations it's considered best practise to use the shorthand versions so your background decs become:

background:url(Images/bgheader_01_01.gif) no-repeat center top;

So are you saying that this wasn't a path problem then? this is what we're trying to establish Smile

When you say "put them together" how exactly?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

polomolo
Offline
Regular
Last seen: 14 years 32 weeks ago
Joined: 2007-06-10
Posts: 16
Points: 0

lol..yeh...thanks guys. Got

lol..yeh...thanks guys.
Got some minor problems i'm facing, if you don't mind helping...

#header {
width: inherit;
height: 223px;
background-image:url(Images/bgheader_01_01.gif);
background-repeat: no-repeat;
background-position:center top;
}

#sidemenu {
width: inherit;
height: 377px;
width: inherit;
background-image:url(Images/sidemenu_02.jpg);
background-repeat: no-repeat;
float: inherit;
background-position: left;
}

My site has to be 800x600
so the rest of the image on the left hand side under this header is my side menu, its just something i'm trying to put on. But its being annoying and moving around when i reduce the size of the browser window. I know im doin this completely wrong, but i don't really need to get this so perfect its like my 3rd website. so i just need it to be in structure.
I tried putting a margin-left and margin-right to keep it in place. but its not working

AttachmentSize
Picture 1.png 342.97 KB
polomolo
Offline
Regular
Last seen: 14 years 32 weeks ago
Joined: 2007-06-10
Posts: 16
Points: 0

Hugo wrote:polomolo

Hugo wrote:
polomolo wrote:
i'll get it to work somehow lol...thanks for all the help.
about the problem i really seem to not know what the problems are whenever they come up in dreamweaver and then i do stuff add things and take some out, and outa nowhere it works. But one thing that i can think of is the fact that i put the background-repeat seperately to the background in the layer...like this:

#header {
width: inherit;
height: 223px;
background-image:url(Images/bgheader_01_01.gif);
background-repeat: no-repeat;
background-position:center top;
}

the image just disappearing as soon as i put them both together.

Firstly DW is a piece of **** well a large part of it is so don't rely on anything it shows you.

With property declarations it's considered best practise to use the shorthand versions so your background decs become:

background:url(Images/bgheader_01_01.gif) no-repeat center top;

So are you saying that this wasn't a path problem then? this is what we're trying to establish Smile

When you say "put them together" how exactly?

lol yeh i realized, its so complicated.

yeh i should'v done that...
when i said put them together i meant like you just showed me. but obviously

This
background:url(Images/bgheader_01_01.gif) no-repeat center top;

Wont work like This
background-image:url(Images/bgheader_01_01.gif) no-repeat center top;

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You simply haven't yet

You simply haven't yet constructed a suitable layout, look back at my earlier post that mentioned wrapper/body width holding your elements.

I think you need to study up on two column layouts you will need to float your sidebar and then margin a content area away from it by the sidebars width plus a bit.

The header spans the full width of either the wrapper or body width the other elements will naturally flow below it.

As for height you should never view a layout as having to have height , content dictates the height, pimarily, there are always exceptions though.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

polomolo
Offline
Regular
Last seen: 14 years 32 weeks ago
Joined: 2007-06-10
Posts: 16
Points: 0

wow..i got heaps to do then.

wow..i got heaps to do then. I should really get started quik.
many thanks

paul