|
CSS - Positioning Of Image Bullets In List
Can't see that this has been addressed before, but I am having a problem with using images as bullets in a ul list. The text is aligned to the bottom of the image, such that the image looks too high up. Is there a way to sort this out?
Also, while we're on the subject, the left margins of the list are completely different in IE and firefox, with IE putting a much larger margin to the left of the bullet, and less of a margin between the bullet and the list item. Is there a way to sort this out, or make the stylesheet browser-specific? (OK i'm really showing my stylesheet ignorance here!!) Code snippet is posted below. Cheers. from stylesheet: .bulletList li { margin-bottom: 1.5em; padding-left: 0.75em; list-style-image:url(../images/hsdmini.jpg); color: #547A98; } from page: <table width="100%" > <tr> <td align="left"> <ul class="bulletList"><strong> <li>Credit cards accepted</li> <li>Cheques accepted</li> <li>Delivery to europe</li> <li>40,000 products in store!</li> </strong> </ul> </td> </tr> </table> Similar TutorialsI need to wrap some list around a floated div. It works OK in Moz, but in IE, strange enough, the list's bullets simply disappear below that floated div. What the hack? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.container {
margin:30px;
width:300px;
border:solid 1px #000;
text-align:justify;
padding:6px;
}
.floated{
width:100px;
height:130px;
float:left;
background-color:#0099FF;
margin:5px;
}
ul{
margin:0;
list-style-position: outside;
position:relative;
left:15px;
padding-right:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="floated"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolor</span></li>
</ul>
<br>
<br>
Nam enim diam, dignissim vel pellentesque vel, aliquam eget nisi. Sed in massa sodales tortor cursus pharetra. Sed congue, urna sit amet pretium viverra, sapien diam vehicula dui,
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolo</span>r</li>
</ul>
</div>
</body>
</html>
I tried all the possible ways to obtain a list (or a list like) who must: - wrap around a floated element - have the text paragraph outside the bullet (same as list-style-position: outside does in CSS for list elements) I tried with divs, backgrounds... all the stuff. It looks like an impossible task. The only solution I have found is in the code above, but it does not work in IE (neither in 6 nor in 7). Any ideas? Is it possible to adjust the alignment of list-style-image's? In IE, the image ends up being too high, but it's centered properly in Firefox. Example: URL 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? Hi I am trying to position a background image in my list, but I can't seem to position it where I want it, heres the example http://dmumford.bizhat.com/test/list.htm I need the bullet to be before the link home, but when I change the padding in the ul class the bullett moves with it, if that makes sense. Could someone please help me! Thank you! Hi, I have tried putting list-style-type: none; in various places to remove the circle bullets from the list style in my code but I must be doing something wrong. How can I remove the circle bullets from the expanding menus on this page ? Thanks Hi, I am new to css and have written a code for a list menu in my page and i have added an image for instead of selecting the default bullets in css (ie. square, circle etc. so now my problem comes it looks perfect in Firefox browser but in IE 6 & 7 the position of the bullet image changes . In firefox it shows the bullet besides the text written and it is centered and perfect as i need but in IE 6 and 7 the image of the bullet moves up and sticks to the text instead of maintaining some distance with the text. i am providing u the link of my page below: r-interactive.net/clients/reed%5Fcss/ Also i am mentioning the css code which i have used for the list menu below : Css : Code: ul#listmenu {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #959595;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
text-indent: 5px;
list-style-type: none;
list-style-image: url(../images/main_images/img_industry_bullet.gif);
list-style-position: inside;
}
ul#listmenu li {
list-style-image: url(../images/main_images/img_industry_bullet.gif);
margin-top: 0;
margin-right: 0;
margin-left: 0;
padding-top: 0.5em;
padding-right: 0;
padding-bottom: 0.5em;
padding-left: 0;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #207EC9;
clear: both;
}
Html : Code: <ul id="listmenu"> <li> Jewelry Industry</li> <li> Aluminium Industry</li> <li> Electronics Industry</li> <li> Pharmaceutical Industry</li> <li> Oil & Gas Industry</li> <li> Cosmetics Industry</li> </ul> Help is always appreciated. For a navigation I am using, I must use an li height to control spacing in IE6. I'm also using bullets to show a user where they are in the site by only having one bullet display at a time. Unfortunately, the height assignment I use on my li causes IE to misplace the bullet next to its secondary nav. Below is code I'm using to troubleshoot: Code:
<ul><li><a href="#">dog</a></li>
<li><a href="#">cat</a></li>
<li class="here"><a href="#">fish</a></li>
<ul>
<li><a href="#">trout</a></li>
<li><a href="#">angel</a></li>
<li><a href="#">salmon</a></li>
</ul>
<li><a href="#">turtle</a></li>
<li><a href="#">elephant</a></li>
</ul>
Code:
li {height: 20px; list-style-type: none;}
li.here {list-style-type: disc;}
If a user is on the page fish, they will see that bullet point to page salmon. Any recommendations? Is it possible to change the bullets of an unordered list when you hover over the <li> element using CSS? I've tried something like this.. Code:
#ulist ul{
list-style: none;
}
#ulist li a{
list-style: square;
}
the list Code: <ul id="ulist"> <li><a href="#">Element 1</a></li> <li><a href="#">Element 2</a></li> <li><a href="#">Element 3</a></li> <li><a href="#">Element 4</a></li> </ul> But that doesn't work, the reason I think is because the list-style is being applyed to the <a> and not the <li> element. If not a CSS, how would I use JavaScript to determine the <li> element and add the "square" bullet style to it? Cheers, Fozzy How do I go about making my unordered list use a image file or the bullet? Code: <ul> <li><a href="#onesweetcoma">One Sweet Coma </a></li> <li><a href="#untitled">Untitled</a></li> <li><a href="#freedomfound">Freedom Found </a></li> <li><a href="#yourwords">Your Words</a></li> <li><a href="#reprise">Reprise</a></li> <li><a href="#cantpullaway">Can't Pull Away </a></li> <li><a href="#sleepingawake">Sleeping Awake</a></li> <li><a href="#wherewestand">Where We Stand</a></li> <li><a href="#echooffthewalls">Echo Off the Walls </a></li> </ul> my image name is bullet.png Hey all, can't seem to figure out what the deal is with this menu...looks fine in FF, but I can't seem to get the menu to line up with the background image in IE6. Here's what i've got; Code: <div id="header_bg"> <ul id="header_top"> <li><a href="index.php"><img src="images/menu_top.gif" alt="Windsor Harley Owners Group header image"></a></li> </ul> <ul id="menu_top"> <li id="leftspc"></li> <li id="links"><a href="links.php"></a></li> <li id="contact"><a href="contact.php"></a></li> <li id="news"><a href="newsletter.php"></a></li> <li id="home"><a href="index.php"></a></li> <li id="about"><a href="about.php"></a></li> <li id="events"><a href="events.php"></a></li> <li id="join"><a href="join.php"></a></li> <li id="pix"><a href="pix.php"></a></li> <li id="rightspc"></li> </ul> <ul id="header_bottom"> <li><img src="images/menu_bottomleft.gif" alt="Bottom Left spacer image"></li> <li id="admin"><a href="admin_login.php"></a></li> <li id="members"><a href="members.php"></a></li> <li><img src="images/menu_bottomright.gif" alt="Bottom right spacer image"></li> </ul> </div> <div class="clear"></div> and the CSS; Code:
#header_bg {
width:100%;
position:relative;
background:black url(images/header_bg.gif) repeat-x bottom;
height:166px;
}
/*
* html #header_bg {
height:156px;
}
*/
#header_top {
width:800px;
height:59px;
margin:auto;
list-style:none;
background-color:black;
}
/*#header_top li#logo {
width:800px;
height:59px;
margin:auto;
}*/
#menu_top {
position:relative;
margin:auto;
list-style:none;
height:71px;
width:800px;
background-color:transparent;
margin-top:-5px;
}
* html #menu_top {
padding-left:18px;
margin-top:-8px;
}
#menu_top li {
height:71px;
float:left;
}
#menu_top a {
text-decoration:none;
display:block;
height:71px;
}
#menu_top li#leftspc {
width:100px;
background:black url(images/menu_leftspc.gif) no-repeat;
}
#menu_top li#rightspc {
width:100px;
background:black url(images/menu_rtspc.gif) no-repeat;
}
/* LINK BUTTONS */
#menu_top li#links a { background-image:url(images/linksbut_off.jpg); }
#menu_top li#links a:hover { background:transparent; }
#menu_top li#links { background-image:url(images/linksbut_roll.jpg); width:75px; }
/* CONTACT BUTTONS */
#menu_top li#contact a { background-image:url(images/contactbut_off.jpg); }
#menu_top li#contact a:hover { background:transparent; }
#menu_top li#contact { background-image:url(images/contactbut_roll.jpg); width:75px; }
/* NEWS BUTTONS */
#menu_top li#news a { background-image:url(images/newsbut_off.jpg); }
#menu_top li#news a:hover { background:transparent; }
#menu_top li#news { background-image:url(images/newsbut_roll.jpg); width:75px; }
/* HOME BUTTONS */
#menu_top li#home a { background-image:url(images/homebut_off.jpg); }
#menu_top li#home a:hover { background:transparent; }
#menu_top li#home { background-image:url(images/homebut_roll.jpg); width:75px; }
/* ABOUT BUTTONS */
#menu_top li#about a { background-image:url(images/aboutbut_off.jpg); }
#menu_top li#about a:hover { background:transparent; }
#menu_top li#about { background-image:url(images/aboutbut_roll.jpg); width:75px; }
/* EVENTS BUTTONS */
#menu_top li#events a { background-image:url(images/eventsbut_off.jpg); }
#menu_top li#events a:hover { background:transparent; }
#menu_top li#events { background-image:url(images/eventsbut_roll.jpg); width:75px; }
/* JOIN BUTTONS */
#menu_top li#join a { background-image:url(images/joinbut_off.jpg); }
#menu_top li#join a:hover { background:transparent; }
#menu_top li#join { background-image:url(images/joinbut_roll.jpg); width:75px; }
/* PIX BUTTONS */
#menu_top li#pix a { background-image:url(images/pixbut_off.jpg); }
#menu_top li#pix a:hover { background:transparent; }
#menu_top li#pix { background-image:url(images/pixbut_roll.jpg); width:75px; }
#header_bottom {
width:600px;
height:35px;
margin:auto;
margin-top:-5px;
background-color:transparent;
}
* html #header_bottom {
padding-left:18px;
margin-top:-4px;
}
#header_bottom li {
float:left;
height:35px;
list-style:none;
}
#header_bottom a {
text-decoration:none;
display:block;
height:35px;
}
/* admin BUTTONS */
#header_bottom li#admin a{
background-image:url(images/admin_button_off.gif);
}
#header_bottom li#admin a:hover {
background:transparent;
}
#header_bottom li#admin {
background-image:url(images/admin_button_roll.gif);
width:150px;
}
/* members BUTTONS */
#header_bottom li#members a{
background-image:url(images/members_button_off.gif);
}
#header_bottom li#members a:hover {
background:transparent;
}
#header_bottom li#members {
background-image:url(images/members_button_roll.gif);
width:150px;
}
Hi guys, I have a small list positioning problem in IE 6/7 which I was hoping someone might be able to advise me on! List Positioning is fine in Firefox, but for some reason is adding about 50px on the left margin in IE... I know my page isn't quite valid because of the sIFR bits I have on it, but I'm working on this too! The page in question is here Here's my list css code; #services_home_container { width: 265px; height: 274px; padding: 0px 0px 0px 0px; float: left; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; line-height: 130%; } #services_home ul { list-style-type: none; width: 235px; padding: 0px 0px 0px 0px; } #services_home li { margin: 10px 0px 0px 0px; } #services_home li a { color: #4f2f9c; display: block; font: bold 120% Arial, Helvetica, sans-serif; padding: 0px 0px 0px 0px; text-decoration: none; } * html #services_home li a { /* make hover effect work in IE */ width: 235px; } #services_home li a:hover { background: #bcfbc6; } #services_home a em { color: #666666; display: block; font: normal 85% Verdana, Helvetica, sans-serif; line-height: 125%; width: 235px; padding: 5px 0px 5px 0px; } #services_home a span { color: #125F15; font: normal 70% Verdana, Helvetica, sans-serif; line-height: 150%; } #services_home img { float: left; padding:2px 0px 2px 0px; margin: 0px 5px 0px 2px; border: none; } If anyone has a moment to take a look and help me, it would be very much appreciated! Best regards Jon Hi, I'm using a list for a navigation bar where I have all the links with background images to give a rollover effect with images. However I want all the links to be inline and not on separate lines. Here is the problem page: http://www.mckr.ie/test.html (the blue navigation bar) Here is the HTML code on the page: Code: <div id="topnavdiv"> <ul> <li><a href="/" id="buttonhome"><b>Home</b></a></li> <li><a href="../about.html" id="buttonabout"><b>About Us</b></a></li> <li><a href="../location.html" id="buttonlocation"><b>Location</b></a></li> <li><a href="../contact.html" id="buttoncontact"><b>Contact Us</b></a></li> <li><a href="../news.html" id="buttonnews"><b>News</b></a></li> <li><a href="../people.html" id="buttonpeople"><b>People</b></a></li> <li><a href="../recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li> </ul> </div> Here is my CSS code for the nav bar and the first 2 links: Code:
#topnavdiv { position:absolute; left:0px; top:120px; width:100%; z-index:3; background-color: #3366CC; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-top-color: #f8c015; border-bottom-color: #f8c015; border-right-color: #f8c015; border-left-color: #f8c015; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; }
#topnavdiv ul { margin: 0px; padding: 0px; list-style-type: none; }
#topnavdiv li { margin: 0px; padding: 0px; list-style-type: none; display: inline; }
#topnavdiv b { display: none; }
a#buttonhome { background-color: #3366CC; background-image: url(images/nav.home.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonhome:hover { background-color: #3366CC; background-image: url(images/nav.home.on.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout { background-color: #3366CC; background-image: url(images/nav.about.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout:hover { background-color: #3366CC; background-image: url(images/nav.about.on.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
Please can someone help me get them inline? Thanks in advance 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 Hello, I am a current beginner to the web design game, and I am currently making my first website using CSS. As you may already know, I am having difficulties rendering my web site in Internet Explorer 7/8. My two main problems a 1.) IE won't resize the font size that I need to display my navigation bar correctly 2.) IE is positioning my wrapper slightly left of center pushing my navigation list off the template Here is a link to my page http://www.kyjocro.com/IAO/navproblem.html Here is the HTML HTML Code: <html> <head> <title>Title</title> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styletest.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="container"> <div id="top"></div> <div id="bod"> <div id="wrapHeader"> <div class="headerLeft"></div> <div class="headerRight"><p>Call Now 888-467-6650</p></div> </div> <div id="navWrap"> <ul id="navigation"> <li><a href="#"><span class="currentTab">Independent Agents Online</span></a></li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link </a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Information & Insurance Resource Center</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a></li> </ul> </div> <div id="contentMain"> <h2>Welcome to Independent Agents Online!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. Cras volutpat accumsan odio ut cursus. Integer a ipsum at libero semper eleifend at ac mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ultrices, augue sed rhoncus auctor, ligula lorem rutrum enim, nec congue ipsum mi eu massa. Vestibulum imperdiet interdum sodales. Ut condimentum consequat fringilla. Proin vestibulum porttitor porta. Integer elit turpis, sodales lacinia blandit sed, egestas at augue. Vestibulum ut felis sed eros pharetra interdum nec ut sapien.</p> </div> <div id="wrapColumn"> <div id="columnLeft"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. <center><img src="images/handshake.jpg" width="150" height="150" alt="" border="0" /></center> </div> <div id="columnMid"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. </div> <div id="columnRight"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. </div> </div> </div> <div id="bottom"></div> <div id="footer">Site Map LegalAbout Us</p></div> </div> </div> </body> </html> Here is the CSS http://www.kyjocro.com/IAO/styletest.css Code:
body{ margin:0; padding:0; background: rgb(26,124,54); background-image:url(images/bg.png); background-repeat: repeat-x; text-align:center; /*IE POS Comp.*/}
h2{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; color:#FF0000; padding: 4px; padding-left: 0px; text-align:center;}
img { border:none;}
/*Containers*/
#wrapper{margin:0 auto; padding:0; height:auto; display:block; background-image: url(images/bg.png) repeat-x;}
#container{ margin:0 auto; padding:0; width:960px; height:100%;}
#top{ margin:10px 0 0 0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/top.png); background-repeat:no-repeat; text-align:left;}
#bod{ margin:0; padding:0; float:left; display:block; width:100%; height:auto; background-image:url(images/bgc.png); background-repeat:repeat-y; text-align:left;}
#bottom{ margin:0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/bottom.png); background-repeat:no-repeat; text-align:left;}
/*Logo Header*/
#wrapHeader{margin:0px auto; width: 960px; height:128px; background: url(images/bgc.png) repeat-y;}
.headerLeft{width:566px; float:left; background:url(images/logo.png) no-repeat; height:128px;}
.headerRight{width:382px; float:left; background:url(images/headerRight.jpg) no-repeat; height:128px;}
.headerRight p{ font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size:24px; color:#FF0000; padding:60px 0 0 100px;}
/*Navigation Bar Code*/
#navWrap {margin: 0 auto; width: 940px; font-size: 12px;}
#navigation {overflow: visible; font-size: 13px; font-family: verdana, arial, helvetica, sans-serif; padding:1px; width: 960px; margin: 0 auto; font-variant: small-caps; }
#navigation li { float: left; list-style: none; background-color: rgb(26,124,54);repeat-x; width: 115px; border: 1px solid black;}
#navigation a {display: block; background-position: top right; background-repeat: no-repeat; color: white; text-decoration: none; font-weight: bold; }
#navigation span {display: block; background: url(images/navbg.png) repeat-x; padding: 1px 0px; text-align: center; min-height: 50px; font-variant: small-caps; height: 50px;}
#navigation span.currentTab {background: url(images/navbghover.png) repeat-x; border-bottom:none;}
#navigation a:hover {background-position: right -198px; }
#navigation a:hover span {background-position: 0 -198px; background-color: red; background: url(images/navbghover.png) repeat-x; }
#navigation li ul {position: absolute; width: 115px; left: -999em; margin-left: -41px; font-size: 12px; color: black; font-weight: normal; font-variant: normal;}
#navigation li ul a, #navigation li ul a:link {background-image: none; padding: 2px 0px; width: 115px; background-color: rgb(173,204,239); color: black;}
#navigation li ul a:hover {background-color: rgb(128,187,150);}
#navigation li:hover ul, #navigation li.sfhover ul {left: auto;}
.contactBreak p {line-height: 3px;}
/*Main Body*/
#contentMain {margin: 0px auto; width: 960px; float: left; padding: 10px;}
#contentMain p {padding: 10px 30px; text-indent: 30px;}
#contentMain img {float: left; padding: 0px 10px;}
.getQuote {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getInfo {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getManage {width:200px; float:left; padding 5px; border: 1px solid black;}
/*COLUMN WRAPPER AND DIVS */
#wrapColumn{
overflow: auto;
float: left;
width:960px;
margin: 0px auto;
background-image: url(images/bgc.png);
}
#columnLeft {
border-top: 2px solid #046004;
padding: 10px;
margin-left: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}
#columnMid {
border-top: 2px solid #046004;
padding: 10px;
width: 404px;
float: left;
background-color: white;
min-height: 600px;
}
#columnRight {
border-top: 2px solid #046004;
padding: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}
/* Footer Copyright Legal*/
#footer {margin: 0 auto; display:inline-block;}
I realize that my drop down doesn't work in IE either, but that might be too complicated for me to understand at this point since I kind of frankensteined it from various examples. Much thanks in advance OK, I'm back for another CSS lesson - this time on lists. My site is designed with typical three-column layout. The left and right columns are floated and the center column contains most of my content. Sometimes in the center column of a page I want to include a list, either ordered or unordered. This page is a splendid example: http://stallinswebdesign.com/vs/general_OfficersContactInfo.php. I do not yet know how to manipulate the positioning of a list (and lots of other block-level things, truth be told). 1. Can you share with me how to nudge this unordered list (with list-style-type set to none) to the left a wee bit so that it lies about 1em to the right of that left border? 2. Can you share with me a CSS standards-based technique for marking up the first element of a list so that it is left-adjusted and all of the following list elements are indented from it (and I can adjust the amount of indentation), so the list looks like this: Code:
My Team Euskaltel-Euskadi 2005 Orbea Orca is a kick-tail bike because
every cyclist knows that orange and black are the fastest colors
any bike that wins Frame of the Year and Bike of the Year is a winner
the frame stiffness is top-shelf, and the power transfer is amazing
Or, if one can do that with semantic markup other than lists, please let me know. Thank you all for looking; I appreciate your effort. I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's Is this possible with css? I have a single table cell thats 100% wide. I want an image left aligned, an image right aligned and a background image spaning the entire cell. I also want to type text into the cell between the two images. Using html I get bugs in IE so I think css might be the better option? I am building a site and using CSS selectively where I need to control positioning. The site is tapmytrees.com I am having an issue controlling the positioning of the "Add This" image at the footer of the page. I am able to position this right, center, or left, but other than that, have no luck. Currently I am using the following code: #divAddThis { text-align:center; } I am able to use this code to control the positioning of the line below this image: #divLive { float:left; /* moves to right in footer*/ left:-24px; /* adjusts position */ position:relative;/*needed for left and bottom to work*/ text-align:left; /*align text*/ bottom: 5px; /*move up a bit off the search line*/ } When I try to apply the same code to #divAddThis, it has no effect. In fact, using code similar to #divLive, it does not even show up when viewing the results in FireBug. Any suggestions are appreciated. Thanks. I'm new to CSS. What is the best way to position an image? I tried using this: #image { position: absolute; top: 234px; left: 567px } But for some reason it doesn't work...How can I position an image? Thanks PS another thing that's been bothering me is when do you put: (in the external stylesheet) .image {..... } when do you put #image {...... } and when do you put *#image {...... } What's the difference between them and what circumstances do you use them in? |
|||||||