CSS - To Move Object Underneath

I have pictures lined up horizontally in a content box, which is fine. The issue I am having is having links beneath each picture. The issue I have is that all of the links bunch up next to the last picture horizontally and don't appear on a separate line underneath the images.

HTML

Code:

<div id="content">   <h2>Pictures from Events</h2>      <ul class="hoverbox"> <li> <a href="#"><img src="images/TEST1.jpg" alt="description" /><img src="images/TEST1.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST1.jpg" alt="description" /><img src="images/TEST1.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST2.jpg" alt="description" /><img src="images/TEST2.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST3.jpg" alt="description" /><img src="images/TEST3.jpg" alt="description" class="preview" /></a> </li> </li> </ul> <p id="links"><a href="#"> Epic Fridays|&nbsp;</a> <a href="#">Zen West&nbsp;</a> <a href="#">|Green Turtle&nbsp;</a> <a href="#">|Craig's&nbsp;</a>  </div>

CSS


Code:

#content {   float: right;   width: 560px;   height: 300px;   color:#2C5923;     background-image:url(images/Picscontent2.jpg);     background-repeat: no-repeat;     padding-top:20px;     padding-left:20px;

 

hello, this will perhaps sound like a crazy thing to do, but i am trying to style my nested list(s) in order for the 'category' to appear below its children.

so rather than having, for example

sport
football
cricket
formula one

i have

football
cricket
formula one
sport

the reason for trying this is that i am hoping to display my lists at various positions along a base line (over a bg image) and certain positions within the image require the category name to be under the 'children'.

is it possible though?

i tried making the inner list's position to be relative and adjusting the top position to -20 etc but of course this brings the children up rather than push the category down.

here is an example of my nested list

Code:

<ul>
  <li>sport
	<ul class="up">
	  <li>football</li>
	  <li>f1</li>
	</ul>
  </li>
  <li>music
	<ul class="up">
	  <li>stuff</li>
	  <li>stuff2</li>
	</ul>	
  </li>
</ul>

it probably isn't possible but i thought i would ask before giving up on the idea completely.

thank you for your time

i have a scrolling marquee. when the drop down menu extends, couple of the items gets hidden underneath the marquee container. when i define z-index:-1 then the marquee container disappears on the screen. does anyone have a suggestion for this?
thanks.
btw. it only happens in IE

http://gcterminal.mallfinder.com/index.cfm?refresh=1&showdebug=1

I'm having problems with a javascript rotating picture overlapping my drop down menu! I've fiddled around the the z-index but cant seem to get the drop down menu to drop ABOVE the picture.

Everything is contained inside my <div id="wrapper"> and my layout scheme works like:
Banner = top image ("Why won't my drop menu's show up") the image extends all the way down to the menu, and then the navigation is just words that go on top of the menu texture i've made. The only gif im using in the #nav is for the small yellow triangle for the roll over effect on the menu's. I get the white and menu bar on the sides because i just made the background a 40px height by 10px width image the sample and had it repeat in x only and then set background colour to that grey.

My images are all inside the .main_view div id.

Any help is appreciated!

you can see my problem he htmltest2.weebly.com

What do i need to do to fix this?!

Hi,

If you place the below code in a blank HTML page and view it with Safari 2.0.4, you'll see a 130 pixel vertical gap between 1 and 2, and a 320 pixel horizontal gap between 3 and 5.

I guess that CSS could fix it but I don't know how.

Code:

1
<div> 
2
<a>
3
<object>
4
</object>
5
</a>
6
</div>
7

Please test your own fix before suggesting it to me, thanks.

Hi, I'm trying to implement a confirm box that darkens the page until the user clicks ok. I've got a div the size of the whole page with a black background and opacity .2. Inside that there is a div with the confirmation text inside with opacity 1.0, but it is not showing up fully opaque. It was my understanding that opacity is not inherited, so I shouldn't even have to specify an opacity at all for the inner div. Why isn't it showing up as fully opaque?

http://evenhealth.com/test.html

The confirm box is exactly in the center of the page. It's pretty hard to see because of the opacity problem.

Code:

<html>
<head>
<link rel="Stylesheet" href="/main.css" type="text/css">
</head>
<body>
<div id=confirmpage>
<div id=confirmdiv>
<div class=confirmbox>
<a href="#" onclick="document.getElementById('confirmpage').style.display = 'none';return false">Close Me</a>
</div>
</div>
</div>

<a href=# onclick="document.getElementById('confirmpage').style.display = 'block';return false">Click me to test confirm box.</a>

</body>
</html>

Code:

