LINUX.ORG.RU
Форум — Web-development  

[novice] div css для мессаги форума


0

1

Здравствуйте.

Возникла задача написать мелкий форум, попутно решил попробовать освоить верстку div'ами. Неуспешно :) Как я хочу увидеть это в html: 

    <div class='message'>
        <div class='message-user-info'>
            Posts: 49230
        </div>
        
        <div class='message-container'>
            <div class='message-title'>
                title
            </div>
            <!-- <hr/> -->
            <div class='message-body'>
                content
            </div>
        </div>
        
        <div class='message-info'>
            message-info
        </div>
    </div>

Как я попытался это описать в css 

.message {
    padding: 10px 10px 10px 10px;
    /*min-width: 90%;
    min-height: 100px;
    */
    width: 100%;
    height: 100%;
    
    background: pink;
    border-radius: 10px;
}

.message-user-info {
    padding: 10px 10px 10px 10px;
    min-height: 100px;
    min-width: 100px;
    background: lightgreen;
    border-radius: 10px;
    
    float: left;
}

.message-container {
    padding: 10px 10px 10px 10px;
    min-height: 100px;
    min-width: 300px;
    width: 100%;
    
    background: black;
    border-radius: 10px;
    
    float: left;
}


.message-title {
    padding: 10px 10px 10px 10px;
    min-height: 100px;
    background: cyan;
    border-radius: 10px;
}

.message-body {
    padding: 10px 10px 10px 10px;
    min-height: 100px;
    background: white;
    border-radius: 10px;
}

.message-info {
    padding: 10px 10px 10px 10px;
    min-height: 100px;
    background: brown;
    border-radius: 10px;
    
    float: left;
}

Как это должно выглядеть.

Дело в том, что я что-то совершенно не понимаю как сделать инкапсуляцию, к примеру как в layout'ах того же Qt.



Последнее исправление: division_hell (всего исправлений: 1)

Ответ на: комментарий от Tanger 
.message {
    padding: 10px 10px 10px 10px;
    /*min-width: 90%;
    min-height: 100px;
    */
    /*width: 100%;
    height: 100%;
    */
    background: pink;
    border-radius: 10px;
    
    
    
}

.message-user-info {
    padding: 10px 10px 10px 10px;
/*     min-height: 100px; */
/*     min-width: 100px; */
/*     height: 100%; */
	width: 20%;
    background: lightgreen;
    border-radius: 10px;
    
    float: left;

}

.message-container {
    padding: 10px 10px 10px 10px;
    width: 75%;
    background: black;
    border-radius: 10px;
    float: right;
}


.message-title {
    padding: 10px 10px 10px 10px;
/*     min-height: 100px; */
    background: cyan;
    border-radius: 10px;
    
/*     width: 640px; */
}

.message-body {
    padding: 10px 10px 10px 10px;
/*     min-height: 100px; */
    background: white;
    border-radius: 10px;
    
/*     width: 640px; */
}

.message-info {
    padding: 10px 10px 10px 10px;
    min-height: 10px;
    background: brown;
    border-radius: 5px;
    
/*     font-size: 10px; */
    
    clear: both;
}
Tanger ★★★★★
()
Ответ на: комментарий от minakov

Если я хочу сделать две колонки. Одну фиксированной ширины в px, а другую в %, как это сделать без таблиц?

Tanger ★★★★★
()
Ответ на: комментарий от minakov

javascript :)
вертикальное выравнивание в HTML - не очень...

Печально. А еще тогда вопрос: при масштабировании окна браузера происходит перенос контейнера вниз. Как этого избежать?

И да, проценты размеров непонятно от чего считаются. Т.е. процентные размеры изменяются не синхронно. Как с этим белые люди борются? :)

division_hell
() автор топика
Ответ на: комментарий от minakov

пробовал делать у правого margin-left: 210px; - не помогает.

Весь код:

<html>
	<style>
		#left {
			background: blue;
			width: 200px;
			float: left;
		}
		#right {
			background: red;
			float: right;
			width: 100%;
			margin-left: 210px;
		}
	</style>
	<div id=left>123</div>
	<div id=right>234</div>
</html>

Tanger ★★★★★
()
Ответ на: комментарий от division_hell

при масштабировании окна браузера происходит перенос контейнера вниз

Не воспроизвел на последнем коде...

Проценты всегда считаются от размера окна браузера

minakov ★★★★★
()
Ответ на: комментарий от minakov

Да, я тоже не воспроизвел - с маржином все работает как ожидается, просто я начал отвечать до появления последнего кода. :)

А таблицами вертикально - это имеется в виду воткнуть внутрь дива таблицу определенного размера?

division_hell
() автор топика
Ответ на: комментарий от Tanger

У тебя ширина правого дива всегда == 100% ширины окна браузера в этом случае.
Просто не указывай ширину - он растянется на 100% доступного пространства у родительского блока(body), а маржин нужен для отступа. Правый флоат можно не указывать, если между блоками не будешь вписывать еще блоки.

Можно вложить конструкцию в блок с любой шириной и уже считать от него - тогда можно не выходить за пределы окна - поэтому по-умолчанию я сую весь код в #container с заданными границами - либо резиновыми, либо фиксированными

minakov ★★★★★
()
Ответ на: комментарий от division_hell

Да, думаю за одну таблицу для такого дела местные дивные верстальщики не прибьют. Просто без скриптов заставить два отдельных блока зависеть друг от друга - сложно(не знаю, может и невозможно совсем). А ячейки таблицы по стандарту зависимы по высоте. Только чтобы вели они себя как див без стиля нужно сделать collapse и vertical-align:top; Остальное гугли...

minakov ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development