CSS - <select> Tag With Horizontal Scroller
Hi,
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 Similar TutorialsI 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. Is there any way to add a horizontal scrollbar to a SELECT listbox that works in both Mozilla and IE? I have a mutiple-select enabled box with about 50 items, only displaying 10 rows, and some of the rows are really wide because the text is very lengthy. I'd like to add a horizontal scrollbar to the SELECT box in addition to the vertical scrollbar. Here's what I've tried - I'm running Windows XP and testing with Firefox 1.0 and IE 6.0.2. a) Adding various overflow styles, like overflow:scroll and overflow-x:scroll. None of these cause the horizontal scrollbar to show up. b) Adding the mozilla "-moz-scrollbars-horizontal" style, which doesn't add it even in Mozilla. c) Surrounding the SELECT inside a DIV tag, with scrollbars. This works, and IE is even smart enough to remove the vertical scrollbars on the SELECT listbox if I make it tall enough to show all choices at once. However, in Mozilla, the vertical scrollbar stays visible even when it's not needed. So in this case I end up with two vertical scrollbars - one for the SELECT and one for the DIV. I tried various things to disable the Mozilla vertical scrollbar but that didn't work either. So basically I'm looking for a way to either: a) Add a horizontal scrollbar to a SELECT that works in both browsers. b) Or, a way to disable the vertical scrollbar in the SELECT object in Mozilla Firefox, so that I can use the DIV trick. Any clues? 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? 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, 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 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. How do I create a div with a horizontal overflow? I have a div box which is 150px high and 200px wide. I need it to fill up the height and then overflow to the right so I can scroll it horizontally. The div box contains thumbnail images. what i want as horizontal fly out menu BUT I want the list of items to appear horizontally in a line below. These menus have the items appear vertically from a horizontal menu i looked at these and could find one http://www.cssdrive.com/index.php/menudesigns/category/C20/ I've tried the tutorials on CSS menus but can't seem to get it to work right for my project. I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help? The code is below: Code: <tr> <td width="766"> <div id="navcontainer"> <ul> <li><a href="">Home</a></li> <li><a href=""> Project Status</a></li> <li><a href=""> Tasks</a></li> <li><a href="">General Information</a></li> <li><a href="">Completed Tasks</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </div> CSS Code: body,html { margin: 0; } #navcontainer ul { list-style-type: none; text-align: center; font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; margin: 0px; padding: 0px; } #navcontainer ul li { display: inline; } #navcontainer ul li a { text-decoration: none; padding: 0.2em 1em; color: #fff; background-image: url(images/back.gif); height: 24px; line-height: 23px; } #navcontainer ul li a:hover { color: #fff; background-color: #960033; background-attachment: fixed; background-repeat: repeat; background-position: center; background-image: url(images/backover.gif); } --- I don't have an external webserver so i'll explain as best I can. I have a left and right section of my webpage each with their own background. The problem is a white gap between to the two backgrounds. I set the margin and padding on everything to 0 and it has no effect. This occurs in IE and FF. PHP Code: <html> <head> <style> body {margin: 0; padding: 0;} .left {float: left; background-image: url('background_left.jpg'); height: 100%; width: 300px; background-repeat: no-repeat; background-attachment: fixed; margin: 0; padding: 0;} .right {background-image: url('background_right.jpg'); background-repeat: repeat-x; height: 100%; margin: 0; padding: 0;} .menu {} .content {} </style> </head> <body> <div class="left"> <div class="menu"> </div> </div> <div class="right"> <div class="content"> </div> </div> </body> </html> I've been fighting with this for a good couple of days here so I figure it's time to come ask people who might have a better idea than I do. I've been trying to get this list to display on a horizontal bar. It's not a navigation bar that's an integral part of the site's layout, just an unordered list that I need to have go across a line instead of down. I got the code from a site that does pre made menus because I'm still new to all of this so, you know, blah life story. Ha. My HTML looks like this: Code: <li><a href="#url">2005<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub pos1"> <li><a class="sub2" href="#">August<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="border b1"></div> <div class="base div1"> <h4>August 2005</h4> <p>August 29</p> <p>New school division office will be in Weyburn</p> <ul> <li><a href="#url">Section 1</a></li> <li><a href="#url">Section 2</a></li> <li><a href="#url">Section 3</a></li> </ul> </div> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> and I'm still not really sure what part of the code is the CSS affecting this but I think? it's this: Code: #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul {float:left; padding:0; margin:0; list-style:none; width:200px;} #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li {display:block; float:left; width:150px; height:auto; padding:0; margin:0;} #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a {width:190px; padding-left:10px; background:#fff url(vertical-list/dot.gif) no-repeat left center; color:#000; border:0; margin:0; height:auto; line-height:18px;} #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a:hover {color:#069;} Is there a way to over ride this code so I can put the list on a single line? I'm staring at the emoticon bashing its head against a wall and it seems pretty accurate at this point. Hi, I have the following menu that is currently laid out with a table: http://www.ianarmstrong.com/menutest/ I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image. I need a way to handle the 5 different images, and have a mouseover effect as well. Could someone offer some direction on this problem? 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 Hi, I'm trying to make a horizontal list using li tags. I got the text to align horizontally but the bullet icons I want to use (or even when I try with the default bullets) don't appear. Can anyone help me out with this? Here's the code : Code: #onlineToolsNav ul { margin-top: 0px; margin-bottom : 0px; margin-left : 5px; padding: 0px; line-height: 25px; white-space: nowrap; display : inline; } #onlineToolsNav li { display: inline; list-style-image: url(onlineArrow.jpg); list-style: url(onlineArrow.jpg); } #onlineToolsNav li:before { content: url(onlineArrow.jpg); } #onlineToolsNav li.first:before { content: " "; } <div id="onlineToolsNav"> <ul> <li><a href="link1.html">link1</a></li> <li><a href="link2.html">link2</a></li> <li><a href="link3.html">link3</a></li> <li><a href="link4.html">link4</a></li> <li><a href="link5.html">link5</a></li> <li><a href="link6.html">link6</a></li> </ul> </div> Thanx Olografix Sorry if i repeat someone else's question, i've actually stumbled upon lots of solutions for this matter, but, as usual, there just seems to be no "only one" solution, so maybe someone here knows. In the good old days if i wanted to center all kinds of stuff, i'd use <div align="center">all kinds of <stuff></stuff></div>. Now i visit the w3c site and see the beautiful "deprecated" word by the "align" property, so i guess they once again need us to bash our heads against the walls with the most stupid invention in mankind: css. So can someone tell me how to center div's content horizontally? And not just text, i mean images, other tables or other kinds of things. If i assume correctly: If i use text-align - this is meant for text only If i use margin: 0 auto - that would align the div itself and not the content and we would need to know its width So is there any normal solution to this? 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 |