...

View Full Version : Lining up the image



aaronoafc
02-12-2012, 01:25 PM
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

<!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


* {
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

aaronoafc
02-12-2012, 03:21 PM
Anyone know why the image is distorted as it is? I previewed it in Google chrome by the way

aaronoafc
02-12-2012, 04:14 PM
Attached is a print screen of the problem

SB65
02-12-2012, 04:19 PM
Try:


#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.

aaronoafc
02-12-2012, 10:26 PM
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 :/

SB65
02-12-2012, 11:26 PM
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.

waxdoc
02-12-2012, 11:39 PM
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-resizeable-background-image/
http://www.w3schools.com/cssref/css3_pr_background-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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum