The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Floats / z-index / general coding questions..., Floats / z-index / general coding questions...
beth Chapin
post Nov 7 2007, 05:54 AM
Post #1





Group: Members
Posts: 3
Joined: 14-October 07
Member No.: 4,055
Hello smile.gif My name is Beth.

I was given the difficult task of creating a website for a company I work very close with and I'm running into all sorts of coding problems. I know these can't be that insane but I've been spinning my wheels on these issues for 2 weeks now and I'm almost out of time.

I know it's not much but I will paypal $50 to the person that solves my problem (that is if its not against board policy) i just NEED help so bad!

Here is where my demo page is for the new website. It's one page, no links to anything else...

URL: http://www.srh.com/taxgirl/index.htm

The page is supposed to look kinda link this...

IPB Image

The problems are:

1.) The drop down navigation has issues displaying over the flash animation sometimes flashing above it but it seems like it naturally wants to be below it.

2.) When you hoover over the navigation the buttons disappear, this might be due to the same problem as #1 but I don't know... :confused:

3.) the two columns need to fill down as either one has content. what i mean by this is that if the column on the right has 800pxs of content and the left only has 300px it should still extend 100% with the growth of the right column.



Any advice anyone has on this kind of layout I would appreciate massively.. but honestly, I'm so out of time I'd absolutely be ecstatic over a solution. Like I said, I have $50 to offer for help. Please look into your hearts and minds to help!


Thank you so so much.

~beth.

Code details as follows:

http://www.srh.com/taxgirl/index.htm
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>SRH Clothing</title>
<style type="text/css">
    body,
    html {
        margin:0;
        padding:0;
    }
    body {
    min-width:760px;
    background-color: #252525;
    background-image:  url(images2/required/bg.jpg);
    }
    #wrap {
        margin:0 auto;
        width:760px;
    }
    #header {
    color: #FFFFFF;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    #header h1 {
        margin:0;
    }
    #nav {
    padding-left: 0px;
            margin:0;
            z-index: 2;
    }
        #flashtop {
    padding-left: 0px;
    margin:0;
    width:760px;
    background-image:url(images2/required/layout/contentbg.png);
    z-index: 1;
    }
    #picnav {
        padding-left: 0px;
    margin:0;
    width:760px;
    background-image:url(images2/required/layout/contentbg.png);
     }    
    .newstext {
    padding-left: 7px;
    }
    .viddes {
    padding-left: 25px;
    text-align:left;
    }
    .video {
    background-image: url(images2/required/layout/video-bg.jpg);
    background-repeat: no-repeat;
    height: 188px;
    width: 249px;
text-align: center;
padding-top: 6px;
    overflow: hidden;
    visibility: visible;
}
    #nav ul{
        margin:0;
        padding:0;
        list-style: none;
    }
    #nav li{
        display:inline;
        margin:0;
        padding:0;
    }
    #main {
    float:right;
    width:472px;
    background-image: url(images2/required/layout/contentbg.png);
    background-position:right;
    }
    #main h2, #main h3, #main p {
        padding:0;
    }
    #headlines {
        overflow: hidden;
    position: relative;
    visibility: visible;
    z-index: 2;
    height: 657px;
    top: 0px;
    width: 283px;
    background-image:url(images2/required/srhindex/contents/headlines-div.jpg);
    }
    #headlinecontent {
     width:222px;
     height:451px;
     z-index: 1;
     left: 33px;
     top: 66px;
     position: relative;
     }
     #headlinecontent a:link {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}
#headlinecontent a:visited {
    text-decoration: none;
    color: #660000;
        font-weight: bold;
}
#headlinecontent a:hover {
    color: #CC0000;
        font-weight: bold;
}
#headlinecontent a:active {
    text-decoration: none;
    color: #999999;
        font-weight: bold;
}
    #sidebar {
    float:left;
    padding-left: 5px;
    width:283px;
    background-image: url(images2/required/layout/contentbg.png);
    background-position:left;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    }
    #sidebar ul {
        margin-bottom:0;
    }
    #sidebar h3, #sidebar p {
        padding:0 0 0 0;
    }
    #footer {
        clear:both;
        width: 760px;
    }
    #footer p {
        padding:5px;
        margin:0;
    }
    #footer a:link {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}
#footer a:visited {
    text-decoration: none;
    color: #CCCCCC;
        font-weight: bold;
    text-transform: uppercase;
}
#footer a:hover {
    color: #CC0000;
        font-weight: bold;
    text-transform: uppercase;
}
#footer a:active {
    text-decoration: none;
    color: #999999;
        font-weight: bold;
    text-transform: uppercase;
}
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 12px;
}
    #top2 {
    top: 38px;
}
    </style>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
