Vzor
-
Posts
21 -
Joined
-
Last visited
Vzor's Achievements
Explorer (1/14)
0
Reputation
-
И еще обнаружил внизу <div id="" footer"="> надо поменять наверно на: <div id="footer"> так же нету атрибутов alt у картинок, и правильнее писать ссылку внутри тега "li" а не оборачивать ей элемент списка. Не Аис <a href="#"><li>Главная</li></a> <a href="#"><li>Рефераты</li></a> <a href="#"><li>Сочинения</li></a> <a href="#"><li>Контакты</li></a> Вот так Айс <li><a href="#">Главная</a></li> <li><a href="#">Рефераты</a></li> <li><a href="#">Сочинения</a></li> <li><a href="#">Контакты</a></li>
-
Я так понял должно было быть так: <html> <head> <title>Рефераты для студентов</title> <link rel="stylesheet" href="http://magazine-lady.ru/script/maket1/style.css" type="text/css"> </head> <body> <div id="container"> <div id="header"> <div id="logo"><img src="http://magazine-lady.ru/script/maket1/img/logo.png"></div> </div> <div id="centr"> <h1>Темы рефератов и сочинений</h1><br> <!-- ========== CRASH Start ============== --> <style> #lc p a, #rc p a { color: #838181; line-height: 32px; padding: 10px; text-decoration: none; } </style> <div id="lc"> <p><a href="#">Астрономия и космонавтика ..... 0</a></p> <p><a href="#">Банковское, биржевое дело и страхование ..... 0</a></p> <p><a href="#">Биология и естествознание ..... 0</a></p> <p><a href="#">Безопасность жизнедеятельности и охрана труда ..... 0</a></p> <p><a href="#">Бухгалтерский учет и аудит ..... 4072</a></p> <p><a href="#">Военное дело и гражданская оборона ..... 0</a></p> <p><a href="#">География и экономическая география ..... 0</a></p> <p><a href="#">Геология, гидрология и геодезия ..... 0 </a></p> <p><a href="#">Журналистика, издательское дело и СМИ ..... 0</a></p> <p><a href="#">Иностранные языки и языкознание ..... 0 </a></p> <p><a href="#">История и исторические личности ..... 20</a></p> <p><a href="#">Коммуникации, связь, радиоэлектроника ..... 0</a></p> <p><a href="#">Краеведение и этнография ..... 0</a></p> <p><a href="#">Кулинария и продукты питания ..... 0</a></p> <p><a href="#">Культура и искусство ..... 0 </a></p> <p><a href="#">Литература ..... 0 </a></p> <p><a href="#">Маркетинг, реклама и торговля ..... 0</a></p> <p><a href="#">Математика ..... 0</a></p> <p><a href="#">Медицина, здоровье ..... 0</a></p> <p><a href="#">Международные отношения и мировая экономика ..... 0</a></p> <p><a href="#">Менеджмент и трудовые отношения ..... 0 </a></p> <p><a href="#">Музыка ..... 0</a></p> </div> <div id="rc"> <p><a href="#">Астрономия и космонавтика ..... 0</a></p> <p><a href="#">Банковское, биржевое дело и страхование ..... 0</a></p> <p><a href="#">Биология и естествознание ..... 0</a></p> <p><a href="#">Безопасность жизнедеятельности и охрана труда ..... 0</a></p> <p><a href="#">Бухгалтерский учет и аудит ..... 4072</a></p> <p><a href="#">Военное дело и гражданская оборона ..... 0</a></p> <p><a href="#">География и экономическая география ..... 0</a></p> <p><a href="#">Геология, гидрология и геодезия ..... 0 </a></p> <p><a href="#">Журналистика, издательское дело и СМИ ..... 0</a></p> <p><a href="#">Иностранные языки и языкознание ..... 0 </a></p> <p><a href="#">История и исторические личности ..... 20</a></p> <p><a href="#">Коммуникации, связь, радиоэлектроника ..... 0</a></p> <p><a href="#">Краеведение и этнография ..... 0</a></p> <p><a href="#">Кулинария и продукты питания ..... 0</a></p> <p><a href="#">Культура и искусство ..... 0 </a></p> <p><a href="#">Литература ..... 0 </a></p> <p><a href="#">Маркетинг, реклама и торговля ..... 0</a></p> <p><a href="#">Математика ..... 0</a></p> <p><a href="#">Медицина, здоровье ..... 0</a></p> <p><a href="#">Международные отношения и мировая экономика ..... 0</a></p> <p><a href="#">Менеджмент и трудовые отношения ..... 0 </a></p> <p><a href="#">Музыка ..... 0</a></p> </div> <!-- ========== CRASH END ============== --> <div id="sidebar"> <div id="order"><a href="#"><img src="http://magazine-lady.ru/script/maket1/img/order.png"></a></div> <span>Новые рефераты</span> <ol> <a href="#"><li>Психологие человека</li></a> <a href="#"><li>Сочинение по книге Тургенева «Му-Му»</li></a> <a href="#"><li>«Мёртвые души»</li></a> <a href="#"><li>Моя любимая книга</li></a> <a href="#"><li>Что такое сифилис?</li></a> <a href="#"><li>Как появляется чёрная дыра?</li></a> <a href="#"><li>Кто такие Атланты?</li></a> <a href="#"><li>Строение Земли</li></a> <a href="#"><li>Племена и народы Африки</li></a> <a href="#"><li>Что такое qwerty?</li></a> </ol> </div> </div> <div id="login"><a href="#">Вход</a> | <a href="#">Регистрация</a></div> <div id="" footer"=""> <div id="copy">Дизайн разработан студией ScrollART’s<br> Все материалы на сайте принадлежат администрации. При копировании материалов указывайте ссылку на источник.<p></p> </div> <div id="page"> <a href="#">О нас</a> <a href="#">Помощь</a> <a href="#">Контакты</a> </div> </div> </div> <!-- /container --> </body> </html> У себя вырежите и стили поправте. <!-- ========== CRASH Start ============== --> <!-- ========== CRASH END ============== --> <style> #lc p a, #rc p a { color: #838181; line-height: 32px; padding: 10px; text-decoration: none; } </style>
-
Доброго дня уважаемые форумчане. Попрбовал сверстать макет из этой темы. В макете я использовал html5 теги, недеюсь без ошибок. Выставляю на ваш справедливый суд - BusinesName. Возможные ошибки: В Psd макете шрифты заголовков как бы несколько размыты а в верхних 3х блоках шрифты немного прозрачны у меня это не так. Блок с таблицей из отличающихся по цвету строк я сверстал списком. И несовсем понятно что там внутри, ссылки или подчёркнутый текст.
-
Привет, вот решил попробывать сверстать макет Raira PSD из этой темы, надеюсь получилось не совсем ужастно. Заранее спасибо за критику и советы. Макет Raira.
-
Извеняюсь ниже случаино копию своего ответа создал. Затёр ...
-
mrnobody а если отступ от верха чуть меньше сделать, к примеру 1px то меню неуспевает попадать. Основываясь на вашем примере у меня получилось так: #nav - добавляем display: relative; #nav li - удаляем position: relative; #nav ul - добавляем top: 26px; #nav ul li - добавляем float: left; Далее если нужно чтоб подменю появлялось под выделенным пунктом. #nav li:hover ul - заменяем left:0; на display:block; #nav ul - заменяем left:-9999px; на display:none; Данный приме не претендует на универсальность но как вариант.
-
NeoXidizer, Спасибо за советы и замечания. Я не стал пользовать HTML5 теги так как нехотел цеплять дополнительный Js для IE поддержки: <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> Да и не как не избавлюсь от привычки осторожности к нововведениям.
-
Ну вот что получилось - ссылка. Надеюсь на справедливую критику и советы.
-
Скачалось без проблем, попробую тоже сделать а то опыта верстки с макетов нет никакого надо начинать исправлять.
-
Wrap если перевести с английского обёртка. В данном примере это всего лишь имя для CSS класса, можно заменить на любое другое слово. Верстальшики обзывают его так обычно потому что, блок с таким именем в большинстве случаев используется для оборачивания других блоков внутри себя.
-
Есть вот такой вариант не таблицей. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <style type="text/css"> .box1 { background: #91D149; /* цвет фона */ width: 45px; /* ширина блока */ padding: 3px; /* отступы */ float: left; /* обтекание слева */ } .box2 { background: #4769E0; /* цвет фона */ width: 45px; /* ширина блока */ padding: 3px; /* отступы */ float: left; /* обтекание слева */ } .wrap_box { overflow:hidden; /* отображение содержания блочного элемента */ } </style> </head> <body> <div class="wrap_box"> <div class="box1">Блок 1 блок 1 блок 1 блок 1 блок 1</div> <div class="box2">Блок 2 блок 2 блок 2 блок 2 блок 2</div> </div> <p>Hello World</p> </body> </html> jsfiddle Если нужно таблицей можно так: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <style type="text/css"> .tbox { border-collapse: collapse; /* как отображать границы */ } .tbox1 { background: #91D149; /* цвет фона */ width: 45px; /* ширина блока */ padding: 3px; /* отступы */ } .tbox2 { background: #4769E0; /* цвет фона */ width: 45px; /* ширина блока */ padding: 3px; /* отступы */ } </style> </head> <body> <table class="tbox"> <tr> <td class="tbox1">Блок 1 блок 1 блок 1 блок 1 блок 1</td> <td class="tbox2">Блок 2 блок 2 блок 2 блок 2 блок 2</td> </tr> </table> </body> </html>
-
Я рад что смог вам помочь. И вот возможно пригодится. Атрибут align задает выравнивание элемента относительно других элементов на странице или выравнивание внутри элемента. Но в зависимости от того, к какому элементу (тегу) он применяется его деиствие может отличатся.
-
Да конечно вариант спасибо. Я и сам так полюзуюсь, но возможно есть и другие способы.
-
Вот ещё вариант но тоже с css <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Test</title> </head><body> Имя пользователя (адрес электронной почты): <img src="http://static.panoramio.com/photos/small/70779155.jpg" style="vertical-align:-4px;"> Пишите..... </body> </html>
-
Можно вот так, первое что пришло в голову. Возможно есть лучшие варианты. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Test</title> <style> .xlink { display:block; float:left; padding-top:4px; } .xtext { float:left; } .xdlink { background: url("http://static.panoramio.com/photos/small/70779155.jpg") 100% 4px no-repeat transparent; padding-right:84px; float:left; } </style> </head><body> <!-- в этом случае без css попробовал подрезать картинку --> <p>Имя пользователя (адрес электронной почты): <img src="http://s1.hostingkartinok.com/uploads/images/2012/04/677851d387ba35640213d18c7ebb3043.png" align="middle"> Пишите.....</p> <!-- а тут с помощью css --> <span class="xtext">Имя пользователя (адрес электронной почты):</span><img src="http://static.panoramio.com/photos/small/70779155.jpg" class="xlink">Пишите..... <!-- можно задать картинку фоном --> <p><div class="xdlink">Имя пользователя (адрес электронной почты):</div>Пишите.....</p> </body> </html> jsfiddle.net/L8QGM/ Дело в том что высота вашей картинки больше высоты текстовой строки поэтому при выравнивании картинки без css атрибутом align она не встанет чётко в центре строки.