|
CSS - Reversing Item Order In A Right Floated List..
First of all, I hope this makes sense - I just spent two hours nonstop tweaking the navigation on my first client's site, and my brain and eyes are a bit frazzled.
I have the navigation in a list, displayed horizontally in a Suckerfish dropdown. The container is elastic but the navigation is not; I want it to stick to the right side but move to the left when the browser is made narrower. Floating it to the right works perfectly.. But it reverses the order of my list items so that "Home" is to the far right instead of the left. Is there any way to reverse the order of the list items without touching the HTML? Going for full accessibility here, so I obviously don't want to reverse the item order in the HTML. I could probably figure this out on my own but it would take time, and like I said.. My brain is a little wonky right now Thanks in advance! Similar TutorialsHi 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 Hello, I have this arrow icon at the end of each <li> that is floated right. When the user clicks on it, he gets a dropdown list with options. I'm just having some trouble positioning it. here is the screenshot of before and after the user clicks the arrow icon: Here is the HTML that I am using to place it: Code: <ol>
<li><a class="control" href="javascript:toggleLayer('controlgroup01');"> </a><a href="">System Executive Summary</a></li>
<div class="controlgroup" id="controlgroup01">
<a href="#">1</a><br />
<a href="#">2</a><br />
<a href="#">3</a><br />
<a href="#">4</a><br />
</div>
</ol>
I also tried encapsulating the <div> whithin the <li> in hopes that it would only affect that item like this: Code: <ol>
<li><a class="control" href="javascript:toggleLayer('controlgroup01');"> </a><a href="">System Executive Summary</a>
<div class="controlgroup" id="controlgroup01">
<a href="#">1</a><br />
<a href="#">2</a><br />
<a href="#">3</a><br />
<a href="#">4</a><br />
</div>
</li>
</ol>
Here is the CSS I am using to position the above <div> (which is invisible at first): Code: .control
{
float: right;
border: 0px solid #000000;
border-left: 1px dotted #cccccc;
padding: 0px;
padding-left: 8px;
margin: 0px;
margin-left: 8px;
background-repeat: no-repeat;
background-position: 100% 50%;
text-decoration: none;
}
.controlgroup
{
display: none;
/* position: relative; */
/* left: 70em; */
border: 1px solid #fddc9a;
background-color: #fff3ce;
float: right;
}
.controlgroup a
{
padding: 4px 4px 4px 24px;
background-image: url(bulletarrow.bmp); /* Photoshop this into transparent GIF */
background-repeat: no-repeat;
background-position: 4px 50%;
}
I can't really use position: absolute; because depending on how the user resizes the browser, the box will be in a different place as it is supposed to be right justified, not left. It can't be positioned the way it is b/c the items below it bump into it and get schootched over to the side. I wish there was some waay to do this. Does anybody know? Thanks Why do margin and padding widths act differently when applied to a floated item in Internet Explorer? 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 I'm working on a Shopping Cart, and when I go to view_cart.php to view the shopping cart within the browser, everything is great Quote: Item Name Qty Price However, when I click the Order button, the order gets emailed, and it's not correct. For example, there's an item named Money Paddle. In the email, it shows like: Quote: Money Pa! ddle The item that gets messed up, is the item after an item that takes up 2 lines. (The item that shows up on 2 lines, is: The Vanishing Box- Make small objects disappear...) So, the items will show up as: Quote: Silk Shoes 1 x $19.99 The Vanishing Box- Make small objects 2 x $9.99 disappear... Mega Bal! l & Vase 1 x $4.99 Amazing Magic Set 1 x $4.44 I checked the database to verify there are no special characters or anything, and it all seems fine. So not sure what I'm missing to have it display correctly, but here's the code to email the message: PHP Code: $recipient = "orders@domain.com"; $subject = "Order"; $mailheaders = 'From: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Reply-To: mailing@domain.com'."\r\n"; $mailheaders .= 'Return-Path: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Content-type: text/html; charset="ISO-8859-1"'."\r\n"; $sent = mail($recipient, $subject, $display, $mailheaders); I have tried several times, and it always shows up the same way in the email only. The browser is fine when displaying the cart. I'm assuming, it may have to do with the php code itself, as this only happens with the item after the 2 liner (regardless of the next item) PHP Code: $sql_view = "SELECT `id`, `user_string`, `item_code`, `quantity` FROM `cart` WHERE user_string = '$user_string'"; $result_view = mysql_query($sql_view, $conn) or die(mysql_error()); if (mysql_num_rows($result_view) > 0) { $subtotal == 0; $display .= "<div style=\"width:250px; float:left;\">Item Name</div><div style=\"width:50px; float:left;\">Qty</div><div style=\"width:100px; float:left;\">Price</div><br />"; $display .= "<div style=\"clear:both;\"> </div>"; while($row = mysql_fetch_array($result_view)) { $id = $row['id']; $item_code = $row['item_code']; $quantity = $row['quantity']; $sql_item = "SELECT `item_name`, `msrp`, `image` FROM `products` WHERE item_code = '$item_code'"; $result_item = mysql_query($sql_item, $conn) or die(mysql_error()); while($row = mysql_fetch_array($result_item)) { $item_name = $row['item_name']; $msrp = $row['msrp']; $image = $row['image']; $subtotal = ($quantity * $msrp) + $subtotal; $display .= "<div style=\"width:250px; float:left;\">" .$item_name . "</div><div style=\"width:50px; float:left;\">" . $quantity . " x </div><div style=\"width:100px; float:left;\">$" . $msrp . "</div>"; $display .= "<div style=\"clear:both;\"></div>"; } } $display .= "<div style=\"width:340px; text-align:right; padding-right:10px; padding-top:10px; border-top:1px solid black;\">$".$subtotal."</div>"; } $recipient = "orders@domain.com"; $subject = "Order"; $mailheaders = 'From: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Reply-To: mailing@domain.com'."\r\n"; $mailheaders .= 'Return-Path: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Content-type: text/html; charset="ISO-8859-1"'."\r\n"; $sent = mail($recipient, $subject, $display, $mailheaders); if ($sent) { // $sql_delete = "DELETE FROM `cart` WHERE `user_string` = '$user_string'"; // $result_delete = mysql_query($sql_delete, $conn) or die(mysql_error()); header("Location:view_cart.php?error=no"); exit; } else { header("Location:view_cart.php?error=yes"); exit; } (I know I have inline CSS right now... will correctly place them in CSS file or whatnot after I get things working properly.) Thanks for any help. If you need further info, let me know. (If this belongs in PHP, move it accordingly.) Hey all, I've got a photo gallery here. In IE7 The list just drops below the box on the right, whereas in FF it breaks where it should and moves down. I can't figure out what's going on. Here's the CSS for the gallery: Code:
#galleryList {
width:100%;
margin:15px 5px;
}
* html #galleryList {
margin-right:-5px;
}
#galleryList li {
float:left;
width:150px;
height:150px;
padding:5px;
margin:5px;
border:1px solid;
border-color:#777 #aaa #aaa #777;
background:#dedede;
}
* html #galleryList li {
margin:2px;
}
I have a list that is made sortable via jquery UI's sortable plugin. I have it worked fine in all modern browsers but I get overlapping in IE8 and IE7 is just a mess but I'm less concerned about that. Working Example Click and drag Item 5 up above Item 4 and drop there. You can see the issue. It works initially but I'm not sure why IE8 isn't clearing the float after it is dropped. Maybe it is a javascript issue instead of CSS? I've been struggling with this a bit. I would rather not use a container div for my lists, but it seems that it's not possible to assign the lists themselves a width. When I assign a width to the <ol> element, I lose the numbers under the margin on the left, which I can sort-of understand. If I assign a width to the <li> elements, it works fine in Firefox, but IE drops the number on the first <li> and changes the numbers on each following <li> to "1". Hi all, and thanks for reading. The following code looks fine in Firefox, but has huge spaces between the images in IE 6. CSS: Code:
#menu {float:left; width:157px; background-color:#FFFFFF;}
#menu IMG {display:block; margin:0; padding:0;}
#menu UL {list-style-type:none; margin:0; padding:0; background-color:#FFFFFF;}
#menu UL LI {margin:0; padding:0;}
HTML: Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...
<div id="menu">
<ul>
<li><a href="../balloons/" title="Balloons"><img src="../images/menu-balloons.gif" alt="Balloons" width="157" height="37" border="0" /></a></li>
<li><a href="../centerpieces/" title="Centerpieces"><img src="../images/menu-centerpieces.gif" alt="Centerpieces" width="157" height="37" border="0" /></a></li>
<li><a href="../supplies/" title="Supplies"><img src="../images/menu-supplies.gif" alt="Suppliers" width="157" height="37" border="0" /></a></li>
<li><a href="../contact/" title="Contact Us"><img src="../images/menu-contact.gif" alt="Contact Us" width="157" height="37" border="0" /></a></li>
<li><a href="../" title="Home"><img src="../images/menu-home.gif" alt="Home" width="157" height="37" border="0" /></a></li>
</ul>
</div>
Thanks in advance. -colin Please look at the bottom of this page in FF - http://certified.tmhdesign.com The li elements have a margin-left or the ul a padding left. Can someone help me out? Here is my css ul#hp_offers{ width:600px; margin:0 0 0 10px; border:1px solid #e0e0e0; } ul#hp_offers li{ padding:3px 5px 3px 25px; border-bottom:1px solid #e0e0e0; list-style:none; list-style-type:none; margin:0; } li.even{ background: #f1efef url(../images/offer_even_bullet.gif) no-repeat 10px 7px; } li.odd{ background: #e0e0e0 url(../images/offer_odd_bullet.gif) no-repeat 10px 7px; } Is there any way to have horizontal list items automatically fill any given width? for example, If I have 5 list items, I can set each width to 20% and the list will fill the width of the container, but if I don't set a width, then they collapse to the left. the behavior I'm after is like a table. The 'old' way to create a horizontal list would be to create a table with one row and 5 cols. Setting the width of the table to 100% would make each cell 20% automatically. Any way to accomplish this in css without explicitly setting the width? Hey everyone, After doing some reprogramming of the site I was making I'm having troubles with lists. I can't set the width of the li or a so that the size takes shape. I can't figure out why, or how to do it. I know I've done it before but the code i used there just doesn't seem to want to work. The LI and A tags take the size of the text within. I've checked the resources I could find in the sticky and that kravitz gave me and they seem to be able to set width but it's just not working. here is my css Code:
#menu{
width:750px;
border:thin solid #000000;
}
#menu ul{
margin:0;
padding:0;
width:750px;
display:inline;
}
#menu li{
width:150px;
display:inline;
border:thin solid #000000;
list-style-type:none;
background-color:#550210;
}
#menu a{
width:150px;
}
If I take out the display:inline the width takes shape but when I put it back in it resizes to the size of the text within. Of course, IE is being a P.I.T.A. I can't figure out why this is happening... but it's probably something so simple I'm overlooking it. I have a set of images and/or links set up as a list and the last item on the first row shifts down. After that row, everything looks fine. No problems on FF, Chrome and Safari (Mac). See this page for example and view with Explorer: www[dot]cameronstevens[dot]ca/gallery[dot]html Thanks I am having trouble with my navigation. it works fine in safari and firefox, but when i try it in IE for the PC the main navigational elements don't move. does anyone know why? www.iconiqdesigner.com thanks! I am really stumped -- I need to stack images on top of one another using an unordered list but I get a few pixels of whitespace at the bottom no matter what I do. I know this could be acheived using divs instead but I would like to figure it out using lists. I broke the code into as simple a form as possible and put it below. Removing everything between the </li> tag and the next <li> tag does not work. I tried adding "height: 20px;" under "#nav ul li" to force the images to stack on top of each other -- this works in Safari and Firefox but not in IE Windows. If I remove the DocType tag or switch it to xhtml transitional the images do stack in Safari but not in Firefox or IE. Am I missing something here or is this just not possible? Appreciate any help. The code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css list test</title>
<style type="text/css" media="screen">
img {
border: 0;
}
#nav {
padding: 0;
margin: 0;
}
#nav ul {
padding: 0;
margin: 0;
list-style-type: none;
}
#nav ul li {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><img src="http://test.mightylab.com/images/colors/blue.jpg" width="40" height="20" /></li>
<li><img src="http://test.mightylab.com/images/colors/yellow.jpg" width="40" height="20" /></li>
<li><img src="http://test.mightylab.com/images/colors/red.jpg" width="40" height="20" /></li>
</ul>
</div>
</body>
</html>
I've been using CSS for a couple of days now, and am a bit stuck on how to change the main background image in the body when I hover over a menu item on the side bar. Changing the menu item background seemed easy enough. But, I suspect I am missing a key piece on how to get access to a body style from inside a list style. Here is the short section I am working on, with the full CSS file shown below that. This validates with a couple of warnings about my black on black color selection. I would certainly appreciate any help with this. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>HOTWORKS</title> <link rel="stylesheet" href="stylz.css" type="text/css"> </head> <body class="top" id="bdy" > <!-- Site navigation menu --> <ul class="navbar" id="navlist"> <li><a href="tools.html"><br>Tools</a> <li><a href="glass.html"><br>Glass <br> Artwork</a> <li><a href="pottery.html"><br>Ceramic<br> Artwork</a> <li><a href="about.html"><br>About</a> </ul> <!-- Main content --> <h1> </h1> <p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> TOOLS - ART - MISCELLANEA <br> <address> </address> </body> </html> Code: #navlist a:hover {
color: #1e5ebd;
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FF0000;
/* how do I do something like this
body.top { background-image: url(images/tabtool.jpg) ; }
*/
}
Just to be complete, and in case there is something in here that you might need, here is the full css file: Code:
body.top {
padding-left: 11em;
font-family: Fantasy, "Times New Roman", Times, serif;
font-size:15px;
color: #000000;
/*background-image: url(images/tab3.jpg) ; */
background-position: 210px 10px;
background-repeat:no-repeat;
background-color: #000000;
margin-left:5cm;
}
body.top { background-image: url(images/tab3.jpg) ; }
ul.navbar {
color: #000000;
list-style-type: none;
position: absolute;
display:block;
float:left;
left: 1em;
}
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif
}
ul.navbar li {
text-align:center;
/* vertical-align:100px; */
background: #000000;
border-right: 1em solid black;
}
ul.navbar a {
text-decoration: none ;
top:10%;
height:4em;
}
a:link {
color: white }
a:visited {
color: white }
#navlist {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
font-weight:bold;
list-style:none;
}
#navlist a {
display:block;
width:144px;
height:137px;
color:#fff;
text-decoration:none;
background:url("images/drawer4.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
}
#navlist a:hover {
color: #1e5ebd;
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FF0000;
/* how do I do something like this
body.top { background-image: url(images/tabtool.jpg) ; }
*/
}
#navlist a:active {
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FFC741;
}
I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover. Code: <li id="menuitem_2mainnav"> <a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a> <ul id="menulist_2mainnav"> <li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li> <li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li> <li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li> <li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li> </ul> </li> I have tried: Code: #menulist_2mainnav li:hover{ color:#000000 !important; }
But it doesn't change the links text colour. In Firefox, I've got a right div that is not repsonding to an auto width in FF. I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing. I've included a screen shot of the problem, any help is greatly appreciated. - K CSS Code Code:
#MainContainer
{
float: left;
width: auto;
}
#Main
{
margin-right: 0.2em;
}
#MainContent
{
padding: 0.5em 0.5em 0.5em 0.5em;
}
#SidebarContainer
{
float: right;
width: 250px;
border-top: 1px solid #C0C0C0;
padding-top: 5px;
clear: right;
}
#Sidebar
{
padding-bottom: 5px;
background: #ADADAD;
background-image: url(../images/SidebarBackground.jpg);
background-repeat: no-repeat;
clear:left;
}
#SidebarContent
{
margin: 0.2em 0.2em 0.2em 0.2em;
}
Aaaah! another problem... now i have 2 divs, left one floated, and right one set that it's left margine distances him from left div. when i print that page from FF it's ok, but when i try to print it from IE it looks like left one isn't floating - divs are one beneath other (right one shifted to right for that margin value). what now? thanks |
|||||||