Форум Сайтостроение Веб-строительство

CSS блоки

Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
415

Помогите пожалуйста, текст почему-то уехал вправо.

HTML 

<div class="service">

<ul>

  <li><a href="/">Ссылка 1</a></li>

  <li><a href="/">Ссылка 2</a></li>

  <li><a href="/">Ссылка 3</a></li>

  <li><a href="/">Ссылка 4</a></li>

</ul>

 </div>

CSS 

.service {

   float: left;

   background-color: #FFFFFF;

    font-family: Verdana;

  width: 180px;

   border-radius: 6px;

   -moz-border-radius: 6px;

   box-shadow: 0 3px 10px #e1e5e8, 0 0 10px #F6F5F5 inset;

   line-height:25px;



}

.service ul li a {

    color: #2e83c6;

   font-size: 11px;

   text-decoration: none;

   border-bottom: 1px dotted;

   font-weight: bold;

}

.service ul li a:hover {

    color: #ff8400;

    font-size: 11px;

   font-weight: bold;

} 



.service ul

{

	

	text-decoration: none;

	font-weight: bold;

	list-style: none;	

}

Раньше было так:

HTML 

<div id="menu">

  <a href="/">Ссылка 111111111</a>

  <a href="/">Ссылка 21111111</a>

  <a href="/">Ссылка 31111111</a>

  <a href="/">Ссылка 41111111</a>

</div>

CSS 

#menu 

{

   float: left;

   background-color: #FFFFFF;

   margin: 50px;

   padding: 15px;

   font-family: Verdana;

   width: 160px;

   border-radius: 6px;

   -moz-border-radius: 6px;

   box-shadow: 0 3px 10px #e1e5e8, 0 0 10px #F6F5F5 inset;

   line-height:25px;

}

#menu a 

{

   color: #2e83c6;

   font-size: 11px;

   text-decoration: none;

   border-bottom: 1px dotted;

   font-weight: bold;

}

#menu a:hover 

{

   color: #ff8400;

   font-size: 11px;

   font-weight: bold;

}

Сейчас добавил li и текст "поехал"

KV
На сайте с 22.12.2011
Offline
88
K_V_S
#1

В ИЕ оформление блока отличается.

А по вопросу - 


.service ul 

{ 

    text-decoration: none; 

    font-weight: bold;

    list-style-type: none;

    margin-left: -15px;

}



*html .service ul{

    margin-left: 10px;

}
Как бы на тебя ни давили, никогда не соглашайся на роль, что тебе не нравится *** http://handmade.tigress.com.ua
Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
#2

K_V_S, спасибо большое. Покажите пожалуйста скрин из ИЕ если не сложно, нет возможности посмотреть из под Винды. Работаю на Маке.

---------- Добавлено 29.04.2012 в 23:04 ----------

Подскажите по поводу еще одного блока. Все сделал вроде верно, а расстояние между строками большое.

HTML 

<div class="studio_news">

<ul>

<div class="date">29 апреля 2012</div>

<li><a href="#">График работы в мае!</a></li><br />

<div class="date">28 апреля 2012</div>

<li><a href="#">График работы в мае!</a></li><br />

<div class="date">25 апреля 2012</div>

<li><a href="#">График работы в мае!</a></li><br />

<div class="date">16 апреля 2012</div>

<li><a href="#">График работы в мае!</a></li><br />

<div class="date">9 апреля 2012</div>

<li><a href="#">График работы в мае!</a></li><br />

<div class="all">

<li><a href="#">Все новости</a></li>

</div><br />

</ul>

</div>

CSS 

.studio_news 

{

	background-color: #FFFFFF;

    padding: 15px;

    font-family: Verdana;

    width: 180px;

    border-radius: 6px;

    -moz-border-radius: 6px;

    box-shadow: 0 3px 10px #e1e5e8, 0 0 10px #F6F5F5 inset;

    line-height: 25px;

    margin-top: -5px;

}

.studio_news ul li a 

{

    color: #2e83c6;

    font-size: 11px;

    text-decoration: none;

    border-bottom: 1px dotted;

    font-weight: bold;

}



.studio_news ul li a:hover 

{

    color: #ff8400;

    font-size: 11px;

    font-weight: bold;

}

.studio_news ul .all

{

    float: right;

    margin-top: 6px;

}



.studio_news ul .all a

{

 	color: #ff843b;

 	font-size: 11px;

}

.studio_news ul .all a:hover

{

 	color: #2e83c6;

 	font-size: 11px;

 	border-bottom: 0 dotted;

}



.studio_news ul 

{ 

    text-decoration: none; 

    font-weight: bold;

    list-style-type: none;

    margin-left: -25px;

}



.date

{

    font-family: Verdana;

    font-weight: normal;

    font-size: 11px;

    color: #cd0f00;

    margin: 0 0 -10px;

}

Раньше было так:

HTML 

<div class="studio_news">

<div class="date">29 апреля 2012</div>

<a href="#">Новость!</a><br />

<div class="date">28 апреля 2012</div>

<a href="#">Новость!</a><br />

<div class="date">25 апреля 2012</div>

<a href="#">Новость!</a><br />

<div class="date">16 апреля 2012</div>

<a href="#">Новость!</a><br />

<div class="date">9 апреля 2012</div>

<a href="#">Новость!</a><br />

<div class="all">

<a href="#">Все новости</a>

</div><br />

</div>

CSS 

.studio_news 

{

	background-color: #FFFFFF;

    padding: 15px;

    font-family: Verdana;

    width: 180px;

    border-radius: 6px;

    -moz-border-radius: 6px;

    box-shadow: 0 3px 10px #e1e5e8, 0 0 10px #F6F5F5 inset;

    line-height: 25px;

    margin-top: -5px;

}

.studio_news a 

{

    color: #2e83c6;

    font-size: 11px;

    text-decoration: none;

    border-bottom: 1px dotted;

    font-weight: bold;

}

.studio_news a:hover 

{

    color: #ff8400;

    font-size: 11px;

    font-weight: bold;

}

.studio_news .all

{

    float: right;

    margin-top: 6px;

}



.studio_news .all a

{

 	color: #ff843b;

 	font-size: 11px;

}

.studio_news .all a:hover

{

 	color: #2e83c6;

 	font-size: 11px;

 	border-bottom: 0 dotted;

}

.date

{

    font-family: Verdana;

    font-weight: normal;

    font-size: 11px;

    color: #cd0f00;

    margin: 0 0 -10px;

}
Новый постоянный интерфейс Яндекс.Картинок Яндекс.Почте 20 лет Отчёт «Анализ поисковых запросов»
KV
На сайте с 22.12.2011
Offline
88
K_V_S
#3

IE 7, 8 не понимают CSS3.

По поводу высоты строк смотрите на line-height, margin и padding.

---------- Post added 29-04-2012 at 22:30 ----------

Вы в какой-то программе верстаете? Откуда <div> между </li><li> ? И </br> там не нужно. 

<div class="studio_news"> 

	<ul> 

		<li>

			<div class="date">29 апреля 2012</div>

			<a href="#">График работы в мае!</a>

		</li> 

		<li>

			<div class="date">28 апреля 2012</div>

			<a href="#">График работы в мае!</a>

		</li> 

		<li>

			<div class="date">25 апреля 2012</div>

			<a href="#">График работы в мае!</a>

		</li> 

		<li>

			<div class="date">16 апреля 2012</div>

			<a href="#">График работы в мае!</a>

		</li> 

		<li>

			<div class="date">9 апреля 2012</div>

			<a href="#">График работы в мае!</a>

		</li>

		<li> 

			<div class="all"><a href="#">Все новости</a></div>

		</li> 

	</ul> 

</div>
Яндекс заработал за 2012 Возможности для брендинга в IgnitionOne: доля Google на

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий