CSS - Display Item Right After Float

I'm having a little trouble getting my navigation to have the
effect of the nifty corner's script .

[EDIT]

I've put the relevant files on an example page, but it doesn't
seem that Angelfire is allowing the javascript?

[/EDIT]

I've attempted, so far, to float the menu to the left, and then
give each <li> display inline to get a horizontal menu. This part
works in Fx1.0.7, but in IE6.0 each <li> is a 100% width?

Any help would be greatly appreciated. I've never used the
nifty corners before.. so far it hasn't been that hard, except
for this episode...

If any of the CSS is redundant, please tell me so that I can fix it, I've been trying to get the nifty corners to work
and may have overlooked some errors.
Code:

	html,
	body{
		margin:20px auto 20px auto;
		padding:0px;
		background-color:#333;
		font-family:Arial,sans-serif;
	}
	#container{
		margin:auto;
		width:700px;
		min-width:300px;
		background-color:#333;
	}
	#header{
		color:#F60;
		width:700px;
		font-size:25px;
		text-align:center;
		background-color:#FFF;
		font-family:'Arial Bold',sans-serif;
	}
	#menu{
		margin:0px;
		padding:0px;
		text-align:center;
	}
	#menu #nav{
		float:left;
		padding:0px;
		list-style-type:none;
		margin: 0px 0px 15px 0px;
		background-color:#333;
	}
	#nav li{
		display:inline;
		margin-left:5px;
		margin-right:5px;
	}
	#nav li a{
		padding:2px;
	}
	#content{
		padding:10px;
		background-color:#FFF;
	}
	* a{
		color:#F60;
		font-size:10px;
		text-decoration:none;
		vertical-align:middle;
	}

Code:

<div id='menu'><ul id='nav'>
			<li><a href='#' title='' class='tab'>LOREM</a></li>
			<li><a href='#' title='' class='tab'>IPSUM</a></li>
			<li><a href='#' title='' class='tab'>DOLOR</a></li>
			<li><a href='#' title='' class='tab'>SIT</a></li>
			<li><a href='#' title='' class='tab'>AMET</a></li>
		</ul></div>
		<div style='clear:both;'></div>

Code:

function NiftyCheck(){
  if (!document.getElementById || !document.createElement) return 0;
  var b= navigator.userAgent.toLowerCase();
  if (b.indexOf('msie 5') > 0 && b.indexOf('opera')==-1) return 0;
  return 1;
}

function Rounded(selector,bk,color,size){
  var v= getElementsBySelector(selector);
  for (var i=0; i < v.length; i++){
    AddTop(v[i],bk,color,size);
    AddBottom(v[i],bk,color,size);
  }
}

function AddTop(el,bk,bColor,size){
  var d= document.createElement('b');
  var cn= 'r';
  var lim= 4;
  if (size && size=='small'){
    cn= 'rs';
    lim= 2;
  }
  d.className= 'rtop';
  d.style.backgroundColor= bk;
  for (var i=1; i <= lim; i++){
    var x= document.createElement('b');
    x.className= cn + i;
    x.style.backgroundColor= bColor;
    d.appendChild(x);
  }
  el.insertBefore(d,el.firstChild);
}

function AddBottom(el,bk,bColor,size){
  var d= document.createElement('b');
  var cn= 'r';
  var lim= 4;
  if(size && size=='small'){
    cn= 'rs';
    lim= 2;
  }
  d.className= 'rbottom';
  d.style.backgroundColor= bk;
  for(var i=lim; i > 0; i--){
    var x= document.createElement('b');
    x.className= cn + i;
    x.style.backgroundColor= bColor;
    d.appendChild(x);
  }
  el.appendChild(d,el.firstChild);
}

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

subject isn't too good

anyhow.. i have 4 cells

__ __
|1 | |2 |
--- ---
__ __
|3| |4 |
--- ---

2 and 4 are said to float right, such that 1 and 3 define the height of the page..

but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens

__ __
|1 | |2 |
--- | |
--- | |
|4| ---
---
__
|3|
---


do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right

any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?)

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;
}

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.

I'm trying to use a simple background image to dress up my navigation tabs. When I set the <li> to a fixed with and height, both FF and IE ignore this; thus my graphic gets chopped off when the navigation tab is shorter than the graphic.

I'm scratching my head and have tried just about everything.

Here's How it is Presenting-Link to my Website

Here's my css:

Code:

li.navbg {
    width: 75px;
    height: 20px;
    display: inline;
    margin-right: 5px;
    padding-top: 5px;
    padding-bottom: 3px;
    padding-left: 7px;
    padding-right: 5px;
    background-image: url(/images/navbg.png);
    background-attachment: scroll;
    background-position: bottom center;
    background-repeat: no-repeat;
    list-style: none;
    background-color: #000;  
}

My xhtml is a simple:

Code:

<li class="navbg">Navigation Title</li>

My gratitude ahead of time!

I swear this question gets asked every other day but I cannot find any thread that has a solution for me. I need to center the following:

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>Search Home</title>
   <style type="text/css">
     #search_items{ margin: 0 auto; }
   </style>
   </head>
<body>
               <div id="search_items">
                  <form method="get" action="#" id="advanced_search">

                     <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                           <td>
                              <table cellpadding="4" cellspacing="0">
                                 <tr>
                                    <td><!--trh2-->
                                       <strong>Appliance</strong>
                                    </td>

                                 </tr>
                              </table>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <table cellpadding="0" cellspacing="0" class="search_input">
                                 <tr>
                                    <td valign="middle">

                                       <input type="text" name="q" size="32" maxlength="256" value=""/>
                                    </td>
                                    <td valign="middle">
                                       <input type="submit" name="btnG" value="Search"/>
                                    </td>
                                    <td class="more_options">
                                       <a href="#">Advanced Search</a>
                                       <br/>

                                       <a href="#">Search Tips</a>
                                       <br/>
                                    </td>
                                 </tr>
                                 <tr>
                                    <td colspan="2"/>
                                 </tr>
                              </table>

                           </td>
                        </tr>
                     </table>
                  </form>
               </div>
               </body></html>

