Нужно прижать футер к низу страницы Всем привет, у меня не получается прижать футер (подвал) к низу страницы. Стандартный способ не работает, все варианты уже перепробовал. Просто вся тема в том, что футер состоит из 2-х частей: "FBG" (где контакты, ссылки и тд) и "footer" (где копирайт и счетчики). Нужно прижать к низу не только "footer", но вместе с ним "FBG". Помогите пожалуйста, у кого получится - дам вознаграждение в виде 50 wmr! =) icq: 93177777 css: Code: @charset "utf-8"; body { margin:0; padding:0; width:100%; background: url(images/main_bg.gif);} html { padding:0; margin:0;} .main { margin:0 auto; padding:0;} .resize { width:960px; padding:0; margin:0 auto;} /********** header **********/ .header_resize { margin:0; padding:0; background:url(images/header_bg.gif) top repeat-x;} .header { width:960px; padding:0; margin:0 auto; border-bottom:1px solid #484848;} /* 2 */ .header_blog2 { background:url(images/header_blog_bg.gif) top center repeat-x; padding:20px 0 0 0; margin:0; height:95px;} .header_blog2 h2 { font: bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:10px 0 0 0; margin:0;} /* logo */ .logo {padding:0; margin:0; width:233px; float:left;} /*menu*/ .menu { padding:38px 0 0 0; margin:0 ; width:725px; float:left; } .menu ul { text-align: right; padding:0; margin:0; list-style:none; border:0; float:right;} .menu ul li { float:left; margin:0; padding:0 10px; border:0;} .menu ul li a { float:left; margin:0; padding:12px 0; color:#939393; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase;} .menu ul li a:hover { color:#ddd;} .menu ul li a.active { color:#ddd;} /* search */ .search { padding:41px 0 0 0; margin:0 auto; width:200px; float:right; } .search form { padding:0; margin:0 auto;} .search span { display:block; float:left; background: url(images/search_bg.gif) left top no-repeat; width:146px; padding:0 5px; height:27px;} .search form .keywords { width:146px; line-height:13px; height:13px; float:left; background:none; border:0; padding:7px 0; margin:0; font:normal 11px Arial, Helvetica, sans-serif; color:#acacac;} .search form .button { float:left; margin:0; padding:0;} /* body */ .body_resize {padding:0; width:960px; margin:0 auto;} /* */ .body { padding:0; margin:0 auto; border-bottom:1px solid #111;} .body h2 { font:normal 18px Arial, Helvetica, sans-serif; color:#c1c1c1; padding:20px 5px; margin:0 0 10px 0;} .body p { font:normal 12px Arial, Helvetica, sans-serif; color:#6b6b6b; line-height:1.8em; padding:3px 5px; margin:0;} .body p span { color:#6d6d6d; font: normal 11px Arial, Helvetica, sans-serif;} .body a { color:#801e14; text-decoration:none;} .body img { margin:10px auto; padding:0;} .body img.floated { float:right; margin:5px 20px; padding:0;} .body img.floated2 { float:left; margin:5px 20px; padding:0;} .right { width:680px; margin:0; padding:0 10px; float:right;} .left {width:240px; margin:0; padding:0 10px; float:left;} .right_blog {width:312px; margin:0; padding:0 10px; float:left;} .right_port {width:300px; margin:0; padding:0 10px; float:left;} /*FBG*/ .FBG {margin:0; padding:0; background: #111; border-top:1px solid #1e1e1e;} .FBG_resize { width:960px; margin:0 auto; padding:0;} .FBG_resize ul { margin:0; padding:0; list-style:none;} .FBG_resize li { padding:3px; margin:0; font: bold 11px Arial, Helvetica, sans-serif; color:#444;} .FBG_resize li a { font: normal 11px Arial, Helvetica, sans-serif; color:#444; text-decoration:none;} .FBG_resize li a:hover { color:#727272;} .FBG_resize img { float:left; margin:5px; padding:0;} .FBG_resize p { font: normal 11px Arial, Helvetica, sans-serif; color:#444; text-decoration:none; padding:5px; margin:0; line-height:1.8em;} .FBG_resize h2 { font: bold 14px Arial, Helvetica, sans-serif; color:#9f9f9f; padding:10px 5px; margin:0;} .FBG_resize .left { width:220px; float:left; margin:0; padding:10px;} /*************footer**********/ .footer {padding:0; margin:0; border-top:1px solid #1a1a1a; background:#0e0e0e;} .footer_resize { width:940px; margin:0 auto; padding:5px 10px;} .footer p { font:normal 11px Arial, Helvetica, sans-serif; color:#3e3e3e;} .footer a { font:bold 11px Arial, Helvetica, sans-serif; color:#3e3e3e; text-decoration:none; padding:5px; margin:0;} .footer p.right { text-align:right; width:350px; margin:0; padding:15px 0 0 0; float:right;} .footer p.leftt { text-align:left; width:550px; margin:0; padding:15px 0 0 0; float:left;} p.clr, .clr { clear:both; padding:0; margin:0; background:none;} .header_blog { background: url(images/slider_bg.gif) top center repeat-x; padding:0; margin:0; } .header_blog_resize { width:960px; margin:0 auto; padding:0;} .header_blog_resize h2 { font: normal 30px Arial, Helvetica, sans-serif; color:#fff; padding:30px 10px; margin:0;} .header_blog_resize .menu2 { border-top:1px solid #232323; background:#101010; padding:15px 0; margin:0 auto;} .header_blog_resize .menu2 ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:left;} .header_blog_resize .menu2 ul li { float:left; margin:0; padding:0; border:0;} .header_blog_resize .menu2 ul li a { border-right:1px solid #575757; float:left; margin:0; padding:0 15px; color:#575757; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;} .header_blog_resize .menu2 ul li a:hover { color:#939393; text-decoration:underline;} .header_blog_resize .menu2 ul li a.active { color:#939393; text-decoration:underline;} /* Slider */ #slider { width:960px; padding:20px 0 0 0; margin:0 auto;} div#slideshow { width: 100%; height:337px; padding:0; } .slider-item { width: 100% !important; } .slider-item img { float:right; margin:0; padding:0;} .slider_content_inner img { border: none; } .controls-center { width: 960px; margin:0 auto; padding:5px 0; background:#101010;} #slider_controls { margin:0 auto; z-index: 1000; width:960px;} #slider_controls h2 { width:600px; float:left; font: normal 11px Arial, Helvetica, sans-serif; color:#525252; padding:5px 0 0 20px; margin:0;} #slider_controls ul { margin:0; padding:0 20px 0 0; width:254px; float:right;} #slider_controls ul li { margin:0; padding:0 ; list-style: none; } #slider_controls ul li { float: right; display: block; } #slider_controls ul li a { width:17px; height: 8px; background:url('images/tabs_2.gif') no-repeat center center; display: block; float: left; padding:10px 2px 0 2px; margin:2px !important; margin:1px 1px; outline: none; } #slider_controls ul li a:focus { outline: none; } #slider_controls ul li a:hover, #slider_controls ul li a.activeSlide { color:#979797; background:url('images/tabs_1.gif') no-repeat center center; } /********** contact form **********/ #contactform { margin:0; padding:5px 10px; } #contactform * { color:#8b8b8b; } #contactform ol { margin:0; padding:0; list-style:none; } #contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both; } #contactform li.buttons { margin:5px 0 5px 0; clear:both; } #contactform label { margin:0; width:100px; display:block; padding:10px 0; color:#c1c1c1; font: normal 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; } #contactform label span { color:#8b8b8b; } #contactform input.required { width:450px; border:1px solid #000; margin:2px 0; padding:2px; background:#282828; float:left; } #contactform textarea { width:450px; border:1px solid #000; margin:2px 0; padding:2px; background:#282828; float:left; } #contactform li.buttons input { padding:3px 0 3px 455px; margin:10px 0 0 0; border:0; color:#FFF; float:left; } a.header_link:link{ color: #444444; text-decoration: none} a.header_link:visited{ color: #444444; text-decoration: none} a.header_link:active{ color: #444444; text-decoration: none} a.header_link:hover{ color: #727272; text-decoration: none} #counters a img { opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40); } #counters a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); } .news1 {color: #801e14} index: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Тахтаров.рф - Оформление групп</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="/style.css" rel="stylesheet" type="text/css" /> <link rel="icon" href="/favicon.ico" type="image/x-icon"> </head> <body> <div class="main"> <div class="header_resize"> <div class="header"> <div class="logo"><img src="/images/logo.gif" width="405" height="97" border="0" /></div> <div class="menu"> <ul> <li><a href="/">Главная</a></li> <li><a href="/услуги" class="active">Услуги</a></li> <li><a href="/портфолио">Портфолио</a></li> <li><a href="/гарантии">Гарантии</a></li> <li><a href="/контакты">Контакты</a></li> </ul> </div> <div class="clr"></div> <div class="clr"></div> </div> </div> <div class="header_blog"> <div class="header_blog_resize"> <div class="menu2"> <ul> <li><a href="/услуги">Все услуги</a></li> <li><a href="/услуги/сайты">Создание сайта</a></li> <li><a href="/услуги/сайты/продвижение">Продвижение сайта</a></li> <li><a href="/услуги/фирменный_стиль">Разработка логотипа и фирменного стиля</a></li> <li><a href="/услуги/оформление_групп" class="active">Оформление групп ВКонтакте</a></li> </ul> <div class="clr"></div> </div> <div class="clr"></div> </div> <div class="clr"></div> </div> <div class="clr"></div> <div class="body"> <div class="body_resize"> <div class="left"> <h2><table style="border-collapse: collapse;" height="26" width="191"><tbody><tr><td style="text-align: left; vertical-align: middle; background-image: url(/images/znews.png); background-repeat: no-repeat; background-position: left top; letter-spacing: 0pt; word-spacing: 0pt;"><br></td></tr></tbody></table></h2> <p><span>21 февраля 2011</span><br /> <strong>Обновлен дизайн сайта</strong><br /> Полностью обновлен дизайн нашего сайта и группы. Ждем Ваших оценок =)</p><br /> <p><span>19 февраля 2011</span><br /> <strong>Интернет-магазин Next-Print</span></strong><br /> Закончена работа над интернет-магазином расходных материалов для струйной печати Next-Print.ru</p><br /> </div> <div class="right"> <h2>Оформление групп ВКонтакте</h2> <p>Разработаем оформление любой сложности. Цена полного пакета - <b>300 руб</b>.</p> <br/> </div> <div class="clr"></div> </div> </div> <div class="clr"></div> <div class="FBG"> [COLOR=YellowGreen]<!-- Этот блок нужно приклеить к футеру -->[/COLOR] <div class="FBG_resize"> <div class="left"> <h2>Теги</h2> <p><span style="font-size: 12pt;"><span style="font-size: 10pt;"><a href="/услуги/сайты/" class="header_link"><b><span style="font-size: 10pt;">создание сайта</span></b></a><span style="font-size: 10pt;">, </span><span style="font-size: 10pt;"><span style="font-size: 8pt;"><a href="/услуги/оформление_групп/" class="header_link"><span style="font-size: 8pt;">оформление</span></a>,</span></span></span></span><br><a href="/услуги/фирменный_стиль/" class="header_link"><b><span style="font-size: 12pt;">разработка логотипов</span></b></a>,<br><a href="/услуги/сайты/продвижение/" class="header_link"><span style="font-size: 12pt;"><b><span style="font-size: 12pt;">продвижение</span></b></span></a>, <span style="font-size: 10pt;"><span style="font-size: 10pt;"><a href="/услуги/сайты/" class="header_link">недорого</a>,<br><a href="/услуги/оформление_групп/" class="header_link"><span style="font-size: 16pt;">группы вконтакте</span></a>,<br><span style="font-size: 12pt;"><a href="/услуги/фирменный_стиль/" class="header_link">фирменный стиль</a>, <a href="/услуги/сайты/продвижение/" class="header_link"><b>SEO</b></a></span><br></span></span></span><b><span style="font-size: 14pt;"></span></b></span></p> </div> <div class="left"> <h2>Гарантии</h2> <p><strong>WebMoney аттестат:</strong><br /> BL 18, более 1 года<br /> успешной работы.<br /> <strong>Отзывы о нас:</strong><br /> <a target="_blank" href="http://vkontakte.ru/topic-24315555_24177517"><img src="/images/rss_1.gif" width="18" height="16" border="0" /></a><a target="_blank" href="#"><img src="/images/rss_4.gif" width="18" height="16" border="0" /></a><br /></p> </div> <div class="left"> <h2>Услуги</h2> <ul> <li>» <a href="/услуги/сайты/">Создание сайта</a></li> <li>» <a href="/услуги/сайты/продвижение">Продвижение сайта</a></li> <li>» <a href="/услуги/фирменный_стиль/">Разработка логотипа</a></li> <li>» <a href="/услуги/фирменный_стиль/">Фирменный стиль</a></li> <li>» <a href="/услуги/оформление_групп/">Оформление групп ВКонтакте</a></li> </ul> </div> <div class="left"> <h2>Контакты</h2> <p><strong>+7 921 409 40-36<br /> [email protected]</strong><br /> ICQ: 93177777<br /> Skype: tahtarov1<br /> <a target="_blank" href="http://vkontakte.ru/club24315555"><img src="/images/rss_1.gif" width="18" height="16" border="0" /></a> <a href="http://forum.antichat.net/thread261801.html"><img src="/images/rss_2.gif" width="18" height="16" border="0" /></a> <a href="#"><img src="/images/rss_3.gif" width="18" height="16" border="0" /></a> </div> <div class="clr"></div> </div> <div class="clr"></div> </div> <div class="clr"></div> <div class="footer"> [COLOR=YellowGreen]<!-- ... а этот к низу страницы -->[/COLOR] <div class="footer_resize"> <div id="counters"> <p class="leftt">© Тахтаров.рф<br /><br /><br /></p> <p class="right"> <!-- begin of Top100 code --> <script id="top100Counter" type="text/javascript" src="http://counter.rambler.ru/top100.jcn?2408724"></script> <noscript> <a href="http://top100.rambler.ru/navi/2408724/"> <img src="http://counter.rambler.ru/top100.cnt?2408724" alt="Rambler's Top100" border="0" /> </a> </noscript> <!-- end of Top100 code --> <[email protected] counter--> <script language="javascript"><!-- d=document;var a='';a+=';r='+escape(d.referrer);js=10;//--></script> <script language="javascript1.1"><!-- a+=';j='+navigator.javaEnabled();js=11;//--></script> <script language="javascript1.2"><!-- s=screen;a+=';s='+s.width+'*'+s.height; a+=';d='+(s.colorDepth?s.colorDepth:s.pixelDepth);js=12;//--></script> <script language="javascript1.3"><!-- js=13;//--></script> <script language="javascript" type="text/javascript"><!-- d.write('<a href="http://top.mail.ru/jump?from=1995358" target="_top">'+ '<img src="http://d2.c7.be.a1.top.mail.ru/counter?id=1995358;t=67;js='+js+ a+';rand='+Math.random()+'" alt="Рейтинг@Mail.ru" border="0" '+ 'height="31" width="38"><\/a>');if(11<js)d.write('<'+'!-- ');//--></script> <noscript> <a target="_top" href="http://top.mail.ru/jump?from=1995358"> <img src="http://d2.c7.be.a1.top.mail.ru/counter?js=na;id=1995358;t=67" height="31" width="38" border="0" alt="Рейтинг@Mail.ru"></a></noscript> <script language="javascript" type="text/javascript"><!-- if(11<js)d.write('--'+'>');//--></script> <!--// [email protected] counter--> <!--LiveInternet counter--> <script type="text/javascript"><!-- document.write("<a href='http://www.liveinternet.ru/click' "+ "target=_blank><img src='//counter.yadro.ru/hit?t38.5;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='LiveInternet' "+ "border='0' width='31' height='31'><\/a>") //--></script> <!--/LiveInternet--> </p> </div> <div class="clr"></div> </div> <div class="clr"></div> </div> </div> </body> </html>
Да, при таком раскладе ячейки с указанной фиксированной шириной не меняются при сужении окно, но тут новая трабла - содержимое ячеек, ширина которых не фиксирована (не указана) при сужении накладывается на соседние ячейки... в общем тоже не то что хотелось бы..=(
Чем чревато ставить пробел например в такой фигне <div class='header' > перед закрывающей скобкой? Сайт не мой, сайт уг, но работает. А я вот туплю.
Ничем не чревато, рендеринг будет темже (впрочем, валидацию он тоже успешно пройдет). Но стилистика кода страдает в таком случае (на мой взгляд).
как на сайте вторым слоем сделать картинку в любом месте как например подарки в одноклассниках отображаются
Если я понял правильно, то для картинки, или дива, в котором он заключен поставить св-во position: relative;
Tw!m4, для бекграунда? Делай ссылку прозначную в нужном месте. Или что-то типа <a href=""><div></div></a>, явно указав размеры дива
правильный селектор в css помогите выбрать правильный селектор чтоб задать фон Туры из уфы а не еше тем подпунктам что внутри //Gifts: научитесь пользоваться миниатюрами для изображений
мне через css бы типа li li#item7 span {background-color:red} вот правильный путь селектора написать не могу (li #item7 span)
я обычно через class делаю, хотя это и не очень правильно <span class = "spanStyle">Text</span> .spanStyle { background-color: red; }
Всем привет...Кто сможет подправить? 3px между первыми 2-мя блоками..от куда? Code: <div id="container_footer"> <div id="content_footer"> <div id="left_footer">1</div> <div id="text_footer">2</div> </div> </div> <div id="right_footer">3</div> Code: body, div, input, select, form{ color:#333333; margin:0; padding:0; font-size:11px; font-family:Tahoma,Arial,sans-serif; } #container_footer{ width: 100%; float: left; height:165px; margin-right: -240px; background: url(/images/footer_bg.gif) no-repeat center bottom; } #content_footer{ margin-right: 240px; height:165px; } #left_footer{ width: 240px; height:165px; float: left; background:#CCCCCC; } #text_footer{ margin-left: 240px; height: 165px; background:#999999; } #right_footer{ width: 240px; float: right; height: 165px; background:#CC9999; } Как выглядит
при помощи javascript у элемента select можно указать selectedIndex = -1, чтобы не было выбранных элементов. можно ли сделать так по умолчанию, без использования js? или единственное решение - <option value=''>-----</option> ??
Посоветуйте хороший учебник по CSS, написанный доступным языком. ruhtml.net не предлагать и подобное.
Мистика с HTML5, решил перейти на него, переписал по типу: HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> Text </body> </html> Все отображается нормально, НО при валидации, а также при просмотре через FF Firebug мистика вступает в силу: Как видно "meta, title и тд. тп" сползают в "body". Как так?
