|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
21.02.2016, 11:39 | #1 |
Пользователь
Регистрация: 22.12.2015
Сообщений: 37
|
НЕ могу расставить SideBar слева/cправа контанта.
Добрый день. Подскажите как рассположить Sidebar с левой стороны и с правой стороны. по центру находиться Content. Прописал float справа, по центру и слева - но что-то никако ничего не получаеться.
Код HTML:
div#content{ width:601px; height:509px; outline:1px solid #0000CD; margin-left:280px; float:center; } div#sidebar_LEFT{ width:212px; height:509px; outline:1px solid #cc0000; float:left; } div#sidebar_sidebar_RIGHT{ width:212px; height:509px; outline:1px solid #cc0000; float:right; } |
21.02.2016, 13:17 | #2 | |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Цитата:
Alar, верни репу!
|
|
21.02.2016, 13:19 | #3 |
Пользователь
Регистрация: 07.06.2011
Сообщений: 19
|
Код HTML:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper { width: 800px; //background-color:red; } #left { width: 200px; float: left; border: 1px solid blue; height: 500px; } #right { width: 200px; float: right; border: 1px solid blue; height: 500px; } #center { width: 380px; background-color: green; margin:0 auto; height: 500px; } #clear { clear: both; } </style> </head> <body> <div id="wrapper"> <div id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, non?</div> <div id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, et?</div> <div id="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad.</div> <div id="clear"></div> </div> </body> </html> |
21.02.2016, 15:05 | #4 |
Старожил
Регистрация: 12.11.2010
Сообщений: 8,568
|
У свойства float нет значения center. У него есть только три значения: left, right и none. Последнее значение отменяет обтекание.
Вообще, чтобы выполнять подобное размещение элементов, рекомендуется поступать так. 1. разместить левый блок (float: left) 2. разместить правый блок (float: right) 3. Разместить центральный блок (без float или, если обтекание было установлено ранее и его надо отменить, то float: none, а также со отступом от левого края (margin-left) на расстояние, обеспечивающее нормальное отображение всех трёх блоков, хотя можно поступить так же, как это вы сделали - разместить центральный блок по середине враппера путём margin: 0 auto). 4. Все трём блокам задать ширину. |
22.02.2016, 04:45 | #5 |
Форумчанин
Регистрация: 22.02.2016
Сообщений: 145
|
Табличный дизайн сайта
Если не побрезгуете, используйте табличный дизайн сайта. Отсутствие головной боли - гарантирую.
Про float: center, уже вроде помянули И на мой взгляд, у вас неверная концепция разметки. Сайд-бары д.б. блоками которые находятся в том же (родительском) блоке, что и основное содержание и не должны иметь отдельный селектор с правилами. Если основное содержание имеет отдельный блок, то можете всем трём блокам приписать float: left.
Возьму в кредит мильён по 100% годовых на сто лет.
|
22.02.2016, 18:23 | #6 | |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Цитата:
Уходим в сторону семантики, не слушаем дятлов.
Alar, верни репу!
|
|
23.02.2016, 01:52 | #7 |
Регистрация: 23.02.2016
Сообщений: 3
|
Код HTML:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrapper {width: 960px; height: 500px; margin:0 auto;} .wrapper > div {box-sizing:border-box; display:inline-block; vertical-align:top; height: inherit; padding:10px;} .left {width: 250px; border: 1px solid #c00;} .right {width: 250px; border: 1px solid #c00;} .center {width: 460px; border: 1px solid #000;} </style> </head> <body> <div class="wrapper"><div class="left">Left</div><div class="center">Center</div><div class="right">Right</div></div> </body> </html> |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Форма как SideBar или systray Windows | DIMASIKXXX32 | Общие вопросы Delphi | 19 | 21.11.2012 03:25 |
Почти Vista SideBar всего 21 kb | kachkarvv | Софт | 4 | 26.01.2012 22:25 |
С++ гаджет для Windows SideBar | PavelGord | Общие вопросы C/C++ | 0 | 20.02.2011 21:57 |
Расставить пробелы | dukesoteg | Помощь студентам | 0 | 10.06.2010 18:30 |
сдвигается sidebar в ie6 | coolerS | HTML и CSS | 0 | 12.12.2009 15:22 |