#confirmpage{
	position:absolute;
	top: 0;
	left: 0;
	z-index:1;
	width:100%;
	height: 100%;
	background-color: #000;
	filter:alpha(opacity=60);
	opacity: 0.2;
	display:none;
}
#confirmdiv{
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	display: block
	filter:alpha(opacity=100);
	opacity:1.0;
}
.confirmbox{
	filter:alpha(opacity=100);
	opacity:1.0;
	margin-left: -125px;
	position: absolute;
	top: -35px;
	left: 50%;
	width: 250px;
	height: 70px;
	border: 1px solid red ;
}

Hi there,

I have a content glider script, but I have added it to a wrapper with a background image.

The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath....

If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read.

Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide?

This is my CSS:

PHP Code:
.glidecontentwrapper{
position: relative; /* Do not change this value */

height: 230px; /* Set height to be able to contain height of largest content shown*/

overflow: hidden;
}
/*
    Total wrapper width: 350px+5px+5px=360px
    Or width of wrapper div itself plus any left and right CSS border and padding
    Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
visibility: hidden;
width: 330px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
    Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
} 





Any help would be great!
Thanks.

On this page: http://lfswear(dot)com/sites/lfs2/index.php?main_page=product_info&cPath=1&products_id=8

I can't seem to get the "Size" div to move over right to match up with the color one... Any help would be greatly appreciated.

Hi, I am trying to get image on the bottom right hand side of the page to align with the chart in the middle.


I have it floated to the right, but I can't seem to make it move up vertically.

Not sure how to do this, absolute positioning is not an option because it will be stuck there regardless of browser size.

this is where the img is now, see how it is not lined up?
URL

this is where it is supposed to go.
URL


my code is this

Code:

<div style="float:right; vertical-align:baseline;"><img src="/free-gold-charts/gold.png" alt="Free Interactive Gold Charts" width="320" height="290" align="top"/></div>

and I have it next to the code for the chart.


Help!

Hi,

I am looking to move my nav bar into the center

www.leehughes.co.uk

Am not sure how to do this, am worried about messing up the IE hacks..

Code:

ul#nav {
    height:1.75em;
    border-top:1px solid #000;
    border-bottom:1px solid #646060;
    list-style:none;
    margin:0; /* reset the default left margin in IE */
    padding:0 .5em 0 0; /* reset the default left padding in good browsers */
    background:#000;
    font-size:1em;
}
#nav li {
    position:relative; /* establish stacking context for the AP'd dropdown sublist */
    float:right;
    padding:0;
    line-height:1.75em;
}
#nav li a {
	float:left;
	padding:0 .5em;
	border-right: 1px solid #333;
	color: #CCCCCC;
	text-decoration: none;
}
#nav li a.first {border:none;}

#nav li:hover, 
#nav li.sfhover{ 
    background:#transparent;/* background for all links on hover */
    visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a, 
#nav li.sfhover a {color:#FFF;}/*1st level font color on hover*/

/*=== All Sublist Styles ===*/
#nav ul {
    position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
    width:12em; /*150px*/
    margin-left:-999em;/* hide the sublist */
    padding:0;
    left:0; /* IE6/7 need this to position the sublist correctly on hover*/
    top:1.75em;
    background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
}
#nav li li {
    float: none;/*reset the float from #nav li*/
    display:block;
    height:auto;
    line-height:1.5;
    border:none;/*reset borders from #nav li*/
}
#nav li li a {
    float: none;/*reset the float from #nav li*/
    display:block;
    width:11em;/*IE6 needs a width (12em total with padding)*/
    padding:0 .5em;
	border:0;
}
* html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
*+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/

/*=== Hide All Sublists ===*/
#nav li:hover ul,
#nav li.sfhover ul {
    margin-left:-999em;
}
/*=== Sublist Font Colors ===*/
#nav li:hover li a, 
#nav li.sfhover li a  {color:#FFF;} /*2nd level font color*/

#nav li li:hover a, 
#nav li li.sfhover a  {color:#003366;} /*2nd level font color on hover*/

/*=== Second Level UL position on hover ===*/
#nav li:hover ul,
#nav li.sfhover ul { 
    margin-left: 0; /* show the sublist (line up with left border on main list items)*/
}

Thanks

http://members.cox.net/sherry72/index.html


that is my website. I have a stats box to the right but i want it exactly to the right of my content box. It is underneath right now. How do i change the css to make it like i want it?

Hi all,

Helping out a buddy, but am stuck myself. Possibly simple fatigue.

At this site, I'd like to move the entire center container up so that it's only about 20px below the very top. As of right now, when I do this, the top BG image disappears. As you can see from the CSS, there's actually two BG images.

I don't want that, I merely want the center container to cover the BG.

How, please?

