|
CSS - Holy Cow! What Happened To A List Apart?
OMG! I just clicked on A List Apart, and it's GONE! What's happened? Surely they didn't forget to...renew???
Similar TutorialsHappily coding along in CSS... all of a sudden, your stylesheet changes aren't showing up when you preview your pages locally. If you upload the page to the server and view it online, the changes show up. I am using Dreamweaver MX for page creation and topstyle for CSS. Also doing a windows disk cleanup in the hopes of resolving this very frustrating problem. Has anyone experienced this before? thanks c. hey everyone i got huge prob, what happened to 100% height? I mean this atribute is gone and dont work anymore. my DTD is next: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> using this doc type, everything is alright if i set specific height for my table, td, div, span, any box, but if i want that box to stretch all the way from top to bottom, no matter what i specify doesnt work (and my css checker tells me that 100% value is not valid) and unless i enter specific size or couple lines of text i dont get the stretch. the point is, what if i have absolutely no content on page and i need to stretch the box so i can place one box with in 100% height box at bottom and another at top or have visible background-image?. can some one explain to me wahts going on, when i f*ck up my dtd for example go with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01> i guess my file renders in Quirks Mode but still shows all the CSS modification, although i have probs with firfox because it doesnt render that stuff the way i achived the look in IE. can some one explain how to get 100% height with right dtd so both things render correct in EI and FireFox : ( ?? may be i need to go with 4.0 or xhtml, alright my brain doesnt work anymore, out to sleep, basicaly help me please: ) going nuts, thank you all I know you pro CSS users probably know this already, but I was accidentally discovered something REALLY cool with css. CSS Code: Original - CSS Code alexText { background-color: rgb(116,130,208); }
Code: <alexText> Some Alex Text </alexText> That code essentially creates your own HTML tags. Wow. That's going to save me SO much time. Have a look at this page http://aenui.com/test/hg.html It is exactly the same as the wrapper-free holy grail layout as demonstrated on AListApart (http://www.alistapart.com/d/holygrail/example_4.html), except that I added 2 more divs in the center column. I floated the 2 divs to the left and I expect the 2 divs to start stacking side by side but no, it doesn't do that. Apparently this only happens in the holy grail layout. Does someone have a fix? I'd hate to abandon the otherwise elegant holy grail layout just because of this. I am following the layout described in A List Apart's In Search of the Holy Grail layout article. The layout itself is working in FF3, IE7, and IE6. But I deviate from the article in a couple of points. The equal column heights are not too important to me. Instead, I am employing a faux-column technique to have #left #center and #right all appear to stretch to the bottom of the page. This is how my HTML is setup. Code: <body>
<div id="page">
<div id="header">
<div class="layoutContainer">
<div id="primaryContent" class="column">
<div id="leftBar" class="column">
<div id="rightBar" class="column">
<div id="footer">
The left faux-column and center background image is specified in my "page" div. I align the BG image to the top left. This works great! My right faux-column background image is specified in the "layoutContainer" div. Aligned to the right, this works well in FF3, works with some weird kinks in IE7, and does not work at all in IE6. IE7 cuts off some of the background-image for some reason, making it appear more to the right than the end of the actual page. IE6, however, does not display the background-image for #layoutContainer at all. I have tried many fixes but haven't gotten anywhere so far. Here is my CSS: Code: #page{
font-size:1.1em;
background:#fff url(../images/common/page-bg.gif) top left repeat-y;
}
#header{
background:url(../images/common/header-darkBlue.jpg) top right repeat-x;
overflow:hidden;
clear:both;
}
.layoutContainer{
overflow:hidden;
padding-left:210px;
padding-right:251px;
background:url(../images/common/secondaryContent-bg.gif) repeat-y top right;
}
#primaryContent {
padding:10px 15px 0 20px;
width:100%;
}
#leftBar{
margin-left:-100%;
width:210px;
padding:0;
right:245px; /* leftBar fullwidth + primaryContent padding */
}
#rightBar{
width:204px;
padding-left:12px;
margin-right:-251px; /* rightBar fullwidth + primaryContent padding */
}
#footer{
clear:both;
}
.column{
position:relative;
float:left;
}
IE6 CSS: Code: #leftBar{
left:216px;
}
IE7 CSS: Code: .layoutContainer{
background-position:96.5% 0;
}
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 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 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, 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 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; } Hi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer
{
width: 200px;
margin-top:150px;
}
#navcontainer ul#navlist
{
width:200px;
clear:left;
text-align:left;
margin-left:0;
padding-left:0;
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;
}
#navcontainer ul#navlist li
{
margin-left:0;
padding: 0px;
display: block;
list-style:none;
border-bottom: 1px solid gray;
}
#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}
a.linkText {
padding: 10px;
display: block;
color : #444444;
font-family : arial;
font-size : 11px;
font-weight : bold;
text-decoration : none;
height:25px;
}
a.linkText:link {
color : Aqua;
/* you can define other styles if necessary */
}
a.linkText:visited {
color : Maroon;
/* you can define other styles if necessary */
}
a.linkText:hover {
color : Blue;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="linkText" href="#">Item One</a></li>
<li><a class="linkText" href="#">Item two</a></li>
<li><a class="linkText" href="#">Item three</a></li>
<li><a class="linkText" href="#">Item four</a></li>
<li><a class="linkText" href="#">Item five</a></li>
</ul>
</div>
The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks Im having trouble putting together a subnavigation list on my website, I am trying to create four sections each of which has a different color to it, and i can get almost everything to work except the subnavigation background color. I have tried white and transparent, but i think the parent element is somehow interfering with the css. any help would be appreciated. Here is my code 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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
ul.nav
{margin:0;
padding:0;
display:block;
width:100px;
list-style-type:none;}
ul.nav li, ul.nav li a, ul.nav li a:active, ul.nav li a:visited, ul.nav li a:hover, ul.nav li.home a:hover, ul.nav li.work a:hover, ul.nav li.for_clients a:hover, ul.nav li.contact a:hover
{font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#CCCCCC;
color:#666666;
line-height:30px;
width:100px;
list-style-type:none;
text-decoration:none;
font-size:10px;
font-weight:bold;
padding-left:10px;}
ul.nav li.home_over, ul.nav li.home a:hover
{color:#ffffff;
background-color:#018E9F;}
ul.nav li.work_over, ul.nav li.work a:hover
{color:#ffffff;
background-color:#6F0141;}
ul.nav li.for_clients_over, ul.nav li.for_clients a:hover
{color:#ffffff;
background-color:#FF850D;}
ul.nav li.contact_over, ul.nav li.contact a:hover
{color:#ffffff;
background-color:#CCE82E;}
ul.subnav_home
{position:absolute;
top:8px;
left:118px;
margin:0;
padding:0;
display:block;
width:100px;
list-style-type:none;
background-color:#FFFFFF;}
ul.subnav_home li a, ul.subnav_home li a:active, ul.subnav_home li a:visited, ul.subnav_home li a:hover
{font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#fffffff;
color:#aaaaaa;
line-height:30px;
width:100px;
list-style-type:none;
text-decoration:none;
font-size:10px;
font-weight:bold;
padding-left:0px;}
ul.subnav_home li a:hover, ul.subnav_home li.subnav_home_over
{color:#018e9f;}
</style>
<body>
<ul class="nav">
<li class="home_over">home</a></li>
<ul class="subnav_home">
<li class="subnav_home_over">philosophy</li>
<li><a href="process.htm">process</a></li>
<li><a href="resume.htm">resume</a></li>
</ul>
<li class="work"><a href="index.htm">work</a></li>
<li class="for_clients"><a href="index.htm">for_clients</a></li>
<li class="contact"><a href="index.htm">contact</a></li>
</ul>
</body>
</html>
Hi! Another new-to-CSS dabbler here. Not entirely sure what I'm doing, but I get by. I'm working on a site for a paper (making the switch from tables to proper CSS so bear with me) and I can't get the nav bar to cooperate. i31.tinypic.com/wbvzoh . png One of these things is not like the others... And I can't for the life of me figure out why or what would be causing it bar some well-known CSS issue with nav bars that I am not yet privy to. Code for the bar is as follows: CSS Code: #navcontainer ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: #e0edc9;
color: #25733e;
width: 780px;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}
#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 0px;
/* matches link padding except for left and right */
padding-top: 0px;
}
#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: #25733e;
text-decoration: none;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #adc38a;
color: white;
}
#navcontainer #active { border-left: 1px solid #fff; }
HTML Code: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">HOME</a></li> <li><a href="#">RECENT</a></li> <li><a href="#">AD INFO</a></li> <li><a href="#">ARCHIVES</a></li> <li><a href="#">PAY A BILL</a></li> <lj><a href="#">CONTACT</a></li> </ul> </div> Any ideas? Please look at the location list on the right side of this page - http://certified.tmhdesign.com My designer sent me a layout that has each location in a list and seperated by dots that DO NOT go the whole distance of the ul/li. As you can see I am close but they are not laying out the same in IE and Firefox. IE is closer to what I am after but without the big gap Hi, I am currently using an unordered list to output images in a photo gallery im making however i want to also add text underneath each of these. If i use <br> after the image it messes up the UL as the next LI appears underneath the previous one. This is not the desired effect as i am creating a horizontal list. How can i add text underneath the image without distroying the layout? I have a list in IE that works fine, but I have to make it work in NN4 as well. The problem is the big space left between the item and the left side of the body. I looked several sites, but couldn't find any answers. You can view the actual htm at http://www.nald.ca/test/fora/test.htm Main CSS: http://www.nald.ca/test/fora/test.css CSS for NN4: http://www.nald.ca/test/fora/test.css If anyone could just give me some kind of idea where I am going wrong, it would be really awesome. Thanks Hello, I created a menu using an unordered list and after the list I have a div with some text: http://www.27lamps.com/public/Menu.htm My menu gets over the div. Why? Thanks, Miguel Please help me style lists. This is the on area I am having a really hard time understanding. I have a menu list in my side bar and a standard list in the content section. I keep having problems because the styles seem to be conflicting with each other. My site is http://www.myslavelake.com/dir/budget-2009/ Code for the menu Code: <ul id="navlist"> <li><a href="#">Arctic Ice Centre </a></li> <li><a href="#">Water Conservation </a></li> <li><a href="#">Capital Priorities</a></li> </ul> Code: #sidebar ol, ul, li {
font-size: 1.0em;
font-weight: 600;
text-decoration: none;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#navlist ol, ul {
padding: 5px 0px 0px 0px;
}
The main list code Code: #content ul {
margin-left: 0;
list-style-type: square;
/*text-indent: -1em;*/
}
#content ul li {
font-weight: normal;
list-style-type: square;
font-weight: normal;
/*text-indent: -1em;*/
}
I am happy with the menu but would like normal list for the content section. Right know bullets are not showing up in the content section. Hey guys... Now i'm obcessed with CSS, i've def got the bug! I have a list of bullets, using <ul> and <li>. Now rather than have one column, i want two columns, spaced evenly. Now before i would just add a table, but i dont want to, as they are evil! So now i wanted to use CSS? Now currently the list is housed in a <div class='displaybox'>, with the CSS as below. So i could just add a table inside (ie 1 row, 2 cols) and then add the list elements to each side. or is it correct to use a table in this instance? Charlie I found this example on the web for a drop down list, I was wondering if anyone knows how I would go about fixing it to work for IE as well, it's perfect in firefox. Even if doesn't show the sub items in IE it won't be a problem, just as long as the main items are shown. I like this example because it doesn't use javascript, I've found ones that works in IE but they use JS I'd prefer to use just CSS. Thanks for reading. [html]<ul class="nav"> <li><strong><a href="">main</a></strong> <ul> <li><a href="">sub</a></li> <li><a href="">sub</a></li> <li><a href="">sub</a></li> <li><a href="">sub</a></li> </ul> </li></ul>[/html] Code:
/*Nav bar styles*/
ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
ul.nav{
display: table;
width: 100%;
table-layout: fixed;
}
ul.block{
width: 100%;
table-layout: fixed;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/
ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}
ul.nav li:hover>ul{
display : block;
}
.nav ul li a{
display: block;
padding: 2px 10px;
}
/*Menu styles*/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}
ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}
ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}
ul.nav,
.nav ul{
border: 1px solid #369;
}
.nav a{
text-decoration: none;
}
|
|||||||