Pozisyonlama divs # 2

Web geliştirme konusunda oldukça yeniyim ve SQL kullanarak basit bir sohbet sayfası oluşturmaya çalışıyorum. Bu şu anda ne var: Codepen Pozisyonlama divs # 2

HTML:

<body> 
    <div id="overlay"></div> 
    <div id="header"> 
     <div id="logo"> 
      <a href="http://csgovoid.net"></a> 
     </div> 
    </div> 

    <div id="chat_extended"> 
     <div id="chat_area"></div> 
     <input id="chat_input" type="text" placeholder="Chat..."> 
     <button id="send_button" onClick="send()">SEND</button> 
    </div> 
</body>

CSS:

html, 
body { 
    background-color: #333; 
    margin: 0; 
    padding: 0; 
} 

#overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0.2; 
    background: #ccc; 
    background: -webkit-linear-gradient(right top, #8900AB, #282828); 
    background: -o-linear-gradient(top right, #8900AB, #282828); 
    background: -moz-linear-gradient(top right, #8900AB, #282828); 
    background: linear-gradient(to top right, #8900AB, #282828); 
} 

#header { 
    position: absolute; 
    background: #404040; 
    width: 100%; 
    height: 10%; 
    border-bottom: 10px solid #9800AB; 
} 

#logo { 
    position: absolute; 
    background-image: url(http://csgovoid.net/img/logo.png); 
    background-repeat: no-repeat; 
    background-size: contain; 
    width: 100%; 
    height: 100%; 
} 

#chat_extended { 
    position: absolute; 
    background: #404040; 
    margin-top: 3.15%; 
    width: 20%; 
    height: 100%; 
    float: right; 
    border-left: 10px solid #9800AB; 
    text-align: center; 
    padding-top: 5%; 
} 

#chat_area { 
    position: absolute; 
    background: #ccc; 
    width: 100%; 
    height: 100%; 
    text-align: left; 
}

sohbet penceresi gibi sohbet penceresi içinde sohbet alanı ile sola dayalı olmalıdır this:

kaynak

2016-03-30 Robinlemon

Float'a ihtiyacınız yok: position kullanırken mutlak, sadece şunu kaldır ve sağa ekle: 0 - # chat-genişletilmiş

#chat_extended { 
position: absolute; 
background: #404040; 
width: 20%; 
height: 100%; 
border-left: 10px solid #9800AB; 
text-align: center; 
right: 0;

Bu yardımcı olur umarız!

kaynak

2016-03-30 18:09:48

Aha! Bu mükemmel, tek sorun, başlık sohbet penceresinin altında, sohbet penceresi altında olmalı! – Robinlemon

Bu, #chat_extended'in yüksekliğine neden oluyor, bunu% 90 olarak değiştirmeyi, z başlıklı: 2/# başlıklı (z başlıklı öğeyi z'deki diğer tüm öğelerin üzerine oturtuyor) ve #chat_area için en üstteki dolguyu eşleşecek şekilde ayarla başlık sınırınız .. HTML'nizi göreli bir düzende modellemenizi tavsiye ederim. –

float özelliği, kesinlikle yerleştirilmiş öğeler üzerinde çalışmaz. #chat_extended günü

, bu değiştir: Bununla

float: right;

right: 0;

böyle

Mutlak konumlandırma gerçekten böyle bir düzen için en iyi yöntem değil, daha rahat bir kez öylesine bunu değiştirmek isteyebilirsiniz.

kaynak

2016-03-30 18:19:35 omnichad

Aha! Bu mükemmel, tek sorun, başlık sohbet penceresinin altında, sohbet penceresi altında olmalı! – Robinlemon

Örnek görüntüyü, div kimliğinin hangi alana karşılık geldiğini etiketlemek isteyebilirsiniz. Nerede olacağını tahmin etmek kolay değil. – omnichad

Pozisyonlama divs # 2

cevap

İlgili konular