Newbie's blog

[c1mot1k]

Всем привет, решил подтянуть отстатки знаний полученных в школе/техникуме и взялся за HTML/CSS для начала=)

Собственно мой метод обучения достаточно прост - прочитал(выучил), опробывал на практике.

С самого начала не стал браться за макет, т.к. ожидал проблем в блочной вёрстке с которой я начну свой блог/тему начинающего верстальщика.

И так, поехали . . .

Начинаю с самого простого пожалуй вопроса, на который затруднился найти ответ:

По какой причине, при использовании float:left(создание двух колоного макета+хедер и футер), в опере, колонка контента(правая) залазиет на сайдбар ?

чтобы убедится в том что действительно залазиет скруглил уголки(заодно применил).

P.S.: Все вопросы буду выделять жирным, да бы облегчить чей либо "поиск" в будущем, таких как я, которые игнорируют машинный поиск и листают over9k страниц.

P.S.S.: Уважаемых администраторов/модераторов прошу тему не сносить, в случае каких либо нарушениях, т.к. это очень для меня важно, и мало того, есть перспектива перехода её в фак.

P.S.S.: Самое главное то забыл . . . :

IMG:

CODE:

<style type="text/css">
 .sidebar, .content {margin:3%;}
 .header, .sidebar, .content { border-radius: 30px 30px 30px 30px; }
 #main { background: black;
 	     margin: none;}
 .header { background: #ccc;


 		   height: 200px;
		   text-align: center;}
 .sidebar { background: #fc0;
 		  	text-align:center;
			float: left;
			height: 500px;
			width: 10%;}
 .content { background: #ffcccc;

 		  	text-align: center;
 		  	margin-left: 10%;
			height: 500px;}
 .footer { background: #ffccc2;
		   text-align: right;
 		   height: 130px;
		   clear: float;}
 body {margin: 1%;}



 </style>

Edited February 6, 2012 by c1mot1k

[ablay2009]

Попробуйте так:

<style type="text/css">
 #main {background: black;margin: 0;}
 .sidebar, .content {margin:3%;}
 .header, .sidebar, .content { border-radius: 30px; }
 .header {background: #ccc;height: 200px;text-align: center;}
 .sidebar {background: #fc0;text-align:center;float: left;height: 500px;width: 10%;}
 .content {background: #ffcccc;text-align: center;float:left;margin-left: 10%;height: 500px;}
 .footer {background: #ffccc2;text-align: right;height: 130px;clear: both;}
 </style>

А вообще не плохо бы с разметкой познакомиться.

[c1mot1k]

Всё отлично получилось, лишь с тем отличием что теперь надобность в маргин лефт у контента полностью отпала, хотя такой код я взял из макета с хтмлбук.

Возникший вопрос: Это хак/особеность для оперы?

В чём смысл взаимного обтекания и почему залезало ? http://htmlbook.ru/css/float - здесь ведь всё так просто.

Принцип взял тут http://htmlbook.ru/layout/rezinovaya-shirina-navigatsiya-sleva .

Буду благодарен за любые разжовывания, поверхностное изучение смысла не имеет наверное=)

P.S.: По поводу разметки, учту, впредь всё буду выкладывать в лучшем виде, единственно вопрос опять: почему в строчку ? столбик как минимум не хуже.

Edited February 6, 2012 by c1mot1k

[ablay2009]

Дело в том, что "плавающие" блоки как бы вынимаются из общего потока и блочный элемент его тупо не замечает и проходит сквозь него, будто его не существует. В то время как строчные элементы прекрасно понимают то, что блок плавающий и его надо обтекать.Чтобы привести блоки в нормальное состояние либо задают ширину обоих блоков явно, либо делают второй блок плавающим. Во втором случае из потока вынимаются оба блока и они идут друг за другом.

Кстати в этом случае контейнер (в котором находятся оба блока) думает, что ничего в нем нету и принимает нулевую высоту, чтобы избежать этого контейнеру задают overflow:hidden (который по идее должен скрывать содержимое, выходящее за пределы блока, но на самом деле браузеры подгоняют контейнер под высоту/ширину дочерних блоков), или ставят перед закрывающим тегом контейнера блок с clear:both. Вот такие пироги.

P.S. под разметкой я имел ввиду html код, а не способ написания css кода. Вам никто не запрещает писать код столбиком, и даже наоборот написание кода в столбик упрощает его чтение в дальнейшем. Но я и так могу прочитать, поэтому пишу в строчку (из плюсов: более короткий код и меньший размер файла стилей).