Marco
Marco

Reputation: 867

css problem with Absolute position it disable links?

i have a very simple css file which have formatting for div 'links' to give it Absolute position

body {
    background: url(http://www.nextwww.info/sites/west/layout/images/mainbg.gif) repeat-x #fff;
    margin:0;
    padding:0;
    FONT-SIZE: 12px; 
    FONT-FAMILY:"Trebuchet MS";
    color:#65615B;
    text-align:left;
    line-height:16px;
    font-weight: normal;

}
p {margin:0;}

a { 
    text-decoration:underline;
    color:#C92E0C;
}
img{
    border:none;
}
a:hover {
    text-decoration:none;
    color:#C92E0C;
}

a:focus { outline:none }


p {
    margin:0;
}
.clr{
    clear:both;
}

.maincont {
    padding:0px;
    width:100%;
    margin:0;
    position:relative;
}
.links{
position:absolute; 
top:10%; 
left:2%;
}
.header {
    width:940px;
    margin:0 auto;
    height:132px;   
}
.logo {
    float:left;
    padding:46px 0 19px 0;
    width:380px;
    text-align:center;
    font-family: Tahoma;
    font-size:13px;
    font-weight:bold;
    letter-spacing:-0.2px;
}
.logo h1{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#2E2E2E;
    font-weight:bold;
    font-size:17px;
    margin:0;
    letter-spacing:-0.9px;
    padding-bottom:3px;
    text-transform:uppercase;
}
.logo h2{float:left; 
    width:460x; 
    font-size:20px; 
    font-weight:normal !important;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin-left:0px;
    padding:0;
    color:#AD0707;
    text-align:center;
    letter-spacing:-0.5px;
    width:380px;
    padding:0 0 8px 0;
    margin:0;
}
.callUs {
    width:241px;
    float:left;
    line-height:34px;
    color:#CE0202;
    font-size:22px;
    font-weight:bold;
    text-align:center;
    margin:34px 0 0 96px;
    letter-spacing:-0.5px;
    background:url(http://www.nextwww.info/sites/west/layout/images/callUsBg.gif)  no-repeat;
}
.quote{
    float:left;
    margin:10px 0 0 70px;
}
.topRightIcon {
    width:140px;
    margin:-37px 0 0 60px;
    float:left;
}
.topRightIcon img{
    margin:0 3px;
}
/**********************************************
                    Main Banners
/**********************************************/
.bannercountainer{
    background:url(http://www.nextwww.info/sites/west/layout/images/headerMainBg.jpg) repeat;
    height:319px;
    float:left;
    position:relative;
    width:100%;
}
.bannerMain{
    width:940px;
    position:relative;
    margin:0 auto;
}
.bodyMain {
    width:100%;
    float:left;
    position:relative;
    padding:18px 0 0;
    background:url(http://www.nextwww.info/sites/west/layout/images/bodyBg.gif) repeat-x #fff;
}

.images {
    cursor: pointer;
    float: left;
    height:280px;
    margin: 0;
    margin:0;
    position: relative;
    width: 940px;
}
/* single slide */
.images div {
    display:none;
    position:absolute;
    top:0;
    left:0;     
    margin:0px;
    padding:0;
    height:280px;
}
.images div img{
    width:940px;
    height:280px
}

/* header */
.images h3 {
    font-size:22px;
    font-weight:normal;
    margin:0 0 20px 0;
    color:#456;
}

/* tabs (those little circles below slides) */
.slidetabs {
    background:url(http://www.nextwww.info/sites/west/layout/images/sliderBtnBg.gif) repeat-x;
    height:39px;
    width:940px;
    float:left;
    font-family:Arial, Helvetica, sans-serif, Calibri !important;
}

/* single tab */
.slidetabs a {
    float:left;
    display:inline;
    font-size:16px;
    font-family:"Trebuchet MS";
    font-weight:bold;
    text-align:center;
    color:#2D2D2D;
    line-height:39px;
    padding:0 17px 0 18px;
    border-right:solid 1px #BCBABA;
    text-decoration:none !important;    
}
.slidetabs a:hover {
    color:#fff;
    padding:0 18px 0 18px;
    border-right:none;
    height:39px;
    background:url(http://www.nextwww.info/sites/west/layout/images/sliderBtnBgOver.gif) repeat-x  !important;    
}
.slidetabs a.current {
    color:#fff;
    padding:0 18px 0 18px;
    border-right:none;
    background:url(http://www.nextwww.info/sites/west/layout/images/sliderBtnBgOver.gif) repeat-x  !important; 
}
.slidetabs a.current .topImg {
    background: url(http://www.nextwww.info/sites/west/layout/images/arrowTop.png) no-repeat center;
    height: 10px;
    position: relative;
    top: -49px;
    z-index: 9999;
}
/* active state (current page state) */

/* prev and next buttons */
.forward, .backward {
    margin: 0;
    padding-top:0;
    float:left !important;
    z-index: 999;
    float:left; !important; 
}
.forward, .backward {
    background: url(http://www.nextwww.info/sites/west/layout/images/left.png) no-repeat scroll 0 0 transparent;
    height:50px !important;
     width: 23px;
      top:115px;
    position: absolute !important;
      left:-23px;
     cursor:pointer;
}
.forward, .backward a:hover{
    background: url(http://www.nextwww.info/sites/west/layout/images/right.png) no-repeat scroll 0 0 transparent;
    height:50px !important;
     width: 23px;
     cursor:pointer;
     left:0;
     right:0 !important
}
.nextArrow{
    position:absolute !Important;
    left:auto;
    right:-23px !Important;
}
/* next */

/* disabled navigational button. is not needed when tabs are configured with rotate: true */
.disabled {
    visibility:hidden !important;       
}
.tabsMain {
    clear: both;
    left: 420px;
    padding-right: 40px;
    position: absolute;
    text-align: center;
    top: 0;
    z-index: 9999;
}
.tabsMain .play{
    cursor:pointer;
    width:33px;
    height:21px;
    border:solid 1px #000;
    color:#fff;
    float:left;
    line-height:21px;
    background: url(http://www.nextwww.info/sites/west/layout/images/playStopBg.png) repeat-x;
}
.tabsMain .stop{
    cursor:pointer;
    width:33px;
    height:21px;
    border:solid 1px #000;
    color:#fff;
    line-height:21px;
    float:left;
    background: url(http://www.nextwww.info/sites/west/layout/images/playStopBg.png) repeat-x;
}
.banner01 {
    cursor: pointer;
    float: left;
    height: 280px;
    margin: 0;
    position: relative;
    width: 940px;
    background: url(http://www.nextwww.info/sites/west/layout/images/banner1.jpg) no-repeat;
}
.banner02 {
    cursor: pointer;
    float: left;
    height: 280px;
    margin: 0;
    position: relative;
    width: 940px;
    background: url(http://www.nextwww.info/sites/west/layout/images/banner2.jpg) no-repeat;
}
.banner03 {
    cursor: pointer;
    float: left;
    height: 280px;
    margin: 0;
    position: relative;
    width: 940px;
    background: url(http://www.nextwww.info/sites/west/layout/images/banner3.jpg) no-repeat;
}
.banner04 {
    cursor: pointer;
    float: left;
    height: 280px;
    margin: 0;
    position: relative;
    width: 940px;
    background: url(http://www.nextwww.info/sites/west/layout/images/banner4.jpg) no-repeat;
}
.banner05 {
    cursor: pointer;
    float: left;
    height: 280px;
    margin: 0;
    position: relative;
    width: 940px;
    background: url(http://www.nextwww.info/sites/west/layout/images/banner5.jpg) no-repeat;
}
/**********************************************
                    left part
/**********************************************/
.contentArea {
    width:940px;
    position:relative;
    padding:0;
    margin:0 auto;
}
.leftMain {
    width:260px;
    float:left;
    margin-right:20px;
}
.leftbox {
    width:222px;
    float:left;
    background-color:#f6f6f6;
    border:solid 1px #BDB8B8;
    padding:18px 18px 0;
    margin-bottom:15px;
}
.leftbox p{
    padding:0 0 15px 0;
}
.leftbox p span{
    color:#B40707;
    display:block;
    padding-top:5px;
    font-weight:bold;
}
.leftbox h1{
    border-bottom: 1px solid #D5D5D5;
    color: #2D2D2D;
    font-size: 18px;
    font-weight: normal;
    margin:0 0 10px 0;
    padding-bottom: 12px;
    letter-spacing:-0.5px;
}
.leftbox h2{
    color:#B40707;
    font-size: 14px;
    font-weight:bold;
    margin:0 0 10px 0;
}
.leftbox img{
    margin:-7px 5px 0 0;
    float:left;
}
.leftbox ul{
    margin:0 0 0 15px;
    padding:5px 0 15px 5px;
    font-size:14px;
    float:left;
    font-weight:bold;
}
.leftbox ul li{
    float:left;
    padding:6px 0;
    width:200px;
    color:#4b4b4b;
    line-height:15px;
    font-style:italic;
}
.leftbox ul li font{
    display:block;
    color:#9e0909;
}
.leftbox ul li a{
    color: #0451a0;
    text-decoration:underline;
}
.leftbox ul li a:hover{
    color:#0451a0;
    text-decoration:none;
}
.licensed {
    margin-left:10px;
    float:left;
    padding-bottom:20px;
}
/**********************************************
                    right part
/**********************************************/
.rightMain {
    width:651px;
    float:left;
}
.contentBox {
    width:651px;
    float:left;
}
.contentBox h1{
    font-size:24px;
    font-weight:bold;
    color:#BA1414;
    margin:0;
    padding-bottom:10px;
}
.contentBox ul{
    margin:0;
    padding:5px 0 0 10px ;
    list-style:none;
}
.contentBox ul li{
    padding-left:20px;
    line-height:20px;
    background:url(http://www.nextwww.info/sites/west/layout/images/bullet01.gif) no-repeat center left;
}
.contentBox p{
    padding:5px 0;
    line-height:18px;
    clear:both;
    text-align:justify;
}
.contentBox img{
    margin:0 10px 0 0;
    float:left;
}
.imageRight{
    margin:0 0 0 10px !important;
    float:right !important;
}
/******************************************************
                Bottom Part
/*****************************************************/
.bottomMain {
    width:100%;
    height:89px;
    background:url(http://www.nextwww.info/sites/west/layout/images/bottomBg.gif) repeat-x;
}
.bottomNav {
    margin:0 auto;
    width:940px;
    font-size:12px;
    color:#575757;
    line-height:89px;
}
.addressBox {
    float:left;
    line-height: 14px;
    padding-top: 12px;
    width: 400px;
}
.addressBox span{
    float:left;
    width:400px;
    padding:3px 0;
}
/******************************************************

/*****************************************************/

    pre{
        display:block;
        font:12px "Courier New", Courier, monospace;
        padding:10px;
        border:1px solid #bae2f0;
        background:#e3f4f9; 
        margin:.5em 0;
        width:674px;
        }   

    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */

    #bottomBannerMain{  
    border: 1px solid #DEDEDE;
    float: left;
    padding:0 10px;
    position: relative;
    text-align: left;
    width: 628px;
    margin:5px 0 10px 0;
        }   

    #content{
        position:relative;
        }           

/* Easy Slider */

    #slider ul, #slider li,
    #slider2 ul, #slider2 li{
        margin:0;
        padding:0;
        list-style:none;
        }
    #slider2{margin-top:1em;}
    #slider li, #slider2 li{ 
        /* 
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */ 
        width: 631px !important;
        overflow:hidden; 
        }   

        #slider li img{ 
        width:190px;
        height:134px;
        margin:0 8px;

        }   
    #prevBtn, #nextBtn,
    #slider1next, #slider1prev{ 
        display: block;
        height: 27px;
        left:-28px;
        position: absolute;
        top: 54px;
        width: 30px;
        z-index: 1000;
        }   
    #nextBtn, #slider1next{ 
        display: block;
        height:27px;
        position: absolute;
        right:-28px !important;
        top: 54px;
        width: 30px;
        z-index: 1000;
        left:auto;
        }                                                       
    #prevBtn a, #nextBtn a,
    #slider1next a, #slider1prev a{  
        display:block;
        position:relative;
        width:27px;
        height:27px;
        background:url(http://www.nextwww.info/sites/west/layout/images/left02.png) no-repeat 0 0;  
        }   
    #nextBtn a, #slider1next a{ 
        background:url(http://www.nextwww.info/sites/west/layout/images/right02.png) no-repeat 0 0; 
        }   

    /* numeric controls */  

    ol#controls{
        margin:1em 0;
        padding:0;
        height:28px;    
        }
    ol#controls li{
        margin:0 10px 0 0; 
        padding:0;
        float:left;
        list-style:none;
        height:28px;
        line-height:28px;
        }
    ol#controls li a{
        float:left;
        height:28px;
        line-height:28px;
        border:1px solid #ccc;
        background:#DAF3F8;
        color:#555;
        padding:0 10px;
        text-decoration:none;
        }
    ol#controls li.current a{
        background:#5DC9E1;
        color:#fff;
        }
    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* // Easy Slider */

div.htmltooltip{
    position: absolute; /*leave this and next 3 values alone*/
    z-index: 1000;
    left: -1000px;
    top: -1000px;
    background: #fff;
    float:left;
    border: 1px solid #dadada;
    color: #000;
    padding:8px 10px 10px 10px;
    width: 250px; /*width of tooltip*/
}
div.htmltooltip p{
    padding:7px 0 0 0;
}
.tool-trustedlocksmith {
    float:left; 
    width:460x; 
    font-size:20px; 
    font-weight:normal !important;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin-left:0px;
    padding:0;
    color:#AD0707;
    text-align:center;
    letter-spacing:-0.5px;
    width:360px;
    padding:4px 0;
}

my problem that when i used to use the links div outside of maincont div all links become disabled for example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/screen.css">

</head>
<body  bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="initAnimation();">
<div class="links"><div style="float: left;margin:10px;"><a href="#">welcome</a></div> <div style="float: left;margin:10px;"> hello </div><div style="clear:both;"></div></div>
<div class="maincont">

in this example i can't click the welcome link

Upvotes: 3

Views: 13574

Answers (2)

Jason Gennaro
Jason Gennaro

Reputation: 34855

Adding padding-top to your .maincont makes it work fine

.maincont {
    padding:0px;
    padding-top:150px;
    width:100%;
    margin:0;
    position:relative;
}

I picked 150px but you can adjust as necessary.

Working Example: http://jsfiddle.net/jasongennaro/9v6GH/

EDIT

Misread the question! You need the links to work. Also add a negative z-index to the style and all will be good.

.maincont {
    padding:0px;
    padding-top:150px;
    width:100%;
    margin:0;
    position:relative;
    z-index:-1;
}

Updated Example: http://jsfiddle.net/jasongennaro/9v6GH/1/

Upvotes: 1

Wayne Smith
Wayne Smith

Reputation: 4868

without seeing your maincont the problem can not be reproduced. Filling it with latin However shows that it starts at the top of the page and is layered in front of your links. Adding a top:100px to your maincont fixes that problem and will likely cure the problem - which is dependent on what .maincont contains.

.maincont {
    padding:0px;
    width:100%;
    margin:0;
    position:relative;
    top:100px;
}

or rearrange the html

<body  bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="initAnimation();">
<div class="maincont">
<div class="links"><div style="float: left;margin:10px;"><a href="#">welcome</a></div> <div style="float: left;margin:10px;"> hello </div><div style="clear:both;"></div></div>

So that links gets layered in front of the content not behind it.

Other solution is to use zindex with links to place it in the front.

Upvotes: 4

Related Questions