|
CSS - Using Css For An Expanding Menu, Better Than Javascript?
Having read some of the posts in this forum, plus some other websites. With the over-lay capability of divisions could they be used for an expanding menu to show more links?
how about positioning, would it be relative to the menu it just came from? would each menu be there but turned off by using: visability:hidden; ? would this menu be possible? Normal View:- home area 1 area 2 area 3 area 51 When Hover over area 51:- home area area2 area 3 area 51 vessel technology morgue artifacts Similar TutorialsI'm trying to create an expanding menu using CSS and no Javascript. So far, it works only sometimes in IE, and only works in FF with the mouse button is pressed down (If I let go of the mouse button, it disappears). Can anyone suggest any fixes on what I should do to get it working properly. Thanks. So far what I have is this: Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel=stylesheet href="dd.css" type="text/css"> <title>Page title</title> </head> <body> <div id="links"> <a href="#">Links<span><br> Sublink 1<br> Sublink 2<br> </span></a> </div> <div id="links2"> <a href="#">Links 2<span><br> Sublink 3<br> Sublink 4<br> </span></a> </div> </body> </html> Quote: My CSS looks like this: div#links a span {display:none;} div#links a:active span {display:block; font:10px Verdana, sans-serif; } div#links2 a span {display:none;} div#links2 a:active span {display:block; font:10px Verdana, sans-serif; } I'm having a serious brain fart here...I must have come across this issue a million times before but I guess I haven't thought about it for so long, that I'm at a loss.... Very simply, I want to have a horizontal menu using text (ie not images) that will fill to fit the width of the page. Now I'd want to make there be a min-width and I can do that, but there's got to be a way to have the padding between the items adjust depending on how wide the browser is, right? And I should be able to do this with CSS and not have to use tables right? In other words, the width of the individual menu items will remain the same, but in a browser that's say 800px wide the space between the first item will be very near the left side of the page, and the last item will be very near the right side of the page and the items will be spaced evenly between them. But if the page is 1200px wide, the first and last items will still be very left and very right, but the spacing in between the rest of them will be bigger so that it fills the page width. ?????????/ Hello, I started off trying to find a content box that expands depending on screen res because the last one I made would break in the middle if the users screen res was over 1600px wide. This box worked great with the screen res but now I'm trying to put content in it and my content is not expanding the box down. Instead of pushing the box lower and forcing a scroll bar. The content keeps going down past the bottom of the box and makes a scroll bar. Any idea how I can make the box expand with my content? here is a link to my test page. http://www.gamerunion.com/test.html My css code. Code:
div#case {
position:absolute;
z-index:1;
top:200px;
left:50px;
bottom:50px;
right:50px;
background:url(/assets/images/tile.png) repeat;
}
div#tlcorner span, div#trcorner span, div#blcorner span, div#brcorner span, div#lftile span, div#rttile span, div#tptile span, div#btmtile span {
width:0;
height:0;
overflow:hidden;
display:block;
}
div#tlcorner {
position:absolute;
z-index:10;
top:0;
left:0;
background:url(/assets/images/corners.png) -369px 0 no-repeat;
width:123px;
height:123px;
}
div#trcorner {
position:absolute;
z-index:10;
top:0;
right:0;
background:url(/assets/images/corners.png) -246px 0 no-repeat;
width:123px;
height:123px;
}
div#blcorner {
position:absolute;
z-index:10;
bottom:0;
left:0;
background:url(/assets/images/corners.png) 0 0 no-repeat;
width:123px;
height:123px;
}
div#brcorner {
position:absolute;
z-index:10;
bottom:0;
right:0;
background:url(/assets/images/corners.png) -123px 0 no-repeat;
width:123px;
height:123px;
}
div#lftile {
position:absolute;
z-index:5;
top:0;
left:0;
bottom:0;
background:url(/assets/images/lr.png) -20px 0 repeat-y;
width:20px;
}
div#rttile {
position:absolute;
z-index:5;
top:0;
right:0;
bottom:0;
background:url(/assets/images/lr.png) 0 0 repeat-y;
width:20px;
}
div#tptile {
position:absolute;
z-index:5;
top:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 0 repeat-x;
height:123px;
}
div#btmtile {
position:absolute;
z-index:5;
bottom:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 -123px repeat-x;
height:123px;
}
div#case div.content {
position:absolute;
z-index:10;
width:100%;
min-height:400px;
overflow:hidden;
}
div#case div.content h1 {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:16px;
color:#000000;
margin:5px 0;
padding:100px 0 0 100px;
text-align:left;
text-transform:capitalize;
}
div#case div.content p {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:14px;
color:#000000;
text-align:justify;
padding:0 100px;
}
HTML Code:
<body>
<div id="header">
<h1 class="small">GamerUnion</h1>
<h2 class="small">For Gaming Addicts by Gaming Addicts.</h2>
</div>
<div id="case">
<div id="tlcorner"><span>top left corner</span></div>
<div id="trcorner"><span>top right corner</span></div>
<div id="blcorner"><span>bottom left corner</span></div>
<div id="brcorner"><span>bottom right corner</span></div>
<div id="tptile"><span>top side tile</span></div>
<div id="lftile"><span>left side tile</span></div>
<div id="rttile"><span>right side tile</span></div>
<div id="btmtile"><span>bottom side tile</span></div>
<div class="content">
<div id="nav">
<ul>
<li><a href="/" class="current">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/forum/">Forum</a></li>
<li><a href="/resources.html">Resources</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<h1>Gamerunion</h1>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
</div>
</div>
</body>
I'm a CSS newbie, and I found a dropdown menu tutorial that required I use Javascript. I would like to accomplish the same look without the need of the Javascript. I don't know how to do it. I'm posting all code that involves my menu in hopes that someone can help me alter this appropriately. Thanks! The following are in the Head: Code: /* Menu */
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display: block;
width: 16em;
text-decoration: none;
font: 23px Georgia, "Times New Roman", Times, serif;
color: #C0C0C0;
}
#nav li { /* all list items */
float: left;
width: 16em; /* width needed for Opera */
}
#nav li ul { /* second-level lists */
position: absolute;
background: grey;
width: 16em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
Code: <script type="text/javascript"><!--//--><![CDATA[//><!--
#sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
The following is in the Body: Code: <ul id="nav">
<li><a href="%LINK%">Front Page</a></li>
<li><a href="%LINK%">Who We Are</a></li>
<li><a href="%LINK%">Where Are We</a>
<ul>
<li><a href="%LINK%">Europe</a></li>
<li><a href="%LINK%">North America</a></li>
<li><a href="%LINK%">Rest of the World</a></li>
</ul>
</li>
<li><a href="%LINK%">Clients</a>
<ul>
<li><a href="%LINK%">Client 1</a></li>
<li><a href="%LINK%">Client 2</a></li>
<li><a href="%LINK%">Client 3</a></li>
<li><a href="%LINK%">Client 4</a></li>
<li><a href="%LINK%">Client 5</a></li>
<li><a href="%LINK%">Client 6</a></li>
</ul>
</li>
<li><a href="%LINK%">Links</a></li>
<li><a href="%LINK%">Exit</a></li>
My javascript pop-up menu is appearing behind my divs. Any idea how to fix this? http://absolute-design.net/websites/GISD/test2.html Thanks! it's best to get a visual of this one: www.viportals.com i'm talking about the buttons under the top banner. if you hover "Games", a drop down list appears. there is a 1pixel line between the "Games" button and its dropdown list (when you hover the "Games" button) which i want to get rid of, but can't. in IE, there are many horrible problems, probably due to the display:inline-block of the li a. the buttons are too tall and hang down below the bottom line of the horizontal bar, and the dropdown menu appears beside the "Games" button. i tried css Code: Original - css Code #sddm ul li a { padding-top: 0; padding-bottom: 0; margin-top:0; margin-bottom:0; }
#sddm ul li a {
in my separate ie css file, but its the same here is all the code if you need it to gain a better understanding (css, html, and js). css Code: Original - css Code /* DROP-DOWN NAVIGATION MENU */ #sddm { margin: 0; padding: 0; z-index: 30; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; } #sddm li a { display: inline-block; text-decoration: none; color:#495B20; background-color:#BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li a:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; text-decoration:none; } #sddm li:hover div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; } #sddm li div:hover a{ background: #495B20; color: #BAD36B; } #sddm li div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; border:none; font: 11px arial; } #sddm li div a:hover { text-shadow:#000; text-decoration:underline; border:none; } /* DROP-DOWN NAVIGATION MENU */ html Code: Original - html Code <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'> Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'> Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } echo " </div> </li> <li> <a href='".get_users_link()."'> Members</a> </li> <li> <a href='".get_news_link()."'> News</a> </li> <li> <a href='".get_submit_link()."'> Submit</a> </li> <li> <a href='".get_links_link()."'> Links</a> </li> <li> <a href='".get_rules_link()."'> Rules</a> </li> <li> <a href='".get_faq_link()."'> FAQ</a> </li> <li> <a href='".get_contact_link()."'> Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div>
<div id='navbar'>
<ul id="sddm">
<?php
echo "
<li>
<a href='".get_home_link()."'>
Home</a>
</li>
<li>
<a href='".get_category_link("name=all&page=1")."'";
?>
onmouseover='mopen("m1")' <?php echo "
onmouseout='mclosetime()'>
Games</a>
<div id='m1'
onmouseover='mcancelclosetime()'
onmouseout='mclosetime()'>
";
$categories = get_categories("htmlize=true&order=order&sort=ASC");
foreach ($categories as $category) {
$link=get_category_link("name="._sp($category['name'])."&page=1");
echo "<a href='".$link."'>".$category['name'];
$category['gamenum'] = count(get_games("thecat="._sp($category['name'])));
echo " (".$category['gamenum'].")";
echo "</a>";
}
echo "
</div>
</li>
<li>
<a href='".get_users_link()."'>
Members</a>
</li>
<li>
<a href='".get_news_link()."'>
News</a>
</li>
<li>
<a href='".get_submit_link()."'>
Submit</a>
</li>
<li>
<a href='".get_links_link()."'>
Links</a>
</li>
<li>
<a href='".get_rules_link()."'>
Rules</a>
</li>
<li>
<a href='".get_faq_link()."'>
FAQ</a>
</li>
<li>
<a href='".get_contact_link()."'>
Contact</a>
</li>";
?>
</ul>
<div style="clear:both"></div>
</div>
Hi. Three issues with this menu - I've been trying to get a horizontal hover/nested list to work where the submenus are displayed inline underneath the main menu. 1. I've got the arrangement fairly close in FF, but in IE the top level items are jumping around all over the place on hover. 2. The javascript came from alsacreations, and seems to work pretty easily, but the submenus fail to disappear on rollOut unless you are going to another of the menu items. Any ideas? 3. Do you think there is anyway of leaving the top level links in their "active/hover" state when the mouse has moved to the submenus? So the coloured background that appears on hover stays there whilst hovering over the submenus? I've isolated the xhtml, styles and script into a page (it's a rework of a current page and is pretty incomprehensible in-situ!) at http://www.prioritypie.f2s.com/KSAV6/menuTest.html. Cheers for any advice. And I forgot to ask what the issue is with IE and transparent borders - they seem to appear black and of variable width! You can see the problem he BrianRoyer.com The google adsense ad is expanding past the container. Here is my style.css for troubleshooting: Code: html, body {
background: #a0a0a0 url(images/main_bg.gif) center top repeat-x;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}
a:link {
color: #FFFFFF;
text-decoration: underline;
}
a:visited {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
#container {
width: 703px;
margin: 0 auto;
background: #068add url('images/content_bg.gif');
border-left: 5px solid #cdcdcd;
border-right: 5px solid #cdcdcd;
border-bottom: 5px solid #cdcdcd;
}
#content em.u {
text-decoration: underline;
font-style: normal;
}
#top {
padding: 0;
border: 0;
}
#top img {
border: 0;
}
#top h1 {
padding: 0;
margin: 0;
}
#leftnav {
float: left;
width: 160px;
margin: 0;
padding: .25em 0 0 .75em;
}
#rightnav {
float: right;
width: 125px;
margin: 0;
text-align: center;
padding: 1em 1em 0 0;
}
#rightnav img {
margin: 0;
border: 0;
text-align: center;
padding: 1em 0 0 0;
}
#content {
margin-left: 200px;
margin-right: 200px;
padding: 1em 0 0 0;
width: 290px;
}
#content img.left {
margin: 5px;
border: 1px solid #000000;
float: left;
}
#content img.right {
margin: 5px;
border: 1px solid #000000;
float: right;
}
#leftnav img {
margin: 0;
border: 0;
}
#google-search img {
border: 0;
padding: 1em;
}
#footer {
width: 699px;
padding-top: 1em;
margin: 0 auto;
background: #068add url(images/footer_bg.gif) center bottom repeat-x;
}
#leftnav p, #content p {
margin: 0 0 1em 0;
text-align: justify;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
line-height: 130%;
}
#rightnav p {
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: Verdana;
font-size: 10px;
}
#leftnav hr, #content hr, #rightnav hr {
color: #FFFFFF;
height: 1px;
}
#content h2 {
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}
#content h2.center {
text-align: center;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}
#leftnav h2, #rightnav h2 {
text-align: center;
margin: 0;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}
#content h6, #leftnav h6, #rightnav h6 {
text-align: center;
margin: 0;
padding: 1em;
color: #FFFFFF;
font-family: Verdana;
font-size: 8px;
}
#navcontainer ul
{
list-style-type: none;
text-align: left;
padding: 0 0 0 1.25em;
margin: 0;
}
#navcontainer ul li a
{
background: transparent url(images/list_off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 10px Verdana;
text-decoration: none;
color: #FFF;
}
#navcontainer ul li a:hover
{
background: transparent url(images/list_on.gif) left center no-repeat;
color: black;
}
#navcontainer ul li a#current
{
background: transparent url(images/list_active.gif) left center no-repeat;
color: #666;
}
And here is snippet of code where the adsense ad is located: Code: <div id="container">
<div id="top">
<? include("ssi/header.inc"); ?>
</div>
<div id="leftnav">
<? include("ssi/leftnav.inc"); ?>
</div>
<div id="rightnav">
<? include("ssi/rightnav.inc"); ?>
</div>
<div id="content">
ad = rightnav.inc Hey guys, I've got a two column layout, and I want both columns to be the same height inside the wrapper. Ussually when I do this sort of thing I have a repeating background image or something so it makes it appear they are both the same height, except this template is using rounded corners, so a repeating background won't work. Code: #wrapper{
width:962px;
margin: 25px auto;
}
#mainContent{
width:735px;
background-color: #F4FEFE;
padding:0px;
border:0px;
float:left;
}
#rightColumn{
background-color: #F4FEFE;
width:207px;
height:100%;
min-height:100%;
float:left;
margin-left:20px;
}
Click here to see what I'm talking about... I want that right column to match the height of the main content div. Would this only be possible using JavaScript or is there a CSS solution? going bonkers, I have tried everything to find out why on earth the background goes all the way to the right when this page is viewed in IE.. Black Background Not Stoping!! Hi all, I have a site where I have several divs that stack on top of each other for layout purposes and they fill the entire width of the screen. In the div that contains the content, I'm finding a rare case where a table appears that's so wide, it is off the edge of the content element. I wanted to do overflow:auto so that it wouldn't mess up the layout but the customer wants the layout to expand with the content. Since all these divs sit on top of each, they aren't really interacting with the div that has the content in it. Is the only way to make those expand to use JavaScript to detect the width and adjust on the fly or is there a better way to do it? I'll be happy to supply some code if you all need me to but its a lot so I'll hold off on that for now. I have started creating a new DIV layout for my website but can't seem to get it to function correctly. I finally got the DIVs to expand with whatever content is in them, but now they will only span to the height of the window and hide the rest of the content instead of expanding further and just making the IE window scroll. Maybe one of you guys can help me out? Here is the test page: well apparently I can't post the url, so I guess I'll just "say" it. juicyart dot net / test.html Hi, I am trying to make a website for a friend that scales to fit most monitors. The website is very image heavy and I have a navigation bar on the left side that lines up with the background on the right. I haven't made a webpage for awhile so I don't know a lot about CSS. This is what I have so far. It almost works, but the background on the right will not expand to fit the full div, only goes up to the content that I put inside the Div. The background also doesn't appear to shrink when I scale the window size. HTML CODE: Code: <head> <link rel="stylesheet" href="style.css" type="text/css"/> <title>Test Page</title> </head> <body> <div id="sample-container" align="center"> <div id="header"> <img src="images/header.jpg" width="1647" height="147" / id="headerbar"></div> <div id="nav"> <img src="images/navbar.jpg" width="413" height="776" / id="navbar"></div> <div id="content"> <img src="../../../Pictures/Misc/101_0138.JPG" width="527" height="428" /> </div> <div id="footer"></div> </div> </body> </html> CSS CODE: Code: #header
{
height: auto;
background-color: #666;
}
#nav
{
float: left;
width: 25%;
height: auto;
background-color: #999;
margin-bottom: 10px;
}
#content
{
float: left;
width: 75%;
height: auto;
background: url(images/mountain.jpg);
background-repeat: no-repeat;
margin-bottom: 10px;
}
#footer
{
clear: both;
height: 50px;
background-color: #666;
margin-bottom: 10px;
}
#headerbar
{
height:auto;
width:100%;
}
#navbar
{
height:auto;
width:100%;
}
If anyone knows a way to expand the background to fill the div and scale down when the div scales is size, that would be great. I was also thinking that maybe I could put the the navigation bar and the background image on the page and not as an background. Put those both in a div and have a floating div on the right aligned over the top of the background that contains the page content. If anyone could give any help with a solution it would be appreciated. Thanks. Hello. Trying to construct a page with vertical expansion on both of two nested DIVs. Left column is primarily text which varies in length. Right column is a navigation/contact panel that is mostly fixed height, but want ability to drop in objects and expand vertically on some pages. I have tried to background image in container DIV, but I am still getting the content breaking out of the bottom of the DIV. Any other approaches? Min-height (could not get that to work either). Ideally I would like for these to have the same height. Not shading, so it doesn't need to be exact. Here's a sample of code (w/o all the junk). hi, Im making a site, and i decided to use CSS instead of tables. I have used basic CSS before, but it gets abit harder when i start making boxes etc. Here is my code so far - layout.css - (one that gets included on each page) Code: @import "style.css";
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
#shoutbox {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#banner, #footer {
background:#fff;
height:40px;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
#footer {
background:#fff;
height:40px;
border-bottom:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
#banner h1 {
font-size:16px;
padding:10px 10px 0px 10px;
margin:0px;
}
#shoutbox, #rightcontent p {
font-size:10px
}
style.css - text formatting etc. Code: body {
font: 12px/1.2 Tahoma;
background:#ddd;
padding:0px;
margin:0px;
}
a {
text-decoration:none;
font-weight:bold;
color:#c00;
}
pre {
font-size:11px;
color:blue;
}
ol {
margin-right:40px;
}
li {
margin-bottom:10px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
it produces a good layout, with a header, 3 coloums and a footer. whoever, the boxes expand at different rates and the footer doesnt move down. the header also doesnt expand. i know how i can fix this, but i dont know how to fix it without making it so that its locked at a resolution. i would like the site to exapand as the window is made larger. here is an image of what i get - and this is what i am aiming to acheive - as you can see, i want all the boxes to be the same length, which is defined by the size of the largest box. also, i want to create 2 or more boxes on the left, only the bottom of which gets made longer. on the first image you cannot see the extra box because it is covered by the other one :-/ i would be greatful for any help you guys can provide me thanks, dynamyt ive been at this for a while now. i have a navleft.gif, navbody.gif, and navright.gif. what i want to do is make an expandable nav bar with the body repeating on the x axis. every attempt ive made doesnt work. im still fairly new to css. should i have a <div id="nav"> and within this div put a another div with id=navleft and another with navright? no idea how to go about this. any help would be appreciated. Hi there I have a container DIV that nests 4 DIVs one on top of the next (logo, navigation, content and footer, all the same widths). If there is a single paragraph (or small amount) of text in the content DIV of the page, the page looks fine. However, if there is a large amount of text in the content DIV of the page, the width gets pushed out slightly. IE5 is fine. Firefox and Opera are the problem. Note: I have left the height of the content DIV blank as it will be of varied size. When I set a height of say, 500px, the page looks fine (but because a background colour is needed for the DIV, it doesn't appear as I intended it to). Any ideas to why this is happening? Thanks in advance :-) -Solange. I think that this is something really basic but I just haven't been able to put my finger on the problem. Can someone please point me in the right direction? In IE 6 the cell background (as defined in CSS) or the table cell size is not correct, but it looks fine in FF. The test page is: http://www.kdays.com/box/kerrin.htm Hi guys, I'm trying to sort out the top level menu. It's supposed to allow a hover effect, where a sub menu then appears. This secondary nav then spans across in an inline fashion. The link to the site is: http://yoursitetest.co.uk/index2.php However it seems to have some kind of 'width' set on the parent which the sub menu cannot expand past. This is some of the code i think is relevant: (Rest of nav cut due to repeating nature) Code: <ul id="navigation">
<li class="main" style="position:absolute; font-size:11px; z-index:90; left:0px;"><a href="#" class="co">Home</a>
<ul style="display:none; z-index:100; height:28px;">
<li style="background-image:url(images/sm-l.png); background-repeat:no-repeat; width:15px; height:30px;"></li>
<li><a href="#" style="background-color:#EEE;">asa</a></li>
<li><a href="#" style="background-color:#EEE;">aa</a></li>
<li><a href="#" style="background-color:#EEE;">aa</a></li>
<li><a href="#" style="background-color:#EEE;">aa</a></li>
<li><a href="#" style="background-color:#EEE;">aa</a></li>
<li><a href="#" style="background-color:#EEE;">aa</a></li>
<li><a href="#" style="background-color:#EEE;">aa</a></li>
<li><a href="#" style="background-color:#EEE;">aa</a></li>
<li style="background-image:url(images/sm-r.png); background-repeat:no-repeat; width:15px; height:30px;"></li>
</ul>
</li>
</ul>
CSS: Code: ul#navigation li.main {
display:inline-block;
list-style:none;
position:relative;
background-image:url(../images/tab_off.png);
background-repeat:none;
width:109px;
height:8px;
padding:10px;
}
ul#navigation li.main a {
color:#FFF;
}
ul#navigation li.main:hover {
background-image:url(../images/tab_on.png);
background-repeat:none;
}
ul#navigation li ul {
position:absolute;
left:-50px;
top:20px;
}
ul#navigation li ul li {
display:inline-block;
list-style:none;
}
Hope someone can help, Regards, Joe. |
|||||||