...

View Full Version : need help, menu column problems



pantherkitten9
02-23-2005, 10:17 PM
ok, i am starting to get the hang of this, but my right column isnt doing what i want it to.
i need the right side to copy the left mene column, except i need the images to appear in the middle culum (left side), instead of like the left column's menu showing the image in the middle. i want both menus to show images in the middle when you put mouse over it. this is a starter page, so please dont make fun of it. i am trying to learn the css the best i can.

http://pantherkitten9.tripod.com/services.htm



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<title>Black Diamond Services</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

html, body{height:100%;}


body {
padding:0;
margin:0;
background-color: #000000 repeat-y left top;
color: #F0F8FF ;
}
#outer{
min-height:100%;
margin-left:130px;
margin-right:130px;
background:#000000;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #F0F8FF ;
}

* html #outer{height:100%} /*for IE as IE treats height as min-height anyway*/
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background:#000000;
border-top:1px solid #000;
border-bottom:1px solid #000;
overflow:hidden;
color: #F0F8FF ;
}
#left {
position:relative;/*ie needs this to show float */
width:130px;
float:left;
margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
z-index:100;
left:-1px;
}
* html #left {padding-bottom:52px ;margin-right:-3px;}/*fix gap in ie next to float and clear footer because we've moved float too far left*/
#left p {padding-left:3px;padding-right:2px}
#right p {padding-left:3px;padding-right:2px}

#right {
position:relative;/*ie needs this to show float */
width:130px;
float:right;
margin-right:-129px;/*must be 1px less than width otherwise won't push footer down */
z-index:100;
left:1px
}

#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #000000;
color: #000000;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* > html #clearfooter {float:left;width:100%;}/* ie mac styles */
div,p {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
#centrecontent {position:relative;z-index:1}

/* css stuff below is just for presentation and not needed for the demo */

#left span {
display:none;
}
#left a:hover {
color: #FF0033;
background: #000000;
text-decoration: none;
}
#left a:hover span {
display:block;
position:absolute;
left:130px;
width:150px;
z-index:20;
background:#000000;
}
@media all and (min-width: 0px){
#left a:hover span {
top:150px;
}








#right span {
display:none;
}
#right a:hover {
color: #FF0033;
background: #000000;
text-decoration: none;
}
#right a:hover span {
display:block;
position:absolute;
left:130px;
width:150px;
z-index:20;
background:#000000;
}
@media all and (min-width: 0px){
#right a:hover span {
top:150px;
}


}
#footer span {
display:none;
}
#footer a:hover {
color: #000000;
background: #000000;
text-decoration: none;
}
#footer a:hover span {
display:block;
position:absolute;
top:-95px;
width:150px;
z-index:20;
background:#000000;
left:50%;
}
html > body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;}

</style>
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
<div id="clearheader"></div> <!-- to clear header -->
<div id="left">
<p></p>
<ul>
<li><a href="home.htm">Home<span><img src="/images/main/buffalo_diamond_logo.gif" alt="Buffalo Diamond" width="141" height="241" /></span></a></li>
<li><a href="aboutus.htm">About Us<span><img src="/images/main/us.jpg" alt="Who we are" width="299" height="241" /></span></a></li>
<li><a href="engraving.htm">Buffalo Shadow Engraving<span><img src="/images/engraving/bs_main_logo.jpg" alt="Buffalo Shadow Engraving" width="246" height="182" /></span></a></li>
<li><a href="nascar.htm">Nascar<span><img src="/images/fun/nascar_logo.gif" alt="Our nascar Pages" width="240" height="39" /></span></a></li>
</ul>
</div>
<div id="right">
<p></p>
<ul>
<li><a href="design.htm">Black Diamond Design<span><img src="/images/services/bd_design_logo.jpg" alt="Black Diamond Design" width="223" height="308" /></span></a></li>
<li><a href="services.htm">Black Diamond Services<span><img src="/images/services/bd_services_logo.gif" alt="Black Diamond Services" width="157" height="286" /></span></a></li>
<li><a href="affiliates.htm">Affiliates<span><img src="/images/main/affilates_logo.jpg" alt="Our Affiliates" width="240" height="38" /></span></a></li>
</ul>
</div>

<div id="centrecontent">
<!--centre content goes here -->
<p><strong>Black Diamond Services</strong> -~*^~~^*~-</p>
<p>We offer maid and pet services</p>
<p>More To Come</p>
<p>CCCCCCCCCCCCCC</p>
<p style="text-align:center">hmmmm</p>
</div>
<div id="clearfooter"></div> <!-- to clear footer -->
</div><!-- end outer div -->

<div id="footer">Copyrighted By - <a href="design.htm">Black Diamond Design</a>
| <a href="engraving.htm">Buffalo Shadow Engraving</a>
- 2005
<p></p>
</div>
<div id="header"><img src="/images/services/bds_header.jpg" alt="Black Diamond Services" width="700" height="100" /></div>
</body>
</html>


thanks for any help i can get.

pantherkitten9
02-24-2005, 12:40 AM
It was a stupid question. i am trying something different, please either delete this thread or dont bother with it. i was trying more than i should have and i apologize.

rmedek
02-24-2005, 01:33 AM
i was trying more than i should have and i apologize.
lol.... don't apologize. That's how we ALL got in this coding mess for the most part. Every site I build I try something more than I should have :D

Let us know if you still need help :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum