sashakiselev
-
Posts
47 -
Joined
-
Last visited
sashakiselev's Achievements
Explorer (1/14)
0
Reputation
-
stars, спасибо большущее! теперь я понял. как правильно замечено выше это Эрик Мейер "CSS.." 3-е издание, но я понимаю, что тут скорее переводчик виноват, я не первую книгу читаю в переводе.. и как правило ощущение, что те кто делают перевод понятия не имеют о предмете. Надо в оригинале читать - я ленюсь. я как то об этом не задумывался, принимая как данность что блок-"родитель" растягивается "дочерним" блоком. т.е. это происходит по причине наличия у свойств height и width по умолчанию значения auto? ******************************* собственно, пока писал пост Влад ответил спасибо ЗЫ.. и спасибо всем за критику языка книшки - это важно.. поначалу пеняешь на себя. Сейчас приятное понимание того, что напрасно, а написано действительно отвратительно.
-
1. Это пример из книжки, хоть это вроде и русский, но написанно так, что я не очень то понимаю принцип, хотя конечный результат ясен. Хочется попросить тех, кому это хорошо понятный теоретический момент, перефразировать это как-нибудь. Что именно просходит и почему? 2. В примере используется свойство height со значением auto (это значение мне понятно), но его наличие здесь ни на что не влияет. ? цитата Если у блочного элемента с высотой auto в нормальном потоке есть толко блочные потомки, тогда по умолчанию высота будет расстоянием от верха внешнего края рамки самого верхнего дочернего блочного элемента до низа внешнего края нижней рамки самого нижнего дочернего блочного элемента. Следовательно, поля дочерних элементов будут выходить за границы элемента, в котором они находятся. Однако если у блочного элемента есть отступ сверху или снизу или верхняя или нижняя рамки, его высотой будет расстояние от верха внешнего края верхнего поля его самого верхнего дочернего элемента до внешнего края нижнего поля самого нижнего дочернего элемента: пример <div><p>Paragraph</p></div> div { height: auto; /* на что-либо должно влиять тут?*/ background: silver; padding: 1px 0; /* или же border: 1px solid;*/ } p { background:#999; border: 1px solid red; margin:2em 0; }
-
как растянуть на 100% div-блок (position:absolute;)?
sashakiselev replied to artuska's question in HTML Coding
а здорово придумано .. я там не все пока понял, но сама суть по сабжу ясна - т.е. действительно то о чем я просил. А метод как раз назыают ложной колонкой так? (спортивный интерес) -
как растянуть на 100% div-блок (position:absolute;)?
sashakiselev replied to artuska's question in HTML Coding
Я сейчас с этим решением как раз ковыряюсь - начал с простого ctrl C / ctrl V - пока не понял откуда там синий цвет "создающий" одну из колонок.. т.е. у меня в браузере при открытии локально как хтмл документ - его нет.. а раз его нет то и увы решения нет.. вобщем не понятно. ———————————————-- упс.. картинку не видел в упор.. С "синим цветом" разобрался. -
как растянуть на 100% div-блок (position:absolute;)?
sashakiselev replied to artuska's question in HTML Coding
psywalker, спасибо.. не совсем то - но интересно, и кстати откуда там синий цвет у Left aside? я так и не понял ..готовые решения тоже попадались - Вот приблизительно то что надо http://blog.sjinks.pro/test/3col/3col_h100.html но по-моему это немного перебор - лучше картинками или таблицами.. нет? Если коротко сформулировать че мне надо - хочу простого => правильного решения подобной задачи - Две колонки (как выше), высота одной регулируется заполняемым контентом, при том что бэкграунд второй колонки (пустой или с меньшим по объему содержжимым) всегда "догоняет" первую, т.е. чтобы она не обрубалась. -
как растянуть на 100% div-блок (position:absolute;)?
sashakiselev replied to artuska's question in HTML Coding
Я нашел поиском эту тему - мне она оч. актуална - самая большая проблема для меня это понимание в css не фиксированных значений. Я не знаю имеет ли такой подход право на существование - совмещение фиксированных блоков с резиновыми. Возможно ли подобное?: Например типа того: ЗЫ.. по логике вещей понимаю, что формулы по типу "резиновый родитель=резиновый потомок+фикс.потомок" быть не может. Табличным путем я помню это вполне решаемо, но как это на дивах выполнить? Ведь по идее часто встречаемая должно быть штука.. нет? Или это только картинками можно сделать (ложные колонки - faux column; книжка "Мастерская CSS")? -
Figure 4. Where the margins sit. Figure 3. The margins revealed. которая из этих - третья?)) - хотя я обе прочел - ничего схожево не увидел.. там речь идет о суммировании марджинов на разных элементах - вобщем не увидел я общего.. у меня то суммироваться нечему..
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>Tuesday</title> <style type="text/css"> body { background: #474747; margin: 0px; padding: 0px; font-family: verdana; color: #000; } #container { background: #9cf; position: relative; margin: 20px auto; padding: 0px; width: 700px; height:500px; border: 5px solid #fff; /* РАМКА ТУТ=) */ } /* header ———————————————-- */ #pageHeader { height:100px; background: pink; } /* text ———————————————-- */ p { font-size: 12px; line-height: 16px; margin: 0; } </style> <body> <div id="container"> <div id="pageHeader"> <h1>css Zen Garden</h1> </div> <div id="quickSummary"> <p>A demonstration of wh..........................</p> <p>Download the sample <a href="">html file</a> and <a href="">css file</a></p> </div> <div id="preamble"> <h3>The Road to Enlightenment</h3> <p>Littering a d..............</p> <p>Today, we must c........</p> <p>The css Zen Garden invites ........</p> </div> </div> </body> </html> Searcher, а это как?.. где то размещать т.е.? shvv, спасибо за ссылку - ушел за кофе и читать)
-
shvv, а что есть "схлопывание маргинов" в данном примере? Тут вроде как значение margin только в одном месте фигурирует - у заголовка h6! .. в остальном же везде по нулям. Я тут даже специально margin у контеийнера убрал (margin: 0px auto);, чтоб прояснить вопрос.. Вопрос возник случайно - я до этого не знал, что у <h1/2/3/4/5/6>заголовков есть дефолтные поля margin сверху и снизу (причем у каждого заголовка свое значение)... так вот если не присвоить 0, то есть такая реакция на рамку - мне хотелось бы логику понять.
-
body { background: #474747; margin: 0px; padding: 0px; font-family: verdana; color: #000; } #container { background: #9cf; position: relative; margin: 0px auto; padding: 0px; width: 700px; border: 1px solid #fff /* !—РАМКА ТУТ!*/ } /* header ———————————————-- */ #pageHeader { height:100px; background: pink; } /* text ———————————————-- */ p { font-size: 12px; line-height: 16px; margin: 0; } h6 { margin-left: 0px; margin-right: 0px; margin-top: 24px; margin-bottom: 24px; } Значения для заголовка h6 вписал только для наглядности - это его дефолные значения вычесленные мной опытным путем. Собственно вопрос в том, что при наличии рамки у контейнера поле margin-top: 24px у заголовка принимает цвет контейнера (становится частью контейнера), при отсутствии оной тоже поле (margin-top: 24px) над заголовком принимает цвет body (перестает быть частью контейнера) Хотелось бы понять под какое правило попадает данная ситуация ну и т.д. ЗЫ.. поясню, так как хтмл решил не добавлять - он большой и явно тут лишний. Под заголовком тут понимается верхнее - css Zen Garden, весь остальной контент баластый мусор.
-
да доктайп, к этим незакрытым делам не подходит - эт я понимаю.. но я пробывал "ИХ" доктайп, закрывал li - один фиг В то, что у вас "все работает" я верю конечно, но помогите разобраться - почему у меня же.. ................ кажется я понял.. Searcher, дело не в закрытости li и доктайпе здесь. При клике по ссылке ведущей на несуществующую страницу, как в примере ребят делавших туториал, "нормальные браузеры" игнорируют сам факт посещения (что вроде кажется логичным, т.к. посещения то не было). Ну а при типовом, пробном варианте - <a href=""> без названия - ФФ и остальные работают как положено. ЗЫ.. вроде мелочь, а может стать настоящим выносом мозга - надеюсь теперь буду помнить)
-
Searcher, долго ломая голову где же найти ссылки, которые точно должны менять цвет убедился, что ФФ в порядке. Так что вопрос видимо к коду туториала от w3.org
-
s0rr0w, Searcher спасибо про 'разную силу' начинаю понимать, убрав значение none с text-decoration у ul.navbar a и a:hover присвоив наоборот text-decoration: none - все работает, т.е. псевдо-класс функционирует, но как следует поступить в данном примере (учитывая этот эффект силы) если нам нужен обратный результат?... в общем вникаю в суть по ссылке Searcher-а, я так понял ответ там. *Высчитывать 'важность' еще не научился), но полный путь - ul.navbar a:hover {text-decoration: underline;} - решает проблему с подчеркиванием. s0rr0w, спасибо - исправил, но увы посещенные ссылки от этого свой цвет менять не стали в ФФ или это тоже к "разной силе" имеет отношение? (хотя цвет ссылок больше нигде не фигурирует) эээ В общем с цветом по прежнему не понятно - всю эту пищу для размышления нашел в этом простом туторе http://www.w3.org/Style/Examples/011/firstcss#links, место весьма почтенное, ну а ФФ всетаки не меняет цвет ссылок по их образцу)..?
-
Удивило странное повидение "правильных" браузеров. Имея вот такие пожелания, записанные в CSS файле a:link {color: blue;} a:visited {color: perple;} a:hover {text-decoration: underline;} немогу получить желаемого от FF или Chrome - а именно добиться подчеркивания при наведении и изменения цвета посещенных ссылок, кстати если к hover присвоить цвет, то это в отличие от подчеркивания работает. Как это ни странно повидение IE6 в данном случае напротив предсказуемо - цвет посещенных ссылок меняется, подчеркивание работает. В чем моя ошибка? совершенно не понимая причину проблемы прикрепляю код примера: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My page</title> <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d;} ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em;} h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black;} ul.navbar a { text-decoration: none;} a:link { color: blue;} a:visited { color: perple;} a:hover { text-decoration: underline;} address { margin-top: 1em; padding-top: 1em; border-top: thin dotted;} </style> </head> <body> <!-- Site navigation menu --> <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul> <!-- Main content --> <p>There should be more here, but I don't know what yet.</p> <!-- Sign and date the page --> <address>Made 20 July 2010<br> by myself.</address> </body> </html>
-
друзья простите за убийственную тему).. Я уже ничего не соображаю и не спал сутки) не хочет картинка на бэкграунд вставать!? (у меня код весьма уже раздутый - и несколько css.. такая лень берет все отрубать=). может быть по опыту есть какие-нибудь соображения - "где искать"? ................................................................................ ............................................................................. первый раз наделал такое количество CSS файлов - для удобства)... вобщем проблема оказалось в этом.. хотя хз почему.. надеюсь понимание придет утром)