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.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Lining up the image

    Afternoon guys, I'm having some trouble lining up this image, It was cropped down in photoshop and now i'm trying to add it as you can see in my code but if you preview it you will see it is slightly off and I have no idea why!?!?

    HTML
    Code:
    <!doctype html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html"; charset=UTF-8" />
    	<title>Awesome Website from CSS-tricks</title>
    	<link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    <body>
    
    	<ul id="nav">
    		<li></li>
    	</ul>
    
    </body>
    </html>

    CSS

    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	font-size: 62.5%;
    	font-family: Helvetica, sans-serif;
    	background: url(images/body-bg.png) repeat-x top #f5ecd4;
    }
    
    #nav {
    	height: 336px; 
    	width: 800px;
    	margin: 0 auto;
    	background: url(images/header-bg.jpg) no-repeat;
    }
    I have also attached the edited image file
    Attached Thumbnails Attached Thumbnails Lining up the image-header-bg.jpg  

  • #2
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Anyone know why the image is distorted as it is? I previewed it in Google chrome by the way

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Attached is a print screen of the problem
    Attached Thumbnails Attached Thumbnails Lining up the image-printscreen.jpg  

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Try:

    Code:
    #nav {
    	height: 336px; 
    	width: 800px;
    	margin: 0 auto;
    	background: url(images/header-bg.jpg) no-repeat;
            list-style-type:none
    }
    Looks like it's the bullet point that's the problem.

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hi,

    I put in the code you suggested and it has removed the bullet however the image is still in the position as shown in the picture in my earlier post :/

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    That suggests the problem is with the image itself. Can you provide a link to your page, since without the image it's difficult to be of more help.

  • #7
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts
    Putting the <ul id-"nav"> in an outer <div> and applying background image to that <div> would help you control it's positioning.

    "Bulletproof Web Design" book addressed such problems. And here are some search results:

    http://css-tricks.com/how-to-resizea...kground-image/
    http://www.w3schools.com/cssref/css3...round-size.asp gives example of CSS3 "size"

    div
    {
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
    }

    From http://www.w3schools.com/css/css_background.asp
    CSS properties used for background effects:
    background-color
    background-image
    background-repeat
    background-attachment
    background-position

    Background - Shorthand property
    As you can see from the examples above, there are many properties to consider when dealing with backgrounds.

    To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.

    The shorthand property for background is simply "background":

    body {background:#ffffff url('img_tree.png') no-repeat right top;}

    When using the shorthand property the order of the property values are:
    background-color
    background-image
    background-repeat
    background-attachment
    background-position

    It does not matter if one of the property values is missing, as long as the ones that are present are in this order.


  •  

    Posting Permissions

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