eleonore

Нашла ещё вариант html: <div class="navig"> <a href="#">SEARCH AIRPLANES</a>| <a href="#">RESTORATION</a>| <a href="#">MAINTENANCE</a>| <a href="#">EXHIBITIONS & AIRSHOW</a>| <a href="#">CONTACTS AND FEEDBACK</a> <span class="empty"></span> <!-- элемент, занимающий вторую строку --> </div> css: div.navig{ width: 90%; /* ширина меню */ margin: 0 auto; /* центрирование обертки меню */ text-align: justify; /* растягиваем содержимое меню */ overflow: hidden; /* скрываем не поместившиеся пункты */ } div.navig a{ text-decoration: none; /* убираем подчеркивание ссылки */ display: inline-block; /* если больше 1 слова в пункте */ color:#47566b; /* цвет ссылок */ width:18%; text-align:center; vertical-align:top; } .empty{ width: 100%; display: inline-block; } Но при сужении на 1024px слова падают друг под друга,что мне кажется не слишком красиво,хотя вроде и ничего,но все же хочется,чтобы все шло в одну строчку: О меньших расширениях я молчу,там вообще все в кучу становится.

под 768px, сужаться должно все меню.не только шрифт,а каждый li ,пропорционально сужаться должен и текст и паддинги.. И да,все должно идти в одну строку.

Использую display:table; и display:table-cell. Подскажите,пожалуйста,что делать,если в некоторых пунктах меню два слова,а в некоторых одно??"Двухсловесные" пункты при изменении размеров браузера скачут очень не красиво. При разрешении от 1024 и больше все хорошо:http://s41.radikal.r...19dc3cb1c98.jpg Когда сужается меньше 1024px происходит следующее: http://s018.radikal....f2c078a8d48.jpg Задала white-space:nowrap для li, помогло,слова перестали уходить друг под друга. Но теперь при сужении окна появляется огромная полоса прокрутки: http://s017.radikal....8b2ac1a4496.jpg Как сделать так,чтобы меню плавно сужалось и расширялось в зависимости от разрешения?? html: <nav> <ul class="navigation"> <li><a href="#">SEARCH AIRPLANES</a></li> <li>|</li> <li><a href="#">RESTORATION</a></li> <li>|</li> <li><a href="#">MAINTENANCE</a></li> <li>|</li> <li><a href="#">EXHIBITIONS & AIRSHOW</a></li> <li>|</li> <li><a href="#">CONTACTS AND FEEDBACK</a></li> </ul> </nav> css: ul.navigation{ display:table; width:100%; } ul.navigation li{ display:table-cell; padding:10px; text-align:center; white-space:nowrap; }

Да, table-row у меня уже на автомате Достаточно display:table;width:100% для ul (чтобы растянуть таблицу на ширину родителя) и table-cell для li. Все бы хорошо,ваш совет и мне очень помог,НО! Скажите,а что делать,если в некоторых пунктах меню два слова,а в некоторых одно??"Двухсловесные" пункты при изменении размеров браузера скачут очень не красиво. При разрешении от 1024 и больше все хорошо:http://s41.radikal.ru/i093/1304/0c/119dc3cb1c98.jpg Когда сужается меньше 1024px происходит следующее: http://s018.radikal.ru/i508/1304/fd/df2c078a8d48.jpg Задала white-space:nowrap для li, помогло,слова перестали уходить друг под друга. Но теперь при сужении окна появляется огромная полоса прокрутки: http://s017.radikal.ru/i425/1304/1d/d8b2ac1a4496.jpg Как сделать так,чтобы меню плавно сужалось и расширялось в зависимости от разрешения?? html: <nav> <ul class="navigation"> <li><a href="#">SEARCH AIRPLANES</a></li> <li>|</li> <li><a href="#">RESTORATION</a></li> <li>|</li> <li><a href="#">MAINTENANCE</a></li> <li>|</li> <li><a href="#">EXHIBITIONS & AIRSHOW</a></li> <li>|</li> <li><a href="#">CONTACTS AND FEEDBACK</a></li> </ul> </nav> css: ul.navigation{ display:table; width:100%; } ul.navigation li{ display:table-cell; padding:10px; text-align:center; white-space:nowrap; }

Теперь я поняла,да,спасибо за помощь!Я что-то этот нюанс упустила вообще...)

Потому что везде три строки текста, а в последнем блоке - две. Потому что все там держится на нижних отступах. И потому что блочные элементы игнорируют плавающие (!). То что разное кол-во строк я знаю.Как сделать так,чтобы высота section зависела от высоты контента.Ведь это естественно,чтобы материал был разной высоты.Блок section ведь должен тянуться в высоту в зависимости от содержимого,почему этого не происходит?Я не задавала высоту конкретно.Где моя ошибка?

Подскажите,почему у меня картинка в нижнем блоке съезжает вниз?Вот код: <section class="recent_news"> <article> <img src="images/05.png" alt="pic" class="pic"> <div class="text"> <time>05.12.11</time> <p><a href="#">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</a></p> </div> </article> <article> <img src="images/04.png" alt="pic" class="pic"> <div class="text"> <time>04.27.11</time> <p><a href="#">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 2000 years old.</a></p> </div> </article> <article> <img src="images/03.png" alt="pic" class="pic"> <div class="text"> <time>04.20.11</time> <p><a href="3">Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</a></p> </div> </article> <p><a href="#" class="all_news">All events and news</a></p> </section> css: .recent_news article{ background:#f8fdfe; color:#426c93; margin-bottom:30px; padding:15px 10px; -moz-box-shadow:0px 15px 15px -10px #8f9498; -webkit-box-shadow:0px 15px 15px -10px #8f9498; box-shadow:0px 15px 15px -10px #8f9498; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .recent_news article a{ color:#426c93; } time{ color:#273e53; font-size:11pt; } img.pic{ -moz-box-shadow:0px 15px 15px -10px #8f9498; -webkit-box-shadow:0px 15px 15px -10px #8f9498; box-shadow:0px 15px 15px -10px #8f9498; float:left; } .text{ margin-left:175px; }

Да фиг знает, может там ещё position:absolute; был, а может для внутренних элементов .content был проставлен float:left; что в принципе неправильно. Может ещё что. Это же нужно полный код видеть, что бы понять как там оно работало. Ну да ладно,спасибо за помощь!)

В htmlbook все довольно подробно описывается.Главное вдумчиво читать,выполнять все,что читаешь самому, сразу же.Лучшего русскоязычного учебника не найти,думаю.Правда времени уйдет очень много на самообучение,хотя это смотря сколько часов в день уделять и насколько основательно учиться.Попробуй уроки "Школы Программирования" посмотреть.Но я лично с учебника на этом сайте начинала,сложно,мозг кипит,медленно,но верно двигаюсь.Главное времени больше уделять и практика.Без неё никуда. Каждый малейший код в учебнике нужно разбирать.

http://htmlbook.ru/content/izobrazheniya-v-tekste http://htmlbook.ru/faq/kak-vyrovnyat-fotografiyu-po-tsentru-veb-stranitsy

Свежий мозг!Спасибо вам,все встало на место))).но почему,вроде проверила в учебнике,от туда и взяла образец кода,а в моем макете не сработало...?

Не могу понять,в чем проблема,сайдбар должен находиться справа,сбоку,а он упорно падает вниз!Он справа,но внизу,под #content, а не сбоку! .Почему?Люди, помогите,пожалуйста!!!)))) css код: @charset "utf-8"; /* CSS Document */ <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } html{ background:#dbe4e3 url(images/top_fon.png) no-repeat; height:100%; } body{ background:url(images/flag.png) 100% 0 no-repeat; height:100%; } header{ padding-top:370px; font-family: Cambria, Georgia, serif; font-size:12pt; } ul.navigation{ text-align:justify; overflow:hidden; /* нужно чтобы обрезать разные побочные эффекты приема */ height:20px;/* нужна чтобы устранить один побочный эффект, но иногда можно обойтись без нее */ cursor:default;/* растянутый текст justify приведет к тому что почти вся плашка меню будет иметь cursor: text */ padding:5px; margin:0px 85px 0px 85px; } ul.navigation li{ display:inline;/* чтобы пункты меню выступали в роли текста */ } ul.navigation li a{ display:inline-block; /* чтобы не разрывались слова в пунктах меню */ text-decoration:none; color:#47566b; } ul:after { /* эмуляция дополнительной строки, чтобы сработал justify */ content: "1"; margin-left: 100%; height: 1px; overflow: hidden; display: inline-block; } .gallery{ position:absolute; top:175px; right:70px; } #container{ overflow:hidden; padding:40px 20px 0px 85px; } aside{ float:right; width:25%; } aside h1{ font-weight:bold; font-size:12pt; } #content{ margin-right:26%; color:#495d71; } #content h1{ font-size:14pt; } .invite{ width:50%; } p{ padding:10px 0px; } .invite h1{ color:#a93b30; font:Georgia, "Times New Roman", Times, serif; font-size:18pt; text-decoration:underline; } .invite, .about{ border-bottom:1px dotted #909ba6; padding:40px 5px 40px 5px; font-size:12pt; } .about{ width:100%; margin-bottom:30px; } .about h1{ color:#2b3850; } .about a { color:#2a69a7; text-decoration:none; border-bottom:1px dashed #2a69a7; } .recent_news article{ background:#f8fdfe; color:#426c93; margin-bottom:20px; padding:15px 10px; -moz-box-shadow:0px 15px 15px -10px #8f9498; -webkit-box-shadow:0px 15px 15px -10px #8f9498; box-shadow:0px 15px 15px -10px #8f9498; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .recent_news article a{ color:#426c93; } time{ color:#273e53; font-size:11pt; } table{ width:100%; border:none; } td.pic{ width:170px; vertical-align:central; } td.pic img{ -moz-box-shadow:0px 15px 15px -10px #8f9498; -webkit-box-shadow:0px 15px 15px -10px #8f9498; box-shadow:0px 15px 15px -10px #8f9498; } td.text{ vertical-align:top; } .all_news{ font-size:14pt; color:#424f64; padding-top:30px; } .videobox{ font-size:9pt; color:#7f8e91 } footer{ } </style html- код: <body> <header> <p><img src="images/gallery.png" alt="gallery" class="gallery"> </p> <nav> <ul class="navigation"> <li><a href="#">SEARCH AIRPLANES</a></li> <li>|</li> <li><a href="#">RESTORATION</a></li> <li>|</li> <li><a href="#">MAINTENANCE</a></li> <li>|</li> <li><a href="#">EXHIBITIONS & AIRSHOW</a></li> <li>|</li> <li><a href="#">CONTACTS AND FEEDBACK</a></li> </ul> </nav> </header> <div id="container"> <div id="content"> <article class="invite"> <h1>We invite for cooperation</h1> <p>We invite professionals and enthusiasts and history buffs, fans of aviation. Any help is invaluable. Together, we will not let die the RAF Legends.</p> </article> <article class="about"> <h1>ABOUT MUSEUM</h1> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p> <p><a href="#">Full information</a></p> </article> <section class="recent_news"> <article> <table> <tr> <td class="pic"><img src="images/05.png" alt="pic"></td> <td class="text"> <time>05.12.11</time> <p><a href="#">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</a></p> </td> </tr> </table> </article> <article> <table> <tr> <td class="pic"><img src="images/04.png" alt="pic"></td> <td class="text"> <time>04.27.11</time> <p><a href="#">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 2000 years old.</a></p> </td> </tr> </table> </article> <article> <table> <tr><td class="pic"><img src="images/03.png" alt="pic"></td> <td class="text"> <time>04.20.11</time> <p><a href="3">Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</a></p> </td> </tr> </table> </article> <p><a href="#" class="all_news">All events and news</a></p> </section> </div> <aside> <p class="videobox">BATTLE OF BRITAIN LEGENDS</p> <h1>Latest video from Dunkirk Airshow</h1> </aside> </div> <footer> </footer> </body>

Единственной целью было показать одну страничку.Свобода на хостинге мне пока не нужна))

Здравствуйте,сверстала свой совершенно первый макет с psd. Верстала долго. Очень волнуюсь. Жду конструктивных отзывов по моей верстке. При верстке так же возникли некоторые проблемы,которые сама решить,к сожалению пока не смогла(((,нужна помощь,что бы разобраться где сделала ошибки: 1). В ie7 шапка сайта уезжает куда-то вправо + фон в поле для поиска становится белым. 2).Везде,кроме оперы сайдбар короче снизу чем content.В опере они наравне заканчиваются. 3).Safari по непонятным мне вообще причинам "съел" половину содержимого div.two_col ,он его попросту не отображает.Хотя когда запускаю страничку с помощью safari локально все прекрасно отображается.... 4).Во всех браузерах блоки из которых состоит шапка сайта при уменьшении окна браузера становятся в ряд друг под другом,а не идут в строчку. http://businessname.ucoz.com/

Это понятно !уже готово,на ucoz выложила,спасибо.

Значит просто захожу на любой из этих хостингов и заливаю туда свою страничку...Ок.спасибо.Буду пробывать))

Здравствуйте,извините за возможно глупый вопрос. Я сверстала первый макет с psd-шника и теперь вот что-то растерялась.Как мне его в интернет залить,чтобы была возможность проконсультироваться здесь с людьми по поводу верстки. Дать ссылку.Помогите,пожалуйста.Посоветуйте куда все это выложить и как?)

Разобралась...все дело в пробеле после слова and. если его не добавить,как делала я ,то ничего не работает.ювелирная работа

Протестировала на другом задании.И действительно,когда я пишу @media screen стиль не выполняется, а когда пишу просто @media выполняется. что за ерунда? А как тогда указывать для чего я пишу стиль, для screen или для print или еще для чего?

хм....странно.Ваш код действительно работает,а мой не работает.Я вижу единственное отличие: у вас в стилях @media , а у меня @media screen and,но я не думаю,что этот момент должен был стать решающим...спасибо за решение!

Кто-нибудь,подскажите почему в данном примере у меня выполняется только основной заданный стиль и первый медиа-запрос (min-width: 1200px )? Второй и третий медиа-запрос игнорируется,это хорошо видно в Firebug.Не понимаю почему так происходит,ведь все должно переопределяться... <style type="text/css" media="screen"> h1{font-size:30pt;} p{font-size:15pt;} @media screen and (min-width: 1200px) { h1{font-size:40pt;} p{font-size:20pt;} } @media screen and(max-width: 800px){ h1{font-size:25pt;} p{font-size:12pt;} } @media screen and(max-width: 400px){ h1{font-size:20pt;} } </style> </head> <body> <article> <h1>Заголовок</h1> <p>Позволяет отобрать элементы, на основе их позиции в родительском списке дочерних элементов. Можно использовать номер элемента, выражение или ключевые слова odd и even (для таблиц в стиле зебры). Например, если вы хотите получить группу из трех элементов, после четвертого, то можно использовать такую конструкцию.</p> </article>

Кто-нибудь,подскажите почему в данном примере у меня выполняется только основной заданный стиль и первый медиа-запрос (min-width: 1200px )? Второй и третий медиа-запрос игнорируется,это хорошо видно в Firebug.Не понимаю почему так происходит,ведь все должно переопределяться... <style type="text/css" media="screen"> h1{font-size:30pt;} p{font-size:15pt;} @media screen and (min-width: 1200px) { h1{font-size:40pt;} p{font-size:20pt;} } @media screen and(max-width: 800px){ h1{font-size:25pt;} p{font-size:12pt;} } @media screen and(max-width: 400px){ h1{font-size:20pt;} } </style> </head> <body> <article><!--статья--> <h1>Заголовок</h1> <p>Позволяет отобрать элементы, на основе их позиции в родительском списке дочерних элементов. Можно использовать номер элемента, выражение или ключевые слова odd и even (для таблиц в стиле зебры). Например, если вы хотите получить группу из трех элементов, после четвертого, то можно использовать такую конструкцию.</p> </article>

Cпасибо за ответ.

Кто работает с html5,подскажите, пожалуйста более правильный путь обучения.я изучила html4 и css и собираюсь начать изучение html5. Но заглянула в соответствующий раздел на этом сайте, а там сплошные var и function в примерах. То есть прежде, чем браться за изучение html5, нужно выучить javascript?

спасибо!