|
CSS - Horizontal Scroller
I want to show 2 divs, and allow the user to horizontal scroll (in a surrounding div with overflow:hidden and white-space:nowrap) to the next 2 divs. It works fine if I use images with full widths. But...
Issue I'm running into is this, if i use float:left, it wraps the divs to the next line and doesn't expand horizontally past the width of the div. If i use display:inline, i can't set the widths of the divs, and since they are text based, they show up as tiny divs, only the width of the text. So, what would be a solution here? CSS Code: #wrap {
padding:30px 0 0 0;
width:500px;
height:310px;
border:1px solid black;
white-space:nowrap;
overflow:hidden;
}
#wrap div {
display:inline;
width:245px;
}
HTML Code: <div id="wrap">
<div><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></div>
</div>
and obviously the javascript would be included to allow the div to scroll onlick. But I just need the initial setup of this. Similar TutorialsHi, I am trying to create a combo box with horizontal scroller. i.e. Combo box will have a fixed width, if any of its options have higher text, then horizontal scroller should appear automatically. I also tried placing a <div> around <SELECT>. But not getting how to apply styles on it. Any suggestions will be helpful. Thanks This website look the way it should be in SeaMonkey & Firefox but it doesn't work in IE. IE also throw in the scroll bar. Any idea what's wrong? Is it possible to get rid of the scroll bar and to have that margin effect? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html
{
background-color: #d0a060;
border: groove thick brown;
margin: 8px;
}
</style>
</head>
<body>
Blah Blah Blah!
</body>
</html>
Thanks... Edit: Forgot to post the source code... hello, don't mozilla (or netscape, both the latest versions) support scroller created in CSS ?? The below code works fine in Internet Explorer but in Mozilla there is no scroller shown. .... Code: <div style="width:100%; height:430; overflow-y:auto; overflow-x:auto; border:1px dashed black; text-align:justify; background-color:white;"> // contents ... </div> Comments on alternative solutions to above code...??..anybody? Hi, I'm breaking my head over IE6.0: adjusted this page and it now works at least in IE 5.0, 5.5, Opera, Firefox but in IE6.0 the damn thing doesn't align vertical in a right way and the menu doesn't scroll with the page anymore. Anybody who can tell me what's upsetting IE6.0? I don't have a clue no more. Cheers, Ziggy Apologies if this is in the wrong section guys but it's a combo of CSS, JS and HTML. On my site I want to have a thumbnail (horizontal) scroller, which when clicked on a thumbnail uses the Lightbox style script to open an image. I'd prefer that over a block of say 20 thumbnails to call upon. However, I'm totally stumped of how to do this. Hi this is my first post. I'm having trouble making a horizontal navbar with a picture background. here is the vertical menu. http://school(dot)timswildwackyemporium(dot)com/NewMouseOver/navtest.html replace (dot)s with period I want to make the buttons next to each other, but with about 10px space in between them. Thanks. Has anyone created a CSS horizontal fly-out menu list? I have a 3 level navigation list. The level 1 has 5 items, the first item of which has no sub-list. How can I get the level 2 and 3 lists to fly-out at the same level as its parent item? Thanks for taking the time to read my question. I FF v.2 and IE v.7 In FF I don't get a horizontal scroll bar, which is what I want, but in IE I do. I can't figure out why. The horizontal scroll bar happens here [id="ListOfItemTitles"]. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>For Sale</title>
<link href="Matt.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Matt.js"></script>
</head>
<body onload="createArray();createArrayDVD()">
<div class="LeftNavMainOut">
<div class="LeftNavMainIn">
<div class="LeftNavContentTitle">
Select category below to view available inventory
</div>
<div class="LeftNavContentHolder">
<div class="LeftNavContent">
<!--<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>-->
<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>
</div>
<div class="LeftNavContent">
<a class="Nav" href="#" onClick="ChangeTitle('DVD \'s','DVD')">DVD's</a>
</div>
</div>
</div>
</div>
<div class="ItemListMain">
<div class="ItemListTitle" id="ListOfItemTitles"></div>
<div class="roundtop"><img class="corner" src="TopLeft3.png" alt="" style="display: none" /></div>
<div class="ItemListContent" id="ListOfStuff"></div>
<div class="roundbottom"><img class="corner" src="BottomLeft3.png" alt="" style="display: none" /></div>
</div>
<div>
<iframe src="CD.txt" id="CDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
<iframe src="DVD.txt" id="DVDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
</div>
<div class="InfoContainer">
<div class="CoverPicMain"><img id="PicutreID" class="CoverPictures" src="Covers/NoCover.png" /></div>
<div id="InformationID" class="ItemDetails">CD and DVD Information</div>
</div>
</body>
</html>
CSS: Code: html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #000000;
}
.LeftNavMainOut {
/*background-color: red;*/
float: left;
display: inline;
/*height: 600px;*/
height: 100%;
width: 170px;
margin-right: 100px;
margin-left: 80px;
padding-left:19px;
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y;
background-position: top left;
}
.LeftNavMainIn {
/*background-color: pink;*/
float: left;
height: 100%;
width: 100%;
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y;
background-position: top right;
}
.LeftNavContentTitle {
text-align: center;
font-size: 20px;
color: white;
width: 150px;
border-bottom: 4px double blue;
margin-top: 10px;
}
.LeftNavContentHolder {
margin-top: 100px;
padding-left: 2px;
}
.LeftNavContent {
background-color: aqua;
width: 140px;
float: left;
border: 2px solid CCCCCC;
text-align: center;
font-size: 20px;
margin-bottom: 10px;
}
.ItemListTitle{
font-size: 25px;
text-align: center;
width: 100%;
height: 25px;
margin-bottom: 5px;
}
.ItemListMain {
/*background-color: #99FF33;*/
margin-top: 100px;
float: left;
width: 180px;
}
.ItemListContent {
background-color: #0033CC;
padding-left: 8px;
padding-right: 8px;
height: 300px;
overflow: auto;
display:block;
}
.InfoContainer {
width: 265px;
float: right;
/*background-color: green;*/
margin-right: 100px;
margin-top: 130px; /*100px like ItemListMain, 25px like ItemListTitle, 5px like ItemListTitle*/
padding: 0px;
overflow: hidden;
}
.CoverPicMain {
/*background-color: gray;*/
width: 150px;
height: 150px;
float: right;
margin-right: 45px;
}
.CoverPictures {
width: 150px;
height: 150px;
}
.ItemDetails {
/*background-color: orange;*/
width: 260px;
height: 146px;
float: right;
margin: auto;
padding: 2px 2px 2px 3px;
overflow: hidden;
color: white;
}
.ItemDetailsArtist {
float: left;
width: 100%;
}
.ItemDetailsTitle {
float: left;
width: 100%;
}
.ItemDetailsType {
float: left;
width: 100%;
}
.ItemDetailsCost {
float: left;
width: 100%;
}
.ItemDetailsWidescreen {
float: left;
width: 100%;
}
.ItemDetailsActors {
float: left;
width: 100%;
}
.ItemDetailsRating {
float: left;
width: 100%;
}
img.corner {
height: 20px;
width: 160px;
border: none;
display: block !important;
}
.roundtop {
background: url('TopRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}
.roundbottom {
background: url('BottomRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}
.Nav {
display: block;
width: 100%;
}
.ListStuff {
display: block;
width: 100%;
border-bottom: 1px solid #CCCCCC;
}
a.Nav:link {
color: #000000;
text-decoration: none;
}
a.Nav:visited {
color: #000000;
text-decoration: none;
}
a.Nav:hover {
color: #000000;
text-decoration: underline;
background-color: #0066FF;
}
a.Nav:active {
color: #000000;
text-decoration: none;
}
a.ListStuff:link {
color: #ffffff;
text-decoration: none;
}
a.ListStuff:visited {
color: #ffffff;
text-decoration: none;
}
a.ListStuff:hover {
color: #ffffff;
text-decoration: underline;
background-color:#0066FF;
}
a.ListStuff:active {
color: #ffffff;
text-decoration: none;
}
JS: Code: var TheCDTitles=new Array();
var TheDVDTitles=new Array();
function ChangeTitle(WhichDesc, FrameName) {
TheCDTitles=''
TheDVDTitles=''
document.getElementById("ListOfItemTitles").innerHTML = "<strong><font color=#ffffff>" + WhichDesc + "</font></strong>";
if (FrameName=='CD') {
for (x in itemsArray)
{
TheCDTitles = TheCDTitles + '<a href="#" class="ListStuff" id="CD" + i + onmouseover="ShowInfoAndPic(' + x + ',' + x + ')">' + itemsArray[x].Artist + '</a>';
}
document.getElementById("ListOfStuff").innerHTML = TheCDTitles;
}
if (FrameName=='DVD') {
for (x in itemsArrayDVD)
{
TheDVDTitles = TheDVDTitles + '<a href="#" class="ListStuff" id="DVD" + i + onmouseover="ShowInfoAndPicDVD(' + x + ',' + x + ')">' + itemsArrayDVD[x].Title + '</a>';
}
document.getElementById("ListOfStuff").innerHTML = TheDVDTitles;
}
}
//*******************CD******************************
var itemsArray=new Array();
var x
function createArray()
{
x=0
var data=getCDContents();
var items=data.split('\n'); //splits the data in retreived from getContents() by line
var stats;
for (var i=0; i<items.length; i++)
{
x++
stats=items[i].split(','); //This is the line that determines what separates values in a line
itemsArray[i]={Artist:stats[0], Title:stats[1], Type:stats[2], Cost:stats[3], Pictu stats[4]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
}
}
function getCDContents()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
var iFrame=document.getElementById('CDIFrame');
var INdata="";
if (iFrame.contentDocument) INdata=iFrame.contentDocument.defaultView.document.body.innerHTML;
if (iFrame.contentWindow) INdata=iFrame.contentWindow.document.body.innerHTML;
INdata=INdata.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
return(INdata);
}
function ShowInfoAndPic(PicID,InfoID){
var Test
Test = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Artist: ' + itemsArray[InfoID].Artist + '</div>' + '<div class="ItemDetailsTitle">Title: ' + itemsArray[InfoID].Title + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArray[InfoID].Type + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArray[InfoID].Cost + '</div>';
if (Test == itemsArray[PicID].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else {
document.getElementById('PicutreID').src = 'Covers/' + itemsArray[PicID].Picture;
}
}
//*******************DVD******************************
var itemsArrayDVD=new Array();
function createArrayDVD()
{
var dataDVD=getCDContentsDVD();
var itemsDVD=dataDVD.split('\n'); //splits the data in retreived from getContents() by line
var statsDVD;
for (var iDVD=0; iDVD<itemsDVD.length; iDVD++)
{
statsDVD=itemsDVD[iDVD].split(','); //This is the line that determines what separates values in a line
itemsArrayDVD[iDVD]={Title:statsDVD[0], Widescreen:statsDVD[1], Actors:statsDVD[2], Type:statsDVD[3], Rating:statsDVD[4], Cost:statsDVD[5], Pictu statsDVD[6]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
}
}
function getCDContentsDVD()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
var iFrameDVD=document.getElementById('DVDIFrame');
var INdataDVD="";
if (iFrameDVD.contentDocument) INdataDVD=iFrameDVD.contentDocument.defaultView.document.body.innerHTML;
if (iFrameDVD.contentWindow) INdataDVD=iFrameDVD.contentWindow.document.body.innerHTML;
INdataDVD=INdataDVD.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
return(INdataDVD);
}
function ShowInfoAndPicDVD(PicIDDVD,InfoIDDVD){
var TestDVD
TestDVD = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Title: ' + itemsArrayDVD[InfoIDDVD].Title + '</div>' + '<div class="ItemDetailsWidescreen">Widescreen (x=Yes): ' + itemsArrayDVD[InfoIDDVD].Widescreen + '</div>' + '<div class="ItemDetailsActors">Actors: ' + itemsArrayDVD[InfoIDDVD].Actors + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArrayDVD[InfoIDDVD].Type + '</div>' + '<div class="ItemDetailsRating">Rating: ' + itemsArrayDVD[InfoIDDVD].Rating + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArrayDVD[InfoIDDVD].Cost + '</div>';
if (TestDVD == itemsArrayDVD[PicIDDVD].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else{
document.getElementById('PicutreID').src = 'Covers/' + itemsArrayDVD[PicIDDVD].Picture;
}
}
text doc for the CD iFrame Save this as CD.txt in the local folder Quote: 3 Doors Down,Away From The Sun,Rock,$5.00 3 Doors Down,The Better Life,Rock,$5.00 Adema,Insomniac's Dream,Rock,$5.00 Aerosmith,Get A Grip,Rock,$5.00 AFI,Sing The Sorrow,Rock,$5.00 Alice In Chains,self titled,Rock,$5.00 Alice In Chains,Dirt,Rock,$5.00 Alien Ant Farm,ANThology,Rock,$5.00 Thanks so much. Brad Hi ppl I'm trying to figure out how to do the following list, with CSS Is there any way that the boxes can accomodate themselves based on the width of their container's space? I mean, if the width of the site is reduced, maybe some box from the 1st row will go down, and so... Thanks Hi all, I have just found this forum and have an issue to solve... I'm creating my online portfolio and as many photographer I have choosen to use an horizontal scrolling. It works fine on all browsers except IE below version 8. Do you know what can be the trick ? The code is the following : There is a main images container in which two type of images are placed (landscape or portrait orientation) Code: #images {
background-color: #FFF;
overflow: auto;
position: absolute;
left: 0;
right: 0;
height : 600px;
top: 63px;
white-space: nowrap;
z-index:1;
overflow-y: hidden;
}
.imagew {
display: inline-block;
width: 800px;
height: 600px;
text-align: center;
line-height: 600px;
}
.imageh {
display: inline-block;
width: 450px;
height: 600px;
text-align: top;
line-height: 600px;
}
after that the code is : Code: <div id="images"> <div class="imagew"><img alt="" src="offshore/1.jpg"/></div> <div class="imagew"><img alt="" src="offshore/2.jpg"/></div> <div class="imagew"><img alt="" src="offshore/3.jpg"/></div> <div class="imagew"><img alt="" src="offshore/4.jpg"/></div> <div class="imagew"><img alt="" src="offshore/5.jpg"/></div> </div> www. cooperworkskilns.com The CSS worked well for a vertical navbar, but I haven't gotten it to work horizontally. I added a float:left to see if it would do it. This isn't working in IE. Lol, its created a rather interesting stairstep effect. Is there a way to make it span evenly across the page without adjusting the width of each <li>? Also, for some reason the footer <div> margin isn't working in FF. If you look at IE vs FF, there is much more space above the Copyright line. #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { margin: 0 0 0 0; } #navbar a { float:left; display: block; text-align:center; color: #000; background-color: #FFF; width: 9em; padding: .2em .8em; text-decoration: none; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } #navbar a:hover { background-color: #003366; color: #FFF; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } I think I have the basics down to making my ul navigation list display as a nav bar. The rules I am using are
Code:
div#navigation
{
background: #7799aa;
color: #ffffff;
margin: 4px 0 0 0;
}
div#navigation ul { list-style-type: none; margin: 0; padding: 8px; }
div#navigation ul li { margin-right: 50px; width: 200px; display: inline; }
div#navigation ul li a { color: #ffffff; width: 400px; }
div#navigation ul li a:hover { background: #255599; }
and the corresponding html Code:
<div id="navigation">
<ul>
<li><a href="/" title="The Company">Company</a></li>
<li><a href="/" title="Our Solutions">Projects</a></li>
<li><a href="/" title="What We Do">Services</a></li>
<li><a href="/" title="Contact Us">Contact</a></li>
<li class="last"><a href="/" title="What people are saying">Testimonials</a></li>
</ul>
</div> <!-- navigation -->
Now, the problem is that I am trying to make the links seem like "buttons" or blocks. I cannot get them to a) have a width; or b) expand to the width of the list item (which I cannot give a specified width to either). I am still working with the design in firefox so I haven't ventured into getting it to work in IE. The XHTML is completely valid as is the rest of the stylesheet. I can post more if necessary, but does anyone have a bone? I am trying to create a navigation menu for a page using images i have sliced in photoshop and I now need to put the images all on a 900px wide line and link them to the appropiate pages. When i put the images next to each other i end up with a gap. The only way I have found to solve the problem is to leave the img src all on the same line. I'm sure this isn't the best way to do it and it is throwing out the div below. Ideas anyone? Code: Code: Original - Code <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> Jake In the html below (see also http://www.creatief-denken.be/opl47k.html) I have in IE a horizontal scrollbar and a vertical scrollbar. In the #contentRight div I use the command "overflow: auto" in order to let the text scroll vertically. I want to get rid of the horziontal scrollbar but I don't want to use the command "overflow-x: none" and "overflow-y: auto", because then the vertically scrolling disappears completely on a MAC (OSX). I have tried already in many ways (change the width of the div's) to let the horizontal scrollbar disappear but it doesn't work. Is there an easy way to get rid of this horizontalscrollbar? This is the HTML: Code: <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<style type="text/css"><!--
.tekst { color: #4c5ea1; font: 11px Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif; text-align: justify; margin-top: 0px; line-height: 16px;}
#contentRight {position:relative; width:490px; top:-10px; right:0px; z-index:100; voice-family: "\"}\""; voice-family:inherit; width:505px; margin-left: 20px;}
/* Again, "be nice to Opera 5". *//*#contentRight {width:450px;}*/
#contentRight p {width:420px; font:12px/16px arial, helvetica, saborder-left-width: 10px; margin: 0px 0px 10px 0; padding-right:0px; padding-left:0px;}
#contentRight img{ border-bottom-style: solid; border-bottom-color: #9DEFC7;border-right-style: solid; border-right-color: #9DEFC7; border-left: 15px; border-left-style: solid; border-left-color: #9DEFC7; border-top-style: solid; border-top-color: #9DEFC7; }
#contentRight div { font-size: 11px/16px arial, helvetica, sans-serif; height: 335px; overflow: auto; width: 465px; }
H1 { color: #0C0F7E; font-weight: 400; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; line-height: 32px; margin-bottom: -5px;margin-left: 0px;}
-->
</style>
</head>
<body bgcolor="white" text="black">
<table border="0" bordercolor="red" width="100%" height="100%" align="center">
<tr height="100%">
<td align="center" height="100%" valign="top">
<table width="680" border="0" align="center" cellpadding="0" cellspacing="0">
<tr height="435">
<td colspan="3" height="435" width="510" bgcolor="#9DEFC7">
<div id="contentRight"><br>
<div class="tekst">
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<br><br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br></p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item? Hey guys nice forums.....am a css noobie i wanna know one thing how do i make a div stretch horizontally 100% , basically i want my website to be divided into 2 colors black and white the lower part would be black and the upper part would be white , now am not using a div container as i read through previous topics before so am using 2 divs as follows <div id="White">White area</div> <div id="Black">Black area</div> when i preview in IE i see the colors as i want but the divs do not stretch 100% as i said in the css. how do i do it ? hope i made myself clear on this I've been grappling with this for a long while now. I pretty much have it working, except for the life of me I cannot get the drop down menus to appear under the corresponding link. position: absolute makes the menus always appear off to the left. Does anyone know what the secret is to this? Code: <div id="nav_wrapper"> <div id="nav_bar"> <div id="nav_content"> <ul id="nav_ul"> <li><a href="/">Home</a></li> <li><a href="/forum/">Forum</a> <div class="nav_subcontent"> <ul> <li><a href="/forum/search.php">Search</a></li> <li><a href="/forum/memberlist.php">Members</a></li> </ul> </div> </li> <li><a href="#">A link without a menu</a></li> </ul> </div> </div> </div> Code:
/* Wrapper */
#nav_wrapper {
clear: both;
}
/* Bar */
#nav_bar {
background: url('images/nav_swish_fade.jpg');
background-repeat: repeat-x;
height: 36px;
}
/* All the buttons within the bar, the middle portion */
#nav_content {
display: inline;
margin: 0 auto;
text-align: center;
background: #fff;
height: 36px;
}
/* Entire unordered list */
#nav_ul {
list-style: none;
position: relative;
}
/* Top level unordered list */
#nav_content ul>li {
display: block;
}
/* Top level unordered list links */
#nav_content ul>li a {
display: block;
float: left;
padding: 9px;
margin-left: 2px;
margin-right: 2px;
}
/* Menus */
.nav_subcontent {
display: none;
position: absolute;
background: #222;
margin-top: 8px;
}
/* Menu link */
#nav_content .nav_subcontent a {
display: block;
padding: 9px 20px 9px 0;
margin-left: -5px;
text-align: left;
min-width: 100px;
}
/* Show menus */
#nav_content ul>li:hover .nav_subcontent {
display: block;
}
Hello all, I've just recently began adventuring into the world of CSS and am in need of some help. I've created a horizontal nav menu that works perfectly fine in FF, Opera, etc. but refuses to listen in IE. The drop-down menu is positioned over to the right in IE, while in every other browser the menu is positioned (correctly) centered. I'd post a url but I'm just working offline on my computer so I don't have one to provide :\. I appreciate any advice you guys got for me. HTML (probably only the commented nav bar section is relevant) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> Rutgers Libertarians | Home </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css" title="BasicStyle" media="screen"> @import "test.css"; </style> </head> <body> <div id="screen"> <div id="header"> <img src="header.jpg" width="1000" height="145" alt="banner" /> </div> <!--Navbar--> <ul id="navbar"> <li><a href="test.html">Home</a> </li> <li><a href="">Meetings</a> <ul> <li><a href="#meetings">Regular Meetings</a></li> <li><a href="#events">Events</a></li> <li><a href="#photo">Photos</a></li> </ul> </li> <li><a href="">Invisible Hand</a> <ul> <li><a href="#hand">Overview</a></li> <li><a href="#articles">Articles</a></li> </ul> </li> <li><a href="">About Us</a> <ul> <li><a href="#liber">Libertarianism</a></li> <li><a href="#board">Executive Board</a></li> <li><a href="#contact">Contact Us</a></li> </ul> </li> <li><a href="">Links</a> <ul> <li><a href="#main">NJ Party</a></li> <li><a href="#mutt">National Party</a></li> </ul> </li> </ul> <!--Sidebar--> <div id="leftbar"> <h3>News</h3> <ul id="leftlinks"> <li><a href="#news1">News 1</a></li> <li><a href="#news2">News 2</a></li> <li><a href="#news3">News 3</a></li> </ul> <h3>Site Map</h3> <ul id="rightlinks"> <li><a href="test.html">Home</a></li> <li><a href="test.html">Meetings</a></li> <li><a href="test.html">Invisible Hand</a></li> <li><a href="test.html">About Us</a></li> <li><a href="test.html">Links</a></li> </ul> </div> <!--Main Content--> <div id="main"> <div id="title"> <h1>Rutgers Libertarians</h1> <p>The Rutgers Libertarians are an organization dedicated to bringing the philosophy of liberty to Rutgers University. We welcome any who believe in any form of Libertarianism or just want to know what Libertarianism is.</p> </div> <div id="news"> <div class="news"> <h2><a name="news1">Libertarian Party Takes White House</a></h2> <img src="white.jpg" width="100" height="100" alt="white" /> <p>In an unprecedented turn of events the Libertarian Party stormed the gates of the white house Tuesday, placing Ron Paul as the head of government. Paul has promised an immediate withdrawal from Iraq, the dissolution of the Federal Reserve, and the holding accountable of failing banks.</p> <div class="comments"> <a href="">comments</a> </div> </div> <div class="news"> <h2><a name="news2">Pot of Brownies Event</a></h2> <img src="brownie.jpg" width="100" height="100" alt="brownie" /> <p>The Rutgers Libertarians held their annual Pot of Brownies event on Wednesday. There was a record 10,000 students in attendance and over 12,000 brownies were consumed - pot free. The message of decriminalizing drugs really seems to be catching on.</p> <div class="comments"> <a href="">comments</a> </div> </div> <div class="news"> <h2><a name="news3">Invisible Hand Remains Invisible</a></h2> <img src="invisible.jpg" width="100" height="100" alt="invisible" /> <p>The Rutgers Libertarian publication, <i>The Invisible Hand</i> has been delayed once again. Though the club president has reported recieving articles, no one seems to know why the newspaper never seems to come out.</p> <div class="comments"> <a href="">comments</a> </div> </div> </div> </div> <!--Main end--> </div> <!--Screen end--> </body> </html> CSS Code: /* CSS Formatting */
body {
text-align: center;
background: #153464;
}
#main {
background: url(bg.gif);
border: 1px black solid;
padding: 10px;
}
img {
border: 1px solid black;
}
h1 {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;;
font-size: 22px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
color: #ACACAC;
margin-bottom: 25px;
border-bottom: 1px solid #ACACAC;
}
h2 {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
text-align: left;
color: #ACACAC;
border-bottom: dotted 1px #ACACAC;
margin-bottom: 0px;
}
h3 {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
text-align: left;
color: white;
border-bottom: solid 1px white;
margin: 10px 0 0 3px;
}
p {
font-family: "Rockwell", "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 12px;
font-weight: 400;
color: white;
}
#title {
margin: 10px;
border: black solid 1px;
background: #30538D;
padding: 10px;
}
#news {
margin: 10px;
border: black solid 1px;
background: #30538D;
padding: 10px;
}
#screen {
/* top, right, bottom, left */
width: 1000px;
margin: 20px auto 0 auto;
}
#main {
width: 810px;
margin: 0 auto 70px auto;
float: right;
}
.news {
height: 150px;
}
.news p {
text-align: justify;
}
.news img {
float: left;
margin: 13px 15px 0 0;
border: 1px solid black;
}
#links a {
color: #EF8861;
border: 0;
padding: 10px 10px 0 0;
}
#links a:visited {
color: #EF8861;
}
#links a:hover {
color: #F8C473;
}
#leftbar {
display: block;
width: 150px;
border: 1px solid black;
float: left;
text-align: left;
background: url(bg3.jpg);
}
#leftbar p {
padding-left: 10px;
}
#leftbar a, #leftbar ul {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
display: block;
width: 150px;
text-decoration: none;
color: black;
list-style: none;
text-align: center;
}
#leftbar ul {
position: relative;
left: -41px; /* ** Copy this for other problem areas ** */
}
#leftbar a:link, #leftbar a:visited {
background: white;
border: 1px solid black;
margin-bottom: 10px;
padding: 3px 0 3px 0px;
}
#leftbar a:focus, #leftbar a:hover, #leftbar a:active {
background: #30538D;
border: 1px solid black;
margin-bottom: 10px;
padding: 3px 0 3px 0;
}
.comments {
text-align: right;
}
.comments a:link, .comments a:visited {
position: relative;
top: 50px;
color: white;
padding: 3px 0 3px 0px;
text-decoration: none;
}
.comments a:focus, .comments a:hover, #leftbar a:active {
margin-bottom: 10px;
padding: 3px 0 3px 0;
text-decoration: underline;
}
/* Nav Bar */
#navbar, #navbar ul { /* Remove default list formatting; Inline replicates problem in IE */
padding: 0;
margin: 0;
list-style: none;
}
#navbar li { /* Make navbar appear horizontally */
float: left;
width: 175px;
padding: 10px 0 10px 25px;
color: white;
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
}
#navbar li ul { /* Hide second level when not hovered */
width: 175px;
position: absolute;
left: -999em;
}
#navbar li:hover ul{
left: auto;
background:url(bg3.jpg);
border: 1px solid black;
padding: 5px 0 5px 4px;
margin-top: 5px;
margin-left: -5px; /* -90 for IE */
}
#navbar a {
width: 175px;
display: block;
text-decoration: none;
color: white;
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
}
#navbar li ul li { /* Make list items smaller */
text-align: left;
}
#navbar li:hover ul li {
border: none;
padding: 4px;
}
#navbar a:hover {
text-decoration: underline;
}
#leftbar {
clear: both;
}
Thanks for your help! |
|||||||