Mark Ghaphes

Все гораздо проще (продиктовано необходимостью делать максимально быстро): Все очень просто и для реальной работы. Для изображений такого размера и качества нахрен градиенты не нужны. Ну да...ну да. В принципе, если не заботиться о качестве, такой вариант подходит. Только разница во времени не особо большая. Это также займет минуту.

В фотошопе, жмете ПКМ по слою -> Параметры наложения -> Наложение градиента. и несложными манипуляциями редактируете: цвет, прозрачность, масштаб, угол.

Отлично. Спасибо.

У меня еще вопрос касательно моего макета - фиксированным сайдбаром и резиновый контентом. Свойство overflow для блока content я использовал по примеру, который нашел в и-нете. Сам бы я ни за что бы не догадался его использовать, потому что судя по его описанию он "управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров." Дело в том что если убрать overflow:hidden то сайдбар выйдет за границы блока content. Не пойму логики работы этого свойства. А результат вот такой:

Ясно. У меня значит было искаженное представление об этой "коробке". Я думал что область паддинга находится внутри области размера(width/height). Спасибо.

Спасибо большое. Решение проблемы мне понятно. Но в чем причина такого поведения.? Паддинг же создает внутренние отступы, как они влияют на внешние элементы.? Не могли бы вы по-подробнее написать?

Суть проблемы: Не могу понять поведение свойства padding. Почему когда я задаю padding sidebar'у, отступ создается за счет контента?...причем по разному действует с разных сторон, в зависимости от расположения sidebar'а. body {margin:0; padding:0; background-color:black; background-image:url('bg images/bg_body.jpg'); background-position:top center;} #container {width:80%; background-color:; margin:50px 10% 100px 10%; min-width:800px;} #header {background-image:url('bg images/bg_header.jpg'); width:100%; height:300px; border:solid 2px black;} #header_layer_one {background-image:url('bg images/bg_header_layer_one.jpg'); background-position:center; background-repeat:no-repeat; width:100%; height:300px;} #nav {width:100%; height:50px; background-color:black; border:solid black 2px;} #nav_list {display:inline;} #nav_list, li {list-style-type:none;} #nav_list li {width:150px; height:50px; float:left;} #nav_list li:hover {background-position:bottom;} #nav_list li ul {visibility:hidden;} #nav_list li:hover ul li {visibility:visible; position:relative; bottom:300px;} #opportunities {background-image:url('bg images/opportunities.png'); height:50px; width:150px; } #structure {background-image:url('bg images/structure.png'); height:50px; width:150px;} #brain_power {background-image:url('bg images/brain_power.png'); height:50px; width:150px;} #about {background-image:url('bg images/about.png'); height:50px; width:150px;} #illustration_opportunities {background-image:url('bg images/illustration_opportunities.png'); height:250px; width:230px; right:0px;} #illustration_structure {background-image:url('bg images/illustration_structure.png'); height:230px; width:230px; right:150px;} #illustration_brain_power {background-image:url('bg images/illustration_brain_power.png'); height:250px; width:230px; right:300px;} #illustration_about {background-image:url('bg images/illustration_about.png'); height:250px; width:230px; right:450px;} .nav_list_link {width:150px; height:50px; display:block;} a {outline:none; text-decoration:none;} #content { height:100%; background-color:#272727; overflow:hidden; width:100%; border:solid black 2px; } #sidebar { width:200px; float:right; min-height:550px; padding-left:30px; padding-right:30px;} #some_info { } #some_info_header {width; height:60px; background-image:url('bg images/some_info_header.png');} #some_info_content { width:200px; background-image:url('bg images/some_info_content.png');} #some_info_footer { width:200px; height:60px; background-image:url('bg images/some_info_footer.png');} #main_info {margin-right:260px; min-height:500px; padding:10px; } #sidebar img {border:solid black 1px; margin-left:25px;} p {color:#5d5d5d;} #footer {clear:both; height:50px; width:100%; background-color:black; border:solid black 2px;} <!DOCTYPE html> <html> <head> <title>Power-of-brain.com</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div id="container"> <div id="header"> <div id="header_layer_one"> </div> </div> <div id="nav"> <ul id="nav_list"> <li id="opportunities"><a class="nav_list_link" href="opportunities.html" title="All about opportunities that gives to you your brain."></a> <ul class="illustration"> <li ><img src="bg images/illustration_opportunities.png" width="230px" height="250px"/></li> </ul> </li> <li id="structure"><a class="nav_list_link" href="structure.html" title="Structure of brain"></a> <ul class="illustration"> <li id="illustration_structure"><img src="bg images/illustration_structure.png" width="230px" height="250px"/></li> </ul> </li> <li id="brain_power"><a class="nav_list_link" href="brain power.html" title="Ways to boost your brain power"></a> <ul class="illustration"> <li id="illustration_brain_power"><img src="bg images/illustration_brain_power.png" width="230px" height="250px"/></li> </ul> </li> <li id="about"><a class="nav_list_link" href="about" title="About site. Little history. When it was created and established."></a> <ul class="illustration"> <li id="illustration_about"><img src="bg images/illustration_about.png" width="230px" height="250px"/></li> </ul> </li> </ul> </div> <div id="content"> <div id="sidebar"> <div id="some_info"> <div id="some_info_header"></div> <div id="some_info_content"> Есть множество способов расстаться с жизнью в Зоне. Конечно, не так много, как в большом городе, но все равно достаточно. В Зоне вы не попадете под случайную машину на дороге, вам не свалится на голову кирпич, и никакой канализационный люк не раскроет перед вами с любезностью зияющее отверстие в асфальте. По сравнению с мегаполисом, содержащим толпу бездумных марионеток, Зона, по всем правилам логики, должна была бы быть на удивление безопасным местом. Однако логика – наука беспристрастная, а человеческие мотивации сильно зависят от точки зрения, в которой практически всегда находится собственное Я. На квадратный километр Зоны может содержаться одна-единственная аномалия, да и то Птичья Карусель, которую с легкостью распознает любой детектор аномалий, но сам факт этого может влиять на человека так, словно он оказался с завязанными глазами посередине скоростной автострады. </div> <div id="some_info_footer">.</div> </div> </div> <div id="main_info"> <p>Есть множество способов расстаться с жизнью в Зоне. Конечно, не так много, как в большом городе, но все равно достаточно. В Зоне вы не попадете под случайную машину на дороге, вам не свалится на голову кирпич, и никакой канализационный люк не раскроет перед вами с любезностью зияющее отверстие в асфальте. По сравнению с мегаполисом, содержащим толпу бездумных марионеток, Зона, по всем правилам логики, должна была бы быть на удивление безопасным местом. Однако логика – наука беспристрастная, а человеческие мотивации сильно зависят от точки зрения, в которой практически всегда находится собственное Я. На квадратный километр Зоны может содержаться одна-единственная аномалия, да и то Птичья Карусель, которую с легкостью распознает любой детектор аномалий, но сам факт этого может влиять на человека так, словно он оказался с завязанными глазами посередине скоростной автострады. </p> </div> </div> <div id="footer"> </div> </div> </body> </html>

Всё. Проблему решил.

Помогло. Спасибо большое.

Суть проблемы: Действие :hover отменяется при наведении на доп.меню, хотя нужно что бы этот эффект сохранялся, и изначально этот эффект был. Это произошло после того как я в CSS сделал какие-то (не масштабные ) изменения. Факт в том, что я не могу понять, какие именно изменения стали причиной проблемы. Курсор над пунктом главного меню. Курсор над пунктом дополнительного меню. Не знаю поможет ли мой код... body { margin:0; padding:0; background-color:#020202; } #header { width:100%; height:720px; background-image:url('background images/bg_header - 1152.jpg'); } #adverts { background-image:url('background images/bg_adverts_1152.png'); background-repeat:no-repeat; width:200px; height:100%; position:absolute; } #nav { float:right; width:230px; height:410px; display:block; margin:50px 0 0 5px; } #nav_list { list-style-type:none; float:right; width:230px; height:410px; margin:0; padding:0; position:relative; } #list_books, #list_lessons, #list_manuals, #list_articles { list-style-type:none; } .nav_list_link, .nav_list_link:visited { width:230px; height:64px; display:block; color:#5b5b5b; text-align:right; font-family:"Courier new"; padding-right:10px; } .hidden { visibility:hidden; position:absolute ; right:230px; } #list_books { top:-64px; } #list_manuals { top:-128px; } #list_articles { top:-128px; } #list_lessons { top:-128px; } #nav_list li:hover { position:relative; } #nav_list li:hover > ul { visibility:visible; } .nav_list_link:hover { background-position:0 64px; } #nav_list li ul li { position:relative; height:25px; background-image:url('background images/bg_secondary_nav.png'); } .nav_list_link:hover { color:#790000; } #main_page { background-image:url('knobs/knob_main_page_1152.png'); } #books { background-image:url('knobs/knob_books_1152.png'); } #manuals { background-image:url('knobs/knob_manuals_1152.png'); } #articles { background-image:url('knobs/knob_articles_1152.png'); } #lessons { background-image:url('knobs/knob_lessons_1152.png'); } #about { background-image:url('knobs/knob_about_1152.png'); } a { outline:none; text-decoration:none; } #footer { position:fixed; left:0; bottom:0; background-image:url('background images/bg_footer.jpg'); width:1920px;; height:50px; } #button_top { background-image:url('knobs/button_top.png'); height:25px; width:100px; position:fixed; right:10px; bottom:10px; border-radius:5px; } #button_top:hover { display:block; background-position:0 25px; } #content { min-height:400px; background-color:#6e6957; margin-bottom:50px; padding:10px; } <!DOCTYPE html> <html> <head> <title>Bookman.com</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="javascript.js"></script> </head> <body> <div id="container"> <div id="header"> <a name="top"></a> <div id="adverts"> </div> <div id="nav"> <ul id="nav_list"> <li><a id="main_page" class="nav_list_link" href="main page.html"></a></li> <li> <a id="books" class="nav_list_link" href="books.html"></a> <ul id="list_books" class="hidden"> <li><a id="imaginative literature" class="nav_list_link" href="imaginative literature.html">Imaginative literature</a></li> <li><a id="poem" class="nav_list_link" href="poem.html">Poem</a></li> <li><a id="novel" class="nav_list_link" href="novel.html">Novel</a></li> <li><a id="documental" class="nav_list_link" href="documental.html">Documental</a></li> <li><a id="comedy" class="nav_list_link" href="comedy.html">Comedy</a></li> <li><a id="fantastic" class="nav_list_link" href="fantastic.html">Fantastic</a></li> <li><a id="tragedy" class="nav_list_link" href="tragedy.html">Tragedy</a></li> <li><a id="esse1" class="nav_list_link" href="esse1.html">Esse1</a></li> <li><a id="esse2" class="nav_list_link" href="esse2.html">Esse2</a></li> <li><a id="esse3" class="nav_list_link" href="esse3.html">Esse3</a></li> <li><a id="esse4" class="nav_list_link" href="esse4.html">Esse4</a></li> <li><a id="esse5" class="nav_list_link" href="esse5.html">Esse5</a></li> <li><a id="esse6" class="nav_list_link" href="esse6.html">Esse6</a></li> <li><a id="esse7" class="nav_list_link" href="esse7.html">Esse7</a></li> <li><a id="esse8" class="nav_list_link" href="esse8.html">Esse8</a></li> <li><a id="esse9" class="nav_list_link" href="esse9.html">Esse9</a></li> </ul> </li> <li> <a id="manuals" class="nav_list_link" href="manuals.html"></a> <ul id="list_manuals" class="hidden"> <li><a id="manual1" class="nav_list_link" href="manual1.html">Manual1</a></li> <li><a id="manual2" class="nav_list_link" href="manual2.html">Manual2</a></li> <li><a id="manual3" class="nav_list_link" href="manual3.html">Manual3</a></li> <li><a id="manual4" class="nav_list_link" href="manual4.html">Manual4</a></li> <li><a id="manual5" class="nav_list_link" href="manual5.html">Manual5</a></li> <li><a id="manual6" class="nav_list_link" href="manual6.html">Manual6</a></li> <li><a id="manual7" class="nav_list_link" href="manual7.html">Manual7</a></li> <li><a id="manual8" class="nav_list_link" href="manual8.html">Manual8</a></li> <li><a id="manual9" class="nav_list_link" href="manual9.html">Manual9</a></li> <li><a id="manual10" class="nav_list_link" href="manual10.html">Manual10</a></li> <li><a id="manual11" class="nav_list_link" href="manual11.html">Manual11</a></li> <li><a id="manual12" class="nav_list_link" href="manual12.html">Manual12</a></li> <li><a id="manual13" class="nav_list_link" href="manual13.html">Manual13</a></li> <li><a id="manual14" class="nav_list_link" href="manual14.html">Manual14</a></li> <li><a id="manual15" class="nav_list_link" href="manual15.html">Manual15</a></li> <li><a id="manual16" class="nav_list_link" href="manual16.html">Manual16</a></li> <li><a id="manual17" class="nav_list_link" href="manual17.html">Manual17</a></li> <li><a id="manual18" class="nav_list_link" href="manual18.html">Manual18</a></li> <li><a id="manual19" class="nav_list_link" href="manual19.html">Manual19</a></li> <li><a id="manual20" class="nav_list_link" href="manual20.html">Manual20</a></li> </ul> </li> <li> <a id="articles" class="nav_list_link" href="articles.html"></a> <ul id="list_articles" class="hidden"> <li><a id="article1" class="nav_list_link" href="article1.html">Article1</a></li> <li><a id="article2" class="nav_list_link" href="article2.html">Article2</a></li> <li><a id="article3" class="nav_list_link" href="article3.html">Article3</a></li> <li><a id="article4" class="nav_list_link" href="article4.html">Article4</a></li> <li><a id="article5" class="nav_list_link" href="article5.html">Article5</a></li> <li><a id="article6" class="nav_list_link" href="article6.html">Article6</a></li> <li><a id="article7" class="nav_list_link" href="article7.html">Article7</a></li> <li><a id="article8" class="nav_list_link" href="article8.html">Article8</a></li> <li><a id="article9" class="nav_list_link" href="article9.html">Article9</a></li> <li><a id="article10" class="nav_list_link" href="article10.html">Article10</a></li> <li><a id="article11" class="nav_list_link" href="article11.html">Article11</a></li> <li><a id="article12" class="nav_list_link" href="article12.html">Article12</a></li> </ul> </li> <li> <a id="lessons" class="nav_list_link" href="lessons.html"></a> <ul id="list_lessons" class="hidden"> <li><a id="lessons1" class="nav_list_link" href="lessons1.html">Lessons1</a></li> <li><a id="lessons2" class="nav_list_link" href="lessons2.html">Lessons2</a></li> <li><a id="lessons3" class="nav_list_link" href="lessons3.html">Lessons3</a></li> <li><a id="lessons4" class="nav_list_link" href="lessons4.html">Lessons4</a></li> <li><a id="lessons5" class="nav_list_link" href="lessons5.html">Lessons5</a></li> <li><a id="lessons6" class="nav_list_link" href="lessons6.html">Lessons6</a></li> <li><a id="lessons7" class="nav_list_link" href="lessons7.html">Lessons7</a></li> <li><a id="lessons8" class="nav_list_link" href="lessons8.html">Lessons8</a></li> <li><a id="lessons8" class="nav_list_link" href="lessons9.html">Lessons9</a></li> <li><a id="lessons10" class="nav_list_link" href="lessons10.html">Lessons10</a></li> </ul> </li> <li><a id="about" class="nav_list_link" href="about.html"></a></li> </ul> </div> </div> <div id="content"> </div> <div id="footer"> <a id="button_top" href="#top"></a> </div> </div> </body> </html>

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

Ваш код, troll: <html> <head> <title>Nothing</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> body {background-color:white; color:white;} .sidebar-wrap, .content-wrap {float: left;} .sidebar-wrap {width: 20%; height:500px; background-color:black;} .content-wrap {width: 80%; height:500px; background-color:grey; } .sidebar, .content {margin: 0 10px;} </style> </head> <body> <div class="sidebar-wrap"> <div class="sidebar">sidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebarsidebar</div> </div> <div class="content-wrap"> <div class="content"><p>contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p></div> </div> </body> </html> Результат: Такая же ситуация во всех браузерах. Что не так?

troll, лично у меня, этот код, не дает нужного результата, ни в одном из браузеров...

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

Ну я же пишу левый - 20%, правый - 80%, вместе - 100%. Это значит что, что бы вставить между ними блок, его прежде всего нужно поместить в общий контейнер вместе со всеми остальными, и назначить ширину, которой нет, потому что левый и правый занимают 100% ширины.

Padding создает внутренние отступы в четырёх направлениях, среди которых нет направления "между"...поэтому создавать обьединяющий контейнер для использования паддинга нет смысла, а если использовать margin, то он вытесняет правый контейнер...

А вот в этом-то и дело, что создать расстояние в четыре процента и я смогу, только нарушается условие задачи "...правая колонка - 80%...".

Есть некоторая задача: "Сделать два резиновых столбца. Первый — 20% по ширине, второй — 80%, между ними расстояние 20 пикселей, расстояния от краёв страницы слева и справа 10 пискелей. Без использования таблиц и javascript." Мой вопрос такой: Как сделать расстояние 20px. между колонками, если 20%+80%=100% т.е. вся доступная ширина, которая исключает еще какие-либо размеры вроде "20px".