вопрос по позиционированию

Izum · May 15, 2009

Здравствуйте. Подскажите плз

как в одном блоке разместить часть текста слева, а часть - справа?

и еще: между двумя колонками в опере появляется полоска, как от нее избавиться?

psywalker · May 15, 2009

Izum

как в одном блоке разместить часть текста слева, а часть - справа?
и еще: между двумя колонками в опере появляется полоска, как от нее избавиться?

1) Наверное придётся делать Главном блоке ещё один блок, и задавать ему float: right; и ширину..

2) Убрать отступы, а вообще надо смотреть ситуацию..

Izum · May 15, 2009

цсс

BODY { background-color: white;
margin: 0;
padding: 0; }
.top {
display: block;
text-align: center;
height: 120px;
background: #203682;

}
* {margin:0;padding:0;border: none;
}

div.hr {
	color:#dfe3e1;
	background-color:#dfe3e1;
border-width:0px;
	height: 1px;
	width: 100%;
margin: 0;
padding: 0;	
float: left;

}
div.hr hr {display:none;}

.grey {
background: #bec0bf;
width: 50%;
height:20px;
float: left;
margin: 0;
padding: 0;	
}
.line{
margin-left: 5px;
color: #dfe3e1;
padding: 0;	
}
.white { 
	font-family: Arial, Verdana, Helvetica, Tahoma; 
	font-size: 12px; 
	color: #ffffff; 
	margin-left: 10px;

}

.white:hover { 
	font-family: Arial, Verdana, Helvetica, Tahoma; 
	font-size: 12px; 
	color: #ff0000; 
}
.white-bold { 
	font-family: Arial, Verdana, Helvetica, Tahoma; 
	font-size: 12px; 
	color: #ffffff; 
	font-weight: bold;
background: #bec0bf;
float: right;
text-align: right;
width: 50%;
height:20px;
margin: 0;
padding: 0;	

}

хтмл

<!--index:begin-->
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Ремонт квартир в Петербурге | Ремонт и отделка помещений в Санкт-Петербурге | Строительно-отдалочные работы в СПб | Отделка квартир и комнат в Питере</title>
<meta name="keywords" content="ремонт отделка квартир комнат офисов помещений строительные ремонтные отделочные работы санкт-петербург спб питер">
   <meta name="description" content="Центр услуг 007 предлагает все виды ремонтных работ в Санкт-Петербурге: от косметического до комплексного ремонта квартир, ремонт офисов и других помещений,">
<link rel="stylesheet" type="text/css" href="index.css">
   </head>
<body>
<div class="top"> <a href="http://www.007spb.ru/"><img src="images/header.jpg" alt="Ремонт квартир. Ремонт помещений." title="Ремонт квартир. Ремонт помещений."></a></div>
<div class="hr"><hr></div>
<p class="grey"><a href="http://www.007spb.ru/" class="white" title="Центр услуг 007">Главная</a>
<span class="line">|</span>
<a href="http://www.007taxi.ru/grafik.html" class="white" title="Центр услуг 007">График разводки мостов</a>
<span class="line">|</span>
<a href="http://www.007bilet.ru/raspisanie.html" class="white" title="Центр услуг 007">Расписание поездов</a>
<span class="line">|</span>

</p>
<p class="white-bold">Заказ можно сделать по телефону 007</p>
</body>
</html>

psywalker · May 15, 2009

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

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
	*{ margin: 0; padding: 0;}



 div.white-bold {
	 background: gray;
	 width: 50%;
	 float: left;



	 }
div.grey {
	 margin-left: 50%;
	 background: red;


	  }
</style>


</head>
<body>



<div class="white-bold">sgdfg fgd fg </div>
<div class="grey">dfg d g</div>

</body>
</html>

Izum · May 15, 2009

тогда при добавлении hr в опере и мозиле блок div.grey поднимается на высоту этого самого hr(

div.white-bold {
	 background: #bec0bf;
	 width: 50%;
	 float: left;
	 height: 20px;


	 }
div.grey {
	 margin-left: 50%;
	 background: #bec0bf;
 height: 20px;
font-family: Arial, Verdana, Helvetica, Tahoma; 
font-size: 12px; 
color: #ffffff; 
	font-weight: bold;
	text-align: right;
	  }

хтмл

</head>
<body>

<div class="top"> <a href="http://www.007spb.ru/"><img src="images/header.jpg" alt="Ремонт квартир. Ремонт помещений." title="Ремонт квартир. Ремонт помещений."></a></div>
<div class="hr"><hr></div>
<div class="white-bold"><a href="http://www.007spb.ru/" class="white" title="Центр услуг 007">Главная</a>
<span class="line">|</span>
<a href="http://www.007taxi.ru/grafik.html" class="white" title="Центр услуг 007">График разводки мостов</a>
<span class="line">|</span>
<a href="http://www.007bilet.ru/raspisanie.html" class="white" title="Центр услуг 007">Расписание поездов</a>
<span class="line">|</span> </div>
<div class="grey">Заказ можно сделать по телефону 007</div>


</body>
</html>

psywalker · May 15, 2009

а ты сделай нижний борден у Шапки, вместо твоего hr и всё

Izum · May 15, 2009

клааааасноооо

может уж заодно подскажите как выровнять текст по одной линии в этих блоках. vertical-align не работает ни в одном браузере.

psywalker · May 15, 2009

попробуй line-height: ...;

Izum · May 15, 2009

спасибо! вы сохранили от поломки мой мозг

psywalker · May 15, 2009

спасибо! вы сохранили от поломки мой мозг happy.gif

Не за что, если чё, обращайся

Sign In

вопрос по позиционированию

Question

Izum

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Izum

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Izum

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Izum

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Izum

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information