Не правильное отображение css

dukesov · January 10, 2012

#sddm div a:hover
	{	background: #49A3FF;
		color: #FFF}

.ib, .ib2 {height: inherit;z-index: 1;}
.ibt, .ibtl, .ibtr  {background: url('/images/ibt.png') top left repeat-x;height: 34px;overflow: hidden;}
.ibtl {background-position: bottom left;float: left; width: 14px;}
.ibtc {float: left;margin-left: 4px;line-height: 34px;padding-top: 2px;width: 86%;overflow: hidden;}
.ibtr {background-position: bottom right;float: right; width: 15px;}
.ibtc a.bl, .ibtc a.bl:visited, .ibtc span.bl {border-left: 3px solid #fcbc26;color: #09364c;font-size: 11pt;font-weight:bold;padding-left: 7px;}
.ibb, .ibbl, .ibbr {background: url('/images/ibb.png') top left repeat-x;height: 20px;overflow: hidden;}
.ibbl {background-position:bottom left;float:left; width: 119px;}
.ibbr {background-position:center left;float:right; width: 119px;}
.ibin {background: #fff url('/images/ibl.png') top left repeat-y; height: auto;}
.ibc {padding: 7px 10px 0 12px;}
.ibc2 {padding: 7px 10px 0 0px;}
.ibtc h1, .ibtc h2 {font-size: 13pt;padding-left: 7px;}
.ibtc h1.bl {color: #09364c;font-size: 11pt;font-weight:bold;padding-left: 7px;}

Грешу на эту строчку:

.ibin {background: #fff url('/images/ibl.png') top left repeat-y; height: auto;}

Но незнаю что и как правильно вписать. Пробовал делать вторую такую строчку, меняя название картинки, ничего не вышло.

Да и картинка ibr.png имееться.

Подскажите плиз!

ПС: Код не мой, я в этом деле новичок.

Edited January 10, 2012 by dukesov

zSpx · January 10, 2012

Неправильно высчитали ширину элементов, они в сумме дают больше, чем 100% и вылазят из родителя, возможно эти:

.ibtl {... width: 14px;}
.ibtc {...width: 86%;}
.ibtr {... width: 15px;}

А ДОМ-инспекторы отменили? Посмотреть же можно.

зы: да и вообще, не стоит плавающим элементам одного потока задавать размеры в разных единицах измерения (% и пх, например), черевато вот такими вот проблемами.

зызы: css без html зачастую бесполезен.

dukesov · January 11, 2012

Неправильно высчитали ширину элементов, они в сумме дают больше, чем 100% и вылазят из родителя, возможно эти:
.ibtl {... width: 14px;}
.ibtc {...width: 86%;}
.ibtr {... width: 15px;}
А ДОМ-инспекторы отменили? Посмотреть же можно.
зы: да и вообще, не стоит плавающим элементам одного потока задавать размеры в разных единицах измерения (% и пх, например), черевато вот такими вот проблемами.
зызы: css без html зачастую бесполезен.

я конечно не совсем понял вас, могу скинуть полностью код css. (если это поможет)))

Vin · January 11, 2012

Желательно показать ещё и разметку (html). В коде желательно сделать переносы вот так:


.class {
    color: #fff;
}

Если 2 элемента на одном уровне имеют ширину в процентах, а другой — в пикселах, то у одного из резиновых элементов нужно сделать отступ, соотвествующий ширине элемента фиксированной ширины, иначе блоки будут сливаться или перепадать.

86% + 14% — это уже и так вся ширина экрана (или блока-родителя).

86% + 14% + 15px = вся ширина экрана (или блока-родителя) + ещё 15 "лишних" пикселей.

dukesov · January 11, 2012

Вот весь файл style.css

Блин ни как не могу сделать отображение нормально...

body {height: 100%;margin: 0px;padding: 0px;background-color: #ffffff;font-size: 14px;font-family: tahoma;color: #000000;}

A:link     { color: #3282E8; text-decoration: underline; background-color: transparent }
A:visited { color: #3282E8; text-decoration: underline; background-color: transparent }
A:hover  { color: #3282E8; text-decoration: none; background-color: transparent }
A:active { color: #3282E8; text-decoration: underline; background-color: transparent }
TABLE, IMG { border: 0 }
TEXTAREA {font-size: 1em}





#collagetbl { width: 100%; height: 100px;  }

#contacttbl { margin: 0; padding: 0; font-size: 0.9em; line-height: 17px; }
   #contacttbl #mss { width: 350px; }
   #contacttbl #fo { width: 350px; }
   #contacttbl #phn { width: 350px; }

#filtrtbl { width: 100%; overflow: hidden; margin: 0 0 20px 0; line-height: 12px; border: 1px #fff solid }
   #filtrtbl td { text-align: left}
   #filtrtbl select { margin: 3px 0 2px 0; font-size: 0.9em;  }
   #filtrtbl #fwrd { width: 431px }
   #filtrtbl input { margin:3px 0 2px 0; font-size: 0.9em }

#footer { width: 100%; height: 60px; font-size: 0.7em }
   #counters { width: 25%; padding: 10px 0 0 0; font-size: 0.7em }
   #counters img { padding: 0 5px 3px 0; }
   #rights { padding: 7px 0 0 7px; color: #154F84; }
   #creator { width: 17%; padding: 6px 10px 0 0; text-align: right; border-top: 1px #000000 solid }
   #creator a { color: #777 }
   #creator a:hover { color: #000000 }

#header { width: 100%; height: 98px; background: url(/images/top_bg.gif) }

#mailnews { width: 100%; font-size: 0.9em; border-bottom: 1px #E0E6EA solid }
   .mn_news_a { width: 50px; padding: 4px 6px 3px 12px; text-align: center; background-color: #2D7CE1 }
   .mn_news_a a { color: #fff; text-decoration: none  }
   .mn_news { width: 50px; padding: 4px 6px 3px 12px; text-align: center;  border-top: 1px #E0E6EA solid; border-left: 1px #E0E6EA solid }
   .mn_news a { color: #000000; text-decoration: none  }
   .news_lks { margin: 0; padding: 0 }
   .news_lks li { margin: 0 0 0 20px; padding: 0 0 6px 0; }
   .actv { list-style: none }
   .news_img_first { position: relative; margin: 0 7px 0 -13px; padding: 0 0 0 0; border: 3px #ccc solid }
   .trngl { height: 21px; position: absolute; margin-left: -1px; }

#maintbl { width: 100%; margin: 40px 0 0 0; }
   #maintd_l { width: 25%; text-align: left }
   #maintd { padding: 0 7px 0 7px; text-align: left; font-size: 0.8em; color: #000; }
   #maintd_r { width: 25%; text-align: left }

#menu_h { width: 100%; margin: 7px 0 0 0; line-height: 14px;  font-size: 0.9em }
#menu_h a { padding: 2px 15px 0 15px; color: #0D5D72; text-decoration: none; border-left: 1px #ccc dotted }
#menu_h a:hover { text-decoration: underline;}
#menu_h a.noborder { padding: 2px 15px 0 19px; border: 0px }

#stat { margin: 10px 0 0 0; font-size: 0.9em; font-weight: bold; text-align: right }

#uniq_imgcntr { width: 100%; height: 400px; overflow: auto; clear: both; border: 3px #ccc solid }

#votetbl {
	width: 97%;
	font-size: 11px;
	color: #fff;
}
#votetbl td{
	padding-bottom: 20px;
}
#votetbl img{
	padding: 0 0 5px 0;
}
.vote_quest {
	margin: 0 0 10px 10px;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
}
.allvoters {
	margin: -20px 0 10px 10px;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
}
/* classes */

a.gold { color: #ffa627 }

.aitem { width: 100%; height: 95px; margin: 0 0 3px 0; font-size: 0.9em; border: 1px #000000 solid }
   .addeddiv { width: 100%; text-align: right; font-size: 0.9em; color: #000000 }
   .imgtd { width: 100px; border: 2px #ccc solid; text-align:center;}
   .imgtd_b { width: 20px; border: 2px #ccc solid; text-align:center;}
   .headtd { padding: 5px; text-align: left; background-color: #333 }

.ads_d { margin: 7px 7px 7px 7px; font-size: 0.75em; color: #000000 }
   .ads_d a { color: #ccc }

.ads_l { margin: 14px 0 0 20px; font-size: 0.75em; color: #000000 }
   .ads_l a { color: #000 }

.ads_r { margin: 14px 10px 0 10px; font-size: 0.75em; color: #000000 }
   .ads_r a { color: #000 }

.answer_comment {
	text-align: right;
	font-size: 11px;
}
.cetat {
	margin: 5px 0 0 0;
	padding: 3px;
	text-align: left;
	font-size: 11px;
	border: 1px #ccc dashed;
}

.autouniqinfo { width: 200px; padding: 3px 0 0 0; float: left }

.bitem { width: 100%; height: 50px; margin: 0 0 3px 0; font-size: 0.9em; border: 1px #000000 solid }
   .addeddiv { width: 100%; text-align: right; font-size: 0.9em; color: #000000 }
   .imgtd_b { width: 20px; border: 2px #ccc solid; text-align:center;}
   .headtd { padding: 5px; text-align: left; background-color: #6BA3C1}

.displaynone { display: none }
.displayblock { display: block }

.enfcolor1 { color: #0D5D72 }
.enfcolor2 { color: #3886D2 }

.fastgo_container { margin: 13px 0 0 7px; height: 500px; overflow: auto; clear: both; scrollbar-face-color: #333; scrollbar-highlight-color: #000; scrollbar-shadow-color: #000; color: #000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #ccc; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000 }
.fast_go1 { width: 100px; margin: 0 0 0 3px; float: left; line-height: 18px; font-size: 0.7em; }
.fast_go2 { width: 90px; margin: 0 0 0 15px; float: left; clear: right; line-height: 18px; font-size: 0.7em; }

.fresh_auto { padding-top:7px; margin: 0px 0 5px 20px; height: 80px; overflow: hidden; line-height: 12px; clear: both; font-size: 0.7em; color: #000000 }
   .fresh_auto img { margin: 0 3px 0 0; border: 3px #ccc solid }
   .fresh_auto strong { color: #FF0000 }

.fresh_mess { margin: 14px 0 0 20px; font-size: 0.75em }
   .fresh_mess div { color: #000000; font-weight: bold; font-size: 0.9em }

.header1 {background: url('/images/ibt.png') top left repeat-x;height: 34px;overflow: hidden;}
   .header1 img{ position: relative; top: 5px }

.header2 { margin: 0 0 0 8px; font-size: 1.1em; color: #0D5D72 }
   .header2 img{ position: relative; top: 5px }

.header3 { font-size: 1.4em; color: #000; border-bottom: 1px #000000 solid }

.hot_auto { margin: 17px 0 0 0; height: 105px; overflow: hidden; line-height: 18px; color: #000000 }
   .hot_auto img { margin: 0 5px 0 0; border: 3px #ccc solid }
   .hot_auto div { line-height: 11px; font-size: 1.1em; font-weight: bold; color: #ffa627 }
   .hot_auto strong { color: #4D831A }

.menu_v { margin: 7px 0 0 20px; font-size: 0.8em; line-height: 20px }
.menu_v2 { margin: 7px 0 0 20px; }
.mess_sold { position: absolute; margin: 15px 0 0 200px; }

.news { margin: 17px 0 0 0; height: 95px;  line-height: 15px; text-align: justify }
   .news img { margin: 0 3px 0 0;  }
   .news div { margin: 0 0 3px 0 }
   .news span { color: #000000 }

.selectw { width: 200px }
.selectw_sml { width: 90px }
.excample { font-size: 0.7em }
.menu_fon {background: #3E3E3E url(/images/bg.jpg) repeat-x}

.newscomment {
	margin: 10px 0 0 0; 
	padding: 7px;
	color: #000;
	background-color: #E0DED7; 
}
.newscomment a { color: #3282E8 !important }
.newscomment a:visited { color: #3282E8 !important }
.newscomment a:hover { color: #3282E8 !important }
.newscomment a:active { color: #3282E8 !important }

.newscommentpoll {
 	height: 30px;
	margin: 0 0 10px 0;
	padding: 5px 7px 0 7px;
	color: #000;
	background-color: #E0DED7; 
	border-top: 1px #fff solid;
}

.likenotlike {
	position: absolute;
	margin-left: 260px;
	font-size: 10px;
}

.selectw { width: 200px }
.selectw_sml { width: 90px }
.excample { font-size: 0.7em }

.demo {

font-size: 14px;
color: #000000;
}

#sddm
{	background: #287098 url('/images/menu_bg.png') repeat-x;
height: 28px;
width: 100%;
list-style-type: none;
padding: 0;
margin: 0;
text-align: justify;
white-space: nowrap;
	}

#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 13px arial}

#sddm li a
{	
	padding: 0px 10px;
	width: 80px;
	background: #287098 url('/images/menu_bg.png') repeat-x;
	color: #FFF;
	text-align: center;
	text-decoration: none}

#sddm li a:hover
{	background: #49A3FF}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: url('/images/submenu_ar.gif') no-repeat top left;
	border: 1px solid #5970B2}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		font: 11px arial}

	#sddm div a:hover
	{	background: #49A3FF;
		color: #FFF}

.ib, .ib2 {height: inherit;z-index: 1;}
.ibt, .ibtl, .ibtr  {background: url('/images/ibt.png') top left repeat-x;height: 34px;overflow: hidden;}
.ibtl {background-position: bottom left;float: left; width: 14px;}
.ibtc {float: left;margin-left: 4px;line-height: 34px;padding-top: 2px;width: 86%;overflow: hidden;}
.ibtr {background-position: bottom right;float: right; width: 15px;}
.ibtc a.bl, .ibtc a.bl:visited, .ibtc span.bl {border-left: 3px solid #fcbc26;color: #09364c;font-size: 11pt;font-weight:bold;padding-left: 7px;}
.ibb, .ibbl, .ibbr {background: url('/images/ibb.png') top left repeat-x;height: 20px;overflow: hidden;}
.ibbl {background-position:bottom left;float:left; width: 119px;}
.ibbr {background-position:center left;float:right; width: 119px;}
.ibin {background: #fff url('/images/ibl.png') top left repeat-y; height: auto;}
.ibc {padding: 7px 10px 0 12px;}
.ibc2 {padding: 7px 10px 0 0px;}
.ibtc h1, .ibtc h2 {font-size: 13pt;padding-left: 7px;}
.ibtc h1.bl {color: #09364c;font-size: 11pt;font-weight:bold;padding-left: 7px;}

.hot a { color: #FF0000 !important }
#cmnt_txtarea
{
background: url('/images/o2d.png') no-repeat scroll center center #FFFFFF;
}
.menlv{height:35px;width: 250px;background: url(../images/menvl.jpg) no-repeat;}
.menlvpos{padding-top:7px;}
.menlc{background: url(../images/menc.jpg) repeat-y; width: 250px;}
.menn{height:15px;width: 250px;background: url(../images/menn.jpg) no-repeat;}
.menlcpos{margin-left:10px;}
.menn2{height:15px;width: 250px;background: url(../images/menvv.jpg) no-repeat;}

Edited January 11, 2012 by dukesov

Vin · January 11, 2012

Если хотите, чтобы Вам помогли, выложите html: поверьте, порядок описания элементов и вложенность тэгов тоже очень важны

css без html зачастую бесполезен.

Именно такой случай.

Большие фрагменты кода лучше всего выкладывать сюда: http://jsfiddle.net/.

Edited January 11, 2012 by Vin

dukesov · January 11, 2012

Сорри, с тем сайтом надо ещё разобраться))

Вот код html, конечно если это тот, который нужен вам.

Блок, который не исправен "Информация"

<?
include "manag/connect.php";
include "funcs.php";
set_page_attrs("");

function output_inews()
{
   global $news_num_onmain;
   $str_output = "";
   $str_divs = "";

   $query = @mysql_query("select * from art_parts where active=1 order by order_num desc;");
   $num_rows = @mysql_num_rows($query);
   if($num_rows > 0)
   {
        $c = 0;
        $str_output = "<table id=\"mailnews\" cellspacing=\"0\" cellpadding=\"0\"><tr valign=\"top\">";
        while($res = @mysql_fetch_array($query))
        {
	if($c == 0)
	{

	   $str_divs .= "<div id=\"newsdiv".$c."\"><ul class=\"news_lks\">";
           	   $str_output .= "<th width=\"2px\"> </th><th id=\"newstab".$c."\" class=\"mn_news_a\"><nobr><a href=\"javascript://\" onclick=\"show_news_content('".$c."')\">".$res['type_name']."</a></nobr></th><th width=\"12px\"><div id=\"trngl".$c."\" class=\"trngl\"><img src=\"/images/cnr.gif\" alt=\"\" /></div></th>";
	}
	else
	{
	   $str_divs .= "<div id=\"newsdiv".$c."\" class=\"displaynone\"><ul class=\"news_lks\">";
           	   $str_output .= "<th id=\"newstab".$c."\" class=\"mn_news\"><nobr><a href=\"javascript://\" onclick=\"show_news_content('".$c."')\">".$res['type_name']."</a></nobr></th><th width=\"12px\"><div id=\"trngl".$c."\" class=\"trngl\"><img src=\"/images/cnr_l.gif\" alt=\"\" /></div></th>";
	}


             $k = 0;	
	$q_dt = @mysql_query("select * from newss where active=1 and part_id=".$res['type_id']." order by news_date desc limit 8;");
	while($r_dt = @mysql_fetch_array($q_dt))
	{
	   if($k == 0 && $r_dt['img'] != '')
	      $str_divs .= "<li class=\"actv\"><img src=\"/news_pics/".$r_dt['img']."\" width=\"100\" class=\"news_img_first\" align=\"middle\" alt=\"\" /><a href=\"/news/".$res['type_id']."/".$r_dt['news_id']."/\">".$r_dt['news_head']."</a></li>";
	   else
	      $str_divs .= "<li><a href=\"/news/".$res['type_id']."/".$r_dt['news_id']."/\">".$r_dt['news_head']."</a></li>";
	   $k++;
	}
           	$str_divs .= "</ul><br /><br /></div>";

	$c++;
        }
        $str_output .= "<th> </th></tr></table><br />";
   }
   echo $str_output.$str_divs;
}

function output_hot_mess()
{
   $str_output = "";

   $query = @mysql_query("select * from a_messages where active=1 and checked=1 order by add_date desc;");
   $num_rows = (int)@mysql_num_rows($query);
   if($num_rows > 0)
   {
       $str_output = "<div class=\"ibt\"><div class=\"ibtl\"></div><div class=\"ibtc\">Горячие предложения</div><div class=\"ibtr\"></div></div><div class=\"ibin\"><div id=\"manage_news\" class=\"ibc\"> <div class=\"hot\"><a href=\"/hot_mess\">Хотите что бы Ваше объявление тоже было на главной?</a></div>";
       while($res = @mysql_fetch_array($query))
       {
          $str_date = sscanf($res['add_date'], "%4s-%02s-%02s");
          $arr_imgs = explode("}{", trim($res['img']));
          $cnt = count($arr_imgs);
          $str_img = "";
          for($i = 0; $i < $cnt; $i++)
	  if($arr_imgs[$i] != "")
	  {
                  $str_img = "<img src=\"/auto_pics/".$arr_imgs[$i]."\" width=\"125\" align=\"left\" alt=\"\" />";
	     break;
	  }
          $aprice = (int)$res['price'];
          if($aprice == 0)
	$aprice = "<strong>договорная</strong>";
          else
	$aprice = "<strong>".$aprice."</strong> руб.";
          $str_output .= "<div class=\"hot_auto\">".$str_img." <div>".$res['full_name']."</div><br /><font class=\"enfcolor1\">".$res['ayear']." г., пробег: ".$res['probeg']." км., двигатель: ".$res['motor_vol']." л.<br />Цена: ".$aprice."</font><br />Дата публикации: ".$str_date[2]."-".$str_date[1]."-".$str_date[0]." г.<br /><a href=\"/transport/uniq/".$res['mess_id']."/\" class=\"gold\">подробнее</a> </div><br clear>";
       }
       $str_output .= "</div></div><div class=\"ibb\">
<div class=\"ibbl\"></div>
<div class=\"ibbr\"></div>
</div>";
   }

   echo $str_output;

}
?>

<!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" xml:lang="ru" lang="ru">
<head>
<title><? echo $page_title; ?></title>
<link href="/favicon.ico" rel="icon" type="image/x-icon" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="<? echo $page_description; ?>" />
<meta name="keywords" content="<? echo $page_keys; ?>" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script type="text/javascript" src="/js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="/js/c_script.js"></script>
</head>
<body>

<table width="1200px" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250px">

<? include "templates/start.php"; ?>
</td>



<td id="maintd">
<?
    if($is_index_page)
    {
         echo output_inews();
         output_hot_mess();
         echo "<div class=\"ibt\"><div class=\"ibtl\"></div><div class=\"ibtc\">Информация:</div><div class=\"ibtr\"></div></div><div class=\"ibin\"><div id=\"manage_news\" class=\"ibc\">";
         echo $page_content;

		 echo "</div><div class=\"ibb\">
<div class=\"ibbl\"></div>
<div class=\"ibbr\"></div>
</div></div><br />";
		output_ads("up");
    }
    else
    {
         echo "<div class=\"header3\">".$page_name."</div>";
         echo $page_content."<br />";
         output_ads("up");
    }
?>
</td>


<td width="250px">
<? include "templates/rightmeniu.php"; ?>
</td>

</tr>
</table>

<table width="1200px" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<? include "templates/end.php"; ?>
</td>
</tr>
</table>

</body>
</html>

Edited January 11, 2012 by dukesov

Vin · January 11, 2012

Из CMS что-ли? Там больше php, чем html :facepalmxd: Настоятельно рекомендую воспользоваться замечательными дополнениями для FF: web developer toolbar и firebub (второй легко также заменяется встроенными инспекторами оперы и хрома) — многие вещи сразу станут понятнее.

Но если сторого по теме, то zSpx был прав: сумма блоков превышает 100%, потому и вылезают. .ibtc нужно либо задать margin в 15px, но тогда его ширина будет меньше 86-и %, но лучше обернуть

.ibtl {... width: 14px;}
.ibtc {...width: 86%;}

в дополнительный div-контейнер и уже ему задать отступ в 15px.

Edited January 11, 2012 by Vin

dukesov · January 11, 2012

Из CMS что-ли? Там больше php, чем html Настоятельно рекомендую воспользоваться замечательными дополнениями для FF: web developer toolbar и firebub (второй легко также заменяется встроенными инспекторами оперы и хрома) — многие вещи сразу станут понятнее.
Но если сторого по теме, то zSpx был прав: сумма блоков превышает 100%, потому и вылезают. .ibtc нужно либо задать margin в 15px, но тогда его ширина будет меньше 86-и %, но лучше обернуть
.ibtl {... width: 14px;}
.ibtc {...width: 86%;}
в дополнительный div-контейнер и уже ему задать отступ в 15px.

Спасбо, буду разбираться))

Прога очень даже помогает, и не только в этом))) Спасибо Большое!

dukesov · January 11, 2012

Всётаки почему то не получается...

Может быть надо добавить вторую строку, подобную этой?

.ibin {background: #fff url('/images/ibl.png') top left repeat-y; height: auto;}

Потому как эта строка выводит левую линию, но и должна выводить правую в перевернутом виде. Или не так?

И картинки ibl.png и ibr.png разные. Если даже он её перевернет, будет не очень хорошо смотреться...

Напишите плиз как должна выглядеть вторая строка, может быть тогда так получиться?

Но если сторого по теме, то zSpx был прав: сумма блоков превышает 100%, потому и вылезают. .

Если чесно, я не понял... Сорри...

Vin · January 13, 2012

Если чесно, я не понял... Сорри...

Сочетать в одном контейнере блоки с фиксированной и резиновой шириной опасно). Если резиновый блок соседствует с фиксированными, то ему нужно задавать соотвествующие отступы, но опять же, не задавать ему самому определённое значение в процентах.

А вообще: учиться,учиться, учиться: учить блочную модель. Книжек О'Райли почитайте. Сам рекомендую "Большая книга CSS". Хотя, возможно, сначала лучше вообще начать с этой, для чайников. Без обид :blush:

Edited January 13, 2012 by Vin

Sign In

Не правильное отображение css

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information