Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    89
    Thanks
    27
    Thanked 0 Times in 0 Posts

    Where did my background go?

    Hello!!

    I have an 800px wide header, that will contain 2 lines of navigation right aligned (about 500px wide) and the logo, left aligned 600 px wide. so i thought (yes, i am a CSS newbie and clueless with it) if i used the logo as a background, and had it left aligned, the two lines of navigation would just float gracefully over the top of the logo and if i margined correctly, they would intersect like puzzle pieces (logo has a bottom jutting out part, nav has a jutting out top part) ...i feel like i'm close to having it, but the background image won't show..

    here's the header css
    Code:
    #header {
    	margin: 0px;
    	background-image:url('images/logo.jpg');
    	background-repeat: no-repeat;
    	background-attachment:fixed;
    	background-position: left;
    }
    and then in the HTML i have the 2 divs for the navigation inside the header tag....
    i originally had the logo as a png, and through that might be causing problems but nope...must be something with my (less than brilliant) coding....but hey, i'm learning!!!

    carrie

    thanks in advance for any help, i soooo appreciate it!!

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    You really shouldn't have the logo as a background. It's a semantic and real part of the page, instead of being just decoration. What if a blind person goes to your site? They hear nothing.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Quote Originally Posted by CyanLight View Post
    You really shouldn't have the logo as a background. It's a semantic and real part of the page, instead of being just decoration. What if a blind person goes to your site? They hear nothing.
    Not if you have a page heading (h1) as title.

    intcon, do you happen to have floated elements inside that header element? Set the header’s overflow to “auto” and see what it does. And please post your entire HTML and CSS because that snippet doesn’t tell us anything about the issue.

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    89
    Thanks
    27
    Thanked 0 Times in 0 Posts
    thanks cyan...i'll remember that....

    i don't have the floated elements in the header as of yet, but have the coding for them ready to go in...

    here's both codes...

    Code:
    body {
     	margin:0px auto;
        padding:0;
        border:0;			
        width:800px;
        background:#000;
    	background-image:url('images/background.jpg');
        font-family: Arial, Helvetica, Verdana, Sans-serif;
    	font-size: 12px;
    	color:white;
    	text-align: center;
        }
    #wrapper {
    	padding: 0px;
    	border:0;
    	width: 800px;
    	margin:0px auto;
    	text-align: left;
    }
    #header {
    	margin: 0px;
    	background-image:url('images/logo.png');
    	width: 419px;
    	height: 141px;
    	background-repeat: no-repeat;
    	background-attachment:fixed;
    	background-position: left;
    	overflow: auto;
    }
    #side-a {
    	float: left;
    	width: 400px;
    }
    
    #side-b {
    	float: right;
    	width: 225px;
    }
    
    #content { 
    	float: left;
    	width: 21%;
    }
    
    #footer {
    	clear: both;
    	background: #000;
    and the html

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <link href="evans.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="wrapper">
      <div id="header"> </div>
        <div id="container">
        <div id="side-a"><img src="images/flash.jpg" width="396" height="269"></div>
    
        <div id="content"> CONTENT </div>
        <div id="side-b"> SIDE B </div>
      </div>
      <div id="footer"> FOOTER </div>
    </div>
    
    </body>
    
    </html>
    and here's what the header is supposed to look like when it's finished...



    this is before i put in all of the navigation and other fun goodies i've been working on! but the header/image/navigation issue keeps foiling me as the best way to lay it out....

    thanks again for your input....

    carrie

  • #5
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Nowhere in your code have you got a reference to header.jpg.
    Which is the reason its not displaying here. Do you want it to go at the top? Can you just replace header in your css with
    Code:
    #header {
    background-image:url(header.jpg);
    background-position:left center;
    background-repeat:no-repeat;
    height:125px;
    margin:50px 0 0;
    width:800px;
    }
    And see how this works
    You can not say you know how to do something, until you can teach it to someone else.

  • #6
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Ah no sorry i see what your trying to do you want that little logo to be the background then your gonna apply html over the top as text and links?

    your logo is 201 x 65 px and is called logo.png not logo1.png so those should be changed. then just put the correct margins in and i think remove background-attachment:fixed;

    like so

    Code:
    #header {
    	margin: 0px;
    	background-image:url('images/logo.png');
    	width: 201px;
    	height: 65px;
            margin-top:8px;
            margin-bottom:51px;
    	background-repeat: no-repeat;
    	background-position: left;
    }
    You should maybe get firebug to help with messing with this sort of thing
    You can not say you know how to do something, until you can teach it to someone else.

  • Users who have thanked timgolding for this post:

    intcon (03-30-2009)

  • #7
    New Coder
    Join Date
    Mar 2009
    Posts
    89
    Thanks
    27
    Thanked 0 Times in 0 Posts
    ok! that worked, i can see it now...thanks! i always hate it when it's something stupid/easy, but on the other hand i'm glad it wasn't anything too horrible! i;m just installing firebug as well..thanks for the tip!

    I'm sure you'll see me again..lol....this is the best and fastest forum i've ever posted to for help - and you all have the right answers! love it!

    carrie

  • #8
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Cool. Glad to be of assistance. Would be cool if you clicked the 'Thank user for helpful post button' just bellow the post when a user helps. Its nice for me to get my thanked counter up
    You can not say you know how to do something, until you can teach it to someone else.

  • #9
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    I had a thought last night. If you are going to be wanting to put html in side header then you should make the header the full width and height of the banner example you shown. that is 800px x 125px then you should put your logo in as a standard html image, with the required margin.

    CSS
    Code:
    #header {
    	width: 800px;
    	height: 125px;
    }
    
    #header img{
    	margin-top:8px;
            margin-bottom:51px;
    }
    HTML
    Code:
    <div id="header">
    	<img src="images/logo.png" alt="Evans" />
    </div>
    That will allow you to add html around the image you will need to look into floating divs to help putting the text on the right. The code shown has another advantage in that you can have an alt tag for your logo which will improve accessibility for visually impaired people.
    Last edited by timgolding; 03-30-2009 at 09:34 AM.
    You can not say you know how to do something, until you can teach it to someone else.

  • #10
    New Coder
    Join Date
    Mar 2009
    Posts
    89
    Thanks
    27
    Thanked 0 Times in 0 Posts
    well, that did put the logo where i wanted it, but i did
    Code:
    <div id="header">
    	<img src="images/logo.png" alt="Evans" />
    right floated in my 2 navigation elements and then ended with the header /div and now my navigation dropped down below the logo....even if i move the header /div up to right behind the image the navigation still drops down under the logo...tried a clear in the CSS in the #header but nope, that's not it either...bummer.

    carrie

  • #11
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Yes i forgot to warn you that you that when using float:right you will need to put your right floated div above the header in the HTML like so (don't ask me why!). Oh and you are correct to use clear, well clear:none;

    CSS:
    Code:
    #header img{
    	margin-top:8px;
            margin-bottom:51px;
    	float:left;
    	clear:none;
    }
    
    #top_navigation
    {
    	float:right;
    	clear:none;
    	text-align:right;
    }
    HTML
    Code:
    <div id="header">
    	<div id="top_navigation">
    		<a href="">Home</a> | <a href="">The Artist</a> | <a href="">Contact Us</a> | <a href="">FAQs</a> | <a href="">Login</a>
    	</div>
    	<img src="images/logo.png" alt="Evans" />
    </div>
    I noticed you have a login link on your navigation. Does that mean you plan to have a login script on your site? That should be fun helping you with that You'll need a server side scripting language and an SQL database for that.
    Last edited by timgolding; 03-30-2009 at 11:22 PM.
    You can not say you know how to do something, until you can teach it to someone else.

  • #12
    New Coder
    Join Date
    Mar 2009
    Posts
    89
    Thanks
    27
    Thanked 0 Times in 0 Posts
    and it almost works! lol....oh i suck at this so bad.....but i keep trying! ok...so here's what i have...is it easier to just point you to the page and link to the CSS or have it posted on here? I'll link, and if you prefer it the other way, let me know and i'll post it as well...
    HTML

    CSS

    as you can see the logo took off behind the main picture ....do i need to move the CSS around so the navigation is above the header? i've played with it moving the HTML around to different areas, but something always seems to get bumped to exactly the wrong spot....tell me it's something easy! and i'll tell you I don't have to worry about the login part...lol...it goes to a different website entirely! yeah!

    carrie

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello intcon,

    There's a few basic problems with your #header.
    • #header is 800px wide x 141px high
    • logo.png is 419px X 141px Plus your nav-b at 550px wide makes a total width of 969px
    • #header is the full width of it's containing div so there's no need to float it

    Your 141px high logo.png doesn't really fit over the background image, the bar on the bottom runs through the "life transformed into art" slogan.

    Without adjusting any image sizes, have a look at this - http://nopeople.com/intcon/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    New Coder
    Join Date
    Mar 2009
    Posts
    89
    Thanks
    27
    Thanked 0 Times in 0 Posts
    thanks for pointing that out excavator! i was trying to get the bottom navigation to fit almost like a puzzle piece above the art slogan so they would mesh..and only be 800px wide...maybe it would be easier to split the logo into two parts? that's why i originally had it as a background, so that they wouldn't "bump" into each other and make it too wide, or am i just making this more complicated than it needs to be? it's my first total CSS layout, so of course i totally appreciate any guidance! if you look at the picture i posted above of how the top header is supposed to look, you can see the meshing idea...

    carrie

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    The Evans part will fit fine, just crop that out.
    The slogan is just text and, since search engines like text, why not make that a heading?
    Like this - http://nopeople.com/intcon/
    Still need to pick a suitable font for the <h1> of course.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    intcon (03-31-2009)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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