Jump to content

Tabs not reacting to margin-top setting

HDFilmMaker2112

By HDFilmMaker2112
in CSS Help

 Share

Recommended Posts

HDFilmMaker2112 Advanced Member

HDFilmMaker2112

Posted
Posted

The tabs on the following page are not reacting to margin-top setting. I'm trying to push them down about 5-10 pixels to separate them a little more from the picture above them.

 

http://ghosthuntersportal.com/store.php?product=2

 

store

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head>
<base href="http://ghosthuntersportal.com/" />
<title>Ghost Hunter's Portal  - Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="" />
<meta name="keywords" content="ghost, hunters, hunter, ghosts, spirit, spirits, paranormal, investigation, investigator, investigators, k2, emf, meter, kii" />
<meta name="description" content="Ghost Hunters Potal. Parnormal research equipment store." />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />

<style type="text/css">
body {background-color: #000000; color: #FFFFFF; font-family: Verdana; margin-top: 10px;
margin-right:auto;margin-left:auto;max-width:1000px;}</style>
<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="shortcut icon" href="./favicon.png" />
<script type="text/javascript">
<!--
function load(){
var url = window.location.href;
var parts = url.split("#");
var type = parts[1];
if(type==undefined){
type="overview";
}
sndReq(type);
changeClr('nav'+type);
}


function requestObj() {
    var reqObj;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        reqObj = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        reqObj = new XMLHttpRequest();
    }
    return reqObj;
}

var http = requestObj();

function sndReq(action) {
var product_id ="2";
    http.open('get', 'data.php?get='+action+'&product='+product_id, true); 
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById("ajaxout").innerHTML = response;
    }
}

function changeClr(sel) {
    if(sel == "navoverview"){
        document.getElementById('navoverview').style.backgroundColor = '#AA00AA';
        document.getElementById('navspecifications').style.backgroundColor = '#660066';
        document.getElementById('navreviews').style.backgroundColor = '#660066';
    }
    else if(sel == "navspecifications"){
        document.getElementById('navoverview').style.backgroundColor = '#660066';
        document.getElementById('navspecifications').style.backgroundColor = '#AA00AA';
        document.getElementById('navreviews').style.backgroundColor = '#660066';

    }
    else if(sel == "navreviews"){
        document.getElementById('navoverview').style.backgroundColor = '#660066';
        document.getElementById('navspecifications').style.backgroundColor = '#660066';
        document.getElementById('navreviews').style.backgroundColor = '#AA00AA';
    }
}
//-->
</script></head>
<body onload="load();">
<div class="header">
<a href="./index.php">
<div class="logo"><img src="./logo.png" alt="Ghost Hunter's Portal" /></div>
<div class="tag"><img src="./tag.png" alt="Ghost Hunter's Portal" /></div>
</a>
<div class="header_right">
<div class="ad">

</div>
<div class="header_links">
<a href="./index.php">Home</a> | View Cart | <a href="./index.php?returns">Returns</a> | <a href="./index.php?aboutus">About Us</a> | <a href="./index.php?contactus">Contact Us</a>

</div>
</div>
</div>
<div class="content_wrapper">
<div class="links">
<div class="categories">Categories</div>
<div><a href="store.php?cat=test">Test</a></div>
<div><a href="store.php?cat=test2">Test2</a></div>
<div><a href="store.php?cat=test10">Test10</a></div>
<div><a href="store.php?cat=test20">Test20</a></div>
<div><a href="store.php?cat=test50">Test50</a></div>

<div class="sig"><img src="./sig.png" /></div>
</div>
<div class="data_wrapper">
<div class="search_crumbs">
<div class="crumbs">
<a href="./index.php">Home</a> <span class="eleven">></span> <a href="./store.php?cat=test">Test</a>
<span class="eleven">></span> <a href="./store.php?product=2">Test123</a></div>
<div class="search">
<form action="./index.php?search" method="post">
<label>Search</label> <input type="text" name="search" size="30" />

<input type="submit" value="Go" name="Go" />
</form>
</div>
</div>
<div class="content">

<div class="product_wrapper">
<div>Test123</div>
<div class="product_image">
<div><img src="test123.png" alt="Test123" /></div>
</div>
<div class="product_details">
<div class="product_price">Price: $1000</div>
<div class="product_code">GHP#: test</div>

