|
CSS - Putting Block-level Items Next To Each Other
ss
Similar TutorialsHello, In my menu, I'm trying to center the first level of the List Items, and left justify the second level of the List Items. So the Menu will be centered and the pop-up links will be left justified. I know it's probably super simple, but for some reason, I'm missing it! Quote: /*!!!!!!!!!!! Menu Core CSS !!!!!!!!!!!!!*/ .qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:10000;} .qmmc .qmdividery{float:left;width:0px;} .qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:10000;} .qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;} .qmmc {position:relative;zoom:1;z-index:10000;} .qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:10000;} .qmmc div a, .qmmc ul a, .qmmc ul li {float:none;} .qmsh div a {float:left;} .qmmc div{visibility:hidden;position:absolute;} .qmmc .qmcbox{cursor:default;display:block;position:relative;z-index:10000;} .qmmc .qmcbox a{display:inline;} .qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;} .qmmc li {z-index:10000;} .qmmc ul {left:-10000px;position:absolute;z-index:10000;} .qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;} .qmmc li a {float:none} .qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;} Hi, I was wondering if it's possible to put 2 block-level elements next each other without float and absolute positioning? Can you make them display as inline-elements so that they line up next each other? greets I have an unordered list that I am using as a horizonal nav with the list items displayed inline. Code:
<!--
***CSS***
li{display:inline;}
-->
<ul>
<li><a href="#">Menu1</a> <li>
<li><a href="#">Menu2</a> <li>
</ul>
produces Code: Menu1 Menu2 Easy enough.... Now, I'm also trying to use this image replacement technique that would hide the text and instead use an image instead. Example: Code:
#ID_OF_ELEMENT {
padding: HEIGHT_OF_IMAGEpx 0 0 0;
overflow: hidden;
background-image: url("hello_world.gif");
background-repeat: no-repeat;
height: 0px !important;
height /**/:HEIGHT_OF_IMAGEpx;
}
This technique, however, was designed for block level elements such as headers. Otherwise, I would have to make the 'a' element block level, then give it a specific width (the width of the image that's replacing the text). The problem with that is now the menu has block level elements and are now stacked on top of each other instead of inline. I've tried using SPANs to hack around it, but I can't seem to get it to work. Is there any way through CSS to either: a) Allow block level elements to display inline, or b) Set a specific width to an inline element? Thanks in advance I read the CSS Mastery book (Andy Budd). I think this is one of the greatest CSS book on the market but sometimes is hard to understand. I don't understand what the author say, he http://img24.imageshack.us/img24/4705/cssx.jpg Ok, I have this code: Code: <div> some text <p>Some more text</p> </div> "some text" don't have an element, and is treated like a paragraph. Ok, I add another text without element (some text2).. Code: <div> some text <p>Some more text</p> some text2 </div> Now, what this mean ? The same thing is true for "some text2" ? "some text2" is treated like a paragraph ? Please, someone explain me a bit what the author want to say in the attached image file. Thanks! Hello, I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline). I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit? The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>. Would appreciate any thoughts on the matter, Cheers! Hey, I've got a quick question - I know this must have a common workaround to it, I just can't seem to find it. I have a div positioned absolutely within several parent divs making up the rest of the page. To put the issue simply, it seems to be positioning this child div relative to the body. top:20; and left:20; will put it 20 from the top and left of the body of the page rather than he top and left of the block level div it's nested within. There's no positioning applied to its direct parent. The issue is the same in both IE5.5+ and FF. I can whip up a code example, but I think this is a simple issue that would be easier interpreted as I've put it. Thanks in advance for any help on this. =) Is it possible mix inline and block-level elements directly together?? For example: Code: <div....> <input..... /> <-- inline element <ul>... <-- block element </div> Thank you Hello, I'm customising a theme in wordpress and having a problem centering the three widgets that appear in the footer at the bottom. Nothing seems to work that I have tried. I know very little about css but understand the basic principle but can't seem to find the problem. I want the footer to be 100% the width of the page and for the three wigets to be in a single row of 3 but in the center and not off to the left. I've tried adjust the float but it just stacks them on top of each other set to none and over to the right set to right... I've inlcuded the CSS below and also the code in my footer.php page. Thanks in advance. test site is http://mtbireland.com/hkr Code: </div>
</div>
</div>
<div style="width:100%; text-align: center; margin: 0 auto;">
<div id="footer"><div id="footer-left">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 1') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
<div id="footer-middle">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 2') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 3') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
Code: #footer {
height:200px;
padding:20 0 0 0;
color:#FFFFFF;
font-size:12px;
font-weight:normal;
line-height:20px;
font-family: Tahoma,georgia,Century gothic, Arial, sans-serif;
width:100%;
float:left;
background:#392E2C;
text-align:left;
}
/* Footer Widgets */
#footerwidgets {
display: block;
width:100%;
background:#392E2C;
}
#footer-left {
width: 210px;
float: left;
margin: 15px 10px 10px 30px;
padding: 10px;
text-align:left;
}
#footer-middle {
width: 210px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
text-align:left;
}
#footer-right {
width: 210px;
float: right;
margin: 15px 10px 10px 15px;
padding: 10px;
text-align:left;
}
hi, Im making a menu that looks like: link1 link2 link3 link4 and then wen you hover over link a dropdown may appear i have the problem that when they appear, they lay on top of each other. ANy idea how to make they display under each other. (it doesnt even work in IE at the mo, but i gues ill laft2 sort that later) thanks this is the html: PHP Code: <ul> <li><a href="index.php?action=home">home</a></li> <li><a href="index.php?action=whatnew">what's new</a></li> <li><a href="index.php?action=offers">special offers</a></li> <li><a href="#">collections</a> <ul><a href="#">drop1</a></ul> <ul><a href="#">drop2</a></ul> <!--when looping thru categories, do a WHERE cat_status >= 2--> </li> <li><a href="index.php?action=sBask">shopping basket</a></li> <li><a href="index.php?action=contact">contact us</a></li> </ul> this is the relevant css: PHP Code: #nav ul li { position: relative; margin: 0; padding: 0 10px 0 10px; list-style: none; display: inline; } #nav ul li ul { position: absolute; display: none; } #nav ul li:hover ul { display: block; left: 0; top: 10px; } #nav ul li:hover ul li { height: 20px; } I am working on a website for a client and I am having trouble following A List Apart's tutorial (I can't link yet). I have a working css dropdown menu using a css sprite. But what I am trying to do, is when you mouse over a dropdown and go down the dropdown, that the parent menu remains at it's hover state. Currently what is happening is as soon as I mouseout of the parent level it goes back to the normal state. I don't really want to post the link to the test site itself if I don't have to for client privacy. Please help! I'm getting way too frustrated now, I've look at so many examples and nothing seems to work. I don't even need the javascript, I just need it to work. I've experimented with javascript and without. This is the code I am using: javascript: Code:
<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
menuRoot = document.getElementById("menu");
for (i=0; i<menuRoot.childNodes.length; i++) {
node = menuRoot.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>
HTML Markup: Code: <div id="nav"> <ul id="menu"> <li><a href="index.php" class="home"></a></li> <li><a href="link" class="tour"></a></li> <li><a href="link" class="events"></a> <ul class="drop"> <li><a href="/events/calendar">Calendar</a></li> <li><a href="/events">Ag Science Hall of Fame</a></li> <li><a href="/events/tastes">TASTES</a></li> </ul> </li> <li><a href="news" class="news">News</a> <ul class="drop"> <li><a href="link">Legislation</a></li> <li><a href="news/latest-news">Latest News</a></li> <li><a href="/news/newsletter">Newsletter</a></li> <li><a href="news/in-the-media">In the Media</a></li> </ul> </li> <li><a href="link"></a></li> <li><a href="link"></a></li> </ul> </div> Menu CSS: Code: #nav {
position: relative;
float:left;
width:940px;
height:35px;
z-index: 9;
background: #fff;
}
#menu, #menu ul {
position: relative;
padding:0;
margin:0;
clear:both;
float:left;
width:455px;
z-index: 9;
}
#menu ul.drop {
background:#520006;
/* padding:10px;*/
width:inherit;
clear:both;
float:left;
margin-top:35px;
z-index: 9;
}
#menu ul.drop li {
width: 130px;
clear:both;
padding: 5px;
z-index: 9;
}
#menu ul.drop li:hover {
background: #c10101;
z-index: 9;
}
#menu ul.drop a {
color:#fff;
font-size:11px;
text-decoration:none;
font-weight:normal;
clear:both;
float:left;
z-index: 9;
}
#menu a {
display: block;
/*width: 10em;*/
float:left;
clear:both;
width:130px;
}
#menu li {
float: left;
/*width: 10em;*/
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index: 9;
}
#menu li:hover ul {
left: auto;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;}
/*SPRITE BACKGROUP POSITIONING*/
#menu li a.home, #menu li a.tour, #menu li a.events, #menu li a.news, #menu li a.donate, #menu li a.involved, #menu li a.resources, #menu li a.about, #menu li a.contact {
float:left;
background:url('images/menu.jpg') no-repeat;
height:35px;
text-indent:-999999px;
}
#menu li a.home:hover, #menu li a.home.over {background-position: 0px -35px;}
#menu li a.home {width: 62px;}
#menu li a.tour:hover {background-position: -62px -35px;}
#menu li a.tour {width: 63px; background-position: -62px 0px;}
#menu li a.events:hover, #menu li a.events.hover {background-position: -125px -35px;}
#menu li a.events {width: 101px; background-position: -125px 0px;}
#menu li a.news:hover {background-position: -226px -35px;}
#menu li a.news {width: 80px; background-position: -226px 0px;}
#menu li a.donate:hover {background-position: -306px -35px;}
#menu li a.donate {width: 75px; background-position: -306px 0px;}
#menu li a.involved:hover {background-position: -381px -35px;}
#menu li a.involved {width: 74px; background-position: -381px 0px;}
ul {list-style: none;}
We have our magento store with lots of categories, but it looks silly with categories being added under the first row. We'd like to have these added on a row above this, but i am having a hrd time getting this done. Is there an easy way to have category items being added on top in a new row, instead of a new row under the current one? Simply put, instead of this way: 1 2 3 4 5 6 7 8 9 We want it this way: 6 7 8 9 1 2 3 4 5 As you understand this will look much better and not screw with our design;-) Anybody? Hi there, I have a css drop down menu which displays items in a drop down menu, however, I want to add a second drop down to items that have sub categories, for example: Main Link --Drop Down --- Sub category This is my HTML: PHP Code: <ul id="nav"> <li style="border-right: 1px solid #ffffff;"> <a href="#">home</a> </li> <li style="border-right: 1px solid #ffffff;"> <a href="#">about us</a> <ul> <li><a href="#">Mission</a></li> <li><a href="#">Staning Committees</a></li> <li><a href="#">Directors</a></li> <li><a href="#">Past Presidents</a></li> </ul> </li> <li style="border-right: 1px solid #ffffff;"> <a href="#">membership</a> <ul> <li><a href="#">Membership Categories</a></li> <li><a href="#">Design & Print Media</a></li> <li><a href="#">Website & Visual Design</a></li> <li><a href="#">Website & Email Hosting</a></li> <li><a href="#">Distibution</a></li> </ul> </li> <li style="border-right: 1px solid #ffffff;"> <a href="#">products</a> <ul> <li><a href="#">Our Products</a></li> <li><a href="#">Product Distribution</a></li> </ul> </li> <li style="border-right: 1px solid #ffffff;"> <a href="#">properties</a> </li> <li style="border-right: 1px solid #ffffff;"> <a href="#">advertising</a> </li> <li style="border-right: 1px solid #000000;"> <a href="#">contact</a> </li> </ul> and this is my CSS: PHP Code: ul#nav{ margin: 0px; padding: 0px; text-align: left; list-style: none; width: 790px; margin: 0px auto; position: relative; } ul#nav li{ float: left; margin: 0px; padding: 0px 2px 0px 0px; line-height: 5px; position: relative; width: 109px; } ul#nav li img{ vertical-align: top; } ul#nav li.rightLink{ float: right; } ul#nav li.last{ background: none; } ul#nav li a, span.noLink { display: block; line-height: 5px; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; font-weight:bold; text-decoration:none; text-align:center; padding: 15px 10px 15px 10px; color: #ffffff; } * html ul#nav li a, span.noLink { padding: 20px 10px 6px 8px; } ul#nav li a:hover{ color: #ffffff; } ul#nav li:hover a, ul#nav li.sfhover a{ } ul#nav li:hover li a, ul#nav li.sfhover li a{ background: none; } ul#nav li ul{ position: absolute; margin: 0px; padding: 0px; overflow: visible; left: 0px; display: none; margin-top: hover; text-align: left; background: #000000; width: 150px; } ul#nav li li{ background: #000000; padding: 0px; margin: 0px; float: none; display: block; text-align: left; width: 100%; } ul#nav li li a{ display: block; margin: 0px; padding: 3px 3px 3px 15px; background: #f0f3f8; font-weight: normal; text-transform:none; font-weight:bolder; font-size: 10px; line-height: 12px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none; text-align:left; margin-left: 6px; margin-right: 6px; letter-spacing: 1px; width: 130px; } ul#nav li li a:hover{ color: #ff0000; } ul#nav li:hover ul, ul#nav li.sfhover ul{ display: block; } Any ideas how I can add a drop down to appear to the right of the drop downs which have further categories? Any help would be great! Thanks! I cannot get IE to correctly display divisions using the z-index property. The following example works as I expect it to in Netscape, Safari and Opera, but not in IE. The intent is that the blue box should be on top of all others (by virtue of its higher z-index). [I posted a similar question earlier, but this time I reduced the example to just the basics... it turns out that no complications such as forms, fieldsets, visibility, display, etc are needed to create the anomaly] <body> <div style="position:relative; z-index:auto"> <div style="position:absolute; left: 50px; background-color:blue; z-index: 10; width: 100px; height: 100px"> <p>this is the first overwriting box, which *should* hide everything</p> </div> <div style="background-color:red;"> <p>This line (actually the DIV) should define where the blue goes but be partially hidden by the blue!</p> </div> </div> <div style="position:relative; z-index:1"> <div style="position:absolute; left: 75px; background-color:green; width: 100px; height: 100px; z-index: auto"> <p>This box should also get hidden by both the blue and green boxes</p> </div> <div style=" background-colorrange;"> <p>This section should follow the first text line, defining where the green box goes but be partially hidden by the both blocks</p> </div> </div> </body> The example is viewable at: http://www.thedancegypsy.com/test/dancelistings/zdemo.htm I have tried every variation I acn think of such as "z-index: auto;" for reference the page had two divisions, each of which has two parts. The outer divison povides a contect for positioning the inner parts -- one of which should overlap the next division. any ideas out there? I'm trying to add an extra level to a pop-out menu but can't get the third level to hide and display. The jscript function is suckerfish the css is a little here a little there... CSS: Code:
<style type="text/css">
/* ==== STYLES FOR MAIN PART OF THE MENU ==== */
#menu {
font-family: Verdana, Arial, sans-serif;
font-size: 100%;
width: 100px;
padding: 0px;
margin: 0px;
display:block;
}
#menu, #menu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#menu li ul ul {
margin: 0 0 0 0em;
}
#menu li {
float:left;
width:50px;
position:relative;
margin: 0px;
padding: 0px;
}
#menu a {
width:100px;
font-size: 80%;
color:#666666;
text-decoration: none;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
display: block;
}
#menu a:hover, #menu a:focus {
color: #000000;
background-color: #AAA;
}
/* === STYLES FOR THE MAIN MENU (LI's) === */
.mainitems{
display:block;
}
/* === STYLES FOR THE POP OUT MENUS === */
.popouts{
display: none;
width: 6em;
position: absolute;
top:0px;
left: 100%;
background-color: #EEFFCC;
}
.popouts li{
position:relative;
width: 100%;
}
.popouts li a{
display: block;
width: 100%;
text-indent: 3px;
}
.popouts li a:hover{
background-color: yellow;
color: black;
}
#menu li:hover ul, #menu li.over ul, #menu li li:hover ul, #menu li li.over ul{
display:block;
}
I've tried a couple of different things as such: Code:
/* === STYLES FOR THE POP OUT MENUS === */
.popouts{
display: none;
width: 6em;
position: absolute;
top:0px;
left: 100%;
background-color: #EEFFCC;
}
.popouts li li{
position:relative;
width: 100%;
}
.popouts li li a{
display: block;
width: 100%;
text-indent: 3px;
}
.popouts li li a:hover{
background-color: yellow;
color: black;
}
I've tried .popouts li li ul ul{ and even tried adding a seperate class for the third level. Can some one please help me. If you need a link to the page I'm working on, here you go. It's the last link "Links" in the menu where I'm trying to add the third level. Thanks for any help you can offer. John I have a site (inherited) that uses a site level CSS file. The file contains ONLY these lines: /* CSS definition file containing site wide stylesheets */ A:link { color: rgb(0,51,255);} /*unvisited*/ A:visited { color: rgb(0,51,255);} /*visited*/ A:hover { color: rgb(255,0,51);} /*hover*/ A:active { color: rgb(255,0,51);} /*active*/ A { color: rgb(51,51,255);} /*?????*/ I completely understand the first 4 lines and the purpose that they serve, but I need to understand the last line. A { color: rgb(51,51,255);} What does this do and what purpose does it serve? Thanks! Hi all! New to the forum, hopefully somebody will be able to help me out with a problem I am having! I am currently working on a simple flat website and would like help with the layout. I know what I want, however I cant seem to get the code working I will upload a picture outlining what I want to achieve, it would be pretty confusing to explain. URL Basicaly, heres the idea. Header Main Content Container Footer The footer must always be visible and stick to the bottom of the page. When displayed in higher screen resolutions, the footer is still at the bottom. That is within my ability, but I am having trouble formatting the Main Content Container. I want it to be a static height, regardless of screen size. However, if it is viewed in a lower screen resolution, the footer is going to eat into this height so I would like to get a vertical scroll bar to appear inside the Main Content Container div to accomodate for this. I have trouble explaining what I mean please if you have the know how can you help me out? I'd really apreciate it! Thanks in advance, hopefully I will be able to contribute to the forum in the future Hi I thought this would be a lot easier than it has turned out! I want to add a 4th side menu level [#subnav-col]. I don't know if i'm getting the css or the html wrong but I can't get it to work - I find it difficult to know how to do the CSS+html to a 4th level. The original HTML and CSS is here - would be grateful for some help. Many thanks HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-"><!-- InstanceBegin template="/Templates/template-content.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- InstanceBeginEditable name="meta" --> <title>General information</title> <!-- InstanceEndEditable --> <link type="text/css" href="/css/style.css" media="screen" rel="stylesheet"> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="/css/ie8.css" media="screen"> <![endif]--> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="/css/ie7.css" media="screen"> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="/css/ie6.css" media="screen"> <![endif]--> <link type="text/css" href="/css/print.css" media="print" rel="stylesheet"> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/actions.js"></script> <!-- InstanceBeginEditable name="extras" --><!-- InstanceEndEditable --> </head> <body> <div id="top"></div> <div id="container"> <div id="header"> <a class="accessLinks" href="#content" accesskey="[" tabindex="1">Skip to main content</a><span class="hidden"> | </span><a class="accessLinks" href="/accessibility.html" accesskey="0">Accessibility information</a> <a href="/" title="Go to home page" accesskey="1"><span class="site-title">Change change information </span><img src="/site-tools/img/header/logo.jpg" alt="" width="461" height="120" class="logo"></a><img src="/site-tools/img/header/header.jpg" alt="" width="509" height="120" class="header-bg"><a href="http://science.com" accesskey="/" title="services"><img src="img/header/header-icon-ng.jpg" width="223" height="30" alt="" class="vt-icon"></a> </div> <!-- end header --> <div id="main-nav"> <!-- begin menu include --> <ul> <li><a href="/" tabindex="2">Home</a></li><li><a href="/top/" tabindex="3">Science</a></li><li><a href="/adaptation/" tabindex="4">Physical impacts</a></li><li><a href="/carbon/" tabindex="5">reports</a></li><li><a href="/reducing/" tabindex="6">Doing our fair share</a></li><li class="current"><a href="/trading-scheme/" tabindex="7">trading</a></li></ul><div id="site-search"> <form action="http://search./search" method="get" name="siteSearch"> <fieldset> <legend>Site search</legend> <label for="searchBox">Search</label> <input name="q" type="text" id="searchBox"> <input name="btnG" type="submit" value="Search" class="button"> <input type="hidden" name="site" value="Change"> <input type="hidden" name="client" value="Change"> <input type="hidden" name="proxystylesheet" value="Change"> <input type="hidden" name="output" value="xml_no_dtd"> </fieldset> </form> </div><!-- end site-search --> </div> <!-- end main-nav --> <div id="content-wrapper-2col"> <div id="subnav-col"><!-- InstanceBeginEditable name="navigation" --> <h2><a href="/delay/participating/">Participating in the ETS</a></h2> <ul> <li><a href="/delay/participating/apples/">Apples</a></li> <li><a href="/delay/participating/oranges/">Oranges</a></li> <li><a href="/delay/participating/bananas/">Bananas</a></li> <li><a href="/delay/participating/Cherries/">Cherries</a></li> <li><a href="/delay/participating/grapes/">Grapes</a> <ul> <li><a href="/delay/participating/industry/obligation/">Obligations</a></li> <li><a href="/delay/participating/industry/allocation/">Allocation</a> <ul> <li><a href="/delay/participating/industry/allocation/eligible-activities/">Eligible activities</a></li> <li><a href="/delay/participating/industry/allocation/before-applying/">Before applying</a></li> <li><a href="/delay/participating/industry/allocation/calculators/">Calculators</a></li> <li><a href="/delay/participating/industry/allocation/how-it-works/">How it works</a></li> <li><a href="/delay/participating/industry/allocation/faq.html">Application FAQs</a></li> </ul> </li> <li><a href="/delay/participating/industry/call-for-data/">Call for data</a></li> <li><a href="/delay/participating/industry/faq.html">FAQs</a></li> </ul> </li> <li><a href="/delay/participating/fuels/">fuels</a></li> <li><a href="/delay/participating/synthetic/">Synthetic</a></li> <li><a href="/delay/participating/waste/">Waste</a></li> </ul> <!-- InstanceEndEditable --></div> <!-- end subnav-col --> <div id="content-col"> <div id="breadcrumbs"> <p><span class="youarehere">You are he </span><!-- InstanceBeginEditable name="crumbs" --><a href="/trading/"> trading</a><a href="#"></a> ><!-- InstanceEndEditable --></p> </div> <!-- end breadcrumbs --> <a name="content"></a><!-- InstanceBeginEditable name="content" --> <h1>About allocations </h1> <p>Financial assistance to reduce the impact of the <a href="/scheme/about/basics.html"> Some sectors by providing them with <a href="/scheme/about/emission-units.html"> Units (Us)</a>. This compensates eligible businesses for increased energy and fuel costs under the ETS and will help businesses make the necessary changes to reduce their pricing.</p> <p> There are three main groups who are eligible for allocation: </p> <ul> <li>firms whose activities are intensive and who are exposed </li> <li>fishing, and</li> <li> forestry. </li> </ul> <!-- InstanceEndEditable --></div> <!-- end content-col --> </div> <!-- end content-wrapper-2col --> <div class="clear"></div> <div id="footer"> <div id="-info"><a href="http://www.../" title="Visit the website"><img src="/site-tools/img/-logo.gif" width="211" height="57" alt=" logo"></a> </div> <!-- end -info --> <div id="call-tools"> <div id="call"> </div> <!-- end call --> <div class="clear"></div> <div id="tools"> <ul> <li><a href="/sitemap.html" accesskey="2">Site map</a></li> <li><a href="/copyright.html">Copyright</a></li> <li><a href="/disclaimer.html">Disclaimer</a></li> <li><a href="/accessibility.html#accesskeys" accesskey="0">Accessibility</a></li> <li><a href="/privacy-policy.html">Privacy policy</a></li> <li><a href="/glossary.html">Glossary</a></li> <li class="last"><a href="/contact-us.html" accesskey="9">Contact us</a></li> </ul> </div> <!-- end tools --> </div> <!-- end call-tools --> </div> <!-- end footer --> <div class="clear"></div> </div> <!-- end container --> </body> <!-- InstanceEnd --></html> CSS #subnav-col Code: /* ----- subnav (left-hand) column ----- */ #subnav-col { float: left; width: 233px; border-top: 1px solid #cacec2; } #subnav-col h2 { font-weight: normal; font-size: 1.4em; color: #234d1b; margin: 0; padding: 4px 13px 4px 13px; line-height: 1.2; background-color: #eeefeb; border-bottom: 1px solid #cacec2; } #subnav-col h2 a:link, #subnav-col h2 a:visited { color: #234d1b; text-decoration: none; } #subnav-col h2 a:hover { color: #234d1b; text-decoration: underline; } #subnav-col ul { margin: 0; padding: 0; } #subnav-col ul li { margin: 0; padding: 0; list-style-type: none; font-weight: normal; font-size: 1.2em; color: #234d1b; } #subnav-col ul li ul li, #subnav-col ul li ul li ul li { font-size: 100%; font-weight: normal; } #subnav-col ul li a:link, #subnav-col ul li a:visited { margin: 0; padding: 5px 13px 4px 13px; color: #234d1b; display: block; text-decoration: none; border-bottom: 1px solid #dcdfd7; background: #fff url(../img/bullet.gif) no-repeat 0 6px; } #subnav-col ul li a:hover { margin: 0; padding: 5px 13px 4px 13px; color: #000; display: block; text-decoration: none; border-bottom: 1px solid #dcdfd7; background: #fff url(../img/bullet-current.gif) no-repeat 0 6px; } #subnav-col ul li.current a:link, #subnav-col ul li.current a:visited, #subnav-col ul li.current a:hover { margin: 0; padding: 5px 13px 4px 13px; color: #000; display: block; text-decoration: none; border-bottom: 1px solid #dcdfd7; background: #fff url(../img/bullet-current.gif) no-repeat 0 6px; } #subnav-col ul li.parent a:link, #subnav-col ul li.parent a:visited, #subnav-col ul li.parent a:hover { margin: 0; padding: 5px 13px 4px 13px; color: #000; display: block; text-decoration: none; border-bottom: 1px solid #dcdfd7; background: #fff url(../img/bullet-parent.gif) no-repeat 0 6px; } #subnav-col ul li ul li a:link, #subnav-col ul li ul li a:visited, #subnav-col ul li.parent ul li a:link, #subnav-col ul li.parent ul li a:visited { padding: 5px 13px 4px 27px; background: #fff url(../img/bullet.gif) no-repeat 13px 6px; color: #234d1b; } #subnav-col ul li ul li a:hover, #subnav-col ul li.parent ul li a:hover { padding: 5px 13px 4px 27px; background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px; color: #000; } #subnav-col ul li ul li.current a:link, #subnav-col ul li ul li.current a:visited, #subnav-col ul li ul li.current a:hover, #subnav-col ul li.parent ul li.current a:link, #subnav-col ul li.parent ul li.current a:visited, #subnav-col ul li.parent ul li.current a:hover { padding: 5px 13px 4px 27px; background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px; color: #000; } #subnav-col ul li ul li a:link, #subnav-col ul li ul li a:visited, #subnav-col ul li ul li a:hover { padding: 5px 13px 4px 27px; } #subnav-col ul li ul li.parent a:link, #subnav-col ul li ul li.parent a:visited, #subnav-col ul li ul li.parent a:hover, #subnav-col ul li.parent ul li.parent a:link, #subnav-col ul li.parent ul li.parent a:visited, #subnav-col ul li.parent ul li.parent a:hover { padding: 5px 13px 4px 27px; background: #fff url(../img/bullet-parent.gif) no-repeat 13px 6px; color: #000; } #subnav-col ul li ul li ul li a:link, #subnav-col ul li ul li ul li a:visited, #subnav-col ul li.parent ul li ul li a:link, #subnav-col ul li.parent ul li ul li a:visited, #subnav-col ul li ul li.parent ul li a:link, #subnav-col ul li ul li.parent ul li a:visited, #subnav-col ul li.parent ul li.parent ul li a:link, #subnav-col ul li.parent ul li.parent ul li a:visited, #subnav-col ul li ul li.current ul li a:link, #subnav-col ul li ul li.current ul li a:visited { padding: 5px 13px 4px 40px; background: #fff url(../img/bullet.gif) no-repeat 27px 6px; color: #234d1b; } #subnav-col ul li ul li ul li a:hover, #subnav-col ul li.parent ul li ul li a:hover, #subnav-col ul li ul li.parent ul li a:hover, #subnav-col ul li.parent ul li.parent ul li a:hover { padding: 5px 13px 4px 40px; background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px; color: #000; } #current a:link, #subnav-col ul li ul li ul li.current a:visited, #subnav-col ul li ul li ul li.current a:hover, #subnav-col ul li.parent ul li ul li.current a:link, #subnav-col ul li.parent ul li ul li.current a:visited, #subnav-col ul li.parent ul li ul li.current a:hover, #subnav-col ul li ul li.parent ul li.current a:link, #subnav-col ul li ul li.parent ul li.current a:visited, #subnav-col ul li ul li.parent ul li.current a:hover, #subnav-col ul li.parent ul li.parent ul li.current a:link, #subnav-col ul li.parent ul li.parent ul li.current a:visited, #subnav-col ul li.parent ul li.parent ul li.current a:hover { padding: 5px 13px 4px 40px; background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px; color: #000; } /* --- blocks of content in subnav column --- */ /* subnav column links */ #subnav-col .related-links-box ul a:link, #subnav-col .highlight-box p a:link, #subnav-col .highlight-box ul a:link { color: #004161; font-weight: bold; text-decoration:none; } #subnav-col .related-links-box ul a:visited, #subnav-col .highlight-box p a:visited, #subnav-col .highlight-box ul a:visited { color:#336781; font-weight: bold; text-decoration:none; } #subnav-col .related-links-box ul a:hover, #subnav-col .highlight-box p a:hover, #subnav-col .highlight-box ul a:hover { color: #004161; font-weight: bold; text-decoration:underline; } /* related links box - subnav column */ #subnav-col .related-links-box { width: 233px; background-color: #f6f7f5; margin: 20px 0 20px 0; padding: 0; border-top: 1px solid #cacec2; } #subnav-col .related-links-box h2, #subnav-col .related-links-box h3, #subnav-col .related-links-box h4, #subnav-col .related-links-box h5, #subnav-col .related-links-box h6 { font-weight: normal; font-size: 1.4em; color: #004161; margin: 0; padding: 3px 13px 4px 13px; line-height: 1.2; background-color: #eeefeb; border-bottom: 1px solid #cacec2; } #subnav-col .related-links-box h2 a:link, #subnav-col .related-links-box h2 a:visited, #subnav-col .related-links-box h3 a:link, #subnav-col .related-links-box h3 a:visited, #subnav-col .related-links-box h4 a:link, #subnav-col .related-links-box h4 a:visited, #subnav-col .related-links-box h5 a:link, #subnav-col .related-links-box h5 a:visited, #subnav-col .related-links-box h6 a:link, #subnav-col .related-links-box h6 a:visited { color: #004161; text-decoration: none; } #subnav-col .related-links-box h2 a:hover, #subnav-col .related-links-box h3 a:hover, #subnav-col .related-links-box h4 a:hover, #subnav-col .related-links-box h5 a:hover, #subnav-col .related-links-box h6 a:hover { color: #004161; text-decoration: underline; } #subnav-col .related-links-box ul { margin: 11px 0 0 0; padding: 0 13px; } #subnav-col .related-links-box ul li { font-size: 1.1em; margin: 0; padding: 0 0 12px 14px; line-height: 1.2; list-style-type: none; background: url(../img/bullet.gif) no-repeat 0 2px; font-weight: normal; } #subnav-col .related-links-box ul li a:link { padding: 0; border-bottom: none; background: none; } #subnav-col .related-links-box ul li a:visited { padding: 0; border-bottom: none; background: none; } #subnav-col .related-links-box ul li a:hover { padding: 0; border-bottom: none; background: none; }
I have been trying to implement a shadowed effect on a layout I'm working on. Kind of like on this page . I tried it with 3 nested divs and will show you guys both sets of code. With both methods, the top level div is not showing (the one with top.jpg as a background) because it appears that the middle.jpg is covering it. Here is the code I have: Method 1: HTML Code:
<div id="wrapper">
<?php mosMainBody(); ?>
</div>
CSS Code:
#wrapper {
width: 805px;
height: 100%;
margin: auto;
background: url(../images/middle.jpg) right repeat-y;
}
#wrapper::before {
display: block;
line-height: 0;
background: url(../images/top.jpg) no-repeat top right;
}
#wrapper::after {
display: block;
line-height: 0;
background: url(../images/bottom.jpg) no-repeat bottom right;
}
Method 2 Nested Divs: HTML Code:
<div id="wrap1"><div id="wrap2"><div id="wrap3">
<?php mosMainBody(); ?>
</div></div></div>
CSS Code:
#wrap1 {
background: url(../images/top.jpg) no-repeat top ;
width: 805px;
margin: auto;
clear: both;
}
#wrap2 {
background: url(../images/middle.jpg) repeat-y;
width: 805px;
margin: auto;
}
#wrap3 {
background: url(../images/bottom.jpg) no-repeat bottom;
width: 805px;
margin: auto;
}
The page I'm working on is located at http://www.havenotband.com/index.php Hello, I'm using a 'slide-out' navigation on an intranet, however I need it to go to a 3rd level and for the life of me I cannot get the combonation for expanding the list to 3 levels. Here is a 'demo' of what I'm trying to do, if you go to Office support, and resources it needs to come out when you hover. DEMO *This site was designed with IE 6.0 in mind. Code: /*Navigational CSS*/
#navigation ul
{
position: absolute;
margin: 0;
padding: 0;
list-style: none;
width: 185px; /* Width of Menu Items */
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-family:"trebuchet MS", Garamond, arial;
}
#navigation li
{
position: relative;
}
#navigation a
{
display: block;
}
#navigation li ul
{
left: 185px;
top: -0px;
display: none;
}
#navigation ul li a, #navigation li a
{
display: block;
text-decoration: none;
color: #fff;
background-color: #0F2344;
padding: 3px;
font-family:"trebuchet MS", Garamond, arial;
}
#navigation li
{
position: relative;
z-index: 10;
}
#navigation li ul li
{
position: relative;
z-index: 15;
}
#navigation ul li a:hover, #navigation li a:hover
{
color: #000;
background: #467BB4;
}
#navigation li ul li a
{
padding: 2px 5px;
}
#navigation li:hover ul, #navigation li.over ul
{
display: block;
}
Thanks for the assistance.. |
|||||||