Барсик
Newbie-
Posts
9 -
Joined
-
Last visited
Барсик's Achievements
Explorer (1/14)
0
Reputation
-
Ururu Спасибо! Поправил временным решением, по другому кроме как маржин топ не получилось подскажите конкретные примеры пожалуйста, с футером я бессилен, по крайней мере с тем что-бы он был снизу при уменьшении окна браузера без маржина или как еще, пробовал брать и разбирать другие коды но так и не удалось.
-
sigma77 большое спасибо! Раньше я не понимал откуда они такие появляются, теперь знаю, благодарствую! psywalker спасибо Вам за помощь, не забуду! насчет валидаторов, спасибо за ссылку на русский ксс валидатор, но есть ли русский HTML/X валидатор? Я просто не знаю английского, переводчик не всегда помогает, пробовал гуглить - безрезультатно! Валидатор замечательный но жаль что на английском. Вот, вроде все сделал: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Homework/round2</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin : 0; padding : 0; } body { min-width : 700px; padding : 20px; background : #ddd; font : 12px Tahoma; } #head { height : 97px; padding : 3px; text-align : center; border : 1px solid black; } #head h1 { padding-top : 10px; padding-bottom : 4px; } .left_bg { float : left; width : 200px; margin-top : 5px; margin-right : 3px; } .left_bg .left_bg_title { padding : 3px; border : 1px solid black; font-weight : bold; text-align : center; } .left_bg .left_bg_content { padding : 5px; margin-bottom : 5px; border-left : 1px solid black; border-right : 1px solid black; border-bottom : 1px solid black; } .left_bg ul li { list-style-type : none; } .left_bg ul li a { color : black; text-decoration : none; } .left_bg ul li a:hover { color : #6a425d; font-weight : bold; font-size : 13px; } .right_bg { float : right; width : 200px; } .right_bg .right_bg_title { margin : 5px 0 0 3px; padding : 3px; border : 1px solid black; font-weight : bold; text-align : center; } .right_bg .right_bg_content { padding : 5px; margin-left : 3px; margin-bottom : 5px; border-left : 1px solid black; border-right : 1px solid black; border-bottom : 1px solid black; } .right_bg ol li { list-style-type : none; } .right_bg ol li a { color : black; text-decoration : none; } .right_bg ol li a:hover { color : #6a425d; font-weight : bold; font-size : 13px; } #content { overflow : hidden; margin-top : 5px; padding : 0 5px 5px 5px; } #content #content_title { border : 1px solid black; padding : 4px; font-weight : bold; text-align : center; } #content #content_block { padding : 7px; border-left : 1px solid black; border-right : 1px solid black; border-bottom : 1px solid black; } div.footer { margin-top : 150px; bottom : 0; left : 0; height : 50px; width : 100%; border-top : 1px solid black; font-weight : bold; } </style> </head> <body> <div class="wrap"> <!--START HEADER--> <div id="head"> <h1>Тут Вы найдете весь софт что искали!</h1> Огромный выбор программ: Мультимелиа, защита ПК - антивирусы, фаерволы, обновленя баз, программы для веб мастера и др. </div> <!--END HEADER // START LEFT BLOCK--> <div class="left_bg"> <div class="left_bg_title"> Наше софт меню </div> <div class="left_bg_content"> <ul> <li><a href="#">TOP SOFT</a></li> <li><a href="#">Windows</a></li> <li><a href="#">Windows Seven</a></li> <li><a href="#">Linux / Unix</a></li> <li><a href="#">Mac OS</a></li> <li><a href="#">Kaspersky</a></li> </ul> </div> <!--2 BLOCK--> <div class="left_bg"> <div class="left_bg_title"> Наше софт меню </div> <div class="left_bg_content"> <ul> <li><a href="#">TOP SOFT</a></li> <li><a href="#">Windows</a></li> <li><a href="#">Windows Seven</a></li> <li><a href="#">Linux / Unix</a></li> <li><a href="#">Mac OS</a></li> <li><a href="#">Kaspersky</a></li> </ul> </div> </div> <!--3 BLOCK--> <div class="left_bg"> <div class="left_bg_title"> Наше софт меню </div> <div class="left_bg_content"> <ul> <li><a href="#">TOP SOFT</a></li> <li><a href="#">Windows</a></li> <li><a href="#">Windows Seven</a></li> <li><a href="#">Linux / Unix</a></li> <li><a href="#">Mac OS</a></li> <li><a href="#">Kaspersky</a></li> </ul> </div> </div> </div> <!--END LEFT BLOCK // START RIGHT BLOCK--> <div class="right_bg"> <div class="right_bg_title"> Наше софт меню </div> <div class="right_bg_content"> <ol> <li><a href="#">TOP SOFT</a></li> <li><a href="#">Windows</a></li> <li><a href="#">Windows Seven</a></li> <li><a href="#">Linux / Unix</a></li> <li><a href="#">Mac OS</a></li> <li><a href="#">Kaspersky</a></li> </ol> </div> <div class="right_bg"> <div class="right_bg_title"> Наше софт меню </div> <div class="right_bg_content"> <ol> <li><a href="#">TOP SOFT</a></li> <li><a href="#">Windows</a></li> <li><a href="#">Windows Seven</a></li> <li><a href="#">Linux / Unix</a></li> <li><a href="#">Mac OS</a></li> <li><a href="#">Kaspersky</a></li> </ol> </div> </div> <div class="right_bg"> <div class="right_bg_title"> Наше софт меню </div> <div class="right_bg_content"> <ol> <li><a href="#">TOP SOFT</a></li> <li><a href="#">Windows</a></li> <li><a href="#">Windows Seven</a></li> <li><a href="#">Linux / Unix</a></li> <li><a href="#">Mac OS</a></li> <li><a href="#">Kaspersky</a></li> </ol> </div> </div> </div> <!--END RIGHT BLOCK // START CONTENT BLOCK--> <div id="content"> <div id="content_title"> Тут какой-то контент </div> <div id="content_block"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat. </p> </div> </div> <!--END CONTENT BLOCK // START FOOTER--> <div class="footer"> <div style="padding: 5px;"> <center>AstalaVista Design 2010 ©</center> <p align="right"> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Правильный CSS!" /> </a> </p> </div> </div> </div> </body> </html> валидный XHTML и CSS код! Делайте пожалуйста замечания и указывайте на ошибке если это не займет у Вас много времени по поводу футера: делал по примеру вашего кода, все вроде работает, даже когда в середине нет контента, но вот проблема когда окно браузера уменьшенное то появляется какой-то баг, я не знал как исправить, простите! вот что происходит: http://s48.radikal.ru/i120/1007/cc/cf1a6c940574.jpg опять таки, сильно прошу не пинать! В принцепе все работает и валидно, но вот при уменьшении окна, возился часа 2 Игорь Ермаков Спасибо большое!
-
Вот код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Homework</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> @import url(style.css); * {margin: 0; padding: 0;} html {height: 100%;} body {margin:5px 10px 0px 10px; padding:5px 10px 0px 10px; font-family: Tahoma; font-size: 12px; background-color: #DDD;} a {color: #9895E8; text-decoration: none;} a:hover {color: #9867E8; text-decoration: underline;} #header {border: solid 1px black; background: #DAE6FC url(logo.jpgs); padding: 6px 3px 3px 3px; text-align: center;} .lefblock { width: 200px; float: left; padding-top: 3px; } .lefblock .lizag { padding: 3px; list-style-type: none; font-weight: bold; font-size: 14px; text-align: center; border: solid 1px black; background-color: #9895E8; } .lefblock .licont { list-style-type: none; padding: 8px; background-color: #DAE6FC; border-left: solid 1px black; border-right: solid 1px black; border-bottom: solid 1px black; } .lefblock .lizacont { padding-top: 10px; } .content { float: top; padding: 0 200px 0 200px; } .content table { float: left; padding: 3px; } .content .title_content { height: 25px; padding: 3px; font-weight: bold; font-size: 14px; text-align: left; border: solid 1px black; background-color: #9895E8; } .content .newscont { padding: 3px; background-color: #DAE6FC; border-left: solid 1px black; border-right: solid 1px black; border-bottom: solid 1px black; } .rifblock { width: 200px; float: right; padding-top: 3px; } .rifblock .rightblock { width: 200px; float: top; padding-bottom: 10px; } .rifblock .lizag { padding: 3px; list-style-type: none; font-weight: bold; font-size: 14px; text-align: center; border: solid 1px black; background-color: #9895E8; } .rifblock .licont { list-style-type: none; padding: 8px; background-color: #DAE6FC; border-left: solid 1px black; border-right: solid 1px black; border-bottom: solid 1px black; } #footer { float: left; width: 100%; height: 100px; background: #BFF08E; } </style> </head> <body><p> <!--START HEADER--> <table id="header" width="100%" height="100"> <tr style="font-weight: bold; font-size: 40px; color: #9895E8;"> <td>Тут Вы найдете весь софт что искали!</td> </tr><tr style="color: #6D9CCA;"> <td>Огромный выбор программ: Мультимелиа, защита ПК - антивирусы, фаерволы, обновленя баз, программы для веб мастера и др.</td> </tr> </table> <!--END HEADER // START LEFT BLOCK--> <div class="lefblock"> <ul> <li class="lizag">Наше меню</li> <li class="licont"><a href="#">Софт</a></li> <li class="licont"><a href="#">Windows</a></li> <li class="licont"><a href="#">Windows7</a></li> <li class="licont"><a href="#">Linux / Unix</a></li> <li class="licont"><a href="#">Mac OS</a></li> <li class="licont"><a href="#">TOP SOFT</a></li> </ul> <ul class="lizacont"> <li class="lizag">Наше меню</li> <li class="licont"><a href="#">Софт</a></li> <li class="licont"><a href="#">Windows</a></li> <li class="licont"><a href="#">Windows7</a></li> <li class="licont"><a href="#">Linux / Unix</a></li> <li class="licont"><a href="#">Mac OS</a></li> <li class="licont"><a href="#">TOP SOFT</a></li> </ul> <ul class="lizacont"> <li class="lizag">Наше меню</li> <li class="licont"><a href="#">Софт</a></li> <li class="licont"><a href="#">Windows</a></li> <li class="licont"><a href="#">Windows7</a></li> <li class="licont"><a href="#">Linux / Unix</a></li> <li class="licont"><a href="#">Mac OS</a></li> <li class="licont"><a href="#">TOP SOFT</a></li> </ul> </div> <!--END LEFT BLOCK // START CONTENT BLOCK--> <div class="content"> <table width="100%" cellspacing="0"> <tr> <td class="title_content">777</td> </tr><tr> <td class="newscont">777</td> </tr> </table> </div> <!--END CONTENT BLOCK // START RIGHT BLOCK--> <div class="rifblock"> <table> <ol class="rightblock" type="none"> <li class="lizag">Наше меню</li> <li class="licont"><a href="#">Софт</a></li> <li class="licont"><a href="#">Windows</a></li> <li class="licont"><a href="#">Windows7</a></li> <li class="licont"><a href="#">Linux / Unix</a></li> <li class="licont"><a href="#">Mac OS</a></li> <li class="licont"><a href="#">TOP SOFT</a></li> </ol> <ol class="rightblock" type="none"> <li class="lizag">Наше меню</li> <li class="licont"><a href="#">Софт</a></li> <li class="licont"><a href="#">Windows</a></li> <li class="licont"><a href="#">Windows7</a></li> <li class="licont"><a href="#">Linux / Unix</a></li> <li class="licont"><a href="#">Mac OS</a></li> <li class="licont"><a href="#">TOP SOFT</a></li> </ol> <ol class="rightblock" type="none"> <li class="lizag">Наше меню</li> <li class="licont"><a href="#">Софт</a></li> <li class="licont"><a href="#">Windows</a></li> <li class="licont"><a href="#">Windows7</a></li> <li class="licont"><a href="#">Linux / Unix</a></li> <li class="licont"><a href="#">Mac OS</a></li> <li class="licont"><a href="#">TOP SOFT</a></li> </ol> </div> <!--END RIGHT BLOCK // START FOOTER BLOCK--> <div id="footer"> <strong>FoOtHeR</strong> </div> </p></body> </html> только очень сильно не пинайте, старался и кстати научился кое чему новенькому, за что большое спасибо! По поводу кода и его кривизны (а это думаю будет (( ) - я первый раз делаю такое с нуля + при помощи ксс, раньше же я только мог переделывать до неузнаваемости или делать более простой код ( для меня и раньше ), делайте замечания - буду исправляться. Прощу прощения за сердце, не знаю как его сделать тянущимся (( Когда я создавал каркас проблем небыло, но ушло несколько минут чтобы узнать как правильно прописать <html> на благо я понял что сказал мне валидатор на английском. Сегодня после того как я доделал каркас мне сказало 17 Errors, 1 warning(s), мне очень неудобно и стыдно, но я незнаю как это исправить! Есть русский валидатор? Я долго искал русский валидатор и даже специально устанавливал плагин для ФФ HTML Validator которым я пользуюсь только для проверки страниц. Но ничего не понял, вроде на русском но никаких подсказок, раньше когда верстал HTML 4.01 вроде проблем небыло. Такие проблемы которые я не смог исправить вроде первый раз )) Не ругайтесь, скажите как исправить - приложу все усилия up
-
Я озабочен этой проблемой, скажите - при помощи чего можно протестировать страницу сразу в ие 6/7/8?
-
psywalker Привет! Был на отдыхе, загорал все сделал, только с футером лажанулся картинка никак не смог его 1. выровнять по центру, 2. пробовал использовать и разобрать код с футера csstemplater.com (долго мучался с паддингом, не получилось) подскажите плз разные приемы с футером, ну честно, очень старался - никак не получилось!
-
Спасибо большое, без вас бы так и не понял, запомнил! Покажите пожалуйста как писать доктайп 5го стандарта? <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN"> так? И есть ли XHTML 5, если есть - как прописывать? Просто хочу попробовать на себе Кому не сложно, пожалуйста дайте мне типа домашнее задание. Для начала более менее легкое под стандарт 4.01, типа шапку, один блок, меню на таблицах, контент блок, футер, какие цвета использовать и.т.д. как хотите, лишь бы дали задание касаемо HTML. Плиз, кому не сложно, надо набивать руку, практику дескать получать
-
Крутейший сайт! Searcher Спасибо большое, посмотрим что там есть! Great Rash О да, этот браузер причинил мне моральный ущерб, как начинающий иногда с ним мучаюсь, но в итоге вроде проблема обычно решается. Конечно! Спасибо большое что не пожелели времени и написали столь большое, понятное и полезное сообщение, это мне очень помогло, благодарствую! И Еще, пожалуйста научите пользоваться такими штуками(а то оптимизировать под разные браузеры вроде получается но как этими штуками пользоваться до конца не понимаю): Мне понятно что стили подгружаются для конкретных версии ИЕ, но какие различия между <!--[if lt IE 8]> и <![if gte IE 5.5]>? Научите плиз такие штуки под Оперу, ИЕ, ФФ, Чром, Сафари и другие делать, это очень много для меня значит, очень.
-
Всем привет! Друзья, помогите разобраться с доктайпами! Чем отличаются HTML от XHTML? Можно подробней, пожалуйста! Что лучше использовать и что используете Вы как мастера, что Вас больше устраивает и почему? Чем отличается в HTML и XHTML: Строгий синтаксис HTML/X и Переходный синтаксис HTML/X? Что в новом стандарте HTML 5? Стоит ли использовать его? Как с ним будут работать старые браузеры? Будет ли он лучше HTML 4.01? На этом замечательном сайте пишется что для XHTML не требуется закрывающий тег, это как? Для всех тегов? Заранее благодарен за помощь начинающему P.S. Выучил HTML по курсам Е.Попова, там только для нубов азы! С чего продолжить? Посоветуйте пожалуйста, а то я не знаю