|
CSS - Help With Ie Bug In Multi Col Layout
I'm having a problem where IE is breaking my layout dropping my third column to the bottom, every other browser handles it fine.
here's a link http://www.uww.edu/npa/crisis/intltravel/ thank you in advance. Similar TutorialsI want to make a liquid layout with 4 boxes in this shape: [ 100% ] [50%][50%] [ 100% ] I have tried several solutions, but run into troubble with the bottom box all the time. This is what the problem looks like: http://www.student.uib.no/~st11920/...page_split.html If I comment out the bottom box the two middle boxes look fine: http://www.student.uib.no/~st11920/...outcomment.html Any help would be most welcome. Cheers Jan Terje Bakken / TankBoy Hi I have sucessfully created a 4 column 2 row layout which works fine in IE, FireFox & Opera. The problem i have is that search1 needs to span the width of search and vote as opposed to just the width of search. (I have included the html allowing you to see what i mean). Any ideas on how i would achieve this? - its driving me insane <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <style> div.container{position:absolute;left:0px;top:283px; width:751px; background-color:#CC3300; } div.panelmain { float:left; width: 191px; background-color:#999999; } div.panelmain1 {float:left; width: 191px; background-color:#0000FF; } div.panelmain2 {float:right;width: 170px; background-color:#CCFFFF; } #featured{ width:170px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; float:left ; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #vote{ width:191.3px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; float:left; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #vote1{ width:191.3px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; clear:both; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #members{ width:191.3px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; float:left; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #members1{ width:191.3px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; clear:both; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #search{ width:191.3px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; float:left; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #search1{ width:191.3px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; clear:both; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #content{ float: left; width: 55%; } </style> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div class="container"> <div class="panelmain"> <div id="members"> members</div> <div id="members1"> <p>members1sssssssssssssssssss</p> <p>s</p> <p>ss</p> </div> </div> <div class="panelmain1"> <div id="search"> <p>Search</p> <p>d</p> <p>d</p> <p>dd</p> </div> <div id="search1"> search1 <p>s</p> <p>s</p> <p>d</p> <p>d</p> <p>ds</p> <p>s</p> <p>s</p> </div> </div> <div class="panelmain"> <div id="vote"> <p>Vote</p> <p>ss</p> <p>s</p> <p>ss</p> </div> </div> <div class="panelmain2"> <div id="featured"> <p>featured</p> <p>ss</p> <p>sss</p> <p>ss</p> <p>sss</p> <p>ss</p> <p>ss</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> </div> </div> </body> </html> Hi, I have a multi-column layout where I want every column to always be the same height. Any one of the columns may be the longest on any given page, so the other columns have to automatically adjust to match that height. Usually I'd just use the faux column technique where you repeat a background image, but that won't work because of two elements on this page: 1. each column has a border all the way around it. 2. one column resizes with the page. I've read the articles on liquid layouts with faux columns, but as far as I can tell those techniques won't work if your columns have borders. Does anyone know any technique that would work here? Thanks. hello. I am currently using a simple horizontal top menu with a vertical drop down. I would like to change the vertical drop down to be horizontal, multi column, and should accomodate more than one line, if possible. The example I'm going for is used as top navigation he nfl - baltimore ravens home page and he ge home page Here is the code I'm using currently (would like it to be all CSS). #### ul#mainNavigation { padding-left:185px; } ul#mainNavigation li { padding:0 16px; float: left; display:inline; position: relative; list-style: none; color:White; _width:1px; } ul#mainNavigation li.Seperator { padding:0px; _width:1px; } ul#mainNavigation li.over { background-color:white; } ul#mainNavigation li.over a { color:Red; } ul#mainNavigation li a { color:White; text-transform:uppercase; text-decoration:none; font-weight:bold; display:block; } ul#mainNavigation a:hover { color: Red; } ul#mainNavigation li a { display: block; } ul#mainNavigation li p { height:19px; } ul#mainNavigation li ul { display: none; position: absolute; background-color:Black; opacity:.8; filter: alpha(opacity=80); -moz-opacity: 0.8; margin-left:-16px; } ul#mainNavigation li.over ul { display: block; z-index:999; } ul#mainNavigation li.over ul li { float: none; background:none; border:none; white-space:nowrap; padding:0px; } ul#mainNavigation li.over ul li a { color: white; padding:5px; border-bottom:solid 1px black; } ul#mainNavigation li.over ul li a:hover { background: #3d1f6e; color: white; } ~~~~~~~ HTML ~~~~~~~~~~~~~~ <ul id="mainNavigation"> <li> <p><a href="Mainlink1.html">Mainlink1</a></p> <ul> <li><a href="link2.html">LINK 2</a></li> <li><a href="link3.html">LINK 3</a></li> <li><a href="link4.html">LINK 4</a></li> <li><a href="link5.html">LINK 5</a></li> <li><a href="link6.html">LINK 6</a></li> <li><a href="link7.html">LINK 7</a></li> </ul> </li> <li> <p><a href="Mainlink2.html">Mainlink2</a></p> <ul> <li><a href="link2.html">LINK 2</a></li> <li><a href="link3.html">LINK 3</a></li> <li><a href="link4.html">LINK 4</a></li> <li><a href="link5.html">LINK 5</a></li> <li><a href="link6.html">LINK 6</a></li> <li><a href="link7.html">LINK 7</a></li> </ul> </li> </ul> #### Thank you, in advance! ~ lahddah Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? i current have the following css layout applies to a div on my webpage Code: #builds {
position:relative;
left:17px;
padding-top: 125px;
padding-bottom: 55px;
}
this gives me the crrect positioning in firefox and google chrome however when i try and load it in ie the positioning is totally wrong. i have tried using the Code: margin: 0px auto 0 auto; value as thi div is centerd within another however then this works in ie and not firefox or google chrome. does anyone have any ideas of anything that will work for all browsers? or even just ie, firefox and google chrome Regards, Jamie I saw an idea that I liked a whole lot for displaying pictures and that kind of thing. I didn't want to really hank the guys code, but tried to make my own version of it. The problem I have is yet again with Internet Explorer doing really stupid things with the pics I drop in my div's. It keeps adding a padding to it and it's beginning to aggravate me. Here is the code I had: body { height: 100%; margin: 0; padding: 0; background: #4F6A84; text-align: center; } #super_container { position: absolute; top: 70px; left: 0; width: 100%; height: 438px; background: #424242; padding: 0; margin: 0 auto; text-align: center; } #super_container { height: 438px; } #sub_container { width:775px; voice-family: "\"}\""; voice-family: inherit; width: 765px; /*border-right: 1px solid #7D1E2C; border-left: 1px solid #7D1E2C;*/ height: 438px; background: transparent; margin: 0 auto; } #sub_container { width: 765px;} #right{ float: right; width: 150px; height: 438px; background: #c5c5c5; } #left { float: left; width: 400px; height: 438px; margin: 0px; padding: 0px; background: blue; overflow:visisble; background-image:url(new_test/test1.jpg); background-repeat:no-repeat; background-position:top left; } #left img { padding: 0px; margin: 0px; border: 5px solid #fff;} #center { margin-left: 401px; margin-right:151px; padding:0px 0px 0px 0px; border-top:1px solid green; } and the html <body> <div id="super_container"><!--start of super container--> <div id="sub_container"><!--start sub_container--> <div id="right"> </div> <div id="left"> </div> <div id="center"> test </div> </div><!--end sub_container--> </div><!---end of super conatiner--> </body> the problem becomes evident when I put an image in the htnl of the left element. It either looks likeit rises just above the top of the super-container, or it is flush with the top and leaves a margin underneath it. As always, any help or design/tips as to what I am doing wrong would be great. I am just experimenting with new things, trying to see what I can or cannot do. The idea would be to have a home page with picture and right column with info. Then on the sub-pages have nav and subnav on the middle and right columns and pics on the left. Just a dry run, trying to see where i am. Thanks for the help in advance! jon Greetings, Basic Layout is: Page-Containter -> Header-Container -> Side-Container -> Content-Container -> Footer-Container Header is normal Side is a Float Left with a width of 250 Content has a left margin of 260 (to allow for the Side-Container) Footer is normal. Pretty basic. In the content area there are more divisions to handle different sections of data. The problem is that in some of the content sections, I need to have dynamically allocated "blocks" of data that form psuedo "columns". I do this by doing a float:left on each of the content blocks. (generally a 250px width) That way if I show 1 or 5, they all snug up next to each other and wrap properly in the browser. Still pretty basic. Until ... drum roll please ... the next section. Since the content is "float:left", it's removed from the layout and the following sections will just "snug up" next to the last content block. I want the section to "clear" the previous content division, but don't really have a clean way to declare the "height" of that division, due to the dynamic nature of the data. Silly Rabbit ... just do a clear:left !! In IE it works fine. In Firefox, the clear:left command is clearing the previous container! (side-container ... aka: left nav bar) First question: Which browser is right? is IE right and the clear:left should be contained to it's own division? or is firefox right and the clear:left checks all float:left regardless of division? Second question: If IE is right, what is the fix ... if Firefox is right, how should I actually structure this? I have one issue left in this context menu: www.webfletch.com/sharing (( Make Sure You Right Click On The Page )) The issue is in Internet Explorer, when you click on the sub-menu or one of the links in the sub-menu. Everything works fine at that point, but when you right-click to bring up the context menu again, the sub-menu comes up showing. Because technically, the css didn't grab the mouseout (Or whatever the opposite of "hover" is.) I attempted to fix this with javascript by placing different variations of different scripts all over the code that made the sub-menu style.display = 'none' However, the javascript made the code permenant. Once it was executed, the sub-menu never showed back up again. I guess javascript out-trumps the "hover" attribute of CSS. Any thoughts? I saw the use of multiple classes in one "class" attribute at a contract I was on, I wanted to know how DevShed people felt about this practice. Basic Example: css Code: Original - css Code .redFont { color: red; } .blackBack { background-color: black; }
.redFont {
html Code: Original - html Code <pre class="redFont blackBack">test</pre> <pre class="redFont blackBack">test</pre> Seems to work with javascript in Firefox and IE, anyway.. javascript Code: Original - javascript Code element.className = 'redFont blackBack'; element.className = 'redFont blackBack'; Hello. I've searched far and wide for a good tutorial on how to make multi-row navigation tabs (something that kind of resembles the System Properties box in Windows). Can this be done using ordered lists? Does anyone know of a good source for this? thanks much. -Dan ok, ive had a look on the internet (google) and in this forum, and have been upable to come up with a decent example of a mutli tier drop down menu where the sub menu also has a menu Currently I am using this code, http://www.alistapart.com/articles/dropdowns/ PHP Code: echo " <ul id=\"nav\"> <li><a href=\"#\" class=\"bodytext\">Clients</a> <ul> <li><a href=\"http://www.commusoft.co.uk/eheating/forms/addclientcard.php\" class=\"bodytext\">New Customer</a></li> <li><a href=\"http://www.commusoft.co.uk/eheating/forms/addagents.php\" class=\"bodytext\">New Agent</a></li> <li><a href=\"http://www.commusoft.co.uk/eheating/postcodecheck.php\" class=\"bodytext\">Postcode Check</a></li> </ul> </li> </ul>"; this is the javascrip to make it work with IE Code:
<script language="JavaScript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace (" over", "");
}
}
}
}
}
window.onload=startList;
</script>
Code:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
height: 18px;
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
line-height: 16px;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
float: left;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border-right: 1px solid #ccc;
border-bottom: 0;
height: 1%;
}
li hover ul, li.over ul {
display: block;
}
This is a single tier drop down menu were there are titles and a sub - menu. I was hopeing someone would point me in the direction, or show me where to begin if I want to turn this code into a multi tier drop down menu. Also, if anyone else has used this why does a gap appear between each menu option when hovering over? Any help would not only help me but will supply a decent example for others.. Thanks 1. top and bottom images are collapsing, i cant get them to display correctly without filling the html with either breaks or text 2. I cant get the images submenuedivider and submenuemarker to display simultaneously when i hover the links in the list. 3. Right now my soltuion to not display the divider image below the last element in the list is through the code: <li><a style="background-image: none;" href="x.html">SOmething</a></li> </ul> However, this also causes the mrker to not be seen above the list element as well, which isn't exactly what I wanted to happen, so what do I do? I'm stuck The CSS: Code: .leftCol
{
width: 190px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 10px;
float: left;
}
.leftCol body {font-size:100%; color: #FFF;}
.leftCol h1 {font-size:1.1em; font-weight:bold; color: #FFF;}
.leftCol h2 {font-size:1.0em; color: #FFF;}
.leftCol h3 {font-size:1.0em; color: #FFF;}
.leftCol p {font-size:0.875em color: #FFF;}
.submenue
{
width: 188px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
float: left;
background-image: url(images/submenue/submenuefiller.jpg);
background-repeat: repeat-y;
text-indent:25px;
}
.submenue ul {list-style-type: none; margin: auto;}
.submenue ul a {padding-bottom: 10px; background: url(images/Submenue/submenuedivider.png); background-repeat: no-repeat; background-position: bottom; display: block; line-height: 25px; text-decoration: none; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; color: #FFF;}
.submenue ul a:hover {background-image: url(images/Submenue/submenuemarker.jpg);}
.submenuetop
{
width: 188px;
hight: 54px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url(images/Submenue/top.jpg);
background-size: 100%;
background-repeat: no-repeat;
margin: 0;
float: left;
}
.submenuebottom
{
width: 188px;
hight: 60px;
background-image: url(images/Submenue/bottom.jpg);
background-position: left top;
background-repeat: no-repeat;
margin-top: 54;
float: left;
}
The HTML: Code: <div class="leftCol"> <div class="submenuetop"></br><h1>something</h1></div> <div class="submenue"> <ul> <h3>Listing</h3> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a style="background-image: none;" href="3.html">5</a></li> </br> <h3>Produkt</h3> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a style="background-image: none;" href="3">something</a></li> </ul> </div> <div class="submenuebottom"></br></br></br></br></div> </div> I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image. I would really like your help on this been trying to do it for weeks now!! Cheers I'm doing a layout with div's and I want to have my navigation a pixel size, but my content area a percentage. (and have them beside each other) Here's what I've tried, but the 'main' div goes 100% of the window instead of 100% of the space between the left side and the 'nav' div. Is what I'm trying to do possible with div's? HTML: <div id="main"> stuff </div> <div id="nav"> navigation </div> CSS: #main { float: left; width: 100%; background: #efe; } #nav { float: left; width: 200px; margin-left: 4px; background: #999; } |
|||||||