Avatar billede greenie Nybegynder
06. november 2013 - 21:16 Der er 4 kommentarer og
1 løsning

Konflikt mellem 2 scripts

Jeg har fundet 2 ret fede scripts, et flot log ind med jQuery og en slide-out footer, men når jeg implementerer slide-out footer, rykkes log ind delen ned, og det ser jo dumt ud.

Jeg kan ikke finde ud af hvilken del af css der rykker det hele ned af. Nogen der kan pege mig i retning af fejlen, hvis man kan kalde det en fejl, eller en der kan fortælle mig hvordan jeg bedre kan kombinere de to scripts.

/* Slide out bottom */

/*-------------------------
    Simple reset
--------------------------*/


*{
    margin:0;
    padding:0;
}


/*-------------------------
    General Styles
--------------------------*/


body{
    font:15px/1.3 'PT Sans', sans-serif;
    color: #5e5b64;

    /* Create a page-wide stacking context
    (so that negative margins work as you expect) */

    position:relative;
    z-index:0;

}

a, a:visited {
    outline:none;
    color:#389dc1;
}

a:hover{
    text-decoration:none;
}

section, footer, header, aside{
    display: block;
}


/*-------------------------
    The main container
--------------------------*/


#main{
    position:relative;
    z-index:1;

    background-color: #fff;

    background-image:-webkit-radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);
    background-image:-moz-radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);
    background-image:radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);

    padding: 120px 0 600px;
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

#main .tzine-logo{
    width: 336px;
    height: 121px;
    margin: 0 auto 90px;
    text-indent: -999px;
    overflow: hidden;
    display: block;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25);
    background: url('../images/logo.jpg');
}

h1{
    font:bold 48px 'PT Sans Narrow', sans-serif;
    color:#5e5b64;
    text-align: center;
    padding-bottom:300px;
    position:relative;
}

h1:after{
    content: '';
    background: url('../images/sprite.png') 0 0;
    width: 45px;
    height: 70px;
    position: absolute;
    left: 50%;
    bottom: -85px;
    margin-left: -23px;
}


/*-------------------------
    The footer
--------------------------*/


footer{
    height: 245px;
    color:#ccc;
    font-size:12px;

    position:relative;
    z-index:-2;

    background-color:#31353a;

    background-image:-webkit-linear-gradient(top, #31353a, #2f3337);
    background-image:-moz-linear-gradient(top, #31353a, #2f3337);
    background-image:linear-gradient(top, #31353a, #2f3337);
}

/* Set a width to the outermost UL and center it */

footer > ul{
    width:960px;
    position:fixed;
    left:50%;
    bottom:0;
    margin-left:-480px;
    padding-bottom: 60px;
    z-index:-1;
}

/* The four columns of links */

footer > ul > li{
    width:25%;
    float:left;
}

footer ul{
    list-style: none;
}

/* The links */

footer > ul > li ul li{
    margin-left:43px;
    text-transform: uppercase;
    font-weight:bold;
    line-height:1.8;
}

footer > ul > li ul li a{
    text-decoration: none !important;
    color:#7d8691 !important;
}

footer > ul > li ul li a:hover{
    color:#ddd !important;
}

/* The company logo */

footer a.logo{
    color: #e4e4e4 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    text-transform: uppercase;
    margin-left: 16px;
    display: inline-block;
    margin-top: 7px;
}

footer a.logo i{
    font-style: normal;
    position: absolute;
    width: 60px;
    display: block;
    left: 48px;
    top: 18px;
    font-size: 12px;
    color: #999;
}

footer a.logo:before{
    content: '';
    display: inline-block;
    background: url('../img/sprite.png') no-repeat -19px -70px;
    width: 48px;
    height: 37px;
    vertical-align: text-top;
}

/* Common styles for the four color bars */

footer p{
    width: 90%;
    margin-right: 10%;
    padding: 9px 0;
    line-height: 18px;
    background-color: #058cc7;
    font-weight: bold;
    font-size: 14px;
    color:#fff;
    text-transform: uppercase;
    text-shadow: 0 1px rgba(0,0,0,0.1);
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    margin-bottom: 20px;
    opacity:0.9;
    cursor:default;

    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

footer > ul > li:hover p{
    opacity:1;
}

footer p:before{
    content: '';
    display: inline-block;
    background: url('../img/sprite.png') no-repeat;
    width: 16px;
    height: 18px;
    margin: 0 12px 0 15px;
    vertical-align: text-bottom;
}


/*-------------------------
    The different colors
--------------------------*/


footer p.home{
    background-color: #0096d6;


    background-image:-webkit-linear-gradient(top, #0096d6, #008ac6);
    background-image:-moz-linear-gradient(top, #0096d6, #008ac6);
    background-image:linear-gradient(top, #0096d6, #008ac6);
}

footer p.home:before{
    background-position: 0 -110px;
}

footer p.services{
    background-color: #00b274;

    background-image:-webkit-linear-gradient(top, #00b274, #00a46b);
    background-image:-moz-linear-gradient(top, #00b274, #00a46b);
    background-image:linear-gradient(top, #00b274, #00a46b);
}

footer p.services:before{
    background-position: 0 -129px;
}

footer p.reachus{
    background-color: #d75ba2;

    background-image:-webkit-linear-gradient(top, #d75ba2, #c75496);
    background-image:-moz-linear-gradient(top, #d75ba2, #c75496);
    background-image:linear-gradient(top, #d75ba2, #c75496);
}

footer p.reachus:before{
    background-position: 0 -89px;
}

footer p.clients{
    background-color: #e9ac40;

    background-image:-webkit-linear-gradient(top, #e9ac40, #d89f3b);
    background-image:-moz-linear-gradient(top, #e9ac40, #d89f3b);
    background-image:linear-gradient(top, #e9ac40, #d89f3b);
}

footer p.clients:before{
    background-position: 0 -69px;
}


Log ind delene
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* The reset rules */
    margin:0px;
    padding:0px;
}

body{
    color:#555555;
    font-size:13px;
    background: #eeeeee;
    font-family:Arial, Helvetica, sans-serif;
    width: 100%;
}

h1{
    font-size:28px;
    font-weight:bold;
    font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
    letter-spacing:1px;
}

h2{
    font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:normal;
    letter-spacing:1px;
    padding-left:2px;
    text-transform:uppercase;
    white-space:nowrap;
    margin-top:4px;
    color:#888888;
}

#main p{
    padding-bottom:8px;
}

.clear{
    clear:both;
}

#main{
    width:800px;
    /* Centering it in the middle of the page */
    margin:60px auto;
}

.container{
    margin-top:20px;
   
    background:#FFFFFF;
    border:1px solid #E0E0E0;
    padding:15px;
   
    /* Rounded corners */
    -moz-border-radius:20px;
    -khtml-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius:20px;
}

.err{
    color:red;
}

.success{
    color:#00CC00;
}

a, a:visited {
    color:#00BBFF;
    text-decoration:none;
    outline:none;
}

a:hover{
    text-decoration:underline;
}

.tutorial-info{
    text-align:center;
    padding:10px;
}
Avatar billede greenie Nybegynder
06. november 2013 - 21:17 #1
Avatar billede anri Novice
06. november 2013 - 21:24 #2
Det er "position : relative" i din body {
}
Avatar billede greenie Nybegynder
06. november 2013 - 21:52 #3
hmm... det var jo nemt nok :)
Den er sat til absolute i stedet, og det virker.

Tak for hjælpen anri, vil du afgive svar.
Avatar billede anri Novice
06. november 2013 - 21:58 #4
Yeps
Avatar billede madslundholm Novice
07. november 2013 - 13:39 #5
En ide at rette sådanne fejl, kunne du bruge din browser Dev. Tools.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester