|
HTML - Overflow On Lists
Hi, i want to add a horizontal overflow to the div element that holds the UL. each LI is displayed along side each other using Float:left. however, when they reach the end of the page it starts a new line. how can i get it so it doesnt start a newline, but carrys on in a line and can be scroll-able? thankyou
Code: bodywrapper {
width:930px;
margin:auto;
margin-top:20px;
background:url(../images/layout/main_body_bg.jpg) repeat;
}
/*Image Gallery*/
#gallery ul {
margin-left:-30px;
margin-bottom:0;
margin-top:-10px;
}
#gallery ul li {
display:block;
float:left;
height:100px;
width:100px;
padding-top:10px;
padding-right:10px;
}
.thumbnails {
outline:none;
border:none;
}
.thumbnails_link {
outline:none;
}
Similar TutorialsHello, I've been working on my website recently and I've found a problem that I have no idea how to fix. I have an unordered list that serves as the menu on the left of the site. I've been trying to remove the black dots that come with the unordered list. They only show up on the first one and they blemish the site. I want to keep it with a list because it allows for pleasing aesthetics in combination with my CSS (link hover changes the color). Is there a way I can keep the same look and get rid of the dots? Code: <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Bob's Page</title> </head> <body> <center> <img class="center" src="img/banner.jpg"></center> <div class="left"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="products.html">Products</a></li> <li><a href="mailto:robert.t.adams5@gmail.com">Contact Me</a></li> </ul> </div> <div class="right"> <p>Text goes here. </div> </body> </html> look at it he http://eco-heater.bobadams.x10hosting.com Hi, I have a basic understanding of HTML, and now I have a problem. My blog is on www.wrappedfolds.blogspot.com. I am trying to make my list on my blog navigational rather than just a list. I want all of the designs (the list is after where it says "a list of my designs") to be links to the article that they're posted on. I have read plenty about it, but I can't seem to get it to work. Hi all.... Ive been having issues trying to get these two lists below to look the same. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>MESH, Inc. - Home</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
<img id="banner" src="images/topbanner.png" alt="top banner">
<ul id="top-nav">
<li><a href="mcad_project.html">mcad<span id="mcad"></span></a></li>
<li><a href="niosh_project.html">niosh<span id="nios"></span></a></li>
<li><a href="mcad_project.html">mcad<span id="moad"></span></a></li>
<li><a href="mcad_project.html">mcad<span id="scad"></span></a></li>
<li><a href="cloud_mapping.html">cloud<span id="clou"></span></a></li>
<li><a href="cloud_mapping.html">cloud?<span id="what"></span></a></li>
</ul>
<ul id="nav">
<li><a id="active" href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Engineering Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about_us.html">About Us</a></li>
</ul>
<div id="content">
<div align="center"><span style="font-weight:bold;">ENGINEERING SERVICES</span></div><br>
<p>
Since 1978, MESH has been providing clients with engineering services to
solve their most complex problems. We specialize in:
</p>
<ul id="services">
<li>Software and hardware interfaces </li>
<li>Real-Time Software </li>
<li>Prototyping </li>
<li>Sensor Interfacing </li>
<li>Signal Processing </li>
<li>Electronic Design </li>
<li>User Interface and Design</li>
</ul><div align="center"><span style="font-weight:bold;">CHEMICAL/BIOLOGICAL STANDOFF MONITORING PRODUCTS</span></div><br>
<p class="padding-bottom">MESH provides leading edge technology to safeguard people and facilities from chemical and biological hazards. The MESH standoff systems, unlike point detectors, are not dependent on airborne threats finding their way to the detector or sampling point. The standoff sensors include: </p>
<ul id="services2">
<li>MCAD – Standoff sensor for chemical vapors at distances in excess of 6km </li>
<li>Dragonfly – Standoff aerosol sensor (either chemical or biological). </li>
<li>Firefly – Standoff vapor or aerosol hyperspectral imager based on innovative technology, resulting in an affordable approach to the next generation of chemical sensing. </li>
</ul>
</div><!-- end #content -->
<div id="footer">610-932-7754 <a href="mailto:info@meshoxford.com">info@meshoxford.com</a></div>
</div><!-- end #container -->
</body>
</html>
Heres the style sheet.... dont think this is the problem Code: body {
margin:10px;
background-color:#f0f0f0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
overflow-y:scroll;
}
#container {
width:776px;
margin:auto;
background-image:url(../images/container-white-bg.png);
box-shadow:#333 15px 15px 30px;
}
#banner {
display:block;
width:760px;
height:120px;
padding:8px 8px 0 8px;
background-color:#066;
}
#top-nav {
width:768px;
height:81px;
padding:8px 0 8px 8px;
margin:0;
list-style-type:none;
background-color:#066;
}
#top-nav li {
float:left;
margin-right:8px;
}
#top-nav a,#top-nav span {
position:relative;
display:block;
width:120px;
height:81px;
line-height:81px;
font-size:90%;
font-weight:bold;
color:#000;
text-align:center;
background-color:#cff;
}
#top-nav span {
position:absolute;
top:0;
left:0;
background-image:url(../images/gallery-banner.png);
}
#top-nav span:hover {
opacity:0.5;
filter:alpha(opacity=50);
}
#top-nav a:hover {
text-indent:-9999px;
}
#top-nav #active-top:hover {
text-indent:0;
}
#top-nav a:hover {
text-indent:-9999px;
}
#top-nav #active-top span {
display:none;
}
#mcad {background-position:-8px -8px;}
#nios {background-position:-134px -8px;}
#moad {background-position:-260px -8px;}
#scad {background-position:-386px -8px;}
#clou {background-position:-512px -8px;}
#what {background-position:-638px -8px;}
#nav {
float:left;
width:120px;
padding:0 8px;
margin:0;
list-style-type:none;
background-color:#066;
}
#nav li {
margin-bottom:2px;
}
#nav a {
display:block;
width:120px;
padding:30px 0;
font-size:90%;
font-weight:bold;
color:#000000;
text-align:center;
background-color:#699;
}
#nav a:hover {
color:#fff;
}
#nav #active {
background-color:#cff;
}
#nav #active:hover {
color:#000;
}
#content {
float:left;
width:610px;
padding:25px 15px 10px 15px;
}
h1 {
margin:0 0 10px;
font-size:140%;
text-align:center;
}
#content p {
margin:0 0 10px;
font-size:90%;
color:#000;
}
#services {
font-size:110%;
color:#000;
}
.text-indent {
text-indent:20px;
}
.padding-bottom {
padding-bottom:16px;
}
#footer {
clear:both;
line-height:30px;
font-size:90%;
color:#cff;
text-align:center;
background-color:#066;
}
#footer a {
margin:0 40px;
color:#cff;
}
Thanks Coothead edit: photo of what it looks like in FF Hi i am working on XSLT. the problem some text is given with list labels but it is not aligned properly. so for that i created a <div> and <span> tag as below: <ul style="list-style:none"> <li> <span style="float:left;width:30px;text-align:left;position:relative"> <span class="ro">(a)</span>*</span> <div style="margin-left:10px;width:75%;float: left;position:relative">The conduct of Centrelink cannot be made the subject of complaint or inquiry under the Anti-Discrimination Act because:<ul style="list-style:none"><li> <div style="clear:both;"/> </li> There was also issue in firefox of overlapping text which was solved by using clear:both. the issue is that in <div> i have used width="75%" due to which much whitespace is coming on R.H.S of the page. is there any other option instead of using width? width=75% is chosen after many trials. as nested lists can also be there. otherwise text comes to next line. I have some drop down list tests I am playing with he http://www.my-plague.net/list.php There are a few thing I need help with: 1) If I don't put a "select" url, if go is clicked on I get a server error. I just want it to do nothing. e.g. with the header. 2) If I put a style for a "select" that has no url, then the list reverts to a square more box-like shape. 3) I want to make the go button open the urls in a new window. 4) I don't know what the js code at the end does because it still works without it (found the code in a tutorial) : Code: <script language="JavaScript">
<!--
function gotoLink(form) {
var OptionIndex=form.ListBoxURL.selectedIndex;
parent.location = form.ListBoxURL.options[OptionIndex].value;}
//-->
</script>
Hey -- is there a difference between how Opera and Firefox interpret lists? My site appears to be reading the same in both browsers except that the lists (a considerable part of the design) are not showing up in the same manner. Is there something I can do about this? http://www.trekandromeda.com/index/techindex.html http://www.trekandromeda.com/index/home.css The entire site is written at this point so the other pages will show the same problem. Can anyone help me with this? I put this code in : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org.TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My first web page</title> </head> <body> <h1>My first web page</h1> <h2>What this is</h2> <p>A simple page put together using HTML</p> <h2>Why this is</h2> <u1> <li>To learn HTML</li> <li> To show off <o1> <li>to my boss</li> <li>to my friedns</li> <li>to my cat</li> </o1> </li> <li>Because I've fallen in love with my computer and I want to give her some HTML lovin</li> </u1> </body> </html> I'm not getting the indentation or the numbers for the ordered list. Any suggestions would be greatly appreciated. I am currently trying to create some nested lists to display the following... A...R...X B...S...Y C...T...Z (where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following... A B...R C...S...X .....T...Y ..........Z I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel=stylesheet href="links.css" type="text/css"> </head> <body> <div id="container"> <ul id="links-nav"> <li> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </li> <li> <ul> <li><a href="#">R</a></li> <li><a href="#">S</a></li> <li><a href="#">T</a></li> </ul> </li> <li> <ul> <li><a href="#">X</a></li> <li><a href="#">Y</a></li> <li><a href="#">Z</a></li> </ul> </li> </ul> <div class="clear"></div> </div> </body> </html> CSS Code: #container{
width:960px;
margin:0px auto;
border: 1px solid #000;
padding:20px 10px;
height:auto;
font-family: Arial, sans-serif;
font-size:11px;
}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
a{
text-decoration:none;
color:#555;
}
#links-nav li, li ul li{
list-style:none;
}
#links-nav{
display:inline;
margin:0;
padding:0;
}
#links-nav li ul{
float:left;
padding:0;
width:168px;
padding: 0px 10px;
}
Hey everyone, I just want to ask a simple question... What is the best element to use to arrange content? I've tried div's, tables and now lists but I still don't know what to use. What do you guys think? Hey Everyone, Has anyone else had this problem? I create an ordered list, and set the type="1". The numbers appear in Firefox, but do not appear in IE7 even though there is a margin there for the number. Help is appreciated. Hello, I am new here and hope someone can help. I am creating a page where I need to have several nested lists. The 'numbering' is showing up correctly but the 'nested' lists are not indented. Can anyone take a look at the page and my source code and see if you can help me figure out what is wrong? go to http://www.prewrath.com/index2.html Thank you! bzig hi all, im having a bit of a problem displaying a list horizontally, and its really getting a bit frustrating. as far as i can see, it should be a case of using display:inline on the li tags, but so far no luck. ive included my css below: Code: #navigation ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
#navigation ul li
{
display:inline;
}
#navigation ul li a
{
display:block;
width:90px;
height:30px;
color:#fff;
text-align:center;
text-decoration:none;
}
#navigation ul li a:hover
{
background-color:#EF4252;
}
and my html: Code: <td id="navigation"> <ul > <li> <a href="contact.html" >Contact Us</a> </li> <li> <a href="wwd.html" >What We Do</a> </li> </ul> </td> any help would be appreciated. thanks Hi folks, I would really like to create a list that looks like this: A1) Item 1 A2) Item 2 A3) Item 3 ... The A ties in to a "type A" something, and another list with B1, B2, B3, etc. items will be tied into a "type B" something, and so on. So far I haven't been able to figure out how to do this. I can make an (A, B, C) or (a, b, c) or (i, ii, iii) or of course (1, 2, 3) list, but none of these will serve my purposes. I very specifically need an (A1, A2, A3) list. Am I pretty much stuck doing this manually with a table or is there a way to accomplish what I'm after using the list or order list tags? Does CSS provide a means? This may belong in CSS, but I don't know how you do it. Hello everyone! I have this client who has a lot of resellers, and all of them are on a list in his website, so that when customers look for someone to buy from, they can choose through his site. However, he is afraid that if the list is static, no one will bother to look beyond the first 2 or 3 names, and the ones in the bottom of the list will never be contacted. So, I need to create a method to display the resellers list in such a way that everytime one accesses the list, the order is changed at random, but always displaying all the names. The HTML code the names are arranged right now is a simple table with one reseller per TR tag. I don't work with MySQL, so the solution should be something else... PHP or Java preferred. Thanks in advance! Hello, I have one problem with overflow in IE, the problem results from having height of my div determined in % I guess. If I change it to fixed size in px I have no problems Here is the code : Code:
<style type="text/css">
...
div.text {
font-size: relative;
width:85%;
height:57%;
overflow-y:scroll;
}
...
</style>
<div class="text"> .... </div>
I need the size of this div to be set in % and overflow to work, can I do that in any way ? (this woks nice in firefox, however not in IE6) Thank you!! So I have this table, and I'm trying to get the overflow to work, but it's not working. Everytime I put a bunch of words it just streches and goes out of the specific height I want it to be at. Can someone help me? Make it where it overflows? Ppllleeassee. Here's my code. <table id="maintable"> <tr> <td colspan="2" width="303px" height="155px" class="words" overflow="auto"> 1111 </td> <td colspan="1" width="150px" height="155px" class="words"> 555 </td> <td colspan="1" rowspan="2" width="150px" height="205px" class="words"> 888 </td> </tr> <tr> <td colspan="1" rowspan="4" width="150px" height="300px" class="words"> 222 </td> <td colspan="1" rowspan="2" width="150px" height="150px" class="words"> 333 </td> <td colspan="1" rowspan="2" width="150px" height="150px" class="words"> 666 </td> </tr> <tr> <td colspan="1" rowspan="2" width="150px" height="125px" class="words"> 9999 </td> </tr> <tr> <td colspan="2" rowspan="4" width="300px" height="150px" class="words"> 4444 </td> </tr> <tr> <td colspan="1" width="150px" height="125px" class="words"> 777 </td> </tr> </table> <style type="text/css"> table#maintable { background-color:#222222; border: 2px solid #FF0099; } table#maintable td { padding: 5px; border: 1px solid #FF0099; vertical-align: top; text-align: left; } .words { color: #FFFFFF; } </style> Hello All, Sorry to ask for help on my first visit. Is there any way to link drop down lists to each other using html? For example, the first drop down list would have states/counties. Once they select one, on the second drop down list it automatically generates all the towns in that county/state. It's meant to be part of a form for a website. Many thanks to all I'm developing a website that contains a lot of legal statutes. I'm trying to keep to html lists rather than using tables, but have come unstuck with how to display custom numbers in an ordered list. The lists usually begin with (1), then (a) is the indent, then (i) is the next level. These are easy to handle with <ol type=1>, <ol type=a> and <ol type=i>. The next level has (aa), which I've managed with <li value=27> and so on. However, I'm not certain how to handle the following types: (4A) - in between the number (4) and (5) and random numbers, such as (aE), etc. With regard to numbers like (4A), they need to be in the same bracket and can't be displayed as (4)(A) - which is a different reference in the legislation. Any help in displaying custom numbers (even user defined - e.g. for this particular bullet point display "4A") would be great. Thanks in advance. A little out of my depth here, and my site is based on a DW template. I have a photo section with thumbnails, that is expanding. I have gone from 10 rows to 30, and in the process broken something. I have compared the code from my original 10 rows to the 30 and cannot find anything that would cause the issue, so am hoping for some help. http://www.uniquefinishing.co.uk/photopages/photos.html On the top horizontal menu, click on "Videos", then "photos". See the table has dropped? This is the only consistent replication of the issue I can find. If you now keep clicking on the same "photos" link on the top menu, it randomly drops and fixes itself occasionally. This happens randomly from any page to the "photos" page. Where should I be looking? |
|||||||