<div class="rating_image"><img src="4.5.png" alt="4.5" /> <span class="twelve">(2 Reviews)</span></div><div><div class="product_highlights_text">Product Highlights</div><div class="product_highlights_item"><ul><li>test</li>
<li>test2</li>
<li>test3</li></ul></div>
</div>
</div>
<div class="add_cart">ADD CART BUTTON</div>
</div>
<script type="text/javascript"><!--
document.write("\n<div class=\"product_tab_wrapper\">\n<div class=\"product_tab\" id=\"navoverview\" style=\"background-color: #AA00AA;\">\n<a href=\"./store.php?product=2#overview\" onclick=\"sndReq(\'overview\'); changeClr(\'navoverview\');\">Overview</a>\n</div>\n<div class=\"product_tab\" id=\"navspecifications\" style=\"background-color: #660066;\">\n<a href=\"./store.php?product=2#specifications\" onclick=\"sndReq(\'specifications\'); changeClr(\'navspecifications\');\">Specifications</a>\n</div>\n<div class=\"product_tab\" id=\"navreviews\" style=\"background-color: #660066;\">\n<a href=\"./store.php?product=2#reviews\" onclick=\"sndReq(\'reviews\'); changeClr(\'navreviews\');\">Customer Reviews</a>\n</div>\n</div>\n<div class=\"product_information\" id=\"ajaxout\">\nPlease select a section from the tabs above.\n</div>\n\n");
//--></script>

<noscript>
<div class="product_tab_wrapper">
<div class="product_tab" id="navoverview" style="background-color: #AA00AA;">
<a href="./store.php?product=2">Overview</a>
</div>
<div class="product_tab" id="navspecifications" style="background-color: #660066">
<a href="./store.php?product=2&get=specifications">Specifications</a>
</div>
<div class="product_tab" id="navreviews" style="background-color: #660066;">
<a href="./store.php?product=2&get=reviews">Customer Reviews</a>
</div>
</div>

<div class="product_information"><div>test</div>
</div>
</noscript>

</div>
<br />
</div>
</div>
<div class="footer">
© 2011  Ghost Hunter's Portal (Designed by: Andrew McCarrick)
</div>
</body>
</html>

 

style.css

a:link {
color: #FFFFFF;
font-weight: bold;
text-decoration: none; 
}
a:visited {
color: #FFFFFF;
font-weight: bold;
text-decoration: none; 
}
a:active {
color: #FFFFFF;
font-weight: bold;
text-decoration: none; 
}
a:hover {
color: #FF44FF;
font-weight: bold;
text-decoration: none; 
}

.admin_cp a:link {
color: #0000FF;
text-decoration: underline;
font-weight: none;
}
.admin_cp a:visited {
color: #0000FF;
text-decoration: underline;
font-weight: none;
}
.admin_cp a:active {
color: #0000FF;
text-decoration: underline;
font-weight: none;
}
.admin_cp a:hover {
color: #0000FF; 
text-decoration: underline;
font-weight: none;
}


.header{
width: 999px;
height: 75px;
border: 2px;
border-color: #660066;
border-style: none;
border-bottom-style: solid;
}

.logo{
float: left;
margin-top: -12px;
margin-left: -3px;
height: 76px;
width: 460px;
}

.tag{
float: left;
margin-top: 40px;
margin-left: -453px;
height: 35px;
width: 460px;
}

.header_right{
width: 530px;
height: 74px;
float: left;
}

.header_links{
width: 350px;
height: 16px;
text-align: center;
font-size: 12px;
margin-left: 180px;
}

.header_links a:link{
color: #FFFFFF;
text-decoration: none;
}
.header_links a:hover{
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}

.ad{
margin-left: 140px;
width: 390px;
height: 55px;
text-align: center;
}

.adposition{
}

.adspacer{
}
.adspacer2{
}

.content_wrapper{
width: 995px;
height: 100%;
min-height: 450px;
border: 2px;
border-color: #660066;
border-style: solid;
border-top-style: none;
overflow: auto;
}

.categories{
margin-top: -10px;
margin-bottom: 3px;
margin-left: -5px;
font-weight: bold;
font-size: 16px;
text-align: center;
}

.links{
font-size: 14px;
margin-top: 15px;
margin-left: 10px;
float: left;
width: 165px;
}

.links a:link{
font-weight: bold;
}

.data_wrapper{
float: right;
width: 815px;
height: 100%;
min-height: 450px;
border: 2px;
border-color: #660066;
border-style: none;
border-left-style: solid;
}

.search_crumbs{
height: 30px;
width: 815px;
margin-top: 7px;
}

.crumbs{
float: left;
width: 400px;
height: 25px;
font-weight: bold;
font-size: 12px;
margin-left: 15px;
margin-top: 5px;
}

.search{
float: right;
width: 325px;
height: 25px;
text-align: right;
font-weight: bold;
font-size: 14px;
margin-right: 15px;
}

.content{
height: 100%;
min-height: 450px;
width: 790px;
margin-left: 15px;
}

.footer{
float: left;
width: 995px;
margin-top: 5px;
text-align: center;
font-size: 11px;
clear: both;
border: 7px;
border-color: #000000;
border-bottom-style: solid;
}

.content_text{
margin-top: 5px;
margin-left: 55px;
font-size: 15px;
width: 671px;
}

.content_header{
font-size: 24px;
text-align: center;
margin-bottom: 5px;
}

.popular_products{
height: 145px;
}

.product{
float: left;
text-align: center;
width: 160px;
margin-top: 10px;
margin-left: 10px;
font-size: 14px;
}

.product a:link{
color: #FF44FF;
font-weight: bold;
text-decoration: underline;
}
.product a:visited {
color: #FF44FF;
font-weight: bold;
text-decoration: underline;
}
.product a:hover{
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}

.product_image{
float: left;
margin-top: 5px;
}

.product_details{
float: left;
margin-left: 25px;
}

.product_price{
font-size: 18px;
color: #CC00CC;
}

.product_wrapper{
margin-left: 15px;
width: 700px;
}

.product_links_headers{
float: left;
width: 785px;
margin-top: 10px;
margin-left: 15px;
}

.product_highlights_text{
font-weight: bold;
font-size: 14px;
margin-top: 5px;
}

.product_highlights_item{
font-size: 14px;
margin-top: -13px;
margin-left: -25px;
}

.product_code{
font-size: 12px;
}

.rating_image{
margin-top: 3px;
}

.review_container{
margin-top: 10px;
}

.add_cart{
float: left;
width: 200px;
margin-left: 25px;
text-align: center;
}

.contactus_links{
font-weight: bold;
}
.contactus_links a:link {
color: #FF44FF;
text-decoration: none;
}
.contactus_links a:visited {
color: #FF44FF;
text-decoration: none;
}
.contactus_links a:active {
color: #FF44FF;
text-decoration: none; 
}
.contactus_links a:hover {
color: #FFFFFF;
text-decoration: none; 
}

.product_tab{
width: 200px;
text-align: center;
float: left;
border: 1px;
border-color: #CC00CC;
border-style: solid;
border-collapse: collapse;
}

.product_tab_spacer{
width: 700px;
}

.product_tab_wrapper{
width: 700px;
clear: both;
margin-top: 300px;
margin-left: 15px;
}

.product_information{
width: 750px;
border: 1px;
border-color: #CC00CC;
border-style: solid;
border-collapse: collapse;
margin-left: 15px;
clear: both;
}

.address{
color: #008800;
margin-left: 40px;
}

.seventypercent{
width: 70%;
}

img{
border: 0px;
}
.center{
text-align: center;
}
.underline{
text-decoration: underline;
}
.bold{
font-weight: bold;
}
.italics{
font-style: italic
}
.eleven{
font-size: 11px;
}
.twelve{
font-size: 12px;
}
.fourteen{
font-size: 14px;
}
.sixteen{
font-size: 16px;
}
.gray{
color: #6F6F6F;
}
.eighteen{
font-size: 18px;
}
.twentyeight{
font-size: 28px;
}
.twentysix{
font-size: 26px;
}
.thirtytwo{
font-size: 32px;
}
.skyblue{
color: #3399FF;
}
.red{
color: #FF0000;
}
.sig{
margin-left: 50px;
margin-top: 325px;
}
.green{
color: #008800;
}
.blue{
color: #000000;
}
.fortyfive{
width: 45%;
}
.sixty{
width: 60%;
}
.twenty{
width: 20%;
}
.clear{
clear: both;
}

Link to comment
https://forums.phpfreaks.com/topic/237135-tabs-not-reacting-to-margin-top-setting/
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.