CSS - Das Layout ist alles durcheinander - Hervorragende Bibliothek

Ich bin mir nicht sicher, was mit dem CSS falsch ist, dass das Layout so durcheinander ist. Ich habe viele Möglichkeiten ausprobiert, um es zu beheben, aber das Layout scheint nicht so zu sein, wie ich es möchte. Bitte überprüfen Sie die HTML und CSS und Sie können eine Idee bekommen.CSS - Das Layout ist alles durcheinander

Ich versuche, es wie das im Bild aussehen zu lassen und es so auf dem mobilen Browser zu sein.

Ich sehe, das ist zu viel verlangt, aber ich möchte es versuchen, bevor ich es aufgibt. Ich wünschte, es wäre so einfach wie Photoshop für mich. Danke fürs Lesen.


 
    #left { 
 
    display: inline-block; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    cursor: pointer; 
 
    padding: 10px 20px; 
 
    border-top: 100px solid rgba(1,141,196,1); 
 
    border-right: 2px solid rgba(1,141,196,1); 
 
    border-bottom: 100px solid rgba(1,141,196,1); 
 
    border-left: 2px solid rgba(1,141,196,1); 
 
    font: normal 16px/normal "Times New Roman", Times, serif; 
 
    color: rgba(255,255,255,0.9); 
 
    -o-text-overflow: clip; 
 
    text-overflow: clip; 
 
    background: rgba(1,141,196,1); 
 
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ; 
 
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ; 
 
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
\t \t margin-top: 50%; 
 
\t \t margin-bottom: 50%; 
 
} 
 

 
#left:hover { 
 
    border-top: 100px solid rgba(164,215,234,1); 
 
    border-right: 2px solid rgba(164,215,234,1); 
 
    border-bottom: 100px solid rgba(164,215,234,1); 
 
    border-left: 2px solid rgba(164,215,234,1); 
 
    background: rgba(164,215,234,1); 
 
} 
 

 
#right { 
 
    float: right; 
 
    display: inline-block; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    cursor: pointer; 
 
    padding: 10px 20px; 
 
    border-top: 100px solid rgba(1,141,196,1); 
 
    border-right: 2px solid rgba(1,141,196,1); 
 
    border-bottom: 100px solid rgba(1,141,196,1); 
 
    border-left: 2px solid rgba(1,141,196,1); 
 
    font: normal 16px/normal "Times New Roman", Times, serif; 
 
    color: rgba(255,255,255,0.9); 
 
    -o-text-overflow: clip; 
 
    text-overflow: clip; 
 
    background: rgba(1,141,196,1); 
 
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ; 
 
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ; 
 
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
\t margin-top: 50%; 
 
\t \t margin-bottom: 50%; 
 
} 
 

 
#right:hover { 
 
    border-top: 100px solid rgba(164,215,234,1); 
 
    border-right: 2px solid rgba(164,215,234,1); 
 
    border-bottom: 100px solid rgba(164,215,234,1); 
 
    border-left: 2px solid rgba(164,215,234,1); 
 
    background: rgba(164,215,234,1); 
 
} 
 

 
#stop { 
 
    display: none; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    cursor: pointer; 
 
    margin: 0 0 0 5px; 
 
    border: 1px solid rgb(255,80,80); 
 
    -webkit-border-radius: 3px; 
 
    border-radius: 50px; 
 
    font: normal 18px/normal "Times New Roman", Times, serif; 
 
    color: rgba(255, 255, 255, 0.901961); 
 
    -o-text-overflow: clip; 
 
    text-overflow: clip; 
 
    background: rgb(255, 80, 80); 
 
    -webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ; 
 
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ; 
 
    text-shadow: -1px -1px 0 rgba(15,73,168,0.658824) ; 
 
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
\t position: absolute; 
 
\t margin-top: 30px; 
 
} 
 

 
#stop:hover { 
 
    -webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ; 
 
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ; 
 
    -webkit-transition: none; 
 
    -moz-transition: none; 
 
    -o-transition: none; 
 
    transition: none; 
 
} 
 

 
#stop:active { 
 
    background: rgba(242,188,196,1); 
 
    -webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ; 
 
    box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ; 
 
} 
 

 
#play { 
 
    display: block; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    cursor: pointer; 
 
    border: 1px solid #018dc4; 
 
    -webkit-border-radius: 3px; 
 
    border-radius: 50px; 
 
    font: normal 18px/normal "Times New Roman", Times, serif; 
 
    color: rgba(255,255,255,0.9); 
 
    -o-text-overflow: clip; 
 
    text-overflow: clip; 
 
    background: #0199d9; 
 
    -webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ; 
 
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ; 
 
    text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ; 
 
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    position: absolute; 
 
\t margin-top: 30px; 
 
    
 
} 
 

 
#play:hover { 
 
    -webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ; 
 
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ; 
 
} 
 

 
#play:active { 
 
    background: #e6eef2; 
 
    -webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ; 
 
    box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ; 
 
} 
 

 
#startClock { 
 
    float: right; 
 
    display: block; 
 
} 
 

 
#stopClock { 
 
    display: none; 
 
} 
 

 
body { 
 
background-color: #f9cf01; 
 
} 
 

 
#heading { 
 
    background: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    padding: 1.5em; 
 
    } 
 

 
#startClock { 
 
    display: block; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    cursor: pointer; 
 
    border: 1px solid #018dc4; 
 
    -webkit-border-radius: 3px; 
 
    border-radius: 50px; 
 
    font: normal 18px/normal "Times New Roman", Times, serif; 
 
    color: rgba(255,255,255,0.9); 
 
    -o-text-overflow: clip; 
 
    text-overflow: clip; 
 
    background: #0199d9; 
 
    -webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ; 
 
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ; 
 
    text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ; 
 
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    margin-left: 5px; 
 
position: absolute; 
 
} 
 

 
#startClock:hover { 
 
    -webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ; 
 
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ; 
 
} 
 

 
#startClock:active { 
 
    background: #e6eef2; 
 
    -webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ; 
 
    box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ; 
 
} 
 

 
#count { 
 
list-style: none; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    border: none; 
 
    font: normal 61px/1 "Times New Roman", Times, serif; 
 
    color: #f9cf01; 
 
    -o-text-overflow: ellipsis; 
 
    text-overflow: ellipsis; 
 
    text-shadow: 4px 4px 6px rgba(0,0,0,0.5) ; 
 
\t -webkit-user-select: none; 
 
    -moz-user-select: none;  
 
    -ms-user-select: none;  
 
    user-select: none; 
 
    text-align: center; 
 
    
 
} 
 

 
p { 
 
    padding: 10px 10px 10px 10px; 
 
    font: 12px/1.5 Georgia, Times New Roman, serif; 
 
} 
 

 
#stopClock { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    cursor: pointer; 
 
    margin: 0 0 0 5px; 
 
    border: 1px solid rgb(255,80,80); 
 
    -webkit-border-radius: 3px; 
 
    border-radius: 50px; 
 
    font: normal 18px/normal "Times New Roman", Times, serif; 
 
    color: rgba(255, 255, 255, 0.901961); 
 
    -o-text-overflow: clip; 
 
    text-overflow: clip; 
 
    background: rgb(255, 80, 80); 
 
    -webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ; 
 
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ; 
 
    text-shadow: -1px -1px 0 rgba(15,73,168,0.658824) ; 
 
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
\t position: absolute; 
 
} 
 

 
#stopClock:hover { 
 
    -webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ; 
 
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ; 
 
    -webkit-transition: none; 
 
    -moz-transition: none; 
 
    -o-transition: none; 
 
    transition: none; 
 
} 
 

 
#stopClock:active { 
 
    background: rgba(242,188,196,1); 
 
    -webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ; 
 
    box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ; 
 
} 
 

 
#minutes{ 
 
    float: left; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    border: none; 
 
    font: normal 20px/1 "Times New Roman", Times, serif; 
 
    color: #f9cf01; 
 
    -o-text-overflow: ellipsis; 
 
    text-overflow: ellipsis; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none;  
 
    -ms-user-select: none;  
 
    user-select: none; 
 
    text-align: center; 
 
    background-color: black; 
 
} 
 
#min{ 
 
    float: right; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    border: none; 
 
    font: normal 25px/1 "Times New Roman", Times, serif; 
 
    color: #f9cf01; 
 
    -o-text-overflow: ellipsis; 
 
    text-overflow: ellipsis; 
 
    text-shadow: 4px 4px 6px rgba(0,0,0,0.5) ; 
 
\t -webkit-user-select: none; 
 
    -moz-user-select: none;  
 
    -ms-user-select: none;  
 
    user-select: none; 
 
    text-align: center; 
 
\t position: absolute; 
 
    margin-left: -100px; 
 
} 
 

 
p { 
 
    padding: 10px; 
 
} 
 

 
#wrapper { 
 
    width: 100%; 
 
    min-width: 100px; 
 
    max-width: 2000px; 
 
    margin: 0 auto; 
 
} 
 

 
#header { 
 
    float: left; 
 
    width: 100%; 
 
    background: #FF6633; 
 
} 
 

 
#contentliquid { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
/*#content { 
 

 
    margin-left: 150px; 
 
    margin-right: 150px; 
 
}*/ 
 

 
#leftcolumn { 
 
    width: 150px; 
 
    float: left; 
 
    margin-left:-100%; 
 
} 
 

 
#rightcolumn { 
 
    width: 150px; 
 
    height: auto; 
 
    float: left; 
 
    margin-left: -150px; 
 
} 
 

 
#footer { 
 
    height: 90px; 
 
    width: 100%; 
 
    background: black; 
 
    clear: both; 
 
} 
 

 
img{ 
 
\t width="100%"; 
 
\t height="auto"; 
 
} 
 

 
#time { 
 
    width: 200px; 
 
    height: auto; 
 
    margin-left: 46%; 
 
    margin-right: auto; 
 
} 
 

 
#center { 
 
    width: 200px; 
 
    height: auto; 
 
    margin-left: 46%; 
 
    margin-right: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 

 
     <div id="header"><div id="heading">Text</div></div> 
 
    <div id="contentliquid"> 
 
    
 
    <div id="content"> 
 
    <img src="http://i68.tinypic.com/24azadh.gif" width="210px" height="210px" > 
 
    </div> 
 
    </div> 
 
    <div id="leftcolumn"> 
 
    <div id="left"><</div> 
 
    </div> 
 
     <div id="rightcolumn">  
 
    <div id="right">></div> 
 
    </div> 
 
    
 
    
 
     <div id="footer"> 
 

 

 
    
 
    
 
    
 

 
    
 
    <div id="count">0</div><br /> 
 
      <div id="center"> 
 
      <div id="time"> 
 
<div id="min">Mins</div> 
 
    <select id="minutes"> 
 
    <option value="600">10</option> 
 
    <option value="300">5</option> 
 
    <option value="240">4</option> 
 
    <option value="180">3</option> 
 
    <option value="120">2</option> 
 
    <option value="6" selected="selected">1</option> 
 
    </select> 
 
</div> 
 

 

 
      
 
    </div> 
 
      <button id=startClock >Start</button><button id=stopClock >Stop</button><input type="button" value="Music OFF" onclick="stop()" id="stop"><input type="button" value="Music ON" onclick="play()" id="play"> 
 

 
</div>

Quelle

2016-07-16 Milind Pandharkame

Bitte überprüfen Sie, ob divs richtig geschlossen sind und css auch ... ich denke es ist nicht so – vignesh

Ich werde das nochmal überprüfen .. es ist so verwirrend von jetzt .. lol –

war ich sehr frustriert und verpassten einige einfache Fehler in CSS ..

Dies das Problem behoben ..

img{ 
 
\t width: 100%; 
 
\t height: auto; 
 
}

Quelle

2016-07-18 07:23:56

CSS - Das Layout ist alles durcheinander

Antwort

Verwandte Themen