www.webdeveloper.com
Results 1 to 7 of 7

Thread: My first try at positioning elements with CSS - a non-table approach to page layout

Hybrid View

  1. #1
    Join Date
    Dec 2009
    Location
    West-Central, MN
    Posts
    41

    Question My first try at positioning elements with CSS - a non-table approach to page layout

    Hi all,

    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:
    HTML Code:
    <!DOCTYPE html>
    
    <html lang="en">
    
    	<head>
    		<title>Home Page</title>
    	</head>
    	<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;">
    		</div>
    		
    		<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" />
    	</body>
    </html>
    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).

    What am I missing here?
    ______________________________________________
    Eventide Web Design, LLC

  2. #2
    Join Date
    Aug 2012
    Posts
    155
    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)
    Code:
    #header {
      background: url('images/header.png') no-repeat fixed center 5px;
      height: 200px;
    }
    Try this and see if it works (put it inline if you must to test first).

  3. #3
    Join Date
    Dec 2009
    Location
    West-Central, MN
    Posts
    41
    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.
    ______________________________________________
    Eventide Web Design, LLC

  4. #4
    Join Date
    Aug 2012
    Posts
    155
    OK

    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

    Code:
    <div id="header" style="background: url('images/header.png') no-repeat fixed center 5px; height: 200px;"></div>

  5. #5
    Join Date
    Dec 2009
    Location
    West-Central, MN
    Posts
    41
    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.
    ______________________________________________
    Eventide Web Design, LLC

  6. #6
    Join Date
    Aug 2012
    Posts
    155
    I have just altered the css in your page (online) and removed the display: inline and the image appears

  7. #7
    Join Date
    Dec 2009
    Location
    West-Central, MN
    Posts
    41
    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.
    ______________________________________________
    Eventide Web Design, LLC

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles