My first try at positioning elements with CSS - a non-table approach to page layout
I'm really not having too much luck at all with my first attempt at CSS-only page layout.
Here's the URL for what I'm working on: http://dev.eventidewebdesign.com/ken...n/newhome2.php
Here's the code for the whole page:
I can't get the image to display. (Aside from the <img> tag to show it's really there,) I can get it to display as a background image of the <body> tag, but I thought it would be better practice to put it in a <div> as a child of <body>. Also, I have to put a nav menu and image in a div immediately below the header image on the left side of the page (they will mesh seamlessly and look like they are one image).
<body style="margin: auto; width: 1000px; font-size: .8em;>
<div id="header" style="display: inline; height: 200px; background-image: url(images/header.png); background-repeat: no-repeat; background-attachment: fixed; background-position: center 5px;">
<h2>Proof the image is there:</h2>
<p>The below image should be at the top of the page!</p>
<img src="images/header.png" />
What am I missing here?
Firstly can I please advise that if you are going to go down the route of using CSS (which you should) then please start as you mean to go on (or should) and don't style inline - put all your styles in an external stylesheet. With regard to your style problem, you can put all your separate background style properties in one like so (basing on moving your styles to a stylesheet, not using inline)
Try this and see if it works (put it inline if you must to test first).
background: url('images/header.png') no-repeat fixed center 5px;
I should have added a disclaimer! Yes, I will move everything to a separate stylesheet eventually. When I'm just getting started I do inline styling because it's easier than switching back and forth between files as I make constant adjustments. When I'm happy with everything, I'll separate the CSS out.
I tried your suggested code, but it didn't work. See here.
However, looking at your source code (keeping things inline for you at the moment) your code is incorrect as you have not declared style. Try
<div id="header" style="background: url('images/header.png') no-repeat fixed center 5px; height: 200px;"></div>
Well, that is embarrassing! I even found a missing double quote to close the <body> styling!
But I fixed those and that still didn't get the image to show...
I tried adding "display: inline:" to the image div, but that didn't have an effect, either.
I have just altered the css in your page (online) and removed the display: inline and the image appears
This has been resolved by an awesome dude over at HTML forums. For a view of what I wanted ultimately, go to http://dev.eventidewebdesign.com/ken...de/newhome.php. You'll have to hurry if you want to see it, though, as I'm about to move those files to get ready for continuing my work on this project...
If I've moved them and you'd like to see the result email me via my profile and I'll get back to you.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread