29Oct/0914
Basic CSS layout
The basic CSS layout I use in my work is plain simple - header, sontent, sidebar and footer.
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My page</title>
<base href="http://localhost/" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="wrap">
<div id="header">
Header
</div>
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
<div class="clr"></div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
And the CSS is very simple:
#wrap { width: 960px; margin: 0 auto; }
#header { }
#content { width: 700px; float: left; }
#sidebar { width: 260px; float: right; }
#footer { }
.clr { clear:both; height:0px; overflow:hidden; }
This is it. This code will show a simple page which is ready for hardcore modification. I know this is pretty basic yet it is one of the most used code snippets in my IDE. Good luck!
October 29th, 2009 - 07:41
Офигенно
, где ты раньше был 
?
А приведи плз пример какого-нибудь текстового блока (т.е. заголовок, текст)?
October 29th, 2009 - 08:09
Ну так я тут и был все время. Никуда не уходил В)
А что касается текстового блока – ну так как обычно… что-то вроде
<h1>Header</h1>
Lorem ipsum dolor sit amet
Ну и дальше по тексту. Вставляется в любое место по желанию. Паддинг/маржин по вкусу и все такое В)
Или ты что-то другое имел в виду?
October 30th, 2009 - 08:52
это
ну а если у тебя сложный блок инфы с кучей текста, картинок, да вдобавок с бэкграундом и закруглёнными со всех сторон краями
?
November 2nd, 2009 - 22:58
Ыыы… депендс. Куча текста – как всегда p, картинки – на флоат вешать. А если не на флоат то уже от ситуации – можно в отдельный див запихнуть, а можно и в таблицу если это список каких картинок.
А баграунд и закругленность – опять же депендс – если без тени – хватит на все про все трех дивов и двух картинок (1й угол – верхний див баграунд, 2й угол – верхний див картинка, 3й и 4й углы – то же самое в нижем дивом + с среднем диве контент). Если надо ещё и тень подложить – тогда ещё дивов можно добавить для левого/правого краев. Это полностью тянучка. А если без полной тянучки – я обычно делаю пресет ширины два имажа – верхний край + нижний край с длинным контент ареа. Очень далеко до универсальности, но для конкретных случаев более чем достаточно. Длинный контент ареа на величину файла не влияет почти. Главное в жпег не сувать -гиф или пнг В)
Ну и если сильно длинный контент таки возможен – можно и отдельно нарезать.
November 2nd, 2009 - 23:00
и да – изящности тут никакой нет, поэтому если западло можно плюнуть на ИЕ и поставить неофициальные ЦСС для оперы/ФФ или же яваскриптом это все вгонять на страничку – будет проще и поисковикам приятнее.
October 29th, 2009 - 07:41
и у тебя вверху два раза About
October 29th, 2009 - 08:07
Киитос, это я так заимпортил старый блог видимо и не заметил…
October 30th, 2009 - 08:53
на фото в About ты гипнотизируешь посетителя чтоле
?
November 2nd, 2009 - 22:49
Ага, это я учусь эффекту Hypno-Toad
November 3rd, 2009 - 13:27
глаза должны быть больше
January 13th, 2010 - 09:35
А на html5 когда перейдёшь?
January 13th, 2010 - 09:38
Так собственно, когда сам HTML5 все допилят. Пока что как-то мало смысла вижу в этом. Статейки, конечно, интересно почитать, но пока как-то продакшн на нем писать боязно.
November 3rd, 2009 - 13:52
Будем работать над этим В)
November 3rd, 2009 - 14:16
ну скажем так – закругленные края и тени – это то, чего лично я больше всего жду в ЦСС3. потому что это самые большие проблемы лично для меня. Но поддержка этого в ФФ и опере радует.