|
CSS - Spacing Inside A List
Hi,
I was wondering if it's possible to space out seperate blocks of text within a <ul> element? So for instance: Code: <ul> <li>Caption1 Caption2 Caption3</li> </ul> In that code I want to have each word spaced out a set amount. I guess I'm basically trying to emulate table rows, but I can't use tables for what I'm trying to do. Similar TutorialsI have a div, which inherits properties from a style sheet. I can't change the style sheet, but I can apply inline properties to the div. How can i make the elements contained in the div have a little space between each other? The equivalent when using a table would the the cellSpacing attribute. thanks I have this: Code:
li {
line-height: 25px;
}
Which does sort of what I want. What I really want is for the spacing between bullets to be 25px and the line spacing within a bulletted point to be normal .. is there a way to do that? I have a list of faculty members with a picture and bio for each entry and I am having trouble creating a consistent amount of vertical space between the entries. This is because some of the bios are shorter than the picture and some are longer, requiring me (for the shorter entries) to add <br />s to the bio to reach the end of the picture. Of course, depending on the browser and display settings, a greater or smaller number of <br />s are needed to get to the end of the picture so code that looks right on one pc does not look right on another. Here's a sample of the code I am using: Code: <h3 class="blue_title">Bob Smith</h3> <p><em><img height="141" width="120" src="images/stories/bob.jpg" alt="bob" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Math and Physics.</em><br />The quick brown fox jumped over the lazy dog. <em>Since 1999.</em></p> <br /><br /><br /> <p> </p> <h3 class="blue_title">Edgar Jones</h3> <p><em><img height="141" width="120" src="images/stories/edgar.jpg" alt="edgar" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Spanish, Greek, Latin,<br />and Latin American History.</em><br />he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog.<em>Since 2005.</em></p> <p> </p> Because the bio in the first entry is short, I need those three extra <br />s to reach the bototm of the picture (otherwise the next entry floats up and into the first). But as a result, the spacing between entries where the top entry needed <br />s looks wrong compared to other entries depending on the user's individual settings. Any sugestions for how to fix this problem? I guess I could set up a table and use different rows for each entry, but I was hoping not to need a table. Thanks. (p.s. - I am using joomla for this site but I don't think that's relevant to this question.) Hi there guys, This is a pretty specific problem to my website, but I can't seem to find out why part of my navigation list moves down when an element is shown by Javascript in IE. So I can't plug in a url into this post, so I suppose I'll just explain the problem. I have a list navigation with images, and within one of the list elements is another nested list. When I click on the link that then uses JS to display the subnavigation, the link below that shifts down something like four pixels when its not supposed to, and I couldn't fix it by playing with CSS for some reason, but I'm assuming the problem is hidden in there somewhere. I've been trying to resolve this for a couple days; if anyone could help me out, I'd really appreciate it! Trying to resolve the spacing issues when using a list. IE honors the set margin while FF appears to add much more amrgin spacing. I have tried using display:inline but when I do, I lose the haning indent. Any suggestions? Is there a way to decrease a default spacing between bullet and text in <ul>? Trying to follow "the best practices" I wanted to convert my menu from bunch of <a></a><br> to unordered list. I already display arrows icon next to menu items so I though it would save me some typing on <img>. But there is one problem: I can't decrease the space between bullet and text. There is bullet, around one em of empty space and then text. It breaks my layout, making menu items wrap to another line, and also wastes some space. I tried to play with margins and padding, but bullets still stay at the same place. Also negative margin and padding doesn't seem to work. If I use a background image instead of bullet, I can adjust the spacing but then the bullet position doesn't seem consistent and get cramped on text in longer lines. Damn another problem good thing you guys are so helpful.... What am I doing wrong here? css Code: #footer{
position:relative;
z-index:-1;
margin-top:-50px;
background-color:#666666;
width:100%;
height:100px;
margin-left:auto;
margin-right:auto;
border-top:#000000 10px solid;
}
#footer ul{
position:absolute;
padding:0px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
#footer li{
display:inline;
padding:0px;
margin:0px;
}
#footer a{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
border-right:#FFFFFF 1px solid;
}
html Code: <div id="footer">
<ul>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
<li><a href="#">Nav 4</a></li>
<li><a href="#">Nav 5</a></li>
<li><a href="#">Nav 6</a></li>
<li><a href="#">Nav 7</a></li>
</ul>
</div>
Just can't seem to get the list centered inside the div I have an iframe that contains a CSS drop down list and I'm having problems getting the drop down list to display beyond the bottom of the iframe. The drop down list cuts off at the bottom of the iframe. Is it possible for a css drop down list to display beyond the borders of an iframe? I've experimented with z-index and have not had any luck yet. Any ideas? I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks Hi, Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side? /Hubba Bubba Hi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code:
<ul id="nav">
<li class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>
</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>
<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
<li class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>
here is my all related css, external css file, Code:
#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;}
/* All Levels */
#nav li { text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}
/* 0 Level */
#nav li { clear:both; position:relative; display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }
#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}
#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }
#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }
/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }
/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }
/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
#nav li ul { display:none; }
#nav li:hover ul{display: block; }
#nav ol { margin-left:5px; margin-bottom:10px; }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }
inline css code to overwrite the default behavior for target page Code:
ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}
ul#nav ol li a { padding:0px; }
ul#nav ol li { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; }
I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. Hi, I have an OL list (the numbered one) and the horz gap between the list item number (as automatically generated by OL) and the text of the LI is too big (according to client). Looks fine in FF but is bigger alright on IE (ahem naturally .....) I've played with the CSS for both the OL & LI styles even setting all margins and paddings to 0 but without effect on the gap. Is there any way to style that gap? Code below. Kevin <ol class="most_read"> <li class="most_read_li">Apples</li> <li class="most_read_li">Oranges</li> </ol> .most_read { text-align:left; color:#808080; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal; margin-left:30px; padding:0px; margin-top:5px; } .most_read_li { margin-bottom:7px; margin-right:7px; } Hello All, I wanted to ask a question. I'm having trouble with spacing between two divs. Here's the site I'm working on: johnraymondonline.com/mjbfoundation/ The problem is that I'm trying to put a 20pixel margin between the bottom footer div (that contains "test test") and the div just above it. I'm not having much luck at all. I've done a clear and also have checked the divs several times to see if I've missed any. I've even put a div between with some height and that doesn't work. I'm not sure if one of the div's above it has a fixed height. Any help would be greatly appreciated! Thanks! Hi Guys I am having trouble trying to work out a bug that is creating a space between two div containers. To see what i mean click here for web page the css can be viewed here in firefox the two containers appear correctly but in internet explorer there is a 10px space between them. Could it have something to do with the background images? The div containing the login form also drops down in ie and i am convinced this is related to the main problem i am facing. Does anyone have any ideas as to what the problem is. Any help would be much appreciated! Thanks for taking the time to read my question. The contents in my .ContentContainer are positioned differently in IE6 and FF. I want them to look like FF. What is wrong with my CSS that makes IE6 have more space on the left side of the green globe than FF? My goal is to have the 2 blue vertical lines line up. They line up in FF and IE7, but not in IE6. www.scopicdesigns.com/ZoneAll/index.htm Thanks, Brad Hi there, we have created the following list menu and we want to reduce the space between the left hand page margin, and the disc, at the 1st part of the text closer. Example: This is what we see now. | Text Here Example: This is what we would like to see. | Text Here Any suggestions? ul a, li a{ margin:0; padding:0; } This is starting to bug me this problem, but on my site www.readinginfo.co.uk the background image (inner shadow and small gradient) at the top is playing up. It doesn't seem to want to align all the way over to the left, however as is always the way, it is working in firefox, ie7, 8 and safari. I've tried some of the ie6 fixes mentioned but I have the sneakiest of feelings that it is to do with the form element (the search box), positioning absolutely just bumps it over to the side. Thanks in advance for any reply!! I am new to doing layouts in CSS and have a page (on an existing site) that I just did using CSS. The problem that I am having is that the "content" div has unwanted space above and below the div. I have padding & margins set to zero for the content div. Page is he http://www.prairieplugs.com/Sample1/sample1.htmlhttp://www.prairieplugs.com/Sample1/sample1.html CSS is he http://www.prairieplugs.com/Sample1...ieplugscss1.css Below is the CSS that is applicable: Code: body {
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: .9em;
color: #000;
background-color: #008F13;
background-image: url(images/bgbottom.jpg);
background-repeat: repeat-x;
background-position: bottom;
background-attachment: fixed;
}
#wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;
}
#wrapper #header {
background-image: url(images/headerSamp1.jpg);
margin: 0px;
padding: 0px;
height: 276px;
background-repeat: no-repeat;
}
#wrapper #nav {
background-color: #FFF;
background-image: url(images/navSamp1.jpg);
background-repeat: no-repeat;
height: 60px;
width: 900px;
margin: 0px;
padding: 0px;
text-align: center;
}
#wrapper #content {
background-image: url(images/contentSamp1.jpg);
background-repeat: repeat-y;
margin: 0px;
width: 900px;
background-color: #FFF;
padding: 0px;
}
#wrapper #footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-repeat: no-repeat;
height: 79px;
background-color: #FFF;
background-image: url(images/footerSamp1.jpg);
margin: 0px;
padding: 0px;
}
#wrapper #nav ul {
margin: 0px;
list-style-type: none;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #060;
}
#wrapper #footer p {
text-align: center;
margin: 0px;
padding-top: 25px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#wrapper #nav ul li {
display: inline;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #000;
font-size: 1.2em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#wrapper #nav ul li.last {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper #nav ul li a:visited {
text-decoration: none;
}
#wrapper #nav ul li a:hover {
color: #000;
text-decoration: underline;
}
#wrapper #nav ul li a {
text-decoration: none;
color: #FFF;
}
#wrapper #content p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
text-align: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 15px;
}
I have a drop down menu that works great in Chrome but in IE 9 I am getting spaces between my images for my navigation bar. My HTML is as follows... HTML Code: <ul id="nav"> <li><a href="#"><img src="../../images/global/header/home_btn.jpg" width="77" height="29" border="0" /></a> <ul> <li><a href="#" style="color:#000;">About Asthma</a></li> <li><a href="#" style="color:#000;">Treatment</a></li> <li><a href="#" style="color:#000;">Taking Control</a></li> <li><a href="#" style="color:#000;">Lifestyle</a></li> <li><a href="#" style="color:#000;">Resources & Support</a></li> </ul></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> <li><a href="#"><img src="../../images/global/header/kids_btn.jpg" width="66" height="29" border="0" /></a></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> <li><a href="#"><img src="../../images/global/header/allergy_btn.jpg" width="67" height="29" border="0" /></a></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> </ul></li></ul> I have tried everything in my CSS to eliminate the spacing between the image files with no luck. Does anyone see what I am doing wrong here? |
|||||||