|
CSS - Menu Space Problems
Hello, if you go to: http://tombraiders.net/katie/Site/index.html
you'll see that the items in the menu aren't spaced evenly. I've tried to put some padding underneath but it doesn't appear to be working. I would like it if they were all evenly spaced, because some of the text (where there's two lines of text) is quite cramped. The CSS file can be found here Thanks! Similar TutorialsHi Folks, I'm having problems with some of the divs on my site. Here is the site with the problem areas colorized to highlight the issue... example I have 3 columns, but the problem arises in the area marked "panel2". I want the div containing this text to stretch to fill the remaining available space so that the border-left attribute reaches the footer, encapsulating the text in the middle column. I can't use the border-right attribute of the middle column because of the small indent between panels 1 and 2. I've scoured forums and googled till my fingers hurt, but can't seem to come up with a satisfactory explanation as to why I can't do this. the CSS is he styles.css Any help/suggestions or comments would be appreciated more than I can describe!! Thanks in advance!! Hi, I dont have much hair left as I've been trying to sort this problem with no success for some time. I feel it shold be quite straight forward but I'm pretty new to css. The page can be seen at - http://www.clivesefton.co.uk/temporary-files/index7a.html It's utilising external css and js files - http://www.clivesefton.co.uk/temporary-files/css/navlist7a.css http://www.clivesefton.co.uk/temporary-files/drop_down.js This appears fine in IE6, Mozilla, Opera but the drop-downs have white space and are strangely spaced in IE5. Any help would be appreciated, thank you. Hi Everyone, I'm new to the forum and somewhat new to CSS. I am developing a simple webpage that has a horizontal unordered list serving as a navigation bar. Firefox adds what looks like about 20px of extra space above and below the entire list while internet explorer shows it aligned top left. Eventually I would like to center the unordered list top and bottom, but I can't seem to get any alignment formatting to work at all. Here is the problem code: Code: <div id="navbox">
<ul id="navbar">
<li><a href="index.html">HOME</a></li>
<li><a href="http://showrooms.canadatrader.com/7010/7622">INVENTORY</a></li>
<li><a href="formapp.html">APPLY NOW</a></li>
<li><a href="mailto:rjtria@gmail.com">EMAIL ME</a></li>
</ul>
</div>
And the corresponding CSS: Code: #navbox {
background-color: #B1C5D0;
height: 50px;
width: 760px;
overflow: visible;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
color: #036;
font-weight: bold;
font-size: 130%;
font-family: "Courier New", Courier, monospace;
line-height: normal;
}
#navbar li {
display: inline;
list-style-type: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
padding-right: 10px;
padding-left: 10px;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
I know it's not much.. but it's making me crazy. I have tried zeroing out all padding / margins to no avail... Any help would be greatly appreciated!! Thanks in advance! Celeste I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
I'm using a menu from CSSPlay, and I have it working. http://www.wattersisere.co.uk/devshed It also works for browsers with 800x600 screens. However, as you can see the menu items on the top bar are close together (2 * 11px). I am wanting to increase the spacing between them depending on the browser size. Maybe a % would be appropriate, any other ideas would be super. Alternatively, I could increase the spacing between them to an aesthetically pleasing size and then force the smaller browsers to have a horizontal scrollbar. What would I have to make this work, or would you not recommend it? Thanks, Watters Hi, Can somebody tell me why the menu on the url below needs so much space between menu items? (between the home, browses, forms, pages). Maybe a margin / padding problem, but I cannot seem to find it. The URL: http://www.genwise.com/temp/ordersbrowse.aspx.htm Thank you! -- Fizgig2 Hi, I have the following code and under the main menu, it's a space as you can see under Contact for example for the entire menu. If I want to move down the menu with margin-top, the bottom will exceed the bottom of logo.png image. How do I insert an image here ? http :// imageshack.us/photo/my-images/600/44485569.jpg/ this is css code body { margin: 0; padding: 0; border: solid 1px black; } #nav { position: relative; margin: 0px auto; width: 960px; padding: 10px 0px 10px 0px; border: solid 1px red; } ul { list-style-type: none; margin: 0; padding: 0; font-family: Georgia; font-size: 21px; } ul a { text-decoration: none; padding-left: 25px; padding-right: 25px; display: block; color: #843bbb; } ul a:hover { color: #bd66ff; } ul a:visited { color: orange; } li { float: left; } How can I achieve same positioning with logo on left side, menu on right side, and I want somehing like an add in the middle using float and divs and not a table ? Thanks. I am working on a web page, and am all but done, but I am having one final problem with it. The css drop down menu works fine except for one issue... when you scroll down on one of the pages, and then go to the css menu bar a gap appears between the menu bar and the sub menu options that drop down. How can I get this menu to always drop down DIRECTLY below the main menu bar without the gap? ___________ Here is the SpryMenuBarHorizontal css _____________ @charset "UTF-8"; /* SpryMenuBarHorizontal css - Revision: Spry Preview Release 1.4 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: auto; padding-left: 0px; padding-right: 0px; position: relative; background-image: xxx; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 16px; position: relative; text-align: center; cursor: pointer; width: ; float: left; background-image: xxx; padding-left: 0px; padding-right: 0px; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 8em; position: fixed; left: -1000em; background-image: xxx; padding-left: 0px; padding-right: 0px; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: 9.2em; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { border: 0px solid #000000; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; color: #2C2A2B; text-decoration: none; padding-left: 24px; padding-right: 24px; padding-top: .5em; padding-bottom: .5em; background-repeat: repeat; background-image: xxx; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { color: #FFF; display: block; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { color: #FFF; display: block; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: XXX; background-repeat: repeat; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image: XXX; background-repeat: repeat-x; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image: xxx; background-repeat: no-repeat; background-position: 95% 50%; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarHorizontal iframe { position: absolute; z-index: 1010; } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { ul.MenuBarHorizontal li.MenuBarItemIE { display: inline; f\loat: left; background: #FFF; } Thank you so much for your help, I have a deadline that is coming up very quick... I'd appreciate any help I could get. _______________ my css is sloppy , but at this point with the deadline approaching, I really just need to get this to work properly, and I have a feeling its as simple as a few lines of code changed.... Hey everyone, I am just touching up an old design I made, and I just noticed that Firefox has a weird white-space next to the top menu. Not sure what is causing it, but it is there. Here is a screenshot of what is happening in Firefox. Also, in IE, the container doesn't extend past the bottom menu. Here is a screenshot of what is happening in IE. So far I am just testing in Firefox 2.0.0.11 and IE7. Here is my code: html4strict Code: Original - html4strict 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css">/* <![CDATA[ */ * { padding: 0; margin: 0; } body { background-color: #6AB2DA; color: #000000; text-align: center; font-size: 13px; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */ } a { color: #6AB2DA; } a:focus { outline: 0 none; } #container { margin: 0 auto; text-align: justify; width: 50%; } #page { background-color: #FFFFFF; } #header { background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg ); background-position: bottom left; height: 120px; width: 100%; } #header span { padding-left: 150px; padding-top: 50px; font-size: 21px; font-weight: bold; letter-spacing: -0.1em; color: #666666; display: block; } #menu { background-color: #6DC3DE; width: 100%; } #menu li { float: left; padding-top: 10px; padding-bottom: 11px; list-style-type: none; } #menu a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; } #news { clear: both; margin-top: 34px; overflow: auto; padding: 15px; height: 100px; border-bottom: 1px solid #0AA; } #news h1 { color: #6DC3DE; font-size: 21px; } #content { margin-top: 15px; padding: 15px; } #content h2 { padding-top: 10px; float: left; color: #6DC3DE; padding-right: 25px; font-size: 31px; border-right: 3px solid #6DC3DE; } #content .info { padding-top: 10px; padding-left: 25px; float: left; font-size: 11px; height: 31px; } #content p { text-indent: 45px; clear: both; border-bottom: 1px dotted #6DC3DE; padding-top: 10px; padding-bottom: 10px; } #bottom { border-top: 1px solid #6DC3DE; margin-top: 10px; padding: 5px; } #bottom ul#one { float: left; } #bottom ul#two { float: right; } #bottom li { padding-top: 10px; padding-bottom: 11px; list-style-type: none; display: block; } #bottom a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; display: block; width: 250px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ]]> */ </style> </head> <body> <div id="container"> <div id="page"> <div id="header"><span>i.love.summer</span></div> <div id="menu"> <ul> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> </ul> </div> <div id="news"> <h1>welcome</h1> Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. </div> <div id="content"> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> </div> <div id="bottom"> <ul id="one"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> <ul id="two"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Any suggestions would be great. I want to make it so that when you go to type something into the textbox(lastname or firstname) the menu stays open. right now if you try and type something into the textbox the menu closes but you still keep right on writing and then go back into the menu and click the submit button. I also want it so that you can press the <enter> key on your keyboard and it will submit the search query that you are working on. if there is a better way of doing this all please let me know this is menu.php PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>BHI and Roth's Website menu</title> <?php <link rel="stylesheet" type="text/css" href="menu_css.css" /> </head> <BODY STYLE="background-color:transparent"> <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="home.php" target="showframe">Home</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Fill-in a form</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="form_bhi_hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_for_adding_email_addresses.php" target="showframe">Email database</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_support_application.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View the form data</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="view_102hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Search Addressbook by:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Last Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="lastname_search.php" method="post" target="showframe"><input type="text" name="lastname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>First Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="firstname_search.php" method="post" target="showframe"><input type="text" name="firstname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <li class="pureCssMenui"><a class="pureCssMenui" href="sa.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Resources</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenui"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View BHI Brochure -></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.pdf" target="_blank">in .pdf format</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.swf" target="_blank">in .swf format</a></li> </ul> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="gallery.html" target="showframe">Photo Gallery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="edit.php" target="showframe">Edit account information</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="logout.php" target="_top">Logout</a></li> </ul> </body> </html> <?php } } } else //if the cookie does not exist, they are taken to the login screen { header("Location: login.php"); } ?> </html> And this is menu_css.css Code: #pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:0px;top:100%;}
ul.pureCssMenu ul ul{position: absolute;left:100%;top:0px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#990033;
background-repeat:repeat;
border-color:#FFEE00;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:210px;/*width:138.6px;*/
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#990033;
border-width:0px;
border-color:#990033;
border-style:solid;
text-align:center;
text-decoration:none;
padding:4px;
_padding-left:4;
font:normal 11.5px Verdana;
color: #FFEE00;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none;
padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#BB99BB;
background-image:none;
}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#FFEE00;
border-color:#0099cc;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#FFEE00;
border-color:#990033;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
I've never used CSS to make a menu before so i used an online maker @ purecssmenu.com, unfortunately they don't appear to have a decent support forum or any means of emailing them. I'm having a small problem putting the menu in to my site. The banner image for the site is 800px. When i put the menu in its not wide enough and i can't see a way of making it fit. Also i'm using a table to position it. When its positioned to the left there seems to be some padding or somthing making it not align up with the banner image. It appears to be 1 or 2px short. The style for the menu is... Code: #pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#000000;
background-repeat:repeat;
border-color:#808080;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
height:21px;
float: left;
}
ul.pureCssMenu ul{
width:225.75px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#000000;
border-width:1px;
border-color:#000000;
border-style:solid;
text-align:center;
text-decoration:none;
padding:2px 5px 5px 10px;
_padding-left:0;
font:normal 11px Tahoma;
color: #ffde00;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#808080; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3px;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#ffde00;
border-color:#000000;
border-style:solid;
font:normal 11px Tahoma;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#ffde00;
border-color:#000000;
border-style:solid;
font:normal 11px Tahoma;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #557D4F !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:9px;}
ul.pureCssMenu ul span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white.gif);}
ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span{background-image:url(./images/arr_white.gif)}
ul.pureCssMenu table a:hover table span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu li.pureCssMenui0 {
width:110px;
height:23px;
}
ul.pureCssMenu li a.pureCssMenui0{
height:100%;
background-image:url(./images/btn3.jpg);
border-width:0px;
font:normal 11px Tahoma;
color:#fff;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
background-image:url(./images/btn4.jpg);
font:normal 11px Tahoma;
color:#eee;
}
ul.pureCssMenum0 {
background-color:transparent;
border-width:0px;
padding:0px 0px 0px 0px;
}
ul.pureCssMenum0>li>a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}
</style>
<!-- End PureCSSMenu.com STYLE -->
And the html for the site is... Code: <!-- Start PureCSSMenu.com MENU --> <ul class="pureCssMenu pureCssMenum0"> <li class="pureCssMenui0"><a class="pureCssMenui0" href="/index.html">Home</a></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>About Us</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/news.html">News & Events</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/promotions.html">Promotions</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/distribution.html">Distribution Network</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Services</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/service.html">Service</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/delivery.html">Delivery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/m2m.html">Made to Measure</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Products</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/linings.html">Linings</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/blackouts.html">Blackouts</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Interlinings</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/interlining.html">Interlining</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/wadding.html">Wadding</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/2fold.html">2 Fold</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="accessories.html">Accessories</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Blind Systems</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/bsm2m.html">M2M & Component</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/setsize.html">Set Size & Open Rail</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/motorisedbs.html">Motorised</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/bsaccessories.html">Accessories</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/bslinings.html">Linings</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Curtain Tracks</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/easyflow.html">Easy Flow</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/trackservices.html">Track Services</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/handdrawn.html">Hand Drawn</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/corded.html">Corded</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/motorised.html">Motorised</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/panelsystem.html">Panel System</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/metalpoles.html">Metal Poles</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/woodenpoles.html">Wooden Poles</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Contract</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/contractlinings.html">Contract Linings</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/contractfabrics.html">Contract Fabrics</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/bamboo.html">Bamboo Fabrics</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/cushions.html">Cushions & Duvets</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/upholstery.html">Upholstery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/printing.html">Printing</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/irishlinen.html">Irish Linen, Garment Linings & Interlinings</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Contact Us</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/general.html">General Enquiries</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/newenquiries.html">New Enquiries</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="/orders.html">Orders</a></li> </ul> <a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a> <!-- End PureCSSMenu.com MENU --> <!-- (c) 2009, PureCSSMenu.com --> If anyone can help me make this 800px wide even if it means having a blank image at the end to fill any space and help removing any padding thats making it not appear full width it would be much appreciated. Im relatively new to CSS and im trying to make a navigation menu. I've been able to gather some code from other tutorials and finally got one that works fine under firefox 3.5, Opera 9 and IE8. However i've been told that its not working properly under IE7. Can anyone tell me if theres a fix for this? i've searched around other tutorials but couldnt make sense of them (which is probably why the CSS is a bit messy). Anyhelp would be greatly appreciated. link: users.tpg.com.au/tetsuo/css_help/index.html CSS: users.tpg.com.au/tetsuo/css_help/awis.css I have a vertical CSS menu using lists on my website. Everything looks ok when the page is first loaded but when I click on one of the menu items the left edge of the menu shifts to the left making the entire menu 10px wider. The div containung the menu has a left value of 10px but this seems to be ignored or overwritten when I click on a menu item. The right edge of the menu does not change. If I refresh the page it appears correctly again. Any ideas? Hey guys, I'm trying to aling my menu in my new website. I'm trying to align the buttons on the bottom of the dark div on the top of the page. Its not working at all, and FF en IE are showing different stuff: So, in both browsers, I cant get it to work. I want the two buttons to be aligned on the bottom of the dark part, like tabs. Next to eachother. Any (bright) ideas? Thanks! This is the complete code I'm using: html Code: Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <style> .shadowbox {margin-bottom:4px;background: #dfdfdf; border: 1px solid #f5f5f5; position: relative;top: 2px;left: 2px;} .lightyellow {padding:10px;background: #FFFFCC;border: 1px solid #B6B6B6;color: #242424;} .shadowbox div.normal {position: relative;top: -2px;left: -2px;} #content {width: 90%; margin-top: 15px; padding: 15px; margin-left: 5%; background: #FFFFFF; border: 1px solid #000000; text-align: left;} #header {margin: 0px; padding: 0px; padding-left: 5%; background: #333333; height: 65px; text-align: left; } #logo { padding-top: 10px} body {padding: 0px; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%; background-image: url('images/back.gif'); background-repeat: repeat; } h1 { font-size: 150%; padding: 0px; margin: 0px; padding-bottom: 5px; padding-left: 2px; } #copyright { text-align: center; font-size: 10px; margin-top: 25px; color: #7D7D7D; } </style> </HEAD> <BODY> <div id='header'> <div id='logo'> <img src='images/logo.png' alt='InvenI'> </div> <img src='images/zoeken_inactive.gif'> <img src='images/zoeken_inactive.gif'> </div> <div id='content'> <h1>Mijn Verlanglijstje</h1> <div class='shadowbox'> <div class='normal lightyellow'> hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br /> </div> </div> <div class='shadowbox'> <div class='normal lightyellow'> hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br /> </div> </div> </div> <div id='copyright'> Geen enkele advertentie wordt gehost op InvenI, InvenI is dus ook niet verantwoordelijk voor hun inhoud.<br /> InvenI.nl is niet verantwoordelijk voor (gevolg)schade ontstaan door het gebruik van deze site.<br /> Geregistreerde namen zijn eigendom van hun eigenaren.<br /> Meer informatie over uw Privacy.<br /> </div> </BODY> </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.shadowbox {margin-bottom:4px;background: #dfdfdf;
border: 1px solid #f5f5f5; position: relative;top: 2px;left: 2px;}
.lightyellow {padding:10px;background: #FFFFCC;border: 1px solid #B6B6B6;color: #242424;}
.shadowbox div.normal {position: relative;top: -2px;left: -2px;}
#content {width: 90%; margin-top: 15px; padding: 15px; margin-left: 5%; background: #FFFFFF; border: 1px solid #000000; text-align: left;}
#header {margin: 0px; padding: 0px; padding-left: 5%; background: #333333; height: 65px; text-align: left; }
#logo { padding-top: 10px}
body {padding: 0px; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%; background-image: url('images/back.gif'); background-repeat: repeat; }
h1 { font-size: 150%; padding: 0px; margin: 0px; padding-bottom: 5px; padding-left: 2px; }
#copyright { text-align: center; font-size: 10px; margin-top: 25px; color: #7D7D7D; }
</style>
</HEAD>
<BODY>
<div id='header'>
<div id='logo'>
<img src='images/logo.png' alt='InvenI'>
</div>
<img src='images/zoeken_inactive.gif'>
<img src='images/zoeken_inactive.gif'>
</div>
<div id='content'>
<h1>Mijn Verlanglijstje</h1>
<div class='shadowbox'>
<div class='normal lightyellow'>
hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />
</div>
</div>
<div class='shadowbox'>
<div class='normal lightyellow'>
hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />
</div>
</div>
</div>
<div id='copyright'>
Geen enkele advertentie wordt gehost op InvenI, InvenI is dus ook niet verantwoordelijk voor hun inhoud.<br />
InvenI.nl is niet verantwoordelijk voor (gevolg)schade ontstaan door het gebruik van deze site.<br />
Geregistreerde namen zijn eigendom van hun eigenaren.<br />
Meer informatie over uw Privacy.<br />
</div>
</BODY>
</HTML>
Hello, I just started trying to learn about css and html layouts by following this tutorial he hxxp://www . subcide.com/tutorials/csslayout/page2.aspx This is my webpage: (link removed as issued is resolved) but I'm having issues making the navigation look correct (not repeat and be about 50 px down) Can someone give me a little hand. ? cheers. ps....errrr...I see nothing that I am doing wrong in the forum rules about the urls...... hi, Am nearly finished my first website but this issue won't go away and it's driving me crazy. www.leehughes.co.uk As you can see I have a drop down menu at the top. The problem is a couple of my friends have reported trouble trying to access the sub menus. They can hover over the main choice but when they move the mouse down to select a link the links disappear. it's not like they can not be selected though if you press ctrl and go down then they can be selected. Am so puzzled and so close to the end it's driving me crazy.. hi all! so i'm working on a redesign of our corporate site but i'm having a few problems with this menu i'm coding. http://washsq.com/test/index.html if you take a look at this there are 3 problems i can't seem to fix, no matter what i try. 1. why does the padding each menu button extend over the border for the entire div? 2. how can i get the gap between each button to be 0? 3. how can i float this entire menu to the right of the div? i've tried a lot but nothing seems to work. thanks! hey all, I have been working on a multilevel suckerfish menu tutorial and i have the following: http://www.wildhosting.co.uk/cssMenu/menu.php However, i am having a couple of final problems. 1) In FF the grey highlight colour does not seem to fill from top to bottom on the main menu. 2) In FF, When a sub menu (for the top option of the menu) appears the top border of the submenu overlaps the bottom border of the main menu. 3) In IE, the above are ok but the submenu appears a long way from where it should, ie 5cm to the right... any help would be great, thanks RF |
|||||||