i have a very simple css file which have formatting for div ‘links’ to

Question

0

Asked: May 25, 20262026-05-25T10:33:18+00:00 2026-05-25T10:33:18+00:00

i have a very simple css file which have formatting for div ‘links’ to

0

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

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-25T10:33:19+00:00

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.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

i have a very simple css file which have formatting for div ‘links’ to

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply