|
CSS - Float Or Display Inline Navigation W Nifty Corners
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);
}
Similar TutorialsHello All, I've been messing with this for quite some time now. Basically, I'm trying to remove this small jumping effect that the nav bar takes on when the page loads. Here is a sample test If you reload it, you can see there is a subtle jump. I find this becomes a lot more noticeable on pages with heavier content such as Buffing. I'm sure there is a way to make this more solid/stable.... Can anyone provide any insight on how to remedy? Note: Notice how in this example; http://www.html.it/articoli/niftycube/nifty4.html , the boxes do not glitch, they are solid... But here they do; http://www.html.it/articoli/niftycube/nifty5.html I'm not sure why though and what I might be doing wrong here... Best, Colin Thanks for taking the time to read my question. I have a <div></div> that I am using to make a bar across my page. In this bar I am placing the links to the other pages on the site. If I don't use float, the height is messed up. If I do use Float, the width shrinks to the minimum. So I added width: 100%; but that made it wider than the rest of the other bars I already have... at leasts in FF, but not in IE. What should I be using? Float? Block? Inline? I've read the descriptions on http://www.w3schools.com/css/pr_class_display.asp but am still unclear on how to use them. I would like to have an area as wide as the page, with links in it so that the height fits the text + the padding. Does DocType help this? Not to clear on how to use that either. Thanks again, Brad my code below. HTML: Code: <html> <!-- Generated by AceHTML Freeware http://freeware.acehtml.com --> <!-- Creation date: 20-Jan-2006 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Contribution Help</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="piercedjunkmail@hotmail.com"> <meta name="generator" content="AceHTML 5 Freeware"> <link href="ChurchHelp.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="Bar1"></div> <div id="TitleBar">Help for You</div> <div id="MenuBar"> <div id="MenuItem"><a href="index.html">Home</a></div> <div id="MenuItem"><a href="General.html">General Help</a></div> <div id="MenuItem"><a href="Settings.html">Settings Help</a></div> <div id="MenuItem"><a href="Contribution.html">Contribution Help</a></div> <div id="MenuItem"><a href="Member.html">Member Help</a></div> <div id="MenuItem"><a href="SiteMap.html">Site Map</a></div> </div> <div id="imgCont"> <img src="Images/ContributionForm.jpg" border="0" width="427" height="287" alt=""> </div> </body> </html> CSS: Code: body {
margin: auto;
background-color: #bcb277;
font-family: Veranda, Arial, sans-serif;
}
#Bar1 {
background-color: #CC9900;
height: 10px;
}
#TitleBar {
background-color: #330033;
height: 30px;
color: green;
font-weight: 25px;
padding-top: 5px;
padding-left: 10px;
}
#MenuBar {
display: compact;
/*float: left;*/
/*width: 100%;*/
background-color: #006600;
padding: 2px;
}
#MenuItem {
float: left;
margin-left: 30px;
color: white;
}
#imgCont {
float: left;
padding: 12px;
background-color: #a99a66;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: #DCDCDC;
text-decoration: none;
}
a:hover {
color: #A9A9A9;
text-decoration: overline underline;
}
a:active {
color: #8B0000;
}
The Problem: I want my logo (a gif image) to justify to the left but padding centers it. Is there a way to NOT pad one "cell" in an inline navigation bar using css without affecting the rest which follow (which are padded)? Please email me for urls to see exactly what I'm working with. Many thanks in advance! I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Hi guys, I hope someone can help me resolve this issue with my navigation. It is fine in IE7, FF and Safari but in IE6 my nagivation looks like this: instead of this: Here is the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
color: #333333;
}
body {
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #CC0000;
}
a:visited {
color: #CC0000;
}
a:hover {
color: #3399CC;
}
a:active {
color: #CC0000;
}
#container {
width:850px;
margin:0 auto 0 auto;
}
#header {
width:850px;
height:187px;
background:url(images/bg_header.jpg) top left no-repeat;
}
#navcontainer
{
margin: 0px;
padding: 0px;
background:url(images/bg_nav.jpg) top left no-repeat;
width:850px;
height:40px;
text-align:center;
}
#navlist {
padding:0;
margin:0;
margin-left:8px;
}
#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url(images/orig_nav.jpg) repeat-x 20px;
font: 13px verdana, sans-serif;
text-align: center;
}
#navcontainer a
{
color: #FFF;
font-weight:bold;
font-size:13px;
text-decoration: none;
display: block;
padding-right:12px;
padding-left:12px;
height:40px;
line-height:40px;
text-align:center;
}
#navcontainer li#active { background: url(images/orig_nav.jpg) repeat-x 20px; }
#navcontainer a:hover { background: url(images/hover_nav.jpg) repeat-x 20px; }
-->
</style></head>
<body>
<div id="container">
<div id="header"></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">The Club</a></li>
<li><a href="#">Membership</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Sites</a></li>
<li><a href="#">Flight Log</a></li>
<li><a href="#"> Resources</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Gear Sales</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Thanks for any help, Mike Hello there I cannot get the following css to give me a reverse order on navigation items floatet right. Can anyone help please? .nav-container { background:#40391d;} #nav {width:950px; margin:0; padding:0px; background:#7f7a60; } #nav li { position:relative; float: right; border-left: 1px solid #fff;} #nav a {padding:5px 12px 6px 12px; color:#fff; font-weight:bold; background: #7f7a60; border: 1px solid #7f7a60; } #nav a:hover {color: #000; background: #fff4c0;} Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm This is bugging me to death. I cannot get these to top elements to display inline. If anyone could take a look in firebug to see element and related css applied and tell me whats wrong. The page is: http://travelmagoo.com/index.php?option=com_resource&controller=article&article=384&category_id=201&Itemid=0 at the top header there is a title and to the right there is an image. I would like the image and title to be on the same line but everything i do will not let me do this. any ideas? Hello, my code works fine on my MAC browsers, but on my PC, IE6 browser, the buttons underneath the body of the page don't align. Here's the site: http://www.caillouette.com/Utilitrek/three/ Here's the CSS:http://www.caillouette.com/Utilitrek/three/style2.css Can someone tell me if this site looks okay in IE 7? I can't download IE 7 because of some technical quirk on my computer. And if they don't align in IE 7, please tell me what I should do. thanks -Sean Hello, I am having trouble with the display: inline tag. ******************************************** Here is the style: H1.nolinebreak { font-size : 12pt; display: inline; } Here is an HTML snippet: <p> Here is my content text. Blah blah <H1 class="nolinebreak"> inline header 1 </H1> blah blah blah <H1 class="nolinebreak"> inline header 2 </H1> </p> ******************************** The second and additional instances of the <h1 class="nolinebreak"> works great. But the first one always puts in a line break. I need them all to display inline. What am I doing wrong? Thanks in advance. Hi, I have created a horizontal navigation before with no problem, yet I am now having trouble. Here's the site: http://www.caillouette.com/Catering/ I have the Div named "indentmenu" and the <ul class="toolbar"> Here's the style sheet: http://www.caillouette.com/Catering/style2.css and here's the navigation: http://www.caillouette.com/Catering/header_nav.inc what am i doing wrong? thanks in advance. Thanks for taking the time to read my question. I have two containers that I want to line up at the top. I can't seem to make them line up. I have a picture inside a <div>, then I have a paragraph. It works in IE7, but in FF, the <p> appears under the picture. If I put a width on the <p> it moves up, but never up all the way so that it is inline with the picture. I'm stumped and not sure what to do. I tried putting display:inline; on either classes, and on both classes at the same time. Not sure what else to do. If I put a width on the <p>, it looks like this in FF |------| |Icon | |---------------------------| |------| | ElevatorSpeech ES2..........| .............|---------------------------| It looks like this if I have no width on <p> |------| |Icon | |------| |---------------------------| |ElevatorSpeech ES2...........| |---------------------------| HTML: Code:
<div class="ESContainer">
<p class="Title1">Control</p>
<div class="Icon"><img src="Images/Remote.jpg" align="Zone All Control Remote Control" /></div>
<p class="ElevatorSpeech ES2">Control your surroundings with confidence, get the results you deserve.</p>
<p class="ElevatorFull"><span class="EFLargeText">Zone-All</span> has been manufacturing room comfort temperature controls for more than two decades. Its variable air volume and variable temperature solutions for zone controls are applicable to heating and cooling systems that are designed using both incremental HVAC units and central station air handlers.</p>
</div>
CSS: Code:
.Icon {
float: left;
margin-left: 10px;
padding: 0px;
height: 100px;
background-color:#FF0000;
}
.ElevatorSpeech {
font-size: 19px;
margin-left: 10px;
margin-right: 10px;
float: left;
padding: 0px;
/*width: 225px;*/
background-color:#FFFF00;
}
Thanks, Brad Hi, I have some simple code as follows: Code: #stars{
width:400px;
height:33px;
}
.star{
width:33px;
height:33px;
background-image: url('images/product_review/star.gif');
font-size:0pt;
}
</style>
</head>
<body>
<div id="stars">
<div class="star">1</div><div class="star">2</div><div class="star">3</div><div class="star">4</div><div class="star">5</div><div class="star">6</div><div class="star">7</div><div class="star">8</div><div class="star">9</div><div class="star">10</div>
</div>
I tried dislpay:inline; for the #stars and the .stars CSS, but inline makes the images disappear. They only show when I remove "inline", but they are stacked in a vertical row. I need them to be horizontal. Here's the link: click here Can someone show me what I doing wrong? thanks Please look at this site - http://www.hitechtranny.com In FF and IE7. Notice in FF that the last link "Contact" on the main nav does not fit? I use this navigation on numerous sites and I always get this problem. Is there a quick fix such as a margin/padding issue I am missing that would fix this? Thanks. Tom I am working on a drupal site and I having problems getting some images in a block to display inline. I am able to effect some of the aspects of the images (they are list items in a ul) but I can't get them to display inline. Here is the html from the source: <div id="block-views-recent_images" class="block block-views"> <div class="blockinner"> <h2 class="title"> recent images </h2> <div class="content"> <div class='view view-recent-images'><div class='view-content view-content-recent-images'><div class="item-list"><ul><li><div class='view-item view-item-recent-images'><div class='view-field view-data-node-data-field-user-images-field-user-images-fid'><a href="/image-upload/admin/05-sep-2007/204"><img src="(xxxxxx) image_0.jpg" alt="" title="" /></a></div></div> </li><li><div class='view-item view-item-recent-images'><div class='view-field view-data-node-data-field-user-images-field-user-images-fid'><a href="/image-upload/admin/05-sep-2007/201"><img src="(xxxxxxx) image.jpg" alt="shack" title="some image" /></a></div></div> </li></ul></div></div><div class='more-link'><a href="/recent_images">more</a></div></div> And here is the css that I have attempted so far: #block-views-recent_images { background: #EBE9ED; } #block-views-recent_images li{ list-style-image: none; list-style-type: none; padding: 0; margin: 0; display: inline; } I am new to CSS so I know I may have taken a completely wrong approach. Thanks for any suggestions on how to get the images to display inline. Thanks hi, I am having problems with nav list It displays inline on firefox but not in IE..but I can not see why? any ideas?? thanks PHP Code: /* NAV */ #nav { width: 420px; height: 70px; float: right; margin: 0; padding: 0; } #nav li.on ul, #nav li.off ul { margin: 0; padding: 0; } #nav a { text-decoration: none; } #nav li { /*float the main list items*/ margin: 0; float: right; display: inline; padding-right: 0px; background: url(../images/pipe.gif) no-repeat; background-position: 0 10px; } .noback { background: none; } #nav li ul { display: none; float: right; } #nav li.off ul, #nav li.on ul { /*put the subnav below*/ position: absolute; top: 88px; *top: 104px; left: 503px; padding-top: 10px; height: 28px; width: 420px; } #nav li a { color: #155089; font-size: 20px; display: block; height: 15px; padding: 10px; background-position: 0 10px; } #nav li.on a { color: #000; background-position: 0 10px; } #nav li.on ul a, #nav li.off ul a { float: left; /*ie doesn't inherit the float*/ border: 0; color: #C1D1E0; width: auto; margin-right: 0px; font-size: 18px; line-height: 0px; background: none; } #nav li.on ul { display: block; background: none; } #nav li.off:hover ul { display: block; z-index: 6000; background: #fff; } #nav li.off a:hover, #nav li:hover a { color: #000; background: #fff; background: url(../images/pipe.gif) no-repeat; background-position: 0 10px; } #nav ul li.off a:hover, #nav ul li:hover a { color: #000; background: none; } ul#nav li.off ul li, ul#nav li.on ul li { background-image:none; } ul#nav li.off ul li a:hover, ul#nav li.on ul li a:hover { background-image:none; } ul#nav li.on a.nopipe, ul#nav li.off a.nopipe { background-image:none; } /* END OF NAV */ and the html PHP Code: <div id="divnav"> <ul id="nav"> <li class="off"><a href="#">contact</a></li> <li class="off"><a href="#">products</a> <ul> <li><a href="#">testemonials</a></li> <li><a href="#">samples</a></li> </ul> </li> <li class="off"><a href="#">about us</a> <ul> <li><a href="#">processes</a></li> <li><a href="#">plant list</a></li> <li><a href="#">benefits</a></li> <li><a href="#">features</a></li> </ul> </li> <li class="on" style = "background-image:none;"><a href="#" class = "nopipe">home</a></li> </ul> </div> thank you I know that display:inline is supposed to change a Block element to view like an inline element. I take that to mean that the display:inline will eliminate any added space the Block element has in it. Meaning images and text will butt up against each other, but it's not working the way I expected. I have a list with images that I want to butt up against each other vertically . These images stack on top each other and to the left. The list has zero pixels for padding and margins. In the browsers that 5 pixel line shows up unless I code in a <p> then I adjust the <p> to have no padding or margin. EX: Code: <div id="maincontent"> <ul> <li class="hoodmenu"><p><a href="#"><img src="bu_streetware.jpg" alt="street ware"></a></p></li> <li class="hoodmenu"><p><a href="#"><img src="bu_dolls.jpg" alt="womens"></a></p></li> <li class="hoodmenu"><p><a href="#"><img src="bu_dudes.jpg" alt="guys"></a></p></li> <li class="hoodmenu"><p><a href="#"><img src="bu_beginners.jpg" alt="children"></a></p></li> </ul> </div> This seems like a hack. I have tried using display;inline but the spaces still appear. The code validates in 4.01 HTML and in CSS3. I also noticed I don't have to use the <p> in Opera or Safari, but I do for Firefox. Is this the correct way to handle this problem? If not, how should I actually write the code? Thank you! Hello, I have a question about div's set to display: inline. First let me explain what I'm trying to do so that if I'm going about it the wrong way you can show me the light. I'm trying to have multiple divs centered on the screen and lined up horizontally, like so: | (div1)(div2)(div3)(div4) | The thing is, I have images in the divs. I also have a border on the divs. So when I set display: inline, the border goes through the image (although the divs are positioned correctly with the body text-align: center). However, when I set display: block, the border is exactly how I want it (i.e. it includes the image) but the divs are placed one on top of the other vertically and they are left-aligned. Is there a simple way to do this? Thanks Hi, My site is loading fine in IE but messing up in FF, the tables (yes tables, sry) are loosing all height and widths. Ive had a look about but cant work out how to fix/get around this. HTML Code: <div id="products"> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#ED1C24" style="width:194px; height:114px; margin-right:5px;margin-bottom:5px;"> <tr> <td align="left" class="code" style="padding-left:3px;"> AKA </td> <td align="right" class="name" style="padding-right:3px;"> TITLE </td> </tr> <tr> <td colspan="2" align="center" valign="middle" style="background-image: url(images/item_bg.gif); background-repeat:no-repeat;"> <a href="details.php?id=CODE"> <img src="images/products/photos/CODE.jpg" alt="TITLE" border="0" style="height:84px; width:184;" /></a> </td> </tr> </table> </div> CSS Code: #products { padding-bottom:10px; line-height:20px; font-family:Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:1px; display:inline-table; vertical-align:top;}
#products table {display: inline}
How can i get the same effect so FF looks the same as IE? Thanks for any help. Mike Okay i have been working on this for a while now, and i hate asking for help.. but i have given up on it. Firstly i started using display:inline-block; which meant i could have a width so my hover over menu effect would work. But this did not work in IE7 which means it is useless to what i am doing. So i then moved onto Display:inline; This worked fine, in both IE and Firefox, but the width cannot be set with this value. This value just wraps itself around the content. But i need to set a width to the Inline value. Any help? CSS: Code: #navcontainer ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
width: 65px;
height: 21px;
background: url("images/tabbg.gif") 0 0 no-repeat;
text-decoration: none;
text-align:center;
}
#navcontainer ul li a{
display:inline;
width: 65px;
height: 21px;
background: url("images/tabbg.gif") 0 0 no-repeat;
text-decoration: none;
}
#navcontainer ul li a:hover{
background-position: -65px 0;
color:#FFFFFF;
}
html: Code: <div id="navcontainer"> <ul> <li><a href="#">Milk</a></li> <li><a href="#">Eggs</a></li> <li><a href="#">Cheese</a></li> <li><a href="#">Vegetables</a></li> <li><a href="#">Fruit</a></li> </ul> </div> Also a link to the actual page is http://www.therow2.com/adsense/zzzzzzzzzzzzzzz.php |
|||||||