I'm trying to put 2 logos under the banner on the left but I do not want the layer where the logos reside to have the same properties as the banner and menu(since they are within the same layer ID(div#leftcolumn). Basically, I do not want the new layer to have the background similar to the above menu has when I put the logos in. IF I place the new div within the div#leftcolumn tags, the logos will have the beige background I do not want. IF I place the new layer OUTSIDE of the div#leftcolumn tags, the new layer appears to the right of the left column, even if I set a z value of 10, which the left column has it set at in the css file. Page in question is HERE What I'm trying to achieve is HERE CSS code for the page: div#wrapper {position:relative; margin:0 auto; width:900px; height:100%; background:white; /*border:solid 1px #69C;*/ height:100%; overflow:visible;} div#banners { position:relative; width:100%; background:url(../images/head_bg.jpg) repeat-x bottom;} div#topads {height: 55px; background: #369;} div#topnav { position:relative; height:30px; top: 0;} div#topnav ul {position: absolute; margin-left:290px;} div#topnav a {position:absolute;padding-top:10px;display:block ;height:30px; text-align:center; font-size:1.2em; font-weight:bold;letter-spacing:0em; text-indent:-20px; font-variant:small-caps;} div#topnav a:hover {color:black;} div#topnav li.Home a{width:130px; background:url(../images/tab_s.gif) no-repeat; top:0px; left:0px; z-index:100;} div#topnav li.Products a{width:130px; background:url(../images/tab_s.gif) no-repeat ;top:0px; left:110px; z-index:90;} div#topnav li.Shop a{width:130px;background:url(../images/tab_s.gif) no-repeat; top:0px; left:219px; z-index:80;} div#topnav li.Specials a{width:180px;background:url(../images/tab_w.gif) no-repeat; top:0px; left:328px; z-index:70;} div#topnav li.Contact a{width:130px;background:url(../images/tab-s.gif) no-repeat; top:0px; left:480px; z-index:60;} div#topnav li.Home a:hover{background:url(../images/tab_s-active.gif) no-repeat; z-index:1000; direction:ltr;} div#topnav li.Products a:hover{background:url(../images/tab_s-active.gif) no-repeat; z-index:1000; direction:ltr;} div#topnav li.Shop a:hover{background:url(../images/tab_s-active.gif) no-repeat; z-index:1000; direction:ltr;} div#topnav li.Specials a:hover{background:url(../images/tab_w-active.gif) no-repeat; z-index:1000; direction:ltr;} div#topnav li.Contact a:hover{background:url(../images/tab-s-active.gif) no-repeat; z-index:1000; direction:ltr;} div#leftcolumn { z-index:10;float:left; position:relative; width:180px; margin:2px 0 0 3px;} div#leftcolumn li {background:url(../images/trans_bg.gif) repeat; } div#leftcolumn a {display: block; color: #2A3FAA; margin:2px; padding:3px 1px 3px 15px; border:solid 1px #AA5F00; background: #E6E6D0; font-size:.9em;} div#leftcolumn li.hassub a{background: url(../images/hassub.gif) no-repeat right #E6E6D0;background-position: 95% 50%;} div#leftcolumn li.hassub a:hover{background: url(../images/hassub-active.gif) no-repeat right #E6E6D0;background-position: 95% 50%;} div#leftcolumn li.link a{background-image:none;} div#leftcolumn li.link a:hover{background-image:none;} div#leftcolumn a:hover {background:#F4F4EA; color:red;} div#middlecolumn {z-index:1;float:left; position:relative;width:532px; margin:2px 0 0 1px;} div#splash {margin-left:5px;height:auto; width:520px;} span.content {display:none;} div#middlecolumn p {margin-left:5px;width:520px; } div#middlecolumn a { color: blue; text-decoration : none;} div#middlecolumn a:hover { color: red;} div#rightcolumn {float:right; position:relative; width:180px;margin:2px 3px 0 0;} div#rightcolumn img {margin:10px 0 0 10px; max-width:160px; text-align:center;} div#footnav {clear:both;width:100%; background:url(../images/menu_bg.png) repeat-x; height:20px;text-align:center; margin:0 auto; width:900px;} div#footnav a { font-size:.9em; margin:2px 10px 0 10px;} div#footer {position:relative; margin: 0px auto;text-align:center; font-size:.9em; width:900px;height:28px; background: url(../images/footer_bg.png) repeat-x; color:white;} div#footer p {padding-top:1px;line-height:1em;} h2 {border:solid 1px black; margin:1px; font-variant:small-caps; background:#369; font-size:1.1em; color:white; letter-spacing:.05em; font-weight:normal; padding:2px 5px 2px 5px;} div#leftcolumn .subnav {position:absolute;margin:-24px 0 0 180px; width:140px;} div#leftcolumn ul.subnav {display:none;} div#leftcolumn ul.nav_main li:hover ul.subnav {display:block;} div#leftcolumn .subsubnav {position:absolute;margin:-24px 0 0 140px; width:140px;} div#leftcolumn ul.subsubnav {display:none;} div#leftcolumn ul.subnav li:hover ul {display:block;} div#extradiv {clear:both;background-image:url(../images/tab-s-active.gif);width:1px;height:1px;} div#extradiv2 {background-image:url(../images/tab-w-active.gif);width:1px;height:1px;} .clear {clear:both;} object.flash {position:relative;left:0px;} ul.nav_main {display:none;} Code (markup): I appreciate all the help I can get, I'm getting very rusty at CSS and need to get this done; can't figure it out Cheers.
Is it fixed yet? Coz i don't see the beige background in question, if its not then put the logos on the left sidebar where you want to put them first & them lets see what is causing the problem. Its kinda hard to guess what would cause the problem without seeing it
you can't see the background because the end result image is photoshoped to illustrate what I'm trying to achieve, but regadless of that, I've positioned the 2 logos under the left menu..Same link as the one posted earlier What's causing the difficulties is the CSS assigned to the left sidebar that automatically assigns to any text or image placed with in that div's tags. I tried making a new class and a new div all together but no worky. Thanks for chiming in!
Ah now i see the problem. The culprit is this Which basically gives the border & background color to any link inside the left column, so now i guess you have to REMOVE border, background from the above selector and apply to links of selective div/ul classes only. Like ul.MenuBarVertical a { border:solid 1px #AA5F00; background: #E6E6D0; }
Well, I've been away from DP for a while, but if I were to take a while guess given that you've got 62 validation errors meaning you don't have HTML, you have gibberish, a complete lack of any attempt at formatting the CSS in a legible fashion, the complete over the top nonsense classitus and divvitus... You probably scared away most potential responders. Here's a tip - there is NO REASON To EVER do this: <li class="link"><a href="http://www.blindsandshutters.ca" target="_blank" class="style1">Shop Online</a></li> <li class="link"><a href="specials.htm">:: Monthly Specials ::</a></li> <li class="link"><a href="about.htm" class="style2">About Us</a></li> <li class="link"><a href="contact.htm">Contact Us</a></li> <li class="link"><a href="tos.htm">Terms Of Use</a></li> <li class="link"><a href="privacy.htm">Privacy Policy</a></li> <li class="link"><a href="pdf/KINGSWAY%20ARTICLE.pdf">In The News</a></li> Code (markup): If every blasted one of them is getting the same styling, hook it off the parent! ... and like many sites people ask for help for with these types of issues, I'm seeing five different appearances in six browsers, and given there's no fallback for the flash header (**** flashtard crap) I'm not even certain where exactly you want to add your elements... Like many other sites people ask for help on, I think it would be faster for you to throw it away and start over clean.
Dude, in all seriousness, you really need to chill because your post didn't make any sense at all and you're not helping anybody; you're probably better off DP. Also, have you heard of sentences and punctuation? What about plain English?