|
CSS - Problem With Aligning A Menu In Css
Hi guys .. Kinda stuck again.
I've just obtained a menu which I liked, and for some reason, using the 960 gridsystem i cant get it to align correctly under the space which will eventually be a textlogo Here's the index.html: PHP 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" /> <link rel= "stylesheet" href="css/960/960.css" /> <link rel= "stylesheet" href="css/960/text.css" /> <link rel= "stylesheet" href="css/nav.css" /> <title>FIXA DATORN!</title> </head> <body> <div class="container_16"> <div id="logo" class="grid_4 push_5"><p><h3>FIXA DATORN!</h3></p> </div> </div> <nav> <div class="menu"> <ul> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="About">Portfolio</a></li> <li><a href="#" title="Jobs">Blog</a></li> <li><a href="#" title="Contact">Contact</a></li> </ul> </div> </nav> </body> </html> and nav.css: PHP Code: /* Nav */ nav{ bottom:414px; min-width:450px; position:absolute; right:10%; text-align: center; } nav ul li{ border-bottom:5px solid #68a99f; float:left; font-family:'BebasNeueRegular', sans-serif; font-size:18pt; height:60px; line-height:60px; list-style-type:none; margin:0 7px; text-align:center; width:120px; } nav ul li:hover{ border-bottom-color:#0076a3; transition-property:border-bottom-color; transition-duration:0.5s; -moz-transition-property:border-bottom-color; -moz-transition-duration:0.5s; -webkit-transition-property:border-bottom-color; -webkit-transition-duration:0.5s; } nav ul li a{ color:#eee; display:inline-block; height:100%; width:100%; text-decoration:none; } nav ul li a:hover{ color:#999; text-decoration:none; transition-property:color; transition-duration:0.5s; -moz-transition-property:color; -moz-transition-duration:0.5s; -webkit-transition-property:color; -webkit-transition-duration:0.5s; } .current_page_item{ border-bottom-color:#af4932; } Similar TutorialsHi! I'm trying to implement an image drop-down menu. Everything seems to be working but there is an element that is pushing my second image button down and I can't seems to figure where it's coming from. It seems to be my link that is causing it but i'm stumpped. I've set up a test page so you can see what is happening. the site is at test .sylvaindelisle .com Thanks for taking the time to take a look. i am designing a website which requires drop down menus, the problem is that all the drop down menus are appearing at the same position, i want the top down menus to be located under the tab which was clicked. i have provided screenshots as well as some of the code. html code: Code:
<ol id="navMenu">
<li class="first"><a href="welcome.php">Home</a></li>
<li><a href="#" onmouseover="drop_down('sm1')" onmouseout="close_soon('sm1')">Reserve Resource</a></li>
<div id="sm1" onmouseover="cancel_timeout()" onmouseout="close_soon('sm1')">
<a href="#">yghvjhb</a>
<a href="#"> jkhjb</a>
</div>
<li><a href="#" onmouseover="drop_down('sm2')" onmouseout="close_soon('sm2')">Inventory</a></li>
<div id="sm2" onmouseover="cancel_timeout('sm2')" onmouseout="close_soon('sm2')">
<a href="#">Reserve Laptop</a>
<a href="#">Reserve Tables</a>
</div></ol>
css : Code:
#navMenu{
clear: left;
background-color: #DA0000;
padding: 0.5em 3em;
padding-left: 8.5em;
margin: 0em;
}
#navMenu li{
display: inline;
margin: 0 0 0 0;
border-right:medium #FFFFFF ridge;
list-style: none;
font-size: large;
font-weight:bold;
}
#navMenu a{
text-decoration: none;
padding: 0.25em 0.75em 0.25em 0.75em;
color: #FFC1C1;
}
#navMenu li a:hover, #navMenu a:focus{
background-color: #EE3322;
}
#navMenu li.first{
margin-left: 0em;
}
#navMenu li.last{
border-right: 0;
}
#navMenu div{visibility: hidden; display:block; position:absolute; background-color: #EE3322; background-position: inherit; margin-top:0.54em;}
#navMenu div a { position:relative; display:block; width:auto; white-space: nowrap; text-align: left; margin-right:2em; padding: 1em 1em;
}
#navMenu div a:hover{background-color: #EE3322; background: #EE3322;}
Hi, Ive been asked to create a webpage for a website, the page must be 99% identical to the current website but the problem is I had to build the new page from scratch because a problem with joomla. While creating the page I ran into a big problem aligning the menu bar. Right now the menu bar lines up exactly how it should on my desktop, but on my laptop which has a much larger screen the menu bar is slide way over to the left. here's the website Im making a copy for http://www.curacao.vatcar.org/home/ and here's the page I've made so far http://brandynstestserver.zymichost.com/flight/downloads.html I know it still needs alot of tweaking but I just want to solve the menu problem Heres the HTML, please ignore the comments those are just for the current webmaster (who doesn't know much) until they find another one. Also I just noticed a now unneeded <div id="banner"> tag ignore that too. 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>Virtual Curacao FIR Downloads</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<script type="text/javascript">
var timeout = 50;
var closetimer = 0;
var ddmenuitem = 0;
function mopen(id)
{
mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
document.onclick = mclose;
</script>
<body>
<div id="page-background"><img src="images/bg.JPG" width="100%" height="100%" alt="Smile"></div>
<div id="content"><div id="banner"><center><img src="images/banner.png"/></center></div>
<ul id="sddm">
<li><a href="http://www.curacao.vatcar.org" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Home</center></a>
</li>
<li><a href="http://www.vatcar.org/website/index.php?option=com_content&view=article&id=5&Itemid=40" onmouseover="mopen('m2')" onmouseout="mclosetime()"><center>Roster</center></a>
</li>
<li><a href="http://www.vatcar.org/forum/index.php?board=6.0&Itemid=54" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Forum</center></a>
</li>
<li><a href="http://www.curacao.vatcar.org/home/index.php?option=com_jobline&Itemid=61" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Career Opportunities</center></a>
</li>
<li><a href="http://www.curacao.vatcar.org/home/index.php?option=com_content&view=article&id=56&Itemid=66" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Contact Us</center></a>
</li>
<img src="images/menuspacer.jpg" /></ul>
<table width="982" border="0" cellspacing="0" cellpadding="0" background="images/body.jpg" align="center">
<tr>
<td> </td>
<td><h2>Downloads</h2></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<!--Downloads will go under this comment, dont edit anything above this-->
<h2><center>Charts</center></h2><!-- this little piece of code it just a centered heading, hence the <h2> and <center> tags around the words you want to be the heading-->
<!-- use this format to add downloads, type <a href="LINK TO DOWNLOAD HERE">Name of the download</a> and thats it. That code will display text saying what ever you typed in the "Name of the donwload" section and when you click on the words it will download the file that is located in the "LINK TO DOWNLOAD HERE" section. Heres a few working downloads below for you go go off of-->
<center><a href="downloads/charts/TNCA/TNCACharts.zip">TNCA Charts package</a><br /> <!-- The <br /> is just a line break-->
<a href="downloads/charts/TNCB/TNCBCharts.zip">TNCC Charts package</a><br />
<a href="downloads/charts/TNCC/TNCCCharts.zip">TNCB Charts package</a><br /></center>
<h2><center>ATC</center></h2>
<center><a href="downloads/ATC/Training Files.zip">Training package</a><br />
<a href="downloads/ATC/TNCF Control.zip">TNCF Control package</a><br /></center>
<!-- Dont edit anything below this comment-->
</td>
<td> </td>
</tr>
<tr>
<td colspan="3"><img src="images/bottom.jpg"/></td>
</tr>
</table>
</div>
</body>
</html>
Heres the CSS Code:
@charset "utf-8";
/* CSS Document */
html, body {height:100%; margin:0; padding:0; font-family: Arial, sans-serif, Verdana, Helvetica; }
#page-background {position: fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
#sddm
{ margin:0 0 0px .6em;
padding: 0;
z-index: 30
}
#sddm li
{ margin:0 auto;
padding: 0;
text-align: left;
list-style:none;
float: left;
font: bold 15px sans-serif}
#sddm li a
{
display:block;
margin-left: auto;
margin-right: auto;
padding: 8px 5px;
background: url(images/mainmenu.jpg) repeat-x left top;
color: #FFF;
text-decoration: none
}
#sddm li a:hover
{
background: #000;
width:auto;
font-size: 15px;
}
Thank you in advance for the help! I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty. I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line. For the offending code, please see: http://www.forma3.com/stuff/css/top_menu_v1.html http://www.forma3.com/stuff/css/css/right_menu_v1.css Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed. I'm building a site: www.bunjareecottages.com.au At the moment, the middle column (which is the only variable sized bit on the page) is set to a min height of 495px. This works ok on larger resolutions, but creates a scroll even when no content reaches that length on smaller resolutions. That's as expected. What I want to have the middle section having a min height of 110px from the top of the page, and 10px from the bottom. So if the content was very little, the yellow background would still be 10px from the bottom, but if content was really long and there was a scoll, the end of the yellow was 10px from the bottom. Currently the yellow content area is relatively positioned from top by 110px, with margins of the correct sizes on each side. Everything else is absolutely positioned. Any ideas? ok... im making a site with CSS... this is my css code - Quote: a:link {color:white} a:visited {color:white} a:hover {color:black} a:active {color:white} body {background-color: #666666} #head{ position: relative; top: 7px; left: 140px; width: 707px; font-family: verdana; font-size: 12px; color:white; background-color: #666666; background-image: url(wavy.jpg); } #content { position: relative; top: 7px; left: 140px; width: 697px; font-family: verdana; font-size: 12px; text-align: justify; color:white; background-color: #666666; background-image: url(image/back.jpg); padding: 5px; } #foot{ position: relative; left: 140px; width: 707px; font-family: verdana; font-size: 9px; text-align: center; color:white; background-color: 666666; background-image: url(wavy.jpg); } and this is my code for my PHP page, which reads the css - Quote: <html> <head> <link rel="stylesheet" type="text/css" href="fula.css" /> </head> <body> <div id="head"><img src="image/head.jpg"></div> <div id="content"> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div> <br> <div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div> </body> </html> ok... now, if you look at it in firefox... everything aligns just fine but if you look at it in I.E its out of place... any help would b greatly appreciated! to view the page this problems on - http://www.outlawz.frihost.net/fula/test2.php The site is located at: http://68.41.210.39:8081/empcoBeta/index.html Why is it that the site displays fine in safari, netscape, mozilla/firefox etc, but is totally screwed in windowze IE? The css is as follows: #under { width:84%; height:1%; background-color:#1E77D3; position:absolute; top:5%; left:16%; } #mainleft { width:35%; background-color:white; vertical-align:top; position:absolute; top:10%; left:22% } #mainright { width:40%; background-color:white; vertical-align:top; position:absolute; top:10%; right:2% } body { font-family: sans-serif; font-size: 12px; } .indented1 { padding-left: 5pt; padding-right: 5pt; font-size: 12px; font-family: sans-serif; } .indented2 { padding-left: 10pt; padding-right: 5pt; font-size: 12px; font-family: sans-serif; } a:link {color: #17507e; font-size: 2; text-decoration: none; } a:active {color: blue; font-size: 2; text-decoration: none;} a:visited {color: #17507e; font-size: 2; text-decoration: none;} a:hover {color: blue; font-size: 4; font-weight: bold; text-decoration: none;} #column { width:1%; height:81%; background-color:#B4CCEB; position:absolute; top:0%; left:15%; } #leftsidebar1 { width:100%; height:5%; background-color:#B4CCEB; position:absolute; top:0%; left:0%; } #leftbar1 { width:15%; height:40%; background-color:#CEDFFF; position:absolute; top:5%; left:0%; } #leftsidebar2 { width:16%; height:2%; background-color:#B4CCEB; position:absolute; top:40%; left:0%; } #leftbar2 { width:15%; height:40%; background-color:#CEDFFF; position:absolute; top:41%; left:0%; } #leftsidebar3 { width:16%; height:1%; background-color:#B4CCEB; position:absolute; top:81%; left:0%; } #credits { position: absolute; left:1%; bottom:20%; } .tcredits { text-align: left; font-size: 9px; font-family: sans-serif; } I am trying to solve a problem I have had for a very long time. I have ignored it but I just can't do that any longer ... The code works well in FF but not in IE. The problem: I want to display three layers side by side (left to right). The left and right layers show just fine but the middle layer jumps down to just under the higher of the two other layers, effectively making my site not IE friendly. The code (taken from my site): Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Working with divisions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#content
{
margin-left: 205px;
margin-right: 205px;
width: 610px;
margin-top: 0px;
line-height: 150%;
background-color: white;
border: 1px solid red;
}
div#more
{
float: right;
width: 160px;
margin: 0;
padding: 4px 0px 8px 4px;
background-color: red;
color: #fff;
border: 1px solid white;
}
div#container
{
/* background-image: url(../nav_col_base.jpg); */
/* background-repeat: repeat-y; */
background-color: yellow;
border: 1px solid black;
}
div#container2
{
/* background-image: url(../more_col_base.jpg);
background-repeat: repeat-y;
background-position: right; */
border: 1px solid black;
background-color: gray;
}
#verMenu
{
padding-top: 2px;
float: left;
margin-left: 0px;
font: bold 11px Verdana, sans-serif;
width: 195px;
background-color: green;
border: 1px solid white;
}
div#banner
{
color: #fff;
background-color: #333;
border-bottom: 1px solid #000;
}
div#banner h1
{
margin: 0;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}
#cleardiv
{
clear: both;
height: 1em;
}
</style>
</head>
<body>
<div id="banner">
<h1>This is my banner division</h1>
</div>
<div id="container">
<div id="container2">
<div id="vermenu">
This is the VERMENU division. Lets see what happens if I add a whole lot of content to this deivision. I am expecting the content division to drop down and start displaying just as this content ends.
</div>
<div id="more">This is the more division. I also notice that in FF the width for the content division does not overlap over this division while in IE it does.</div>
<div id="content">This is the content division. I cannot figure out why this division drops to just under the larger of the other two divisions. If you add lines to any of the two divisions, this division shifts down ...</div>
<div id="cleardiv"></div>
</div>
</div>
</body>
</html>
I have color coded the layers to simplify identifying the layers and where they show. What am I doing wrong? Thank you all in advance for your assistance. Jose PS: I cannot post a link otherwise, I would have provided you with one for my website. I have put together a page with a left floating text box that text wraps around the top, right and bottom. It was going pretty well, thanks to some help I have already received, but I am having a problem with a bulleted list alignment. Please take a look at the test page below. TEST PAGE The relevant style code follows: Code:
.textboxleft
{
background: #3E5C92;
font: normal 0.8em/140% arial, helvetica, sans-serif;
margin: 10px;
width: 160px;
border: 1px solid #E4E7F5;
float: left;
overflow: hidden;
padding: 0.5em;
}
.textboxleft p
{
color: #000000;
}
ul li
{
color: #E0E0F6;
font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}
Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information. If there is something I can alter in the CSS or HTML to prevent the list bullets from bumping into the text box, please let me know. I am very new at this and have only gotten this far with the help of people like you. Thank you, Grump PS: you will also notice another thread concerning the width of the text box. It does not render at 160px in Firefox, but does in IE. (never mind, i dont need layers anyways) Sorry, pls delete this! http://s125392025.websitehome.co.uk/layout.html I'm working on a CSS layout(mind that this is my first time working with CSS, if something isn't right tell me, because I want to learn it right the first time), it's 2 columns, a main body and a subnav. But I can't get the subnav to align properly with the main body. I'm not too sure how to do this, I've tried it in a X,Y fashion but I'm not sure if I was doing that right. Please help. Edit: Finally Found it, nm. All I'm looking for is something like: <div class="field">Name</div> <div class="result">Jeremy</div> Where the size of the left div is set and the right div can extend to the right of the page, but not drop underneath. I had: .field{ float:left; width:150px; } result{ float:left; } Which works fine until there's a really long name on the right. In cases like this, I still want that div to stay over to the right, but instead it drops down. So I want: Name: .... Here's a really long name. Here's a really long name. .............. Here's a really long name. Here's a really long name. .............. Here's a really long name. But I'm getting: Name: Here's a really long name. Here's a really long name. Here's a really long name. Here's a really long name.Here's a really long name. The right "column" breaks down to the line below. Of course this is easy to solve using tables. Any suggestions for Divs? I have these two blocks that need to be on the same row. As it is now, they are blocked into two seperate rows. What I'm trying to achieve, is to have the logo on the far left, where it is now. But, I'd like to have the Login text to the far right, just before the tiled background (sunflowers). I'm not sure how to fix this problem. Can anyone take a quick look? http://www.marginalspace.com/asif/index.php The image that is set to align right keeps moving down some. Is there anyway to get it to be level with the image that's left aligned without using a negative margin or tables? The problem occurs in Netscape 7 and IE 6. Mysteriously enough it is displayed correctly in Opera 7. Code: #title {
margin-left: 170px;
background: url(./imgs/title_mdl.gif) repeat-x;
width: auto;
height: 40px;
}
#title span {
font-size: large;
text-align: center;
}
#title img {
width: 82px;
height: 40px;
}
Code: <div id="title"><img src="./imgs/title_lft.gif" alt="" align="left"><span>Hello</span><img src="./imgs/title_rgt.gif" alt="" align="right"></div> Hey, I'm working on a site (URL) and I am having some problems. I made a class in CSS: Code:
.middle {
background-attachment: fixed;
background-image: url(images/midtop.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
and am applying that class to the middle table. When I view it in IE, it looks fine, but in mozilla (I'm using firefox) it looks like it is positioning it at 0, 0 of the page, not the table. If I change background-position: 0px 0px; to background-position: 139px 0px; then it looks fine in mozilla, but not IE. Does anyone know how to fix this? (Or why it is happening) Thanks~ Hi Guys, I'm working on a form, and for the life of me, I can't get these divs to sit side by side. You can see the test page at www.details.at/search_test.cfm It's a small form with a few fields and selects I want each element to sit side by side in a single row. Here is the code. I thought display:inline; would do the trick, but it's not working. Code: <style>
#control_panel
{
padding:0 0 1em 2em;
width:600px;
float:left;
}
.smalltext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .7em;
}
.input
{
font: .9em Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #146eb4;
border: 1px solid #146eb4;
}
label
{
text-align: left;
display: block;
}
div.search_cell
{
display: inline;
}
</style>
<div id="control_panel">
<form action="http://test.at" METHOD="post">
<div class="search_cell">
<INPUT class="input" NAME="search_box" value="" size="25" maxlength="200">
<label for="search_box"><span class="smalltext">search</span></label>
</div>
<div class="search_cell">
<select class="input" name="range">
<option value="50">50</option>
<option value="Any">Any</option>
<option value="1" >1</option>
</select>
<label for="search_box"><span class="smalltext">within</span></label>
</div>
<div class="search_cell">
<select class="input" name="range_measure">
<option value="Miles">Miles</option>
<option value="kilometers">Kilometers</option>
</select>
<label for="search_box"><span class="smalltext">range</span></label>
</div>
<div class="search_cell">
<span class="smalltext">of</span>
</div>
<div class="search_cell">
<INPUT class="input" value="" type="Text" name="location" size="10">
<label for="location"><span class="smalltext">city & state or postal</span></label>
</div>
<div class="search_cell">
<INPUT class="input" type="submit" name="Submit" value="Go">
</div>
</form>
</div>
</div>
My page at gvtdev .davebezaire .com/journeys/bolivia08/living-experience .html validates for HTML and CSS and works fine in Firefox 3.6, Chrome 9.0, and IE 8.0. My problem is in IE 7 which I test by using IE 8.0 in Compatibility Mode. In Compatibility Mode, links in the main content, located within a div with id="content", are not clickable. This is because I have a conditional CSS section for [lt IE 8] within the <head> section of the page which includes the rule Code: #content {position:relative;z-index:-1;}
If I turn off that rule (e.g., with FirebugLite), the links are clickable. However, the functionality of the main navigation menu items in the little houses across the top of the page does not work properly. Specifically, with the rule turned off, only the first three items in the dropdown menus (such as that under "Our Journeys") are accessible. If you try to move down over the 4th item, the dropdown closes. The main menu is in a ul with class="mnu hmnu". I've made several attempts to set the parent elements to position:relative and giving them a z-index, all to no avail. I would very much appreciate some assistance. Thanks in advance for your help! Dave Looks fine in Safari and IE, for some reason the last tab drops down in FireFox... I usually figure these things out but I must admit I am stuck on this one, please help www . goldenbroom-janitorial.com/test Here is the HTML Code:
<body><br>
<div id="wrapper">
<div style="text-align:left; width:800px;">
<table border="0" width="800">
<tr>
<td width="800" style="height:300" align="left"><table style="height:300; width:800px; ">
<tr>
<td width="800" height="268" style="background-image:url(images/logo_header.jpg); background-position: top center; background-repeat:no-repeat;">
</td>
</tr>
<tr>
<td width="800" height="300"><table>
</td>
<td width="800" height="300"><table>
<tr>
<td width="800" height="10"><table>
<tr>
<td width="10" height="10"><img src="images/corner1.gif" alt="" border="0" /><br /></td>
<td width="800" height="10" style="background-image:url(images/topline.gif)"></td>
<td width="10" height="10"><img src="images/corner2.gif" alt="" border="0" /><br /></td>
</tr>
</table></td>
</tr><div id="menu">
<ul>
<li><a href="index.html" class="current"><font color="#FBC431">Home</font></a></li>
<li><a href="cleaning_services_dallas.html">Services</a></li>
<li><a href="house_cleaning_employment_dallas.html">Employment</a></li>
<li><a href="cleaning_services_questions_dallas.html">FAQ's</a></li>
<li><a href="cleaning_services_free_estimates_dallas.html">Free Estimates</a></li>
<li><a href="cleaning_services_dallas_contact.html">Contact Us</a></li>
</ul>
</div>
Here is the CSS: Code:
/*--- Menu ---*/
#menu {
height:138px;
width: 800px;
background: #A8A676;
display:inline;
}
#menu ul {
margin: 0px;
padding: 0px;
text-align: center;
}
#menu ul li {
display: inline;
}
#menu img {
display: inline;
}
#menu ul li a{
float:left;
margin-right: 0px;
padding: 25px 0px 0px 0px;
width: 133px;
height: 95px;
font: 14px "tahoma","verdana","impact";
font-weight:bold;
text-align: center top;
text-decoration: none;
color: #1e1717;
background:url(../images/menu_background.gif) no-repeat;
}
#menu ul li a:visited {
color: #1e1717;
}
#menu ul li a:hover, #menu ul li .current {
color: #FBC431;
text-decoration: none;
background: url(../images/menu_hover.gif) no-repeat;
}
/*--- End of Menu ---*/
THE CONTACT TAB IS DROPPING DOWN FOR SOME REASON! Thanks in advance! I was just wondering if anyone knew how to fix the UL and LI hierarchy problem in css with tabmenus. I wanted the border under my featured tab to disappear but it doesnt work well in IE. Please have a look; if you look at this code in Firefox it should show the first tab as being white without the black border on the bottom of it. In IE the black border is there because the UL border overwrote the LI border. Does anyone know a work around? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<style type="text/css">
/* START TAB MENU */
ul
{
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
border-bottom: 1px solid #808080;
height: 21px !important;
height: 20px;
}
li
{
float: left;
margin-right: 10px;
border: 1px solid #808080;
border-bottom: none;
}
li a
{
background-color: #f2f3f5;
color: #808080;
padding: 2px 10px 3px 10px;
display: block;
text-decoration: underline;
font: 12px arial;
}
body .featured
{
background-color: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
text-decoration: none;
font-weight: bold;
}
/* END TAB MENU */
</style>
</head>
<body>
<ul>
<li>
<a href="#" class="featured">Create User</a></li>
<li>
<a href="#">Edit User</a></li>
<li>
<a href="#">View All Users</a></li>
<li>
<a href="#">Reports</a></li>
<li>
<a href="#">Log Out</a>
</li>
</ul>
</body>
</html>
Hi I used an online css menu generator. After tweaking it to my liking, I decided to take a look in IE7, the box that contains the menu is shifted out from the left of the page. It works fine in FF and Opera. Here is the code: Code: <ul class="menu"> <li><a href="#" class="active"><span>Home</span></a></li> <li><a href="#"><span>Trainer</span></a></li> <li><a href="#"><span>Studio</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> CSS Code:
.menu{
padding:0;
width:175px;
list-style:none;
margin-top: 10;
margin-right: 10;
margin-bottom: 10;
background-color: rgb(16,33,72);
background-position: left;
}
}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{
text-align:left;
height:40px;
font:16px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 50px;
}
.menu li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}
I have tried putting it in a frame, another div. Moving it lower down the page. But it still does the same thing. I cant figure out what attribute is causing it. Thanks for looking |
|||||||