Перейти к содержимому



  • Закрытая тема Тема закрыта

Текст не по центру

#1 sergf10

sergf10
  • Пользователь
  • 7 сообщений
  • Репутация: 0
0

Отправлено 15 Август 2009 - 11:00

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

Вот код

<!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"><head>
<meta http-equiv="content-type" content="text/html;charset=Windows-1251">
<title>Все о Испании и Латинской Америке</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<style type="text/css">

#v_mnu_01 ul {
list-style: none;
margin: 0;
padding: 0;
font-family: Courier New, Courier, monospace;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}

#v_mnu_01 {
width: 199px;
margin: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}

#v_mnu_01 li a {
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
}
#v_mnu_01 .notopbrdr0xNone {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

#v_mnu_01 li a:link, #v_mnu_01 li a:visited {
color: #000000;
display: block;
background-color: #66C4FA;
padding-top: 2px;
padding-right: 0;
padding-bottom: 2px;
padding-left: 10px;
}

#v_mnu_01 li a:hover {
color: #000000;
background: #67D7FC;
padding-top: 2px;
padding-right: 0;
padding-bottom: 2px;
padding-left: 18px;
}


</style>


</head>

<body>
<table width="100%" border="0" align="center" class="border_menu" >
<tr>
<td><img src="img/shapka.jpg" width="100%" height="223" /></td>
</tr>
<tr class="current">
<td class="border_menu"><div id="menu">
<div align="center" class="current">
<ul>
<li><a href="index.html" class="current">Главная</a></li>
<li><a href="photo.html">Фото</a></li>
<li><a href="media.html">Медиа</a></li>
<li><a href="country.html">Позвонить за границу</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
</div>
</div></td>
</tr>
<tr class="border_menu">
<td height="538" valign="top"><!-- #BeginLibraryItem "/Library/1.lbi" --><!-- #BeginLibraryItem "/Library/menu.lbi" -->
<div id="v_mnu_01">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="Photo.html">Фото</a></li>
<li><a href="Media.html">Медиа</a></li>
<li><a href="country.html">Позвонить за границу</a></li>
<li><a href="Contacts.html" class="notopbrdr0xNone">Контакты</a></li>
</ul>
<ul>
<li><a href="index.html"></a><a href="Contacts.html" class="notopbrdr0xNone"></a></li>
</ul>
</div>
<!-- #EndLibraryItem --><!-- #EndLibraryItem -->
<table width="200" height="55" border="0" class="border">
<tr>
<td valign="top" class="background"> </td>
</tr>
</table>
<div align="center">- <em>duration</em>: время в секундах, за которое меню полностью раскроется. Значение по умолчанию: 1.0<br />
- <em>transition</em>: функция, которая отвечает за эффект появления меню. По умолчанию: Effect.Transitions.sinoidal. Также возможны варианты:
Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble, Effect.Transitions.flicker<br />
- <em>callback</em>: функция обратного вызова, которая будет обработана после окончания анимации. Она полезна для объединения анимаций.
</div>
<table width="200" height="340" border="0" class="border">
<tr>
<td height="332" valign="top"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" valign="top"><img src="img/shapka2.jpg" width="100%" height="40" /></td>
</tr>
</table>
</body>
</html>

Прикрепленные изображения

  • 1.jpg

 

 

  • 0

#2 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 15 Август 2009 - 12:04

sergf10,
1) Когда все научатся оформлять код, долго я за вами буду подтирать?
2) Пока у вас будет такой код меню:
	<div id="v_mnu_01">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="Photo.html">Фото</a></li>
<li><a href="Media.html">Медиа</a></li>
<li><a href="country.html">Позвонить за границу</a></li>
<li><a href="Contacts.html" class="notopbrdr0xNone">Контакты</a></li>
</ul>
<ul>
<li><a href="index.html"></a><a href="Contacts.html" class="notopbrdr0xNone"></a></li>
</ul>
</div>

Выровнять по центру текст у вас не удастся. Хотя можно попробовать сделать так...
В CSS выше добавляем такое:
#v_mnu_01 li
{
	display: block;
	width: 100%;
	text-align: center;
}

Если так не с работает или что-то поедет, то вам надо переработать меню со спискового под блочный, на подобии этого
...............................

<style type="text/css">

div a
{
display: block;
width: 100%;
text-align: center;
}

</style>

...............................

<div>
<a href="index.html">Главная</a>
<a href="Photo.html">Фото</a>
<a href="Media.html">Медиа</a>
<a href="country.html">Позвонить за границу</a>
<a href="Contacts.html" class="notopbrdr0xNone">Контакты</a>
</div>

  • 0

#3 FaTeRy

FaTeRy
  • Пользователь
  • 480 сообщений
  • Репутация: 1

Отправлено 15 Август 2009 - 12:09

Так <center></center> перед списком поставить - самое простое.
  • 0

#4 Dengere_Ash

Dengere_Ash
  • Пользователь
  • 27 сообщений
  • Репутация: 0

Отправлено 15 Август 2009 - 14:28

FaTeRy, тег <center> — тег эпохи динозавров. По стандарту его не используют.

sergf10, не знаю, почему у вас не встает по центру, но конструкция:

<div id="menu">
<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>
<li><a href="#">Пункт 5</a></li>
</ul>
</div>

#menu ul li {
	text-align: center;
	}
прекрасно размещается по центру...

ЗЫ: так и не понял, почему у вас ничего не работало, мне достаточно было добавить:
#v_mnu_01 {
	width: 199px;
	margin: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
			text-align: center; /*вот это добавил  и всё заработало...*/
	}

  • 0

#5 sergf10

sergf10
    Topic Starter
  • Пользователь
  • 7 сообщений
  • Репутация: 0

Отправлено 15 Август 2009 - 14:57

Спасибо все исправил
  • 0

#6 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 16 Август 2009 - 21:11

тег <center> — тег эпохи динозавров. По стандарту его не используют.

Dengere_Ash,
цитату в студию из стандарта, по которому не используют тег <center> в документах XHTML 1.0 Transitional. ;)
Тег CENTER
  • 0

#7 Dengere_Ash

Dengere_Ash
  • Пользователь
  • 27 сообщений
  • Репутация: 0

Отправлено 17 Август 2009 - 15:45

Transitional разрешает много чего, из того что запрещается Stictом... Но вообще, <center> - прошлый век. CSS был придуман именно для того, чтобы убрать такие теги... Не загрязняйте код...
  • 0

#8 ilyazh

ilyazh
  • Пользователь
  • 356 сообщений
  • Репутация: 1

Отправлено 17 Август 2009 - 17:42

самое простое выравнивание блока по центру - это
margin: 0 auto;
=)
  • 0

#9 Dengere_Ash

Dengere_Ash
  • Пользователь
  • 27 сообщений
  • Репутация: 0

Отправлено 17 Август 2009 - 19:29

ilyazh, только если у блока задана ширина.
  • 0

#10 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 18 Август 2009 - 10:52

;) а кто мешает задать контейнер

со списками это не работает, здесь немного надо потрахаться,
сам долго парился, потом наткнулся случайно, теперь наслаждаюсь, будут трудности поясню подробнее :P

Казалось бы задача проста, но на деле все оказывается иначе. text-align не помогает, margin:auto работает только при фиксированной ширине. Что делать? Решение достаточно старо, но кода у меня поменьше.

Казалось бы задача проста, но на деле все оказывается иначе. text-align не помогает, margin:auto работает только при фиксированной ширине. Что делать? Решение достаточно старо, но кода у меня поменьше.
<div id="mainmenu">
<ul>
<li><a href="#" title="">Новости</a></li>
<li><a href="#" title="">Блог</a></li>
<li><a href="#" title="">Форум</a></li>
<li><a href="#" title="">Интересные факты</a></li>
<li><a href="#" title="">Тесты</a></li>
<li><a href="#" title="">Скачать</a></li>
<li><a href="#" title="">Контакты</a></li>
</ul>
</div>


div#mainmenu, div#mainmenu ul { position:relative; }
div#mainmenu  { float:right; right:50%; margin:38px 0px; width:auto;  }
div#mainmenu ul { float:none!important; float:left; right:-50%; }

Что происходит? Сначала мы прибиваем все к правой границе браузера и блок (#mainmenu) гарантированно имеет ширину равную всей области экрана. Затем мы сдвигаем его на 50% влево (right:50%:(, после правая граница оказывается ровно посреди экрана.

Затем вложенный блок (сам список) принудительно уводится в левую область родительского блока (#mainmenu). Так как все слои имеют номинальную ширину в 100% то на данный момент ширина у списка (ul) получается равной 150%, а его сдвиг вправо приводит к получению его 100%ой ширины. Таким образом он оказывается всегда по центру относительно своего родительского элемента.
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru