CSS - Float Right Reverse Order Navigation Bar

Hi There -

Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about.

Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section.

Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later.

Then there's the next section. Rounded corners. Contains the entire page.

On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section.

Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links.

----------

First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back.

Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section.

If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug.

So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu.

---------

It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners.

Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow.

Code:

<div id="top part"
logo and searchbox
</div>

<div>
that pesky space that disappears in IE when roll over primary links
</div>

<div id=navcontainer>
dropdown and tabbed menu
</div>

<div id="navigation" class="menu> <!-- couldn't find the menu class in the css -->
<div id="primary" class="clear-block">
contains barmenu - very fussy
</div>
</div>

Here's the relevant CSS:

Code:

div#navigation {
  background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}


#primary {
  line-height: 30px;
}

#primary ul {
  padding:0;
  margin:0;
  list-style:none;
}

#primary li {
  display:inline;
}

#primary a {
  font-weight:bold;
  display:block;
  float:left;
  padding:0px 14px 0px 14px;
  margin: 0px 1px 0px 0px;
  font-size: 95%;
}

#primary a {
  background-position:0% 0px;
}

#primary a:hover {
  text-decoration: none;
  background-position:0% -42px;
}

#primary a.active {
  background-position: 0% -84px;
}

#primary a {
  background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
  color:#666666;
  font-size: 120%;
  font-family:Arial,Helvetica,sans-serif;
}

#primary a:hover {
  color: 666666;
  background: #B8B8B8;
}

#primary a.active {
  color: 666666;
  background: #B8B8B8;
}

Hi,
So, there's the adjacent child selector element + element, but I was wondering if there was something that did the reverse of that selector. For example, let's say I have this:
Code:

<div id="menu">
    <div class="option">1</div
    <div class="option">2</div>
    <div class="option">3</div>
    <div class="option">4</div>
</div>

I know I can use the element + element selector to quickly style every option div but the first, but is there some selector to quickly style every option element but the last. Thanks.
--Surgery

Hi All,

I am building a site that has the following structure for the navigation;

Code:

<div id="navigation">
    <ul id="navlist">
      <li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
      <li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
      <li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
        <ul>
          <li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
          <li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
          <li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
          <li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
          <li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
        </ul>
      </li>
      <li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
      <li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
    </ul>
  </div>

The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;.

Edit: Just noticed that I can't link to the full site that I have uploaded for preview.

What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another?

Your help would be much appreciated!

This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture.

here is my css style sheet. A demonstration of the problem can be seen at:

http://www.yourline-online.com/demo05/?How_to_create_pages
Code:

div.float {
    float: left;
    BORDER-RIGHT: #808080 2px solid;
    PADDING-RIGHT: 2px;
    BORDER-TOP: #808080 2px solid;
    PADDING-LEFT: 2px;
    FONT-WEIGHT: lighter;
    FONT-SIZE: medium;
    PADDING-BOTTOM: 20px;
    MARGIN: 16px 2%;
    BORDER-LEFT: #808080 2px solid;
    COLOR: #000000;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #808080 2px solid;
    HEIGHT: 200px;
    WIDTH: 150px;
    BACKGROUND-COLOR: #ffffff;
    TEXT-DECORATION: none
  }
  
div.float p {
   text-align: center;
   }
div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }
div.spacer {
  clear: both;
  }

MY HTML is like this:
Code:

H1>How to create pages</H1>
<P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P>
<P></P>
<DIV class=container>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> 
<P>caption 1</P></DIV>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100>
<P>caption 2</P></DIV>
<DIV class=spacer>
<DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100>
<P>caption 3</P></DIV>
<DIV class=spacer></DIV></DIV></DIV>

Hi all,

I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage:

http://www.houseofhawkins.com/index.html

which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text.

They are links with the following CSS attached:

div#Header #MenuSection a.MenuTab {

PHP Code:
 filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0');
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
    background-color: #BCD6BC;
    border-style: solid;
    border-width: 1px;
    border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5;
    margin: 0 5px 0 2px;
    height: 1.5em;
    width: 140px;    
    padding: 5px 1px 1px 1px;
}

div#Header #MenuSection {
    float:left;
    margin-top: 30px;
} 





here is the HTML code for that part of the page.

PHP Code:
<div ID="MenuSection">
                    <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a>
                    <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a>
                    <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a>
                </div>
            <div style="clear:left"> </div> 





I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work!

I wish to understand why its like this... I have attached the CSS and the file if that helps anyone.

Thanks for the help and advice.

Were in the middle of re-writing our tools and alowing our users (who put our tools in their website) much more controll over the css of the page. One of the things were touting is that the user can change the order of the fields in the forms to suit what ever is more important to them.

While this may work well positionally , the tab orders are all f'd up. Is there any way to set these in CSS?.. All of the inputs and labels are each in their own divs with a unique ID.

I'm thinking this isn't possible but I thought id ask

I'm having trouble with the CSS on this page: http://www.mediamogulsweb.com/...

You'll notice that in IE the CSS drop down menu is partially hidden by the center graphic on the page...In FF, this is not a problem....

I'm almost entirely sure that this is a z-index issue, but I've checked the z-index, and everything seems fine....the drop down menu elements have a higher z-index than the center graphic elements, yet it still doesn;t work in IE...

Any ideas why? Thanks.

Thanks for taking the time to read my question.

Just wondering. Does the order of appearance of items in a CSS file impact how a page is displayed?

I'm trying to make a page, and it works in IE, but not in Firefox.

Thanks,

Brad

Hi

So I am setting up a portfolio website and I have been focusing mainly on the highslide portion which I got working great (with this forums help, thank you!). Now I have gotten rid of all the tables and garbage like that and am trying to make the images the backgrounds so they will be locked but now the image links spill out of the column and don't line up anymore.

this is what it SHOULD look like:

http://kdpatton.com/index01.htm

but this is what does look like:

http://kdpatton.com/portfolio02.htm

I can't figure out why.

Any help would be great. Love this forum!

is there a specific order in which to put the css selectors in a style sheet, eg
a:link
a:hover
a:active
a:visited

my problem is that the hover state isn't activated for links i have already visited.

thank you

I have an absolutely positioned <div> that is intended to over some content directly below it. This content is contained within a relatively-positioned <div> which seems to be causing it to display in front of the absolutely-positioned <div> regardless of what the z-index is set to.

Here is a simplified example of my problem:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stacking Order Test</title>
</head>

<body>

    <div style="position:relative;">
        &nbsp;
        <div style="position:absolute;background:green;height:55px;top:5px;left:5px;z-index:100;">I should be at the top of the stacking order.</div>
    </div>
    <div>
        <div style="position:relative;background:red;height:300px;">
            If you can read this, I am higher in the stacking order than the green <div>
        </div>
    </div>
    
    

</body>
</html>

The only way that I can get the absolutely-positioned <div> to display at the top of the stacking order as it should is to remove the relative positioning from the other <div>. Unfortunately, for several reasons, this is not an option.

This is only happening in IE6 and 7. Anyone have any any ideas?

I am trying to get the footer DIV to appear directly below the content div on the page. Cant get it to work. CSS and DIV code is below if anyone can offer some advice? Thanks.

Code:

#page_footer {
	background-color: #ff0000;
	width: 729px;
	height: 30px;
	position:relative;	
	bottom: 0px;
	left: 35px;
	font-family: arial, tahoma, times new roman;
	font-size: 11px;
	font-weight: normal;
	color: #5A5A5A;
}

	<!-- // MANDATORY PAGE CONTENT HOLDER // -->

	<div id="page_content_holder_sizing">

		<div id="page_content_section_name"><?=str_replace("::", "-", $page_title)?></div>
		<div id="page_content_top_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
		<div id="page_content_bottom_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>

		<!-- // CONTENT TEMPLATE // -->



		<!-- // END CONTENT TEMPLATE // -->

	</div>

	<!-- // MANDATORY PAGE FOOTER // -->

	<div id="page_footer">

	 footer goes here

	</div>

	<!-- // END MANDATORY PAGE FOOTER // -->

	<!-- // END MANDATORY PAGE CONTENT HOLDER // -->

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;\">&nbsp;</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 . "&nbsp; &nbsp; &nbsp; 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.)

Hi,

I'm curious as to whether anybody knows of any in which to preload a specific - or all of them - background image that's set in CSS.

For example, I might have several background images in place as borders or graphics:

Code:

background: #333333 url(display_bg1.jpg) no-repeat center 30px;
}
{
background: #000000 url(display_bg2.jpg) no-repeat center 30px;
}
{
background: #999999 url(display_bg3.jpg) no-repeat center 30px;

How, perhaps using javascript or php, would I force "display_bg3.jpg" to load before any other image?

Thanks,
DB

In what order are CSS/html files loaded? Concurrently? What about browser rendering? Must all CSS be loaded before any html is rendered?

Also aside from serverside compression / css whitespace (file) compression, removing redundant classes, and using relative paths, is there any other ways to speed loading of CSS?

Would it be of benefit splitting my css file into smaller chunk files - would they all load concurrently and therefore faster?

Does anyone have a good solution for forcing the cache of css files, but not the html calling the css?

Thanks in advance!

Ross