Jump to content

Vzor

Newbie
  • Posts

    21
  • Joined

  • Last visited

Everything posted by Vzor

  1. И еще обнаружил внизу <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>
  2. Я так понял должно было быть так: <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>
  3. Доброго дня уважаемые форумчане. Попрбовал сверстать макет из этой темы. В макете я использовал html5 теги, недеюсь без ошибок. Выставляю на ваш справедливый суд - BusinesName. Возможные ошибки: В Psd макете шрифты заголовков как бы несколько размыты а в верхних 3х блоках шрифты немного прозрачны у меня это не так. Блок с таблицей из отличающихся по цвету строк я сверстал списком. И несовсем понятно что там внутри, ссылки или подчёркнутый текст.
  4. Привет, вот решил попробывать сверстать макет Raira PSD из этой темы, надеюсь получилось не совсем ужастно. Заранее спасибо за критику и советы. Макет Raira.
  5. Извеняюсь ниже случаино копию своего ответа создал. Затёр ...
  6. 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; Данный приме не претендует на универсальность но как вариант.
  7. NeoXidizer, Спасибо за советы и замечания. Я не стал пользовать HTML5 теги так как нехотел цеплять дополнительный Js для IE поддержки: <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> Да и не как не избавлюсь от привычки осторожности к нововведениям.
  8. Ну вот что получилось - ссылка. Надеюсь на справедливую критику и советы.
  9. Скачалось без проблем, попробую тоже сделать а то опыта верстки с макетов нет никакого надо начинать исправлять.
  10. Wrap если перевести с английского обёртка. В данном примере это всего лишь имя для CSS класса, можно заменить на любое другое слово. Верстальшики обзывают его так обычно потому что, блок с таким именем в большинстве случаев используется для оборачивания других блоков внутри себя.
  11. Есть вот такой вариант не таблицей. <!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>
  12. Я рад что смог вам помочь. И вот возможно пригодится. Атрибут align задает выравнивание элемента относительно других элементов на странице или выравнивание внутри элемента. Но в зависимости от того, к какому элементу (тегу) он применяется его деиствие может отличатся.
  13. Да конечно вариант спасибо. Я и сам так полюзуюсь, но возможно есть и другие способы.
  14. Вот ещё вариант но тоже с 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>
  15. Можно вот так, первое что пришло в голову. Возможно есть лучшие варианты. <!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 она не встанет чётко в центре строки.
  16. У меня несколько вопросов. Как можно вручную не смотря в какой либо справочник (если так возможно) определить принадлежность тега к группе строчных или блочных элементов ? Какие ещё существуют группы, если они сушествуют ? Ну и если у кого есть ссылки на таблицы с такими группами или таблицы семантичных и не семантичных тегов и атрибутов. Заранее благодарю надеюсь что понятно задал вопросы.
  17. Вот несколько ссылок на тему: На английском от (W3) - описание - демо На английском (JavaScript) от DinamicDrive На английском (Mootools) вдруг пригодится -Mootools Styleswitcher - демо Вписал что было, но это не самые новые ссылки попробуйте поисковик.
  18. Возможно поможет такое решение в примере 2 варианта один из них обёртка предложен выше, а второй вариант дописываем ещё 1 класс и к нему задаем необходимый стиль: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Test label</title> </head><body> <style> label { color:green; // дефолтный класс для всех label - для примера } .xd { font-style:italic; // дефолтный класс для примера } .add { color:red; // для варианта с добавленнием класса } span label { color:blue; // для варианта с обёрткой } </style> <form action=""> <p><b>Lorem ipsum dolor sit amet...</b></p> <p> <input type="checkbox" id="check1"><label class="xd" for="check1">1 лэйбл</label><Br> <input type="checkbox" id="check2"><span><label class="xd" for="check2">2 лэйбл - вариант с обёрткой</label></span><Br> <input type="checkbox" id="check3"><label class="xd" for="check3">3 лэйбл</label><Br> <input type="checkbox" id="check4"><label class="xd" for="check4">4 лэйбл</label><Br> <input type="checkbox" id="check5"><label class="xd" for="check5">5 лэйбл</label><Br> <input type="checkbox" id="check6"><label class="xd add" for="check6">6 лэйбл - вариант с добавлением класса</label><Br> <input type="checkbox" id="check7"><label class="xd add" for="check7">7 лэйбл - вариант с добавлением класса</label> </p> </form> </body> </html>
  19. Вот тут www.master-web.info есть статья со ссылкам на дефолтные стили браузеров.
  20. Мне нравится 1й, в частности рисунок.
×
×
  • 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