Jump to content
  • 0

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

dukesov

Asked by dukesov,

 Share

Question

dukesov Explorer

dukesov

Posted
Posted (edited)

adb8ea16631b.jpg

#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 by dukesov
Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0
zSpx Explorer

zSpx

Posted
Posted

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

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

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

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

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

Link to comment
Share on other sites
  • 0
dukesov Explorer

dukesov

Posted
  • Author
Posted

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Vin Explorer

Vin

Posted
Posted

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


.class {
    color: #fff;
}

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

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

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

Link to comment
Share on other sites
  • 0
dukesov Explorer

dukesov

Posted
  • Author
Posted (edited)

Вот весь файл 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 by dukesov
Link to comment
Share on other sites
  • 0
Vin Explorer

Vin

Posted
Posted (edited)

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

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

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

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

Edited by Vin
Link to comment
Share on other sites
  • 0
dukesov Explorer

dukesov

Posted
  • Author
Posted (edited)

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

Вот код 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 by dukesov
Link to comment
Share on other sites
  • 0
Vin Explorer

Vin

Posted
Posted (edited)

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

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

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

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

Edited by Vin
Link to comment
Share on other sites
  • 0
dukesov Explorer

dukesov

Posted
  • Author
Posted

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
dukesov Explorer

dukesov

Posted
  • Author
Posted

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

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Vin Explorer

Vin

Posted
Posted (edited)

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

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

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

Edited by Vin
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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

  I accept