cssdropdownRoot = document.getElementById("cssdropdown");
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
node = cssdropdownRoot.childNodes[x];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startList)
else
window.onload=startList;/--><!]]></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/srhnav.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
  <div id="header"> <img src="images2/required/layout/top.png" alt="Logo" width="762" height="96" hspace="0" vspace="0"> </div>
  <div id="nav">
<ul id="cssdropdown">
<li class="mainitems">
<img src="images2/required/layout/left-link-side.png" border="0" alt="SRH" width="5" height="23">
</li>
<li class="mainitems">
<div class="tophome"><a href="home.htm"><img src="images2/required/layout/link-home.png" alt="Alternative text" width="122" height="23"></a></div>
<ul class="subuls" style="width: 122px">
<li><a href="">Site Map</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</li>

<li class="mainitems">
<div class="topteam"><a href="team.htm"><img src="images2/required/layout/link-team.png" alt="SRH Team" width="127" height="23" border="0"></a></div>
<ul class="subuls" style="width: 127px">
<li><a href="http://surf.srh.com">Surf</a></li>
<li><a href="http://fmx.srh.com">FMX</a></li>
<li><a href="http://mx.srh.com">MX</a></li>
<li><a href="http://bmx.srh.com">BMX</a></li>
<li><a href="http://snow.srh.com">Snow</a></li>
<li><a href="http://wwa.srh.com">WWA</a></li>
</ul>
</li>

<li class="mainitems">
<div class="topmusic"><a href="http://music.srh.com"><img src="images2/required/layout/link-music.png" alt="SRH Music" width="129" height="23" border="0"></a></div>
<ul class="subuls" style="width: 129px">
<li><a href="">Artists</a></li>
<li><a href="">Tours</a></li>
<li><a href="">Videos</a></li>
</ul>
</li>

<li class="mainitems">
<div class="topshop"><a href="http://shop.srh.com"><img src="images2/required/layout/link-shop.png" width="105" border="0" alt="Shop SRH" height="23"></a></div>
<ul class="subuls" style="width: 105px">
<li><a href="">Mens</a></li>
<li><a href="">Womens</a></li>
<li><a href="">Youth</a></li>
<li><a href="">Accessories</a></li>
<li><a href="">What's New</a></li>
<li><a href="">Sale</a></li>
</ul>
</li>

<li class="mainitems">
<div class="toplifestyle"><a href="http://lifestyle.srh.com"><img src="images2/required/layout/link-lifestyle.png"  border="0" alt="SRH Lifestyle" width="145" height="23"></a></div>
<ul class="subuls" style="width: 145px">
<li><a href="">Daily Dose</a></li>
<li><a href="">Events</a></li>
<li><a href="">Photos</a></li>
<li><a href="">Links</a></li>
</ul>
</li>

<li class="mainitems">
<div class="topfindastore"><a href="#"><img src="images2/required/layout/link-findastore.png" border="0" alt="Find SRH at a Store Near You SRH Store Locator" width="122" height="23"></a></div>
<ul class="subuls" style="width: 122px">
<li><a href="">In the USA</a></li>
<li><a href="">Outside USA</a></li>
</ul>
</li>

<li class="mainitems">
<img src="images2/required/layout/right-link-side.png" border="0" alt="SRH" width="5" height="23">
</li>

</ul>
   </div>
  <div id="flashtop">
     <div align="center">
     <object
type="application/x-shockwave-flash" data="images2/demo/Flash-Sample.swf"
width="750" height="250">
<param name="movie" value="images2/demo/Flash-Sample.swf">
</object>    
    </div>
   </div>
  <div id="picnav">
     <div align="center"><img src="images2/required/srhindex/linkpic-a_team.jpg" width="151" height="202"><img src="images2/required/srhindex/linkpic-a_music.jpg" width="150" height="202"><img src="images2/required/srhindex/linkpic-a_shop.jpg" width="150" height="202"><img src="images2/required/srhindex/linkpic-a_lifestyle.jpg" width="150" height="202"><img src="images2/required/srhindex/linkpic-a_findastore.jpg" width="149" height="202"></div>
   </div>
  <div id="main"> <img src="images2/required/srhindex/contents/news_header.jpg">
     <div class="newstext"><a name="101107">OCTOBER 11, 2007</a> <img src="images2/demo/news1.jpg" width="200" height="244" hspace="10" align="right" class="newsimg">
      <p>> SweetAir- Nuff said, pretty sweet lil shot. Direct link to <br> SurfShot.</p>
      <p>> Clou9 from KMK- Youve been waiting...here it is...floatin <br> on Cloud9.</p>
      <p>> BigB New CD- The latest and greatest from the more to <br> hatest? That doesnt even make sense.</p>
      <p>Click here to read More<br> watch for the 3Shuv!</p>
      <p>> The SRH shoes got toasted!</p>
      <hr>
      <a name="101107">OCTOBER 11, 2007</a> <img src="images2/demo/news1.jpg" width="200" height="244" hspace="10" align="right" class="newsimg">
      <p>> SweetAir- Nuff said, pretty sweet lil shot. Direct link to <br> SurfShot.</p>
      <p>> Clou9 from KMK- Youve been waiting...here it is...floatin <br> on Cloud9.</p>
      <p>> BigB New CD- The latest and greatest from the more to <br> hatest? That doesnt even make sense.</p>
      <p>Click here to read More<br> watch for the 3Shuv!</p>
      <p>> The SRH shoes got toasted!</p>
      <hr>
      <a name="101107">OCTOBER 11, 2007</a> <img src="images2/demo/news1.jpg" width="200" height="244" hspace="10" align="right" class="newsimg">
      <p>> SweetAir- Nuff said, pretty sweet lil shot. Direct link to <br> SurfShot.</p>
      <p>> Clou9 from KMK- Youve been waiting...here it is...floatin <br> on Cloud9.</p>
      <p>> BigB New CD- The latest and greatest from the more to <br> hatest? That doesnt even make sense.</p>
      <p>Click here to read More<br> watch for the 3Shuv!</p>
      <p>> The SRH shoes got toasted!</p>
      <hr>
      <a name="101107">OCTOBER 11, 2007</a> <img src="images2/demo/news1.jpg" width="200" height="244" hspace="10" align="right" class="newsimg">
      <p>> SweetAir- Nuff said, pretty sweet lil shot. Direct link to <br> SurfShot.</p>
      <p>> Clou9 from KMK- Youve been waiting...here it is...floatin <br> on Cloud9.</p>
      <p>> BigB New CD- The latest and greatest from the more to <br> hatest? That doesnt even make sense.</p>
      <p>Click here to read More<br> watch for the 3Shuv!</p>
      <p>> The SRH shoes got toasted!</p>
    </div>
   </div>
  <div id="sidebar">
     <div id="headlines">
      <div id="headlinecontent" style="position:absolute;"><a href="#">> New SRH Surf Footy- Check out Rhinehart and Alessi, watch for the 3Shuv! </a>
         <p><a href="#">> Last Call for Shoes!- Last time you can purchase shoes online</a></p>
         <p><a href="#">> Livin Proof World Premier- KMK is premiering a new vid, check it out</a></p>
         <p><a href="#">> Get your sponsorship on- Lookin to grab some clothes for your skills? Click on the link</a></p>
         <p><a href="#">> El Surfo Newso- Im sorry I dont speak spanish</a></p>
         <p><a href="#">> How are things on the East Coast?- McHenry headin east, surfbound</a></p>
         <p><a href="#">> Costa Rica, the Rich Coast?- Rhinehart, livin the surf life</a></p>
         <p><a href="#">> Cabo Wabo or something like that- Hart photo oppin it in Cabo</a></p>
         <p><a href="#">> FMX News- The good, the bad and the broken </a><br> </p>
       </div>
    </div>
     <div align="center">
      <div class="video" align="center">
         <object width="213" height="175">
          <param name="movie" value="http://www.youtube.com/v/gxHByn_v-8U">
          <param name="wmode" value="transparent">
          <embed src="http://www.youtube.com/v/gxHByn_v-8U" type="application/x-shockwave-flash" wmode="transparent" width="213" height="175"></embed>
        </object>
       </div>
    </div>
     <div class="viddes"> <strong>ZACK PEACOCK</strong><br>
      Music by One Session </div>
     <div align="center">
      <div class="video" align="center">
         <object width="213" height="175">
          <param name="movie" value="http://www.youtube.com/v/ywtxm49OOEs">
          <param name="wmode" value="transparent">
          <embed src="http://www.youtube.com/v/ywtxm49OOEs" type="application/x-shockwave-flash" wmode="transparent" width="213" height="175"></embed>
        </object>
       </div>
    </div>
     <div class="viddes"> <strong>KOTTONMOUTH KINGS "FRIENDS"</strong><br>
      From the album <em>Koast II Koast </em></div>
     <div align="center">
      <div class="video" align="center">
         <object width="213" height="175">
          <param name="movie" value="http://www.youtube.com/v/OOPCfSJ-dEY">
          <param name="wmode" value="transparent">
          <embed src="http://www.youtube.com/v/OOPCfSJ-dEY" type="application/x-shockwave-flash" wmode="transparent" width="213" height="175"></embed>
        </object>
       </div>
    </div>
     <div class="viddes"> <strong>SCOTTY STEPHENS</strong><br>
      Music by Subnoize Souljaz feat. Twiztid</div>
   </div>
  <div id="footer"> <img src="images2/required/layout/content_bottom.png" width="760" height="15"> <br>
     <p align="center"><a href="#">Myspace</a>   <a href="#">Ebay</a>   <a href="#">Youtube</a>   <a href="#">Shipping & Returns</a>   <a href="#">Dealers</a>   <a href="#">Find a Store</a>   <a href="#">Employment</a></p>
     <p align="center">© Copyright 2007 SRH. All Rights Reserved</p>
   </div>
</div>
</body></html>



http://www.srh.com/taxgirl/css/srhnav.css

CODE
#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
        z-index: 2;
}

#cssdropdown li {
float: left;
position: relative;
    z-index: 2;
}

.mainitems{
margin: 0px;
    z-index: 2;
}

.mainitems a{
margin-left: 0px;
margin-right: 0px;
    z-index: 2;
text-decoration: none;
}

.subuls{
    display: none;
    width: 10em;
    position: absolute;
    top: 1.2em;
    left: 0;
    background-color: #252525;
    border: 1px solid #000000;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
            z-index: 2;
}

.subuls li{
width: 100%;
background-color: #000000;
    z-index: 2;
}

.subuls li a{
    color: #FFFFFF;
    display:block;
        z-index: 2;
}

#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
    z-index: 2;
}

#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
    background-color: #CC0000;
        z-index: 2;
}

#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}

.subuls li a:hover {
    text-decoration: none;
    background-color: #CC0000;
    z-index: 2;
}
.tophome
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images2/required/layout/link-a_home.png) no-repeat;
white-space: nowrap;
display: block;
width: 122px;
height: 23px;
margin: 0;
padding: 0;
}

.tophome a
{
display: block;
color: #000000;
font-size: 11px;
width: 122px;
height: 23px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.tophome img
{
width: 122px;
height: 23px;
border: 0
}

* html a:hover
{
visibility:visible
}

.tophome a:hover img
{
visibility: visible;
}

.topteam
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images2/required/layout/link-a_team.png) no-repeat;
white-space: nowrap;
display: block;
width: 127px;
height: 23px;
margin: 0;
padding: 0;
}

.topteam a
{
display: block;
color: #000000;
font-size: 11px;
width: 127px;
height: 23px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.topteam img
{
width: 127px;
height: 23px;
border: 0
}

.topteam a:hover img
{
visibility:hidden
}


.topmusic
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images2/required/layout/link-a_music.png) no-repeat;
white-space: nowrap;
display: block;
width: 129px;
height: 23px;
margin: 0;
padding: 0;
}

.topmusic a
{
display: block;
color: #000000;
font-size: 11px;
width: 129px;
height: 23px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.topmusic img
{
width: 129px;
height: 23px;
border: 0
}

.topmusic a:hover img
{
visibility:hidden
}


.topshop
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images2/required/layout/link-a_shop.png) no-repeat;
white-space: nowrap;
display: block;
width: 106px;
height: 23px;
margin: 0;
padding: 0;
}

.topshop a
{
display: block;
color: #000000;
font-size: 11px;
width: 106px;
height: 23px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.topshop img
{
width: 106px;
height: 23px;
border: 0
}

.topshop a:hover img
{
visibility:hidden
}


.toplifestyle
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images2/required/layout/link-a_lifestyle.png) no-repeat;
white-space: nowrap;
display: block;
width: 144px;
height: 23px;
margin: 0;
padding: 0;
}

.toplifestyle a
{
display: block;
color: #000000;
font-size: 11px;
width: 144px;
height: 23px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.toplifestyle img
{
width: 144px;
height: 23px;
border: 0
}

.toplifestyle a:hover img
{
visibility:hidden
}

.topfindastore
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images2/required/layout/link-a_findastore.png) no-repeat;
white-space: nowrap;
display: block;
width: 122px;
height: 23px;
margin: 0;
padding: 0;
}

.topfindastore a
{
display: block;
color: #000000;
font-size: 11px;
width: 122px;
height: 23px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.topfindastore img
{
width: 122px;
height: 23px;
border: 0
}

.topfindastore a:hover img
{
visibility:hidden
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
beth Chapin
post Nov 7 2007, 10:26 PM
Post #2





Group: Members
Posts: 3
Joined: 14-October 07
Member No.: 4,055
I solved the first 2 problems.


$25 to anyone that can help with problem #3 please and thank you soo much in advance!!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 02:49 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC