Flashton
-
Posts
3 -
Joined
-
Last visited
Flashton's Achievements
Explorer (1/14)
0
Reputation
-
Здравствуйте. Делаю сайт, возникла проблема, блок-растяжка (у меня в коде id="text") налазиет на контент, а не идёт после него, из-за этого футер закрывает часть контента. Ниже скрин: - Тут видно, как распорка ушла под блок с цифрами "454", если эти три блока (зелёные и синий, с цифрами "454") продолжить в высоту они будут идти поверх распорки и зайдут под футер. Подскажите, пожалуйстка, как это исправить? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ru" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>КРЕПОСТЬ РУСЬ</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="content"> <div id="container"> <div id="header_top"> <div id="header_top_left"><img src="images/title.png" /><a target="_self" href="index.html"><img class="logo" src= "images/logo.png" /></a></div> <div id="header_top_right"> <div id="header_top_right_top"><img class="date_prov" src="images/date_prov.gif" /></div> <div id="header_top_right_bottom"> <div id="header_top_right_bottom_left"><a href="#"><img class="set" src="images/set.png" /></a><a href="mailto:mail@mail.ru"><img class="mail" src="images/mail.png" /></a></div> <div id="header_top_right_bottom_right"><input class="search" name="1" type="text" value="Поиск по сайту" /><a href="#" onclick="display_alert()"><img class="search" src="images/search.jpg" /></a></div> <div class="stop"></div> </div> <div class="stop"></div> </div> </div> <div id="top_menu"> <div id="top_menu_1"><a href="#">О фестивале</a></div> <div id="top_menu_2"><a href="#">Новости</a></div> <div id="top_menu_3"><a href="#">Мероприятия</a></div> <div id="top_menu_4" class="active"><a href="#">Фотогалерея</a></div> <div id="top_menu_5"><a href="#">Видео</a></div> <div id="top_menu_6"><a href="#">Контакты</a></div> <div class="stop"></div> </div> <div id="content1"> <div id="content1_left">454</div> <div id="content1_center">454</div> <div id="content1_right">454</div> <div class="stop"></div> </div> </div> <div id="text"></div> </div> <div id="footer">Footer</div> </body> </html> html, body { height:100%; margin:0; padding:0; font-family:Tahoma; font-size:14px; color:#000000; background:#f4d4a6; } #content { position: relative; min-height: 100%; width:100%; min-width:1059px; background:url(../images/top_bg.jpg) left top repeat-x; } * html #content { height: 100%;} #text { padding-bottom: 112px; background:#CC9900; } #footer { position: relative; width:100%; min-width:1059px; background:#009933; background:url(../images/bottom_bg.jpg) left bottom repeat-x; height: 112px; margin-top: -112px; } #container{width:1059px; margin:0 auto; background:#99CC33;} h1, h2, h3, h4, h5, h6, h7{margin:2px;padding:0;font-family:Georgia, "Times New Roman", Times, serif;font-weight:normal;color:#000000;} h1{font-size:20px;} h2{font-size:18px;} h3{font-size:16px;} h4{font-size:14px;} h5{font-size:12px;} h6{font-size:10px;} h7{font-size:8px;} div.stop{width:100%;height:0;line-height:0;font-size:1%;} #header_top{width:989px;height:244px;padding:0 35px 0 35px;background:url(../images/header_top.png) center top no-repeat;} img.logo{border:0;margin:0;padding:0;height:244px;} #header_top_left{float:left;width:618px;height:244px;} #header_top_right{margin-left:618px;} img.date_prov{margin:78px 14px auto 14px;} #header_top_right_top{height:188px;} #header_top_right_bottom{height:56px;} #header_top_right_bottom_left{float:left;width:58px;height:19px;padding:17px 27px 20px 51px;} img.set{height:19px;width:16px;margin-right:13px;border:0;} img.mail{height:19px;width:16px;margin-left:13px;border:0;} #header_top_right_bottom_right{margin-left:136px;padding:16px 0 20px 0;} input.search{float:left;height:16px;width:142px;margin:0 5px 0 2px;padding:1px 5px 1px 5px;border:#f2dab1 solid 2px; background:#e7c69f; font-family:"Times New Roman", Times, serif; font-size:12px;color:#8e2d00;opacity:0.55;} *html input.search{background:filter:alpha(opacity=55);} img.search{border:0;width:50px;height:19px;margin:1px 2px 0 0;} #top_menu{width:989px;margin:0 35px 0 35px;height:62px;} #top_menu_1 a, #top_menu_2 a, #top_menu_3 a, #top_menu_4 a, #top_menu_5 a, #top_menu_6 a{text-decoration:none;color:#e9c08b;} #top_menu_1.active a, #top_menu_2.active a, #top_menu_3.active a, #top_menu_4.active a, #top_menu_5.active a, #top_menu_6.active a{text-decoration:none;color:#9e3b00;} #top_menu_4.active{color:#9e3b00;} #top_menu_1 { float:left; display:block; width:161px; height:17px; padding:27px 10px 18px 10px; background:url(../images/menu_top_1.png) top right no-repeat; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; color:#e9c08b; } #top_menu_2 { float:left; display:block; width:121px; height:17px; padding:27px 10px 18px 10px; background:url(../images/menu_top_2.png) top center no-repeat; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; color:#e9c08b; } #top_menu_3 { float:left; display:block; width:177px; height:17px; padding:27px 10px 18px 10px; background:url(../images/menu_top_3.png) top center no-repeat; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; color:#e9c08b; } #top_menu_4 { float:left; display:block; width:169px; height:17px; padding:27px 10px 18px 10px; background:url(../images/menu_top_4_a.png) top center no-repeat; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; } #top_menu_5 { float:left; display:block; width:95px; height:17px; padding:27px 10px 18px 10px; background:url(../images/menu_top_5.png) top center no-repeat; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; color:#e9c08b; } #top_menu_6 { float:right; width:146px; display:block; height:17px; padding:27px 10px 18px 10px; background:url(../images/menu_top_6.png) top left no-repeat; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; color:#e9c08b; } #content1{margin:0 35px 0 35px; width:989px; position:relative;} #content1_left{float:left;width:224px;background:#00CC33;position:relative; display:table;} #content1_center{float:left;width:539px;background:#0066CC;;position:relative;} #content1_right{float:right;width:226px; background:#66CC33;}
-
Здравствуйте. В Opera и Mozilla Firefox возникла проблема с фоном, при использовании кода приведённого ниже. В блоках #container_obhvat и #footer используются одинаковые фоновые изображения, однако между блоками в этих бразерах явно видна граница (см. скрин.), почему эта граница возникает? В IE6 границу не видно. Так же появилась проблема с прокруткой. Блок #footer должен прижиматься к низу, когда мало контента, в Opera появляется вертикальная прокрутка, которой быть не доложно, почему она возникает? Я заметил, что в Opera, когда появляется горизонтальная прокуртка, возникает и вертикальная. <html lang="ru" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>bal-trade.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="container_obhvat"> Content <div id="container_obhvat_otstup"></div> </div> <div id="footer"> Footer </div> </body> </html> html, body { height:100%; margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; color:#201f1f; background-color:#e8e8e8; } #container_obhvat, #footer { position:relative; width:1001px; padding-left:20px; padding-right:20px; margin-left:auto; margin-right:auto; background:url(../images/body_bg.png) center top repeat-y; } #container_obhvat { min-height:100%; } *html #container_obhvat{height:100%;} #container_obhvat_otstup { padding-bottom:100px; background:#CC9933; } #footer { height: 80px; margin-top: -80px; }
-
Использую плагин для jQuery, который выводит подсказку, когда курсор подводиться к ссылке. Так вот у этой подсказки углы закруглены с помощью свойств moz-border, работает это только в Mozilla Firefox, а Opera и Internet Explorer, это свойство воспринимать не хотят. В этом заключается вся проблема. Кто знает, как сделать закруглённые углы в данной ситуации? То есть свойство class наверное использовать нельзя, потому как его просто некуда применить, внутри ссылки, в title просто не получиться никакой стиль задать. CSS: p#vtip { display: none; font-family:Arial, Helvetica, sans-serif; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: white; border: 1px solid #a6c9e2; -moz-border-radius: 15px; -webkit-border-radius: 15px; z-index: 9999 } p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px } HTML: <link rel="stylesheet" type="text/css" href="CSS/pdp_style.css"> <script type="text/javascript" src="JS/jquery.js"></script> <script type="text/javascript" src="JS/vtip.js"></script> <a class="vtip" title="Текст подсказки" href="index.html">Имя страницы</a> JS: this.vtip = function() { this.xOffset = -10; // x distance from mouse this.yOffset = 10; // y distance from mouse $(".vtip").unbind().hover( function(e) { this.t = this.title; this.title = ''; this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $('body').append( '<p id="vtip"><img id="vtipArrow" />' + this.t + '</p>' ); $('p#vtip #vtipArrow').attr("src", 'Images/Slujebnie/vtip_arrow.png'); $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow"); }, function() { this.title = this.t; $("p#vtip").fadeOut("slow").remove(); } ).mousemove( function(e) { this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $("p#vtip").css("top", this.top+"px").css("left", this.left+"px"); } ); }; jQuery(document).ready(function($){vtip();}) this.vtip=function(){this.xOffset=-10;this.yOffset=10;$(".vtip").unbind().hover(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtip"><img id="vtipArrow" />'+this.t+"</p>");$("p#vtip #vtipArrow").attr("src","Images/Slujebnie/vtip_arrow.png");$("p#vtip").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$("p#vtip").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("p#vtip").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtip()}); ——————————————-- С уважением, Антон.