Peekit
-
Posts
19 -
Joined
-
Last visited
Peekit's Achievements
Explorer (1/14)
0
Reputation
-
спасибо, оперативно)
-
Ааа, да нет проблем дружище, смотри, вот тебе пример накидал: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> * {} .wrap { background: red;} .wrap .float { float: left; width: 300px; height: 300px;} .wrap:after { clear: both; display: block; overflow: hidden; height: 0; content: '.'; visibility: hidden; } * html .wrap{ height: 1%; } *+html .wrap { min-height: 1%;} </style> </head> <body> <div class="wrap"> <div class="float">Float</div> </div> </body> </html> Вот и всё, и никаких тебе overflow: hidden; буду признателен, если поясните немного этот пример (: clear и overflow так и нужны вместе, или чего-то одного будет достаточно? почему это будет работать, если мы добавляем этот афтер к wrap? разве это надо поместить не внутрь в самый низ? и для чего нужны две последние строчки в стилях - зачем и высоту и ещё минимальную высоту ставить? и ещё, вроде можно ведь сделать контент пустым, если написать '', или нет? спасибо)
-
в общем прочитал я статью вот эту: http://webmascon.com/topics/coding/43a.asp после неё вроде как всё должно было встать на свои места. но не встало.. не может кто-нибудь поподробнее раскрыть эту тему? спасибо
-
ок, гуглю..
-
Привет. Взял с одного сайта посмотреть шаблон с трёмя колонками, не совсем понимаю как он работает. <body> <div id="container"> <div id="header"><h1>Header</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p> <p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p> <p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p> <p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p> </div> </div> <div id="navigation"> <p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p> </div> <div id="extra"> <p><strong>3) More stuff here.</strong> very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p> </div> <div id="footer"><p>The footer.</p></div> </div> </body> div#wrapper{float:left;width:100%} div#content{margin: 0 200px} div#navigation{float:left;width:200px;margin-left:-100%} div#extra{float:left;width:200px;margin-left:-200px} div#footer{clear:left;width:100%} Если не трудно, объясните, пожалуйста, почему там отрицательные отступы -100% и -200px? И какую роль играет порядок дивов в коде? Потому что если блок контент поставить после навигации, то эффект получается другой Спасибо
-
да, спасибо. читал, но, видимо, невнимательно
-
всё, отбой тревоги.. я глупый, надо было просто задать зелёному позиционирование абсолютное вместо относительного. хотя я и не совсем понял, мне казалось что абсолютный ведёт отсчёт от границ страницы, а не родителя..
-
интересует такой вопрос: что можно и что нельзя задать тегу html с помощью стилей? вопрос назрел, ибо стала актуальной тема задания диву высоты 100%. добиться этого удалось лишь указанием того же всем родителям, включая хтмл. однако если внутри есть блок с контентом с overflow: hidden; то всё обрезается по высоте страницы. если задать auto - появляются полосы прокрутки внутри дива, что не есть красиво. а собственно тег html хоть и понимает высоту, но на overflow не реагирует. что ещё ему можно таким образом задавать? или только размеры?
-
ребяят..
-
кажется телепаты все в отпуске.. наверное надо поподробнее.. : <div id="orange"> <div id="yellow"> </div> <div class="green"> <div class="ugol"></div> <div class="lin"></div> </div> <div id="red"> </div> </div> div#orange { background: #fff; border-radius: 0 13% 0 0; -moz-border-radius: 0 13% 0 0; -webkit-border-radius: 0 13% 0 0; overflow: hidden; margin: 0 20% 20px 1%; padding-bottom: 80px; height: 70%; position: relative; z-index: 2; border-left: 2px solid #CD6889; } div#red { background: #fff; margin: 20px 20px 20px 28%; padding: 25px 10px 10px 1px; height: 100%; position: relative; z-index: 4; } div.green { float: right; position: relative; top: 0px; right: 2px; width: 100px; height: 100%; z-index: 3; } div.ugol { background: #fff; width: 100px; height: 100px; border-top: 2px solid #CD6889; border-right: 2px solid #CD6889; border-radius: 0 60% 0 0; -webkit-border-radius: 0 60% 0 0; -moz-border-radius: 0 60% 0 0; } div.lin { width: 100px; height: 100%; border-right: 2px solid #CD6889; } помогите, пожалуйста, зелёному дурачку..
-
чот я не пойму. выставил z-index, теперь картина такая: блок-то сверху, а текст почему-то всё равно дальше не пишется..
-
В общем ситуация: есть див с ещё тремя внутри. Жёлтый не трогаем. У зелёного заданы только бордеры - нужно вроде как оформление сделать, не суть. А в красном текст будет. И этот зелёный как бы в стороне - текст доходит только до его границы, некрасиво получается. А надобно, чтоб он шёл дальше. Как бы реализовать? У зелёного относительное позиционирование верх право + плавает справа, это нормально?
-
всем спасибо, ребят, выручаете)
-
Ну я так-то и не отрицаю, что зелёный совсем.. Просто реально не понял. overflow: hidden ведь нужен, чтобы содержимое блока обрезалось при большом размере? Почему тогда без него див при флоате уезжал под родителя? Искал много, сам ничего не нашёл.. буду благодарен за ответ (:
-
да я вроде знаю их.. Всё, получилось как-то. float: left для сайдбара убирал его под page из-за того что не было задано overflow: hidden. Правда я не совсем понял, каким образом это связано