Jump to content

Mark Ghaphes

Newbie
  • Posts

    18
  • Joined

  • Last visited

  • Days Won

    1

Mark Ghaphes last won the day on January 3 2012

Mark Ghaphes had the most liked content!

About Mark Ghaphes

  • Birthday 05/28/1992

Information

  • Sex
    Мужчина
  • From
    Украина, Харьков.
  • Interests
    Муз. композирование. IT-сфера.

Mark Ghaphes's Achievements

Explorer

Explorer (1/14)

1

Reputation

  1. Все гораздо проще (продиктовано необходимостью делать максимально быстро): Все очень просто и для реальной работы. Для изображений такого размера и качества нахрен градиенты не нужны. Ну да...ну да. В принципе, если не заботиться о качестве, такой вариант подходит. Только разница во времени не особо большая. Это также займет минуту.
  2. В фотошопе, жмете ПКМ по слою -> Параметры наложения -> Наложение градиента. и несложными манипуляциями редактируете: цвет, прозрачность, масштаб, угол.
  3. У меня еще вопрос касательно моего макета - фиксированным сайдбаром и резиновый контентом. Свойство overflow для блока content я использовал по примеру, который нашел в и-нете. Сам бы я ни за что бы не догадался его использовать, потому что судя по его описанию он "управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров." Дело в том что если убрать overflow:hidden то сайдбар выйдет за границы блока content. Не пойму логики работы этого свойства. А результат вот такой:
  4. Ясно. У меня значит было искаженное представление об этой "коробке". Я думал что область паддинга находится внутри области размера(width/height). Спасибо.
  5. Спасибо большое. Решение проблемы мне понятно. Но в чем причина такого поведения.? Паддинг же создает внутренние отступы, как они влияют на внешние элементы.? Не могли бы вы по-подробнее написать?
  6. Суть проблемы: Не могу понять поведение свойства 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>
  7. Суть проблемы: Действие :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>
  8. Я присвоил фон внутренним слоям как вы и сказали. В принципе, ваш код очень даже рабочий и по сути задача решена. Благодарю...
  9. Ваш код, 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> Результат: Такая же ситуация во всех браузерах. Что не так?
  10. troll, лично у меня, этот код, не дает нужного результата, ни в одном из браузеров...
  11. Мне эту задачу один из опытных верстальщиков дал, хотел проверить меня на мою базу знаний, прежде чем принять меня на работу. Вот я и думаю, в ком сомневаться, в себе, не опытном, или в нем, который имеет хороший стаж?..
  12. Ну я же пишу левый - 20%, правый - 80%, вместе - 100%. Это значит что, что бы вставить между ними блок, его прежде всего нужно поместить в общий контейнер вместе со всеми остальными, и назначить ширину, которой нет, потому что левый и правый занимают 100% ширины.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy