|
CSS - Positioning Line Items???
#leftNav ul
{ margin:0; padding:0; list-style-type: none; } #leftNav ul li { padding:0; margin:0; display: block; text-align: left; background-color: #000; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-bottom: 1px solid #ffffff; border-right: none; width:130px; } for some reason I am getting black boxes, with the white outlines.. but in between each LI.. i get spaces? how do you control the spacing between li's in a ul? Similar TutorialsHi I'm writing here after spending a few hours searching google without luck. I bought a "mega menu" plug in for wordpress but its acting very odd. It generally works as it should but ive found that theres something wrong with the formatting of the drop down menus. There is an issue where line breaks do not happen at all, and most important - list items are not shown on a new line. The content all seems to flow around its self rather than being formatted. See attached pic: img14 .imageshack .us/img14/964/screenshot047cr .png I did run the css and html though a validator and it spits out hundreds of errors but i think they are pretty much only shown because its css3. I'm really curious what would cause line breaks to not appear after list items. I had thought previously it may be the css clashing with my themes css but i tried a fresh install on a really mimimal theme and the error is still there Anyway to remove the automatic line break after list items? I'd like to use styles to create roll-over effects in a menu I've used an unordered list to create that menu. But, I'd like a horizontal menu bar rather than a vertical menu column. Thanks! David Goldfeder I have a number of icons. - back button - print button - next button I want to display them all on the same line. I want the back button to be placed on the far left while the other two on the far right. I have experimented quite abit with trying to get this to work, and have managed to sort of get it right by using left padding. However, I know this is a rubbish way of doing it as depending on the screen size will depend on where the right hand icons appear. I did think I would just use tables, but figured someone here maybe able to help me out. I'm trying to put a 1px line on the bottom of my header that spans the width all the way. I've used border-bottom: 1px and border-style: solid; but I still have a looks like 3px border all the way around my header. Also I have my unordered list inside of my header div and it's placed directly below my header. Any help much appreciated, just learning how to layout. http://imgbin.org/index.php?page=image&id=6637 CSS code Code: body {
font-family: "Lucida Sans Unicode", sans-serif, Verdana;
background-color: #999999;
}
#header {
height: 75px;
width: 100%;
border: 0px 0px 1px 0px;
border-style: solid;
border-color: white;
background-color: #336699;
}
#container {
margin: 0 auto;
width: 900px;
height: 100%;
background-color: #666666;
}
#content {
width: 75%;
}
#sidebar {
width: 25%;
background-color: #666666;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
and HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Jeremy</title> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1 class="header">Jeremy</h1> <ul> <li><a href="index.html">Home</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="forums.html">Forums</a></li> <li><a href="contactme.html">Contact Me</a></li> </ul> </div> <div id="container"> <div id="sidebar"> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor dui sit amet diam molestie cursus. Vivamus a sapien sed nunc fermentum feugiat. Donec iaculis neque sit amet tortor consectetur eu lacinia est commodo. Ut lobortis fermentum felis, eu tristique elit fermentum sed. Etiam pulvinar commodo est non vestibulum. Aenean sed ante in velit vulputate tristique. Duis lacinia eleifend massa, sed volutpat dolor malesuada at. Nam convallis consequat mauris imperdiet rutrum. Aenean vitae vestibulum libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum lorem nulla, pellentesque vitae porttitor condimentum, dignissim a libero. In quis turpis orci, vitae faucibus risus. Duis tincidunt, libero tincidunt hendrerit viverra, felis lectus rutrum diam, et dictum mauris ipsum nec purus.</p> <p>Vivamus ut nunc vitae eros fermentum pretium. Nunc molestie odio vitae magna consectetur quis ultricies purus adipiscing. Curabitur ante nisl, scelerisque a consequat sed, rhoncus at turpis. Morbi blandit ante eu tellus facilisis eu semper enim auctor. Nunc sollicitudin orci nunc, vitae accumsan risus. Etiam nec est in ipsum iaculis varius. Nam enim velit, imperdiet viverra condimentum vitae, egestas eget dolor. Nullam facilisis condimentum diam, in euismod lorem mattis a. Mauris vel nulla et ipsum venenatis aliquam vitae a nibh. Nunc commodo ullamcorper odio vitae fermentum. Praesent faucibus blandit condimentum. Integer sed justo nulla. Praesent id gravida dui. Proin malesuada interdum scelerisque. Sed condimentum justo nec metus venenatis accumsan.</p> </div> </div> </body> </html> We have our magento store with lots of categories, but it looks silly with categories being added under the first row. We'd like to have these added on a row above this, but i am having a hrd time getting this done. Is there an easy way to have category items being added on top in a new row, instead of a new row under the current one? Simply put, instead of this way: 1 2 3 4 5 6 7 8 9 We want it this way: 6 7 8 9 1 2 3 4 5 As you understand this will look much better and not screw with our design;-) Anybody? Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo I have a floated CSS Horizontal Drop Down Menu, it's centered in my page just fine in firefox, but in IE it's skewed way off to the right side. (Also having problems with the dropdown's not appearing in IE :S) If anyone can help me with IE fixes on either of these problems that would be great. Thank you! whats the CSS for creating an unordered list that goes across the page rather than down with no bullet points? Hi, I have a list of items, but when one item goes onto the next line, It doesn't align with the text above it. Here is an example. Look at the right hand column, and notice how the list items, when they go into 2 lines, the second line aligns with the bullet point and not the text. Anyone know how to fix this? thanks Hi Guys, I am trying to incorporate a CSS file into an xml document.I have the following problem. My XML file is: <!-- example of an list item --> <?xml-stylesheet type="text/css" href="styledocument.css" ?> <document> <employee> <firstname>peter</firstname> <lastname>lance</lastname> </employee> </document> My corresponding styledocument css file is : employee {display:list-item;color:red;} firstname {display:inline;} lastname {display:inline;} --- Output in IE5: peter lance ----- The expected output should be peter and lance as list items with bullets preceding them and in red color. But my output is peter lance in just red color without any bullets. List-item value of the display attribute is not recognised at all. Can u help deal with this problem!!! I'm using a menu from CSSPlay, and I have it working. http://www.wattersisere.co.uk/devshed It also works for browsers with 800x600 screens. However, as you can see the menu items on the top bar are close together (2 * 11px). I am wanting to increase the spacing between them depending on the browser size. Maybe a % would be appropriate, any other ideas would be super. Alternatively, I could increase the spacing between them to an aesthetically pleasing size and then force the smaller browsers to have a horizontal scrollbar. What would I have to make this work, or would you not recommend it? Thanks, Watters Hi, Can somebody tell me why the menu on the url below needs so much space between menu items? (between the home, browses, forms, pages). Maybe a margin / padding problem, but I cannot seem to find it. The URL: http://www.genwise.com/temp/ordersbrowse.aspx.htm Thank you! -- Fizgig2 I've tried the popular tricks to figure this out, but don't seem to have the touch. In IE, the list item is 2px taller than in FF. page: URL Removed CSS: Code: .mainNav ul {margin: 0; padding: 0; list-style: none;}
.mainNav ul li {border-top: 1px solid #27466c; border-bottom: 1px solid #021940; background: url('../images/menu_bg.gif') top left repeat-y; display: block;}
.mainNav ul a, .mainNav ul span {display: block; height: 17px; padding-top: 4px; font: 11px Verdana,Sans-Serif; color: #ffffff;}
.mainNav ul a:link, .mainNav ul a:visited {text-decoration: none;}
.mainNav ul a:hover{text-decoration: none; color: #9fb3cb;}
.mainNav ul ul ul a:hover, .mainNav ul ul ul ul a:hover {text-decoration: none; color: #3e5064;}
.mainNav ul ul li {border: 0; background: url('../images/sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul li {border: 0; background: url('../images/sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul ul li {border: 0; background: url('../images/sub_sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.unselected, .selected, .empty {display: block; float: left; height: 21px; width: 22px;}
.currentPage {border-right: 4px solid #000530; margin-right: 1px;}
HTML on page (it's quite heavy) Hey everyone, I have a listing of links on my sitemap and there seems to be an issues. In firefox it's not so bad, it just looks like the bullets are ghosted. But in IE there are blank empty list items. I don't see anything in the code that can do this but it is kinda strange that it starts where I have ‹ and ›. Other than that there is nothing different between the list items. Any insight is greatly appreciated. Hey all, Here's the site in question. It validates, and more or less displays how i want it in FF. Thing is, is that in IE it displays the menu button images in reverse order...i have NO idea why it's doing this. It's based off the alistapart menu, that i've used numerous times without problems. Here's the HTML; Code:
<ul id="nav">
<li><a href="index.php"><img src="images/home_button.gif" alt="Home button image"></a></li>
<li><a href="about.php"><img src="images/about_button.gif" alt="About Freedom Boat Sales button image"></a></li>
<li><a href="#"><img src="images/inventory_button.gif" alt="Product inventory button image"></a>
<ul>
<li><a href="newproducts.php" class="menutext">new</a></li>
<li><a href="preownedproducts.php" class="menutext">pre-owned</a></li>
</ul>
</li>
<li><a href="#"><img src="images/requests_button.gif" alt="Request button image"></a>
<ul>
<li><a href="requests.php?item=products" class="menutext">products</a></li>
<li><a href="requests.php?item=pricing" class="menutext">pricing</a></li>
<li><a href="requests.php?item=brochure" class="menutext">brochure</a></li>
</ul>
</li>
<li><a href="contact.php"><img src="images/contact_button.gif" alt="Contact button image"></a></li>
</ul>
Here's the CSS; Code:
#menuposition {
width:730px;
height:30px;
position:relative;
margin:auto;
z-index:10;
}
ul#nav {
list-style: none;
height:30px;
width:730px;
}
ul li {
float:left;
height:30px;
width:146px;
position: relative;
}
li ul {
position: absolute;
top:30px;
display: none;
list-style:none;
}
ul li a {
display: block;
text-decoration:none;
text-align:left;
font:10px verdana, arial, sans-serif;
}
li:hover ul, li.over ul {
display: block;
margin-left:20px;
margin-top:-1px;
width:118px;
background-color:#E7E7E7;
border-top:2px solid #666;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
}
.menutext {
width:118px;
height:30px;
}
a.menutext {
color:#255CB8;
text-decoration:none;
}
a.menutext:hover {
color:red;
text-decoration:none;
background-color:#DCDCDC;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: right; }
* html ul li a { height: 1%; }
/* End */
Also, any thoughts on why the blue background won't extend the full screen height in FF? Thanks! At h**p://www.topofferspage.com in IE6, the bullet points do not have images appearing unlike Firefox. Before anyone says it's because of validation errors, it's not. I can turn off the offending stylesheets just fine and I get the same problem. Little help? Why would background images not work in IE6 but every other browser? |
|||||||