And I thought that the margin: 0 auto did it but it is not quite working.

Kravvitz to preempt what I know will be a question from you, I am using tables because this is HTML generated by a Google search appliance so I'm just trying to work with what they give me :-)

this is my CSS only tooltip, how to make that tooltip to bi on top of every item it is used for

Code:

<style>

a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:230px; ;}
a.tooltip:hover span{display:block; position: absolute;top:; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c; font-size:12px;}

a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/

</style>
<table width="768" border="1" align="center">
  <tr>
    <td>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<a href="{url_download}" class="tooltip">

    
<div class="progress-bar" style="width:300px; float:left;">
--------------------------------------------
</div>
<span>
        <div>
            <strong>File Size:</strong> {filesize_value} (KB)<br>
            <strong>Downloads:</strong> {hits_value}<br>
            <strong>Added:</strong> {created_date_value}<br>
            {description}
            {screenshot_begin}<img src="{screenshot}" align="right" />{screenshot_end}

        </div>
    </span>
</a>
 <div class="seperate" style="float:left;"></div>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<a href="{url_download}" class="tooltip">

    
<div class="progress-bar" style="width:300px; float:left;">
--------------------------------------------
</div>
<span>
        <div>
            <strong>File Size:</strong> {filesize_value} (KB)<br>
            <strong>Downloads:</strong> {hits_value}<br>
            <strong>Added:</strong> {created_date_value}<br>
            {description}
            {screenshot_begin}<img src="{screenshot}" align="right" />{screenshot_end}

        </div>
    </span>
</a>
 <div class="seperate" style="float:left;"></div>
 </td>
  </tr>
</table>

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

I have a navigation menu that uses ul and li for its headings. I also have a javascript that gets called on hover of the menu items.

I would like a different script called for hovering over each menu item (so a different action happens for each item). What is the best way to achieve this? Can I have different styles for the menu items?

Code:

<html>
    <head>
        <title>Hi</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script src="hoverIntent.js" type="text/javascript.</script>
        <script type="text/javascript">
        $(document).ready(function () {

            $("#nav a").append("<em></em>");

            $("#nav a").hoverIntent(function () {
                $(this).find("em").animate({ opacity: "show", top: "-34" }, "fast");
                var hoverText = $(this).attr("title");
                $(this).find("em").text(hoverText);
            }, function () {
                $(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
            });
        });
        </script>

<style type="text/css">
body {
margin: 0px;
}
#nav {
border-top: 2px solid #000;
border-bottom:2px solid #000;
width: 100%;
height: 36px;
line-height: 36px;
float: left;
background:url("images/OFF2.gif") repeat-x top left;
}
#nav ul {
list-style: none; 
width: 900px;
margin: 0 auto;
padding: 0;
position:relative;
} 
#nav li { 
float: left; 
} 
#nav li em { 	
background: url(images/home.png) no-repeat; 	
width: 180px; 	
height: 45px; 	
position: absolute; 	
top: -43px; 	
left: 160px; 	
padding: 20px 12px 10px; 	
z-index: 1; 	display: none; 
} 
#nav li a { 	
font-family:"Georgia", "Sans-Serif";     
display: inline-block;     
text-decoration: none;    
font-size:medium;     
padding: 0px 5px; 	
text-align:center; 	
color: #000;     
width:110px;     
height: 36px;     
line-height: 36px; 	
background:transparent url("images/off.gif") no-repeat top right; 
} 
#nav li a:hover { 	
font-family:"Georgia", "Sans-Serif";     
display: inline-block;     
text-decoration: none;     
font-weight:bold;     
font-size:medium;     
padding: 0px 5px;     
width:110px;     
height: 36px;     
line-height: 36px; 
} 
</style> 
</head> 
<body>    
    <div id="nav"> 	
        <ul> 	    
            <li><a href="#">Option1</a></li> 	    
            <li><a href="#">Option2</a></li> 	    
            <li><a href="#">Option3</a></li> 	    
            <li><a href="#">Option4</a></li> 	    
            <li><a href="#">Option5</a></li>             
            <li><a href="#">Option6</a></li> 	 
        </ul>     
    </div>  
</body> 
</html>

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".

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;
}

I understand enough CSS to get things done, but there is one issue that I can not seem to get my head around.

All the tutorials I have seen on styling forms with CSS leave the form items a set width. The problem is that this is not very flexible.

A text input field for example may need to be short in one usage for entry of things like 6 digit numbers or long for example a URL.

A text area might be used for something small like a comment or for editing a large HTML.

Can you give me a idea on how you make sure that the "Text input" and "text area" elements of your forms match the length of the data the user needs to input?

How do you manage it?

Hi,

I need to adjust only the 1st link(for 1st menu item) of my main menu. I have used pat pat template and have managed to apply a background image for the first item. Here is the css:

Code:

#first-suckerfish-vertical{
background:url(../images/menutop.jpg) no-repeat;
height:75px;
margin-top:-2.5px !important;
margin-top:-3px;
position:relative;
}

Now to apply style on the main menu item, i use a.mainlevel.
but i cant use the a.mainlevel..coz it will adjust all the links. I need to apply style only to the first link of my menu.

I am wondering if there's a way in css to access a class from another class or id. I already have this style(#first-suckerfish-vertical) for the 1st menu item. is it possible now to access the a.mainlevel from it..

Thx