Hi, I am stumped w/ CSS. I have tried putting a background image in the css sheet, then on the html if I put <div id=" the image does not appear. If I add the image <img src=" within the overall <div id=" it then works. I have to do this for a header, container, footer On top of that, I am trying to add text above the image. No matter what it breaks up the image. Best way to explain this might be to say ------- Here is my HTML: <body> <div id="header"> <img src="images/header.jpg" /> </div> <div id="indexmain"><img src="images/index_main.jpg" /> </div> <div id="footer"> <img src="images/footer.jpg"/> </div> </div> </body> Then CSS is: body { background: #313430; margin-left: auto; margin-right: auto; overflow: hidden; padding: 0px 0px 0px 0px; width: 775px; } Header { background: url("../images/header.jpg") fixed center no-repeat; height: 315px; margin-left: auto; margin-right: auto; overflow: hidden; padding: 0px 0px 0px 0px; width: 775px; } #indexMain { background: url("../images/index_main.jpg") fixed center repeat-y; height: auto; margin-left: 0px; margin-right: 0px; overflow: hidden; padding: 0px 0px 300px 0px; width: 775px; } Footer { background: url("../images/footer") fixed center repeat-y; height: auto; margin-left: auto; margin-right: auto; overflow: hidden; padding: 0px 0px 0px 0px; width: 775px; } ------ Is there a better way to go about this?
You have case problems - 'Header' and 'header' and also Header in your styles has to have the # to be a style.
Can you explain a little more about the "style" with a #? What does that do? What is the difference? I've only just begun to get more involved with CSS Thanks!!!
Also, when I correct the Upper/lower case issue & added the # It then showed the header but got rid of the index_main & footer.
I should add The index_main & footer are images that are only 1 pixel high so they are meant to pad or extend about 300 pixels & 50 pixels. Does this make sense? I'm just thinking maybe another setting isn't right to get it working???
It you have a . before the style name it is a class style, if you have a # it is an id style. If you have neither a . or # is a style on a default html tag like body, a, img, div. You will also need the # before Footer.
I'm confused When trying to write text using either <div id="h1">Header</div> or <div class="h1">Header</div> The font does not change - for instance the font color should be white. And, after making those changes the index_main & footer images are no longer showing up. Only the header
For that to work you would need a style called either .h1 or #h1. Otherwise you can create a style called h1 { } and rather than <div class="h1"> just have <h1>
For some reason my 3 images are all run over each other in the middle of the page. Here is my CSS code: #header { background: url("../images/header.jpg") fixed center no-repeat; height: auto; margin-left: 0px; margin-right: 0px; overflow: hidden; padding: 0px 0px 0px 0px; width: 775px; } #indexMain { background: url("../images/index_main.jpg") fixed center repeat-y; height: auto; margin-left: auto; margin-right: auto; overflow: hidden; padding: 350px 0px 0px 0px; width: 775px; } #footer { background: url("../images/footer.jpg") fixed center repeat-y; height: auto; margin-left: auto; margin-right: auto; overflow: hidden; padding: 0px 0px 50px 0px; width: 775px; } HTML: <body> <div id="header"> </div> <div id="indexMain"> </div> <div id="footer"> </div> </body>
I apologize if this sounds harsh, not meant to be; go through this tutorial. It looks like your really misunderstanding the basic functions of HTML and CSS. I don't necessarily support this software nor am I an affiliate - it is just a good tutorial: http://www.westciv.com/style_master/academy/hands_on_tutorial/02.css_intro.html
basic HTML & CSS are not helpful either as I am a bit past that point. What I asked for was if anyone had a GOOD BOOK RECOMMENDATION. If not, please don't post, takes too much time to say, yes I have seen that.
Dude, your getting your threads mixed up. Here you're asking about your code and what would work better. It would be a bit much if I were to go through this code and explain what you did wrong. To me it looks like you have a misunderstanding of the basics and imho you should review some of the basics, specially positioning. Go through the tutorial, it will be quicker. Or get one of the books I listed in your other thread. Best of luck to you.