Thanks!

Chris

I'm trying to make a menu using only css basically when you hover over an li element if there is another level below it a div is moved into place to reveal the links. It is working for the top level, but I can't figure out why it won't display/work for the 3rd tier. Both the css and the html validated, a link and the code is below. Thanks for any advice.

edit: I can't actually post the link but I will PM it to anyone who wants to see it halfway working.

HTML:
-------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"edit:no links">
<html>
<head>
<title>Test Page for drop menu</title>
edit:there would be an include for the css here but I can't post anything resembling a link
</head>

<body>
<div id="menuHolder">
<ul>
<li><a href="#url">Advising Network</a>
<div class="subHolder">
<ul>
<li><a href="#url">Student PASSPort</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
<li><a href="#url">Test 3</a></li>
<li><a href="#url">Test 4</a></li>
</ul>
</div>
</li>
<li><a href="#url">Adivsor PASSPort</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
<li><a href="#url">Test 3</a></li>
</ul>
</div>
</li>
<li><a href="#url">Form Bank</a></li>
<li><a href="#url">Timeline</a></li>
<li><a href="#url">Videos</a></li>
<li><a href="#url">Contact</a></li>
</ul>
</div>
</li>
<li><a href="#url">Career Investigations</a>
<div class="subHolder">
<ul>
<li><a href="#url">Student</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
<li><a href="#url">Test 3</a></li>
<li><a href="#url">Test 4</a></li>
</ul>
</div>
</li>
<li><a href="#url">Alumni</a></li>
<li><a href="#url">Parents and Family Members</a></li>
<li><a href="#url">Employers</a></li>
<li><a href="#url">eRecruiting</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#url">Campus Life</a>
<div class="subHolder">
<ul>
<li><a href="#url">Student and University Life</a></li>
<li><a href="#url">Student Activities</a></li>
<li><a href="#url">Commuter Services</a></li>
<li><a href="#url">Community Service Learning</a></li>
<li><a href="#url">USM Partnership with STRIVE U</a></li>
<li><a href="#url">USM Calendar of Events</a></li>
</ul>
</div>
</li>
<li><a href="#url">Scholarships and Finances</a></li>
<li><a href="#url">Academic Success</a>
<div class="subHolder">
<ul>
<li><a href="#url">Academic Strategies</a></li>
<li><a href="#url">Courses</a></li>
<li><a href="#url">Additoinal Support Resources</a></li>
</ul>
</div>
</li>
<li><a href="#url">Major Discovery</a>
<div class="subHolder">
<ul>
<li><a href="#url">Being Undeclared</a></li>
<li><a href="#url">GO Program</a></li>
<li><a href="#url">Aspirations - Early Study</a></li>
<li><a href="#url">Choosing Your Major</a></li>
<li><a href="#url">FAQ</a></li>
</ul>
</div>
</li>
<li><a href="#url">Orientation</a></li>
</ul>
</div>
</body>

</html>



CSS
-------------------
a {text-decoration:none; color:#ffffff;}

#menuHolder {height:60px; background:#0072ad; position:relative; text-align:center; width:1000px; font-size:16px; margin:0px;}

#menuHolder ul {list-style:none;}
#menuHolder ul li {float:left; padding:0px 10px 0px 10px; line-height:60px;}
.subHolder {position:absolute; left:0px; top:200px; overflow:hidden; font-size:14px; background:#0083ad;}

#menuHolder ul li:hover .subHolder {left:0px; top:60px; width:1000px; text-align:center; height:60px;}
#menuHolder ul li:hover {background:#0083ad;}

/* sub menu */
.subHolder ul {list-style:none;}
.subHolder ul li {float:left; padding:0px 10px 0px 10px; line-height:60px;}
.bottom {position:absolute; left:0px; top:500px; overflow:hidden; font-size:12px; background:#0094ad;}

.subHolder ul li:hover .bottom {left:0px; top:120px; width:1000px; height:60px; text-align:center; line-height:60px;}
.subHolder ul li:hover {background:#0094ad;}

/*bottom level*/
.bottom ul {list-style:none;}
.bottom ul li {float:left; padding:0px 10px 0px 10px;}

Hi,

Am editing a template within dreamweaver as it saves a lot of time for me but I can figure out how to move the right nav bar down.

Am trying to include a screenshot but i can't figure out how as I am a new user and it won't let me link..

Basically, it is a two column layout with a picture under the heading and the nav bar up to the height of the picture. Am looking to expand the picture out right and center meaning the nav bar will have to come down just below the picture if you know what i mean? I have tried with design view, won't let me. Had a look at the code but nothing really there that I picked up on (considering am only a beginner)..

any thoughts?