CSS - Div With Bg-image On Left Side Of Page, Halts After 1st Child Div

I also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this?

A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on.

image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image.

I really appreciate your help.

The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that.

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
float:left;
width:89.091em;
list-style:none;
line-height:1;
background:#b6791e;
font:11px Verdana, sans-serif;
font-weight:bold;
padding:0;
margin:0 0 .5em 0;
}

#nav a {
display: block;
width: 11.1em;
w\idth: 10.1em;
color: #FFFFFF;
text-decoration: none;
padding: 0.75em 0.5em;
}

#nav a.daddy {

}

#nav li {
float: left;
padding: 0;
width: 11.1em;
position:relative;
}

#nav li ul {
position: absolute;
left: -999em;
height:auto;
width: 14.7em;
w\idth: 14.5em;
font-weight: bold;
margin: 0;
padding:0;
background:#FFFFFF;
color:#769841;
border: 0.1em solid #769841;
}

#nav li ul a:hover{
color:#ffff30;
background:#769841;
}

#nav li ul li a{
color:#769841;
}

#nav li li {
padding-right: 1em;
width: 14.5em;
w\idth:13.5em;
}

#nav li:hover ul {
left: auto;
}

#nav li a:hover, nav li.sfhover a:hover{
color:#FFFF30;
}

#nav li ul li a:hover {
color:#FFFF30;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
clear:both;
}

#nav li ul ul {
margin: -3.3em 0 0 5em;
}


#nav li:hover, #nav li.sfhover {
background: #769841;
}

#nav li a:hover, #nav li.sfhover a:hover{
color: #ffff30;
}

#nav li ul a{
color:#769841;
padding:.4em;
}

I have been trying to write a horizontal CSS nav menu for my website thinkmarriage.org/catalog/ based on some code I found. The menu seems to work great, except:

1. it is adding what looks like 30ish pixels of padding on the left side of the menu. I have tested in FF, IE, and Safari, all do the same thing. The code is CSS 2.1 validated. The link to my sample is: thinkmarriage.org/menu2.html

2. When I add the menu into my actual store, in FF it works, but IE turns the horizontal nav into vertical drop boxes. I was pretty sure the style sheets were conflicting with one another, but now the bar is working in FF, and I can't seem to find any problems. The two style sheets are :
#1 (for the menu) : thinkmarriage.org/catalog/menustyle.css
and
#2 (for the site) : thinkmarriage.org/catalog/stylesheet.css

The link to the site is above. If anyone has any thoughts as to where the extra padding is coming from or the conflict with the sheets in IE, I would greatly appreciate it.
(Sorry, the rules won't permit me to place hyperlinks)

Figured this was simple, but I can't seem to figure it out.

Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way.

With CSS like:

.imginfo {float:none;clear:both;margin-top:1em;}
.imginfo img {float:left;margin-right:1em;}

and code like:

Code:

<div class="imginfo">
  <img src="..." />
  Line of Text<br />
  Line of Text<br />
  Line of Text<br />
</div>

I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image.

Attempting to use vertical-align: bottom doesn't do anything with the text.

The effect I am looking for is like below. If you assume the XXX are the image...

Code:

XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX Line of Text
XXXXXXXXXXXX Line of Text
XXXXXXXXXXXX Line of Text

Hi,

I've been stuck on this for the last few days and was wondering if you could help me. I'm not even sure if using javascript is the best option to do this, but if you could help me anyway that would be great. My dilemma is I'm designing a website which has several links in the left hand navigation bar. But at the moment, the links open in a new window. I don't want that. I want them to open in the main area of the parent window. Normally if i'd used frames, opening the links within that same page wouldn't have been a problem because I could just use the target attribute.

But I didn't use frames, I used CSS layouts but when I set the target attribute to _parent, the links open up across the whole page rather than just in the main section.Can some one provide some code to point me in the right direction of how to do this?

Thanks for taking time to read my question.

How do I position 3 pictures beside eachother with no spaces between them? (so they look like one continuous picture)

eg:
______
|1|2|3|
|_|_|_|

instead of
________
|1||2||3|
|_||_||_|

Thanks,

Brad

Hi

I found it:
**********************
Code:

#tableLeftCol ul.menu li#current a {
		background-image: url('../images/menu-active-rect.gif');
		background-position: right top;
		background-repeat: repeat-y;
	}
	
	#tableLeftCol ul.menu li#current ul li a {
		background-image: none;
	}

***************************

I have a nested list representing a menu.

I want the active menuitems (listitem) link to have a background image.

When active menuitem is a parent then all the childs also get the background image......

How to I change the CSS so only active menuitems link get the background image set, and not the child links of the parent?
If possible, I want to make it work without changing any in the HTML!

Here is current CSS and list structu

Code:

#tableLeftCol ul.menu li#current a {
		background-image: url('../images/menu-active-rect.gif');
		background-position: right top;
		background-repeat: repeat-y;
	}
	
	#tableLeftCol ul.menu li ul li#current a {
		background-image: url('../images/menu-active-rect.gif');
		background-position: right top;
		background-repeat: repeat-y;
	}

Code:

<div id="tableLeftColPadding">				
	<ul class="menu">
		<li id="current" class="parent active item54">
			<a href="/index.php?option=com_content&view=article&id=48&Itemid=54">
				<span>Parent</span>
			</a>
			
			<ul>
				<li class="item57">
					<a href="/index.php?option=com_content&view=article&id=50&Itemid=57">
						<span>Child-A</span>
					</a>
				</li>
				<li class="item81">
					<a href="/index.php?option=com_content&view=article&id=71&Itemid=81">
						<span>Child-B</span>
					</a>
				</li>
				<li class="item59">
					<a href="/index.php?option=com_content&view=article&id=52&Itemid=59">
						<span>Child-C</span>
					</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

http://www.ilumos.co.uk/site/?page=home
http://www.ilumos.co.uk/site/styleDefault.css

Hi, I'm having a little trouble sending the "x Comments" div (.blogCommentCount) to the right side of its parent div (.blogItemContainer)

If I try and use "float: right;" it is aligned to the right, but is shifted outside of its parent div, which isn't the idea. I could of course do this and apply a negative margin-top, but I'd rather use a non-hacky method if I could.

Thanks

ilumos

Just like the title says, the child is wider than the parent, and i want it automatically centered, so t hat the centers of both divs are inline with each other.

I tried the Code:

margin 0px auto;

which works if the child is smaller, but it doesn't seem to work in this case, any other ideas?

Hi,

I have a table cell where I have to place an image and title (centered) by the side of it. I am using the following code but does not work the way I wanted.

<table>
<tr>
<td>
<img src="graphics/gifs/spotlight_xlr.gif">
Title
</td>
</tr>
</table>

The "Title" text is getting displayed by the side of the image but to the bottom. I want the Text to be centered around the image. Both the IMG and Text should be part of the same TD tag. I know with CSS it is possible. Please help.

Thanks,
VMRao

Using percentages so I can leverage .css when the page is printed. so...

I have div with a background image. the image has a round off top-right corner. when i increase the percentage size, id like the width to grow from left to right so that the top right of the background image is always in view...no matter how wide or narrow the width of the div.

Is this possible?

hey all, i have a page that has text on it and i am trying to add another div with a photo in it so that i can place the photo on the right had side and get the text to wrap around it. buti am having probs. the text doesn't wrap around the photo ... so the photo just ends up at the bottom of the text on the right...

here is the code i am currently using for it
Code:

#rightphoto {position: absolute; right: 10px; border: 1px solid #ccc; padding: 2px 2px 2px 2px;}

i have had various ideas but none have worked,,,,this is the latest...

any ideas??

thanks

RF

Ok, I have a website that i'm building with about 25 pages, and I keep on having to change the side navigation bar, and then I have to copy and paste it on each page to update it. IS THERE A WAY FOR ME TO ONLY UPDATE IT ONCE AND IT UPDATES TO ALL THE PAGES?

Is the answer css? or i-frames(or whatever it's called)

If so, then how would I do this?! PLEASE HELP!

Floats always cause me some consternation. This one sort of works, except for the border and the padding/margin (which may be related to the border issue). I've only checked this on FF on a Mac so far, btw.

Right now the divs do float, but the left side of the border is a million miles away. Solving the border issue might take care of the padding/margin between #caravan and #rally (right now each tweak does nothing).

Also, is it possible to get the text at the end to flow under the property changes box? Probably not, as I set a width of 65%, but that was the only way I knew to get the two boxes to float up...I guess I'd have to make that last paragraph its own div to get the text to go all the way across?

The page I'm trying to figure out is here and the relevant CSS is

#caravantop {
background-color: #ffefca;
margin: 0;
padding: 1.2em 2% 0 2%;
}

#caravan {
float: left;
width: 63%;
background-color: #ffefca;
padding: 0;
margin: 0 2% 0 2%;
}

#rally1 {
padding-right: .1em;
border: 1.2px #775b36 solid;
margin-right: .5em;
margin-bottom: 1em;
}

#rally1 h4 {
margin-bottom: .6em;
}

#rally1 p {
font-size: .7em;
padding-bottom: 0;
margin: .6em;
}

#rally1 ul {
list-style-image: url(../images/icons10_webpage.gif);
list-style-type: circle;
text-decoration: none;
font-size: .7em;
margin-bottom: 1em;
margin-left: 2.5em; }

#rally1 li {
margin-bottom: .4em;
margin-left: 1.7em;
}

#rally1 li.lastli {
margin-bottom: 2.5em;
}

/*#rally1 ul.nohouse {
list-style-image: none;
list-style-type: none;
text-decoration: none;
font-size: .8em;
margin-bottom: .3em;
margin-left: 0;
}*/

#rally2 {
padding-right: .1em;
border: 1.2px #775b36 solid;
margin-right: .5em;
margin-bottom: 1em;
}

#rally2 h4 {
margin-bottom: .6em;
}

#rally2 p {
font-size: .7em;
padding-bottom: 0;
margin: .6em;
}

#rally2 ul {
list-style-image: url(../images/icons10_webpage.gif);
list-style-type: circle;
text-decoration: none;
font-size: .7em;
margin-bottom: 1em;
margin-left: 2.5em; }

#rally2 li {
margin-bottom: .4em;
margin-left: 1.7em;
}

#rally2 li.lastli {
margin-bottom: 2.5em;
}

This is my code essentially:

<div id="bottom">
<div style="float:left">store hours</div>
<img src="map">
<div style="float:right">contact info</div>
</div>

It looks fine in Safari but it messed up in Firefox. I fixed it a bit by adding overflow:auto to the parent item (bottom div), so it actually has the red background and doesn't collapse. I haven't yet uploaded that fix yet as the problem still isn't solved. Now the div is expanding too much because the 3 items aren't being displayed inline. In firefox the image is pushing the first div beneath it. Any solutions please?

G'day all,

I'm trying to get two different images to appear of the far left and far right of the page, extending to the bottom of the page to act as a border.

I currently have two different styles for each, and two different <div> tags, however I think the nesting of the <div> tags may be causing it to stuff up and knock off the positioning.

How can I get the two images to go to the far left and right of the screen, using CSS, in a way that will also let me use the repeating function to stretch them to the bottom of the screen.

This is a screenshot of a mockup I did in Photoshop, the images I need to position are the grey fadeout ones on the left and right.
http://www.ausvirtual.com/Website%20copy.jpg

Cheers.