CSS - Css Background Position

I'm currently using the tutorial located at Use Sprites to Create an Awesomeness-Filled Navigation Menu

Based on that I've created a sprite image that is 960x88.

I've got my menu in place, but the background-position completely fails. While I can change the width of each item, revealing more or less of the image it still only shows the first part of the image, repeating "Home". See attached screenshot for example of what it's doing.

Here is my HTML and CSS:

html Code:
Original - html Code <nav> <ul id="main_nav"> <li><a href="#" class="home"></a></li> <li><a href="#" class="case_studies"></a></li> <li><a href="#" class="solutions"></a></li> <li><a href="#" class="free_quotes"></a></li> <li><a href="#" class="government"></a></li> <li><a href="#" class="recycle"></a></li> <li><a href="#" class="resources"></a></li> <li><a href="#" class="about_us"></a></li> <li><a href="#" class="contact_us"></a></li> <li><a href="#" class="login"></a></li> </ul> </nav>

  
  <nav>
    <ul id="main_nav">
      <li><a href="#" class="home"></a></li>
      <li><a href="#" class="case_studies"></a></li>
      <li><a href="#" class="solutions"></a></li>
      <li><a href="#" class="free_quotes"></a></li>
      <li><a href="#" class="government"></a></li>
      <li><a href="#" class="recycle"></a></li>
      <li><a href="#" class="resources"></a></li>
      <li><a href="#" class="about_us"></a></li>
      <li><a href="#" class="contact_us"></a></li>
      <li><a href="#" class="login"></a></li>
    </ul>
  </nav>

css Code:
Original - css Code #main_nav { height: 40px; } #main_nav li { float: left; } #main_nav li a { background:url(../images/main_nav_sprite.png); display: block; height: 40px; } .home { background-position: 0px 0px; width: 60px; height: 40px; } .case_studies { background-position: -60px 0px; width:120px; height:40px } .solutions { background-position: -180px 0px; width:100px; height:40px } .free_quotes { background-position: -280px 0px; width:100px; height:40px } .government { background-position: -380px 0px; width:120px; height:40px } .recycle { background-position: -455px 0px; width:75px; height:40px } .resources { background-position: -555px 0px; width:100px; height:40px } .about_us { background-position: -642px 0px; width:87px; height:40px } .contact_us { background-position: -748px 0px; width:106px; height:40px } .login { background-position: -822px 0px; width:74px; height:40px }

  

  


 #main_nav {


     height: 40px;


 }


 #main_nav li {


     float: left;


 }


 #main_nav li a {


     background:url(../images/main_nav_sprite.png);


     display: block;


     height: 40px;


 }


 .home {


     background-position: 0px 0px;


     width: 60px;


     height: 40px;


 }


 .case_studies {


     background-position: -60px 0px;


     width:120px;


     height:40px


 }


 .solutions {


     background-position: -180px 0px;


     width:100px;


     height:40px


 }


 .free_quotes {


     background-position: -280px 0px;


     width:100px;


     height:40px


 }


 .government {


     background-position: -380px 0px;


     width:120px;


     height:40px


 }


 .recycle {


     background-position: -455px 0px;


     width:75px;


     height:40px


 }


 .resources {


     background-position: -555px 0px;


     width:100px;


     height:40px


 }


 .about_us {


     background-position: -642px 0px;


     width:87px;


     height:40px


 }


 .contact_us {


     background-position: -748px 0px;


     width:106px;


     height:40px


 }


 .login {


     background-position: -822px 0px;


     width:74px;


     height:40px


 } 

Hey Guys!

Trying to add a background position to a div and position it top right. Works in FF and IE7, but IE6 wants to put it top left.

Code:

background: $hexcolor url(/v2/PHP/img/$logo) no-repeat top right;

www.RoundtopRiders.com/v2/videos/

Thank you in advance!

I'm using background images on a <span> tag.

Code:

.thespan {
  display: -moz-inline-box;
  display: inline-block;
  height: 16px;
  width: 16px;
  margin: 2px;
  /* using longhand on purpose, since other classes override bits later */
  background-image: url(../img/iw_ds_sprite.gif);
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

And already there's an issue. IE (even 6!) FF2 and 3, and Safari all do what I expect. However, Opera is off by about 40 pixels.

There is a shell around the span - changing this shell's class makes the internal background-position change, like so:

Code:

.theshell .thespan {
  background-position: 0px -40px;
}

This actually works, except it doesn't. Opera, having been wrong in the first place, is now wrong by the same amount - it jumps to -80px.

I've been pulling my hair out on this...I can't believe that it works in IE6 but not Opera!

Any help is greatly appreciated.

Tim

I am trying to make a rectangle with an image on the left and a horizontal list of anchor links on the right. Each anchor link should be a 32x32 px image with text underneath each image.

My problem is that the anchor links are not tall enough and the text is on top of the image instead underneath it.

Please help.

Code:

<style type="text/css">
.toolbar_list ul { float: right; text-align: right; margin:10px;}
.toolbar_list li{list-style: none;display: inline;}
.toolbar_list a { float: none; width: 32px; height: 32px; }

div.toolbarheader {line-height: 48px;padding-left: 55px;background-repeat: no-repeat; border-style:solid;}

.icon-32-delete    { background-image: url(stdimages/icon-32/delete.png); }
.icon-32-save    { background-image: url(stdimages/icon-32/save.png); }
.icon-32-new    { background-image: url(stdimages/icon-32/new.png); }
.icon-48-module    { background-image: url(stdimages/icon-48/module.png); }
</style>

</head><body>

<div class="toolbar_list">
 <ul>
  <li><a href="#" class="icon-32-delete delete" title="Delete">Delete</a></li>
  <li><a href="#" class="icon-32-save save" title="Save">Save</a></li>
  <li><a href="#" class="icon-32-new new" title="New">New</a></li>
 </ul>
 <div class="toolbarheader icon-48-module">Title</div>
</div>

I'm trying to create a tiered vertical navigation menu and I'm nearly there. Everything works correctly in FF but in IE the background-position property on the current menu item fails to position the bullet image. Removing the property displays it but at the margin which is set to 0px.

I'm not that savvy with CSS so if there's a better approach to this I'm open to suggestions.

Thanks for your help!

Open in FF to see how it's supposed to work:
Open in IE to see problem.

Here's the HTML

Code:

<div id="Menu">
<div id="nav_header">

   <div id="text">

            
		    Admissions & Financial Aid

            </div>


</div>

<ul id="nav_level_1">

         <li id="submenu"><a href="../index.php">Applying to Union</a></li>

			<ul id="nav_level_2">

               <li id="nav_active"><a href="index.php">Types of Admission</a></li>

			<ul id="nav_level_3">

               <li><a href="Transfer.php">Transferring to Union</a></li>

         <li><a href="Early.php">Early Decission</a></li>


         <li><a href="Regular.php">Regular</a></li>

         <li><a href="international.php">International Admission</a></li>

         <li><a href="aop_heop.php">AOP/HEOP</a></li>

         <li><a href="Medical.php">Eight-year Medical</a></li>

         <li><a href="Law.php">Six-year Law</a></li>

         <li><a href="MBA.php">Five-year MBA</a></li>


         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

			<li><a href="../Applications.php">Apply Online</a></li>

         <li><a href="../Forms/index.php">Download Application Materials</a></li>

         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

            <li><a href="../../FAQs/index.php">Have a Question?</a></li>


         <li><a href="../../Financial_Aid/index.php">Financial Aid</a></li>

         <li><a href="../../Events/index.php">Events/Programs & Visiting</a></li>

         <li><a href="../../interviews.php">Interviews</a></li>

         <li><a href="../../PerfectSchool/index.php">Tips for College Search</a></li>

         <li><a href="../../About/index.php">Admissions Staff</a></li>


         <li><a href="../../AlumniAdmissions/index.php"></a></li>

         <li><a href="../../Media/index.php"></a></li>

         <li><a href="/union/admissions/Viewbook/index"></a></li>

         <li><a href="/union/admissions/Alumni/index"></a></li>

         <li><a href="../../sample.php"></a></li>

         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

   

</div>

Here is the pertinent CSS

Code:

/* Style for three levels of unordered lists */
#Menu #nav_level_1 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color: #d2c6aa;
    line-height:17px;
    word-wrap: break-word;
}

#nav_level_2 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#ded4bc;
    line-height:17px;
    word-wrap: break-word;
}

#nav_level_3 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#e5dece;
    line-height:17px;
    word-wrap: break-word;
}
/* End unordered list base styles */

/* To get indented, wrapping, text that's cross browser compatible
   we need to additionally style the unordered lists and line items under each top <ul>
*/

#nav_level_1 li {
    margin-left:20px;
}

#nav_level_1 li ul {
    margin-left:-20px;
}

#nav_level_2 li {
    margin-left: 40px;
}

#nav_level_2 li ul {
    margin-left:-40px;
}

#nav_level_3 li {
    margin-left:60px;
}

#nav_level_1 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 4px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 20px;
}

#nav_level_2 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 24px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 40px;
}

#nav_level_3 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 44px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 60px;
}

#Menu #submenu {
    list-style-type: circle;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#d2c6aa;
    line-height:17px;
    word-wrap: break-word;
}

#submenu2 {
    list-style-type:circle;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#ded4bc;
    line-height:17px;
    word-wrap: break-word;
}

*** After posting I have been playing with other options, but would still love to know why the bg position on .container_12 does not work.


Please look at this page http://www.mts-diesel.com/index.php?cPath=20_24_56 There is an element w/ an class of container_12 that I have put an inline style declaration of

style="background:transparent url(images/container_12_bg.jpg) 0 1000px !important;"

I am trying to push the background down below the navigation but for some reason I can only move the background image to the right, and not down as needed.

Thank you for any help. Tom

ahh thanks figures it out

never mind.

The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left.

Know why?

I have having issues with IE displaying my page wrong.

The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site)

and the css can be found at
http://tampabay-online.org/cetr/cetr.css

It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top)

Any help much appreciated.

Code:

.content {
	position:relative;
	width:320px;
	margin-left: 125px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this?

The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever.

http://www.area51entertainment.co/index.php?about

So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges.

I've set up the css as follows:

body {
background: #000 url(gradient.jpg) repeat-x;
margin: 0;
}

Here's where I run into my problem...

I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely.

<div id="bg_image"></div>

#bg_image {
width: 100%;
height: 1100px;
background: url(images/bg_image.jpg) no-repeat top center;
margin: 0;
position:absolute;
}

This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars.

This makes perfect sense of course I just can't come up with an alternative.

If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content.

I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve.

Any suggestions would be greatly appreciated!

Thanks,
Josh

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

Hei ppl.

i am begenning of designing in css but i have a problem..

i have my website www.zyxep.net/byensguf/

i have that div in the bottom under the text "footer" that <div> do i need to get over the header image to the right.. so the right side of the login field is flush with the right side of the border..

and i need it to stay on that position in every size of the users screen.. min. 800x600 max. anything..

here is my css code:

Code:

body {
text-align: center; /* center things in pre-IE6 */
margin: 0px auto;
}
#container {
	margin: 0px auto;
	left:150px;
	top:0px;
	width:760px;
	height:420px;
	z-index:1;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
#header {
	margin: 0px auto;
	left:0px;
	top:0px;
	width:760px;
	height:200px;
	z-index:2;
	background-image: url(images/logo.jpg);
	border-bottom: 1px solid black;
}
#menu {
	margin: 0px auto;
	left:0px;
	top:200px;
	width:760px;
	height:20px;
	z-index:3;
	border-bottom: 1px solid black;
}
#content {
	margin: 0px auto;
	left:0px;
	top:220px;
	width:760px;
	height:180px;
	z-index:4;
	border-bottom: 1px solid black;
}
#footer {
	margin: 0px auto;
	left:0px;
	top:400px;
	width:760px;
	height:20px;
	z-index:5;
}
#login {
	margin: 0px auto;
	left:760px;
	top:15px;
	width:400px;
	height:50px;
	z-index:6;
}
#username {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#password {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#loginsubmit {
width: 100px;
background-color: transparent;
border: 1px solid black;
}

and my index.php

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>ByensGuf.dk - Byens bedste guf</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="zyxep">
<META NAME="Keywords" CONTENT="zyxep, zyxep.net, portfolio">
<META NAME="Description" CONTENT="zyxep.net - portfolio">
<meta name="REVISIT-AFTER" content="1 DAYS">
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="footer">Footer</div>
<div id="login">
<form action="login.php" method="post">
<div>
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" value="login" id="loginsubmit">
</div>
</form></div>
</div>
</body>
</html>

plz help me.. i am so confused

Hello,
I am having trouble understanding the positioning within CSS. I.E. the relative/absolute positions. I am creating a site with 1 banner and 2 columns underneath, all centered. The 2nd column I want to be right beside the left coumn. so it simply goes like



So depending on where left is on the page, the main is always literally right beside it. Anyone have any suggested reads on this?