Sun, 2007-06-10 05:25
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
Sun, 2007-06-10 06:12
#1
Sorry to ask the obvious but
Sorry to ask the obvious but is the path to your image correct?
Fat Freddy
Sun, 2007-06-10 06:59
#2
yehh, if you meant the path
yehh, if you meant the path in the in the css file, yes the image file is right
Sun, 2007-06-10 07:09
#3
can you provide a link please
can you provide a link please
Sun, 2007-06-10 07:14
#4
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.
Sun, 2007-06-10 07:22
#5
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.
Sun, 2007-06-10 08:00
#6
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
Sun, 2007-06-10 08:18
#7
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!
| Attachment | Size |
|---|---|
| index.html | 502 bytes |
| css.txt | 510 bytes |
| bgheader_01.gif | 21.82 KB |
Sun, 2007-06-10 09:01
#8
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.
Sun, 2007-06-10 09:39
#9
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!
Sun, 2007-06-10 09:39
#10
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?
Sun, 2007-06-10 09:50
#11
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?
Sun, 2007-06-10 10:02
#12
Came up out of nowhere!
Came up out of nowhere! that's helpfull 
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.
Sun, 2007-06-10 10:13
#13
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.
Sun, 2007-06-10 10:23
#14
I meant that Hugo hd got the
I meant that Hugo hd got the correct answer!
Sun, 2007-06-10 10:45
#15
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
When you say "put them together" how exactly?
Sun, 2007-06-10 10:52
#16
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
| Attachment | Size |
|---|---|
| Picture 1.png | 342.97 KB |
Sun, 2007-06-10 10:56
#17
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
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;
Sun, 2007-06-10 11:02
#18
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.
Sun, 2007-06-10 11:11
#19
wow..i got heaps to do then.
wow..i got heaps to do then. I should really get started quik.
many thanks
paul