html - div overlapper anden div (skærm opløsning) - Udvikleren.dk

Tags: css html

Bruger #16974 @ 11.11.13 22:09

Hej.. Nu er jeg stødt ind i endnu et problem. Jeg har et par diver, og de overlapper hinanden ved lavere skærmopløsning.

Css er:

login.css:

CSS kode

 /*******************
 FONTS
 *******************/
 
 @import url(http://fonts.googleapis.com/css?family=Bree+Serif);
 
 /*******************
 SELECTION STYLING
 *******************/
 
 ::selection {
     color: #fff;
     background: #f676b2; /* Safari */
 }
 ::-moz-selection {
     color: #fff;
     background: #f676b2; /* Firefox */
 }
 
 /*******************
 BODY STYLING
 *******************/
 
 * {
     margin: 0;
     padding: 0;
     border: 0;
 }
 
 #wrapper1 {
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     font-weight:300;
     text-align: left;
     text-decoration: none;
     /* Center wrapper perfectly */
     width: 300px;
     height: 400px;
     position: relative;
     left: 50%;
     top: 50%;
     margin-left: -150px;
     margin-top: -200px;
 }
 
 /*
 .gradient {
     width: 600px;
     height: 600px;
     position: fixed;
     left: 50%;
     top: 50%;
     margin-left: -300px;
     margin-top: -300px;
     
     background: url(../images/gradient.png) no-repeat;
 }
 */
 
 .gradient {
     /* Center Positioning */
     width: 600px;
     height: 600px;
     position: fixed;
     left: 50%;
     top: 50%;
     margin-left: -300px;
     margin-top: -300px;
     
     /* Fallback */ 
     background-image: url(../img/gradient.png); 
     background-repeat: no-repeat; 
     
     /* CSS3 Gradient */
     background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
     background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
     background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
     background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
     background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
 }
 
 /*******************
 LOGIN FORM
 *******************/
 
 .login-form {
     width: 300px;
     margin: 0 auto;
     position: absolute;
     z-index:5;
     
     background: #f3f3f3;
     border: 1px solid #fff;
     border-radius: 5px;
     
     box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 }
 
 /*******************
 HEADER
 *******************/
 
 .login-form .header {
     padding: 40px 30px 30px 30px;
 }
 
 .login-form .header h1 {
     font-family: 'Bree Serif', serif;
     font-weight: 300;
     font-size: 28px;
     line-height:34px;
     color: #414848;
     text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
     margin-bottom: 10px;
 }
 
 .login-form .header span {
     font-size: 11px;
     line-height: 16px;
     color: #678889;
     text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
 }
 
 /*******************
 CONTENT
 *******************/
 
 .login-form .content1 {
     padding: 0 30px 25px 30px;
 }
 
 /* Input field */
 .login-form .content1 .input {
     width: 188px;
     padding: 15px 25px;
     
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     font-weight: 400;
     font-size: 14px;
     color: #9d9e9e;
     text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
     
     background: #fff;
     border: 1px solid #fff;
     border-radius: 5px;
     
     box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
     -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
     -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
 }
 
 /* Second input field */
 .login-form .content1 .password, .login-form .content .pass-icon {
     margin-top: 25px;
 }
 
 .login-form .content1 .input:hover {
     background: #dfe9ec;
     color: #414848;
 }
 
 .login-form .content1 .input:focus {
     background: #dfe9ec;
     color: #414848;
     
     box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
     -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
 }
 
 .user-icon, .pass-icon {
     width: 46px;
     height: 47px;
     display: block;
     position: absolute;
     left: 0px;
     padding-right: 2px;
     z-index: 3;
     
     -moz-border-radius-topleft: 5px;
     -moz-border-radius-bottomleft: 5px;
     -webkit-border-top-left-radius: 5px;
     -webkit-border-bottom-left-radius: 5px;
 }
 
 .user-icon {
     top:147px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
     background: rgba(65,72,72,0.75) url(../img/user-icon.png) no-repeat center;    
 }
 
 .pass-icon {
     top:221px;
     background: rgba(65,72,72,0.75) url(../img/pass-icon.png) no-repeat center;
 }
 
 /* Animation */
 .input, .user-icon, .pass-icon, .button, .register {
     transition: all 0.5s;
     -moz-transition: all 0.5s;
     -webkit-transition: all 0.5s;
     -o-transition: all 0.5s;
     -ms-transition: all 0.5s;
 }
 
 /*******************
 FOOTER
 *******************/
 
 .login-form .footer {
     padding: 25px 30px 40px 30px;
     overflow: auto;
     
     background: #d4dedf;
     border-top: 1px solid #fff;
     
     box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
     -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
     -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
 }
 
 /* Login button */
 .login-form .footer .button {
     float:left;
     padding: 11px 25px;
     
     font-family: 'Bree Serif', serif;
     font-weight: 300;
     font-size: 18px;
     color: #fff;
     text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
     
     background: #56c2e1;
     border: 1px solid #46b3d3;
     border-radius: 5px;
     cursor: pointer;
     
     box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
     -moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
     -webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
 }
 
 .login-form .footer .button:hover {
     background: #3f9db8;
     border: 1px solid rgba(256,256,256,0.75);
     
     box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
     -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
     -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
 }
 
 .login-form .footer .button:focus {
     position: relative;
     bottom: -1px;
     
     background: #56c2e1;
     
     box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
     -moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
     -webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
 }
 
 /* Register button 
 .login-form .footer .register {
     display: block;
     float: right;
     padding: 10px;
     margin-right: 20px;
     
     background: none;
     border: none;
     cursor: pointer;
     
     font-family: 'Bree Serif', serif;
     font-weight: 300;
     font-size: 18px;
     color: #414848;
     text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
 }
 
 .login-form .footer .register:hover {
     color: #3f9db8;
 }
 
 .login-form .footer .register:focus {
     position: relative;
     bottom: -1px;
 }*/

header.css:

CSS kode

 ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input, #TopBar {
    margin: 0; 
    padding: 0;
 }
 
 #TopBar {
    height: 28px;
    width: 100%;
    background-color: #1C1C1C;
    color: #ffffff;
 }
 
 body {
    background-color: #EFFBF8;
 }
 
 h1 { 
    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; 
    text-align: center; 
    color: #000; 
    font-size: 60px; 
    letter-spacing: -1px; 
 }
 
 h1 small { 
    font-size: 24px; 
    display: block; 
    color: #636363; 
 }
 
 .break { 
 clear: both; 
 }
 
 #wrapper { 
    width: 980px; 
    margin: 40px auto; 
 }
 
 #content { 
    margin-top: 50px; 
 }
 
 #content p { 
    font: 14px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; 
    color: #333333; 
    line-height: 18px; 
    margin: 15px auto; 
    width: 800px; 
 }
 
 #content p a { 
    color: #0088CC; 
    text-decoration: none; 
 }
 
 #content p a:hover { 
    text-decoration: underline; 
 }
 
 #menu { 
    margin: 40px 0; 
    list-style: none;
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; 
    letter-spacing: -0.5px; 
    font-size: 13px;
    text-shadow: 0 -1px 3px #202020;
    width: 980px; 
    height: 34px;
     
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
     
     -moz-box-shadow: 0px 3px 3px #cecece;
     -webkit-box-shadow: 0px 3px 3px #cecece;
     box-shadow: 0 3px 4px #8b8b8b;
 }
 
 #menu li { 
    display: block; 
    float: left; 
    border-right: 1px solid #5d5d5d; 
    border-left: 1px solid #929292; 
    width: 105px; 
    height: 34px; 
    border-bottom: 1px solid #575757; 
    border-top: 1px solid #797979;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
 }
 
 #menu li:not(:last-child):hover {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838;
 
     -moz-box-shadow: inset 0 0 5px 5px #535353;
     -webkit-box-shadow: inset 0 0 5px 5px #535353;
     box-shadow: inset 0 0 5px 5px #535353;
 }
 
 #menu li:not(:last-child):active {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838;
     
     -moz-box-shadow: inset 0 1px 2px 2px #000;
     -webkit-box-shadow: inset 0 1px 2px 2px #000;
     box-shadow: inset 0 1px 2px 2px #000;
 }
 
 #menu li a { 
    color: white; 
    text-decoration: none; 
    text-align: center; 
    display: block; 
    line-height: 34px; 
    outline: none; 
 }
 
 #menu form input { 
    width: 76px; 
    height: 20px; 
    margin-left: 9px; 
    margin-top: 8px; 
    border: none; 
    padding-left: 20px; 
    padding-right: 10px; 
    color: #eee;
 
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
    background-image: url("../img/magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
    background-image: url("../img/magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    background-color: #6E6E6E;
     
     -moz-box-shadow: inset 0 2px 1px 1px #363636;
     -webkit-box-shadow: inset 0 2px 1px 1px #363636;
     box-shadow: inset 0 2px 1px 1px #363636;
 }
 
 #menu li:first-child {
     -moz-border-radius: 4px 0 0 4px;
     -webkit-border-radius: 4px 0 0 4px;
     border-radius: 4px 0 0 4px;
     
    border-left: none;
 }
 
 
 #menu li:first-child a img {
    vertical-align: middle; 
    margin-top: -2px;
 }
 
 #menu li:last-child {
     -moz-border-radius: 0 4px 4px 0;
     -webkit-border-radius: 0 4px 4px 0;
     border-radius: 0 4px 4px 0;
     
    border-right: none;
    width: 124px;
 }
 
 @-webkit-keyframes showMenu {
     from { opacity: 0; top: -20px; }
     to   { opacity: 1; }
 }
 
 #menu {
      -webkit-animation: showMenu 1s; 
    position: relative;
 }
 
 #TopBar form input { 
    width: 76px; 
    height: 20px;  
    margin-top: 6px;
    border: none; 
    padding-left: 20px; 
    padding-right: 10px; 
    color: #eee;
 
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
    background-image: -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    background-color: #6E6E6E;
     
     -moz-box-shadow: inset 0 2px 1px 1px #363636;
     -webkit-box-shadow: inset 0 2px 1px 1px #363636;
     box-shadow: inset 0 2px 1px 1px #363636;
 }
 
 ::-webkit-scrollbar { width: 12px; } /* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255,0,0,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

Min login boks går over og lapper over min top menu. Har ingen idé om hvad jeg skal gøre, så håber at der endnu engang er et venligt menneske der kan hjælpe mig her!
mvh

10 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #17081 @ 12.11.13 07:41

1.258

Kan du ikke linke til din side

? Det er nemmere, at forstå end det er, at skulle kigge på noget (tilfældig) CSS uden, at se det i sammenhæng med markup.

Bruger #16974 @ 12.11.13 18:22

http://htw.host22.com
Lige her! :-)

Bruger #17081 @ 12.11.13 18:42

1.258

glad for jeg ikke lige sad op IE på den side ... den er da helt fucked.

Bruger #16974 @ 12.11.13 19:53

Ja log in boksen går oven i menu'en, men hvad kan jeg gøre? :-)

Bruger #17081 @ 12.11.13 19:59

1.258

Ikke så meget det. Siden er fyldt med malware. Jeg blev endda sendt over til et porno site da jeg besøgte det

Bruger #16974 @ 12.11.13 20:02

nej, haha! Har set den warning, bare pass den. Der er intet i siden. Kan poste koden her hvis du er mere tryg ved det?

Bruger #17081 @ 12.11.13 20:14

1.258

Det er ikke din kode. Det er på serveren

Bruger #16974 @ 12.11.13 20:19

Ja det har jeg set. Ved ikke hvad det skyldes, men serveren er kun midlertidig, så det er ligemeget! :-)
- Hvad kan jeg gøre for at den ikke overlapper? :-D

Bruger #17081 @ 12.11.13 20:25

1.258

men serveren er kun midlertidig, så det er ligemeget! :-)

Og så undre folk sig over hvorfor de får virus....

Men du kan lave den om så det ikke længere er en popup. Lige nu er det jo en popup som bliver placeret i midten af skærmen og så er det klart den kommer til at overlappe. Om det så er menuen eller noget andet indhold. Så det ville være mit bud.

Indlæg senest redigeret d. 12.11.2013 20:28 af Bruger #17081

Bruger #16974 @ 12.11.13 21:05

Serveren var blot så du kunne se. Siden køre i localhost.

- Jeg bruger open source, så er ikke klar over "how to"? :-)

div overlapper anden div (skærm opløsning)

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler