|
CSS - Bizarre Right Hand Menu Cut Off, Appears On Left Side
I also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this?
A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on. image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image. I really appreciate your help. The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that. #nav, #nav ul { padding: 0; margin: 0; list-style: none; float:left; width:89.091em; list-style:none; line-height:1; background:#b6791e; font:11px Verdana, sans-serif; font-weight:bold; padding:0; margin:0 0 .5em 0; } #nav a { display: block; width: 11.1em; w\idth: 10.1em; color: #FFFFFF; text-decoration: none; padding: 0.75em 0.5em; } #nav a.daddy { } #nav li { float: left; padding: 0; width: 11.1em; position:relative; } #nav li ul { position: absolute; left: -999em; height:auto; width: 14.7em; w\idth: 14.5em; font-weight: bold; margin: 0; padding:0; background:#FFFFFF; color:#769841; border: 0.1em solid #769841; } #nav li ul a:hover{ color:#ffff30; background:#769841; } #nav li ul li a{ color:#769841; } #nav li li { padding-right: 1em; width: 14.5em; w\idth:13.5em; } #nav li:hover ul { left: auto; } #nav li a:hover, nav li.sfhover a:hover{ color:#FFFF30; } #nav li ul li a:hover { color:#FFFF30; } #nav li:hover ul, #nav li.sfhover ul { left: auto; clear:both; } #nav li ul ul { margin: -3.3em 0 0 5em; } #nav li:hover, #nav li.sfhover { background: #769841; } #nav li a:hover, #nav li.sfhover a:hover{ color: #ffff30; } #nav li ul a{ color:#769841; padding:.4em; } Similar TutorialsHi. I just have a simple question. I would like to design a web page that has a menu bar at top, a left side bar, and probably a news wire type bar on the right. Something similar to the way the main Dev Shed page is set up. I'm not asking for anyone to explain to me how to do this, I just don't know what I need to look into to do this. Is CSS what I'm looking for? Or is it something else? I've just started to learn PHP and that's the language I'm programming in, so is there some useful way to do this in PHP? Also, any tips about news wires? Thanks in advance for pointing me in the right direction. I have been trying to write a horizontal CSS nav menu for my website thinkmarriage.org/catalog/ based on some code I found. The menu seems to work great, except: 1. it is adding what looks like 30ish pixels of padding on the left side of the menu. I have tested in FF, IE, and Safari, all do the same thing. The code is CSS 2.1 validated. The link to my sample is: thinkmarriage.org/menu2.html 2. When I add the menu into my actual store, in FF it works, but IE turns the horizontal nav into vertical drop boxes. I was pretty sure the style sheets were conflicting with one another, but now the bar is working in FF, and I can't seem to find any problems. The two style sheets are : #1 (for the menu) : thinkmarriage.org/catalog/menustyle.css and #2 (for the site) : thinkmarriage.org/catalog/stylesheet.css The link to the site is above. If anyone has any thoughts as to where the extra padding is coming from or the conflict with the sheets in IE, I would greatly appreciate it. (Sorry, the rules won't permit me to place hyperlinks) Hi all i am making a site for some family friends they want it to be 1024 i think i have set up the dimensions correctly but i cant find where the extra bar on the side is coming from, I am only a beginner that knows some basics. any help would be appreciated. any ideas? redochreworkshop.com.au css, there is probably alot of redundant code because i used a template Code: body {
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background-color: #211d1e;
background-image: url(images/Background2.gif);
background-repeat: no-repeat;
position: relative;
display: inline-block;
margin-left: 0px;
margin-right: 0px;
background-position: centre centre;
margin-top: 0px;
}
#wrap {
background: #FFFFFF;
color: #ffffff;
border: solid black 2px;
width: 700px;
height: 1100px;
margin-left: 162px;
margin-right: auto;
position: centre centre;
display: inline-block;
}
#header {
clear: both;
margin: 0px 0em 0px 0em;
padding: 0;
height: 0px;
background-color: #FFF;
}
#header h3 {
width: 350px;
margin: 0px 0px 0px 15px;
float: left;
height: 275px;
}
#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0px 0px 0px 0px;
font-size: 0.8em;
line-height: 1.2em;
height: 35px;}
#avmenu {
clear: left;
float: none;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#avmenu ul {
list-style: none;
width: 150px;
margin: 0 0 0 0;
padding: 0;
font-size: 2em;
}
#avmenu li {
margin-bottom: 4px;
}
#avmenu li a {
font-weight: bold;
height: 40px;
text-decoration: none;
color: #fffff1;
display: block;
background: #67522c;
border-left: 1px #846837 solid;
}
#avmenu li a:hover {
background: #67522c;
color: #fffff1;
font-family: Chiller;
}
.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #a8a8a8;
background-color: #FFFFFF;
line-height: 1.3em;
}
#extras {
float: right;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
height: 400px;
}
#extras p {
margin: 0 0 1.5em 0;
}
#content {
padding: 0 10px 0 10px;
line-height: 1em;
text-align: left;
margin: 0px 160px 20px 160px;
}
#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}
#content img {
padding: 0px;
display:inline;
}
h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}
a {
text-decoration: none;
color: #b6952a;
}
a:hover {
text-decoration: underline;
color: #b6952a;
}
#footer {
clear: both;
margin: 0 auto;
padding: 40px 0em 0px 0em;
width: 700px;
text-align: center;
color: #808080;
font-size: 0.9em;
height: 20px;
border: none;
}
#footer a {
color: #808080;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
.left {
margin: 0px 7px 0px 5px;
float: left;
}
.right {
margin: 0px 7px 0px 5px;
float: right;
}
.textright {
text-align: right;
}
.center {
text-align: center;
}
.small {
font-size: 0.8em;
}
.bold {
font-weight: bold;
}
.hide {
display: none;
}
Hello All, I'm not too savvy with CSS, so please pardon if this seems uber easy. I have started to use Google AdSense on my web pages ( I wish I could show you an example on my website, but I am not allowed to post a URL on the forum), In Firefox, it shows the main content on the left hand side and the Ads on the right hand side in a columnar format, however, there is no word wrapping going on. In Internet Explorer, the AdSense shows at the top right and then below that my content starts. Here is what I have in my HTML in a single TD Cell: [div class="google120rightbanner"] [script type="text/javascript"][!-- google_ad_client = "myAdSenseID"; google_alternate_ad_url = "(Alternate Adsense URL)"; google_ad_width = 120; google_ad_height = 240; google_ad_format = "120x240_as"; google_ad_type = "text"; google_ad_channel = ""; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "0000FF"; google_color_text = "000000"; google_color_url = "008000"; //--] [/script] [script type="text/javascript" src="(Javascript URL Location)"] [/script] [/div] [!-- Show my main content --] [div id="ContentPane" runat="server" style="padding-left:2px;"][/div] [!-- End my main content --] [div class="clear"][/div] This is what I have in my CSS: .google120rightbanner [ width: 122px; margin: 15px 10px 5px 10px; float: right; /*allows main content to wrap around the google ad */ /*note: after this we need to use the clear class to clear the float at end of container */ ] .clear [ clear: both; ] NOTE: I have changed the brackets so I can display this message on the forums. Does anyone have any idea what I am doing wrong here in getting the display I want using this CSS? Again, I'm not very savvy about this, so a good explanation would be helpful. Thank you all very much! Mark Gordon I've a menu bar that's a horizontally displayed list (i.e. set up with the following values: ul{ margin-top:5px; margin-bottom:5px; margin-left:0px; } li.inline { display:inline; padding-left:5px; padding-right:5px; border-left:1px solid #fff; } Contained in the following code: <div id="mainNav"> <UL> <li class="first"><a href="../about/index.html">About</a></li> <li class="inline"><a href="../contact/index.html">Contact</a></li> <li class="inline"><a href="../services/index.html">Services</a></li> <li class="inline"><a href="index.html">Portfolio</a></li> </UL> On IE 6.0 it does as required and there is no padding between the first element (About) and the left hand side of the page. BUT, on Firefox, about 5 characters worth of padding is between the left hand of the page and the first element. Is there a way to get both Firefox and IE to have no padding? Thanks </div> Hey Guys, I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated. Here is my CSS Code: ul#nav { height: 91px; width: 271px; margin:30 auto; background: url(images/logo.jpg) no-repeat; } This problem just started happening, but frustratingly I can't remember what I was changing when it started happening. The problem is that (almost) all the images on the site seem to be "bumped" 1px out of place, with a black border showing on the top and left hand sides of the images. This is not showing up with ALL images, however. I've embedded an image and you can see the effect on the logo, on the graphics in the body text, and on the sub-menu items (with the 'empty' box icons). However the effect does not occur on the menu items with the 'full' box icons. OK, apparently, I CAN'T EMBED AN IMAGE. Or a link to an image. Or a link to the site in question. SO I have no idea how I am actually supposed to get help for this problem. If someone can PSYCHICALLY DEDUCE what the problem might be without being able to view the site or an image of the problem, that'd be ACE! GAAAAH Alright, let's see if we can do this with JUST the CSS & HTML. Here is the CSS: Code:
html {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
}
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
background-image:url('background-index.gif');
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
min-width: 900px;
min-height: 100%;
}
img {
border:0;
}
a:link {
text-decoration: none;
color: #0096db;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #00abc7;
text-decoration: none;
}
#header {
width:900px;
height:80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0096db;
}
#logo {
float:left;
width:140px;
margin:0;
padding:0;
}
#head_nav {
width:760px;
position:relative;
float: right;
background-color: #ebf9ff;
height: 80px;
margin:0;
padding:0;
}
#clear_both {
clear:both;
}
#sidenav {
float:left;
width:100px;
padding-left:10px;
padding-top:0;
margin-top:0;
}
#content_wrap {
float:right;
width:760px;
background-color: #ebf9ff;
background-image:url('content-background.gif');
}
#content {
float:left;
width:500px;
}
#content h1, h2, h3, ul {
padding-top: 15px;
padding-left: 15px;
}
#content p {
padding-left: 15px;
}
#focus_box {
width:260px;
float: right;
margin-top:0;
padding-top:0;
}
#focus_box h1 {
padding-top:15px;
}
#focus_box p, h1, ul {
padding-left:15px;
}
table.blue_highlight {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#0096db;
margin-left:15px;
margin-right:15px;
padding-top:15px;
padding:0;
margin:0;
}
#menu2 {
float: left;
width: 200px;
}
#main {
float: right;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666666;
}
ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666666;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 700;
color: #0096db;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color:#666666;
font-weight: bold;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: ;
}
/*!!!!!!!!!!! MENU STYLES FOR LEVEL1MENU !!!!!!!!!!!*/
#level1menu {
position:absolute;
bottom:0px;
padding-left:60px;
}
#sitemap li {
margin-left: 15px;
}
#sitemap ul {
margin-bottom:15px;
}
#sitemap ul li ul {
margin-left:15px;
}
And here is the HTML: Code:
<%@ LANGUAGE="VBSCRIPT" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>BB Group Homes</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">@import "style.css";</style>
</head>
<body class="developments">
<div id="header">
<div id="logo">
<!--#INCLUDE FILE="logo.asp" -->
</div>
<!--END LOGO-->
<div id="head_nav">
<!-- #INCLUDE FILE="menutop.asp" -->
<!-- END MENU_TOP -->
<div id="level1menu">
<!-- #INCLUDE FILE="level1menu.asp" -->
</div>
<!--END level1menu-->
</div>
<!--END HEADER -->
<div id="clear_both"></div>
<div id="sidenav">
<!-- #INCLUDE FILE="menu_developments.asp" -->
</div>
<div id="content_wrap">
<img src="banner_developments1.png">
<div id="focus_box">
<!-- #INCLUDE FILE="focus_boxes.asp" -->
</div>
<div id="content">
<h1>Developments</h1>
<table class="blue_highlight">
<tr>
<td><a href="golfsociety.asp"><img src="Golf_society_residence_logo.gif"></a></td>
<td><h2>Golf Society Residence</h2>
<p>The Golf society project was initiated for a variety of reasons, some of which include the scenic environmental landscape, increasing trend of Bodrum as a holiday destination for tourists and natives, the beach and the close proximity to the airport.</p>
<p><a href="golfsociety.asp">-> More</a></p></td>
</tr>
</table>
<table class="blue_highlight">
<tr>
<td><a href="thevillage.asp"><img src="thevillagelogo.gif"></a></td>
<td><h2>The Village Bodrum - Tuzla</h2>
<p>You will find everything you have dreamed of at Vita Park Golf Resort, a world-c1*** destination in the heart of the peninsula Bodrum, the famed pearl of the Aegean Sea. </p>
<p><a href="thevillage.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
<td><a href="bluemarina.asp"><img src="bluemarinalogo.gif"></a></td>
<td><h2>Blue Marina Bodrum - Yalikavak</h2>
<p>Blue Marina Apartments, overlooking the spectacular view of Yalıkavak amongst the centeranian olive trees, designed for all year long living, your comfort and every desire is planned to the finest detail.
</p>
<p><a href="bluemarina.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
<td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
<td><h2>Blue Life Bodrum -Yalikavak</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
<td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
<td><h2>Kalkan Luxus Villas</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<p></p>
</div>
</div>
</body>
</html>
</body>
</html>
A lot of the images that are showing the 1px-off problem are contained in the SSIs (I don't think anyone here wants me to post the full content of the SSIs, do they?) but quite a few of the images in the main HTML are, as well: banner_developments1.png & all the logos. This would be a lot easier if I could show you a picture of what was going on. Hi! I just floated left my navigation menu, and it caused my page title and breadcrumbs to move over to the immediate right of that (because it is also floated left)... Wondering if anyone could tell me the proper way of getting it back to the left side as it was before. Thanks. Drew EDIT: Here's the link, whoops! http://drewclifton.com/healthwise/?page_id=1667 I'm working on a really simple theme. You can see the progress here. this is a table-less theme. trouble that I'm having is that I cannot get the content to center. It is all floated left. Now, I'm intentionally floating the left column to the left, but that's the only thing (and changing that didn't fix the problem either). So I'm hoping one of you css gurus will have some suggestions. (link to style.css file) Thanks in Advance! http://www.ilumos.co.uk/site/ http://www.ilumos.co.uk/site/style/styleDefault.css As you can see on the left there is a "glowing" blue-white fadey thing going on on the left of the page, but it stops after the header (#header) for no apparent reason. The page renders fine in IE, but in Firefox or any other standards obeying browser it stops there. the CSS for the page border on the left is as follows: #wrap { background: url("../images/ilumosPageFadeLeft.jpg") repeat-y; padding-left: 25px; width: 750px; } (the wrap div contains all of the page's content) How can I make the image extend to the bottom of the page? Thanks Any ideas that would help me out... http://www.countrystampinangel.com/ The Sub Menu is on the Products button http://www.countrystampinangel.com/angel.css I'm helping these fine folks fix a few little issues with their site but this one I can't seem to quite figure out. If you roll over the main menu you will see the sub menu slide down on the left. For the life of me I can't get it to line up under the main nav. I've tried many, many things. Can anyone provide a few hints, tips, suggestions? Thanks so much!!! 98.214.188.71/life at excel.htm Code: /*******************menu starts********************/ #menu{float:left; width:100%; background:#ffffff;} #menu a{font-weight:bold; line-height:16px;} #menu table{float:left; width:100%; background:transparent;} #menu .menu01{width:147px;} #menu .menu01 a{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; float:left; color:#fff; text-decoration:none; text-align:center; padding:10px 0 0 0} #menu .menu01 a.current{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; cursor:pointer;} #menu .divider{width:.5%; height:36px; background:url(images/white_divider.gif) repeat-x 0 1px;} #menu .menu02{} #menu .menu02 a{display:block; background:url(images/menu02.gif) repeat-x right 0; padding:10px 0 0; height:26px; color:#fff; text-decoration:none; text-align:center} #menu .menu02 a.current{float:left; width:100%; background:url(images/menu02.gif) no-repeat right bottom; color:#fff; cursor:pointer;} #menu .menu03{} #menu .menu03 a{display:block; background:url(images/menu03.gif) repeat-x right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu03 a.current{float:left; width:100%; background:url(images/menu03.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu04{width:152px; } #menu .menu04 a{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu04 a.current{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu05{width:143px;} #menu .menu05 a{float:left; /*width:143px;*/ width:100%;background:url(images/menu05.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu05 a.current{float:left; /*width:143px;*/width:100%; background:url(images/menu05.gif) no-repeat right -43px; height:26px; color:#fff; cursor:pointer;} .exp{ display:none; clear:both; text-align:center; background:#BA8747; z-index:4; } #menu DIV.sub-mlinks A { color:#000; background:none; font-weight:bold; padding-top:2px; padding-bottom:0px; display:block; height:auto; } #menu DIV.sub-mlinks A:hover{ color:#FFF; } /*******************menu ends********************/ <div id="menu"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="970"><tbody><tr> <td style="width: 19.6%;" id="item1" class="menu01"><a href="http://www.excelfoundry.net/lifeatexcel/">Home</a></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item2" class="menu02" onmouseover="expand(this.id, 'menu2');" onmouseout="collapse(this.id, 'menu2');" onmouseleave="collapseIE(this.id, 'menu2');"><a href="http://www.excelfoundry.net/lifeatexcel/">Excel Tools</a><div id="menu2" class="exp" onmouseout="collapse('item2', this.id);" onmouseleave="collapseIE('item2', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/improvement" target="_new" class="menuitem">Continual Improvement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/service" target="_new" class="menuitem">Crusher Service (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xlu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/crm/data" target="_new" class="menuitem">Excelerator CRM</a></div><div class="sub-mlinks"><a href="http://ezlmwc.adp.com/" target="_new" class="menuitem">EZLabor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/First%20Article/First%20Article%20Parts.xls" class="menuitem">First Article Parts</a></div><div class="sub-mlinks"><a href="https://login.postini.com/exec/login" class="menuitem">FLS Spam Filter Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/ecr/" target="_new" class="menuitem">FLSP ECR</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/forms" class="menuitem">Forms Library</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/iso9001" class="menuitem">ISO 9001 Procedures</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/helpdesk" target="_new" class="menuitem">IT Help Desk</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/machine-info" class="menuitem">Machine Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/Manu_Memos/Memos.html" target="_new" class="menuitem">Manufacturing Memos</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/metrics" class="menuitem">Metrics</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/msq" target="_new" class="menuitem">MSQ Editor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/manuals" class="menuitem">Parts Manuals</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/parts" target="_new" class="menuitem">Parts Search</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/po" target="_new" class="menuitem">PO Tool</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/flows" class="menuitem">Process Flows</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/revSupport" target="_new" class="menuitem">Revision Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/routing" class="menuitem">Routing Guide</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/safety" class="menuitem">Safety & Training</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/QRM%20Schedule.xlsx" class="menuitem">QRM Schedule</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" class="menuitem">Training Request System</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=excet5jvd2telbgk" target="_new" class="menuitem">Travel Expense (EFM)</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=smid5gr1t0br0czj" target="_new" class="menuitem">Travel Expense (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xcalibur" target="_new" class="menuitem">Xcalibur</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item3" class="menu03" onmouseover="expand(this.id, 'menu3');" onmouseout="collapse(this.id, 'menu3');" onmouseleave="collapseIE(this.id, 'menu3');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our People</a><div style="top: 168px; left: 376px; width: 183px; position: static; visibility: hidden; display: none;" id="menu3" class="exp" onmouseout="collapse('item3', this.id);" onmouseleave="collapseIE('item3', this.id);"><div class="sub-mlinks"><a href="https://login.fidelity.com/ftgw/pages/fesco/html/NBParticipantLogout.html" target="_new" class="menuitem">401k Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/classifieds" class="menuitem">Classifieds</a></div><div class="sub-mlinks"><a href="http://excelfoundry.net/lifeatexcel/?q=our-people/hr/directory" class="menuitem">Employee Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/eu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/insite" class="menuitem">FLSmidth Insite</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.com/about-excel/company-history" class="menuitem">History of Excel</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/dates" class="menuitem">Important Dates</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/jobs" class="menuitem">Job Openings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/mlb" class="menuitem">MLB Standings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/phone" class="menuitem">Phone Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/380" class="menuitem">Quality and Mission Statement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/EFM%20HR%20XLU%20Servant%20Leadership%20Academy.pdf" class="menuitem">Servant Leadership Academy Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" target="_new" class="menuitem">Training Request System</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item4" class="menu04" onmouseover="expand(this.id, 'menu4');" onmouseout="collapse(this.id, 'menu4');" onmouseleave="collapseIE(this.id, 'menu4');"><a href="http://www.excelfoundry.net/lifeatexcel/">Departments</a><div id="menu4" class="exp" onmouseout="collapse('item4', this.id);" onmouseleave="collapseIE('item4', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/accounting" class="menuitem">Accounting & Administration</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/support" class="menuitem">Customer Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/engineering" class="menuitem">Design Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/foundry" class="menuitem">Foundry</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/it" class="menuitem">IT</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/machine" class="menuitem">Machine Shops</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/maintenance" class="menuitem">Maintenance</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/mktg_wo" class="menuitem">Marketing</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/materials" class="menuitem">Materials</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/193" class="menuitem">Manufacturing Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/192" class="menuitem">Production Control</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/quality" class="menuitem">Quality Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/187" class="menuitem">Sales</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/toolcrib" class="menuitem">Tool Crib</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/warehouse" class="menuitem">Warehouse</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item5" class="menu05" onmouseover="expand(this.id, 'menu5');" onmouseout="collapse(this.id, 'menu5');" onmouseleave="collapseIE(this.id, 'menu5');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our Customers</a><div style="top: 168px; left: 752px; width: 183px; position: static; visibility: hidden; display: none;" id="menu5" class="exp" onmouseout="collapse('item5', this.id);" onmouseleave="collapseIE('item5', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/highlights" class="menuitem">Customer Highlights</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/equipment" class="menuitem">Equipment Profiles</a></div></div></td> </tr></tbody></table> </div>
Hello, I'm having some problems with with the menu and CSS. I'm trying to retouch some aspects of my website, and the last think I need to do now is the menu. Right now, here is how it looks like: www.lightblu.com You see the menu on the very top, then the logo below it, and then the banner below the logo. My users were "annoyed" by the amount of empty space between the top menu and the banner. Having thought of many possibilities, I encountered a template over at TemplateMonster, which is the exact menu I need. The reason I did not purchase it is that usually TM uses tables rather than pure CSS. And here is the menu I'm talking about: http://www.templatemonster.com/website-templates/18925.html You see the menu? And that's the exact same menu-concept that I'd like to have. Of course the background will be Black just as my website, rather than the greyish one you see at TM. Now here is the problem I'm having. When I'm trying to align the logo with the menu, it just doesn't happen. I have the logo the on top left, which is fine, but then the menu appears below the logo on the right side. And I just cannot figure this thing out. Grrrr.. What am I doing wrong? Thanks a ton guys! Ok, I have a website that i'm building with about 25 pages, and I keep on having to change the side navigation bar, and then I have to copy and paste it on each page to update it. IS THERE A WAY FOR ME TO ONLY UPDATE IT ONCE AND IT UPDATES TO ALL THE PAGES? Is the answer css? or i-frames(or whatever it's called) If so, then how would I do this?! PLEASE HELP! So I have this code... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin:0 1em;
padding:0;
width:775px;
}
#header {
background:blue;
margin-bottom:1em;
padding:1em;
}
#header h1, #header p {
margin:0;
padding:0;
color:white;
}
#menu {
width:150px;
z-index:50;
}
#menu ul {
list-style-type:none;
margin:0;
padding:0;
text-align:center;
border-top:solid thin orange;
}
#menu li {
border-bottom:solid thin orange;
}
#menu a {
padding:.5em 0;
text-decoration:none;
display:block;
background:white;
color:black;
}
#menu a:hover {
font-weight:bold;
background:blue;
}
#pagebody {
margin-left:175px;
margin-top:-450px;
}
#pagebody h2 {
margin:0;
}
</style>
</head>
<body>
<div id="header">
<h1>Test Page</h1>
<p>Tagline goes here!</p>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Employees</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Legal</a></li>
<li><a href="#">Request Information</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Make a payment</a></li>
</ul>
</div>
<div id="pagebody">
<h2>Page Header and other information</h2>
</div>
</body>
</html>
As you can see I am using a left margin and a negative top margin to position the page body next to the menu. This is the first time I've done it this way. In the past I've used floats (either floating the content, and putting a margin on the menu, or floating the menu and putting a maring on the content.) This method does not work in IE7 as the menu's links are not selectable. That doesn't necessarily mean this is the wrong way to do it... but, I was looking for opinions and suggestions as to what's the "right" way to accomplish this so that development and maintenance is easy... the content and menus are self contained (i.e. they don't or at least only minimally affect each other)... and it works cross browser. Thanks Bryan Hi I want to create a text rollover menu on the very left hand side only (standard display). I want it in a table so I can have content on right hand side. I don't know whether to have each link in its own cell or 1 big cell and have a list of items. I decided to have a list of items but the items display on right side of the table cell and align left doesn't work. Code:
a {
display: block;
width:100px;
text-decoration: none;
}
#list1 { /* all list items */
background: lightblue;
border-width:1px; /* thin is not the same in different browsers */
border-color:black;
border-style:solid; /* required */
list-style-type:none;
}
I just want the list to display on left hand side and have a box around each item which it isn't. I am spending way too long fiddling about with this . I am trying to space out my menu from the primary container. right now its completely on the left i am want to give it a 4 pixel space but I am relevantly new to css/html cant figure it out. This is what i have for the menu. Code: .twoColHybLtHdr #sidebar1
{ float: left ;
width: 12em;
background: #000000;
padding: 15px 0;
border: 1px solid #ffffff; }
Thanks In Advance Hi everyone, I just have this pain with aligning the whole red thing to left of the page browser (cause it just keeps hanging on the center) - you can check my homepage below - you will see the problem - what should I do to move the whole thing to left? Thank you in advance. The URL: http://www.dudley.nhs.uk/ The problem.... in IE7, the left menu is shifted to the right. If you refresh the page, the issue is resolved.... until you go onto one of the links again! I've split the CSS up into many files (tables, colours, fonts, left list, right list etc etc) One of my colour CSS files contains the code for the colouring of the lists. Within this, I have found: PHP Code: ul#navlist li a:hover, ul#navlistRight li a:hover { border-color: #ff0; background: #9cf; color:#000; } which seems to be causing the problem. Taking it out seems to works fine BUT I do lose the colour change. I've attached the 2 stylesheets that I use for the menu on the left. Please help! I'm having a few problems with my CSS design which I can't seem to solve right now, despite lots of searching and code editing. I'm trying to do a simple design with two columns - a left menu and the main content on the right. It should be a simple page I think. It's probably easier to see an example of the page I'm talking about: http://edwin.netbits.co.uk/devshed/...blem/index.html In Firefox, it looks fine. But in IE 6 the line "Some text" is slightly more to the right than the line "and some more text". If you select the text on the right, it's slightly more obvious (see screenshot). It seems that the menu on the left is somehow shifting the text over. I have looked at tutorials (such as this one), but the test page I put together has the same problem. I think this is probably a simple problem, but I can't work out what's wrong. The HTML and CSS code is shown below. HTML: Code: <div id="contentscontainer">
<div id="left">
Menu
</div>
<div id="contents">
Some text<br /><br />and some more text
</div>
</div>
CSS: Code: div#contentscontainer
{
padding: 0px;
margin: 0px;
}
div#left
{
float: left;
width: 50px;
padding: 0px;
margin: 0px;
}
div#contents
{
padding: 0px;
margin-left: 170px;
}
Thanks, Edwin |
|||||||