как выровнивнять по центру одно слово в рамке ?

Span4 · October 2, 2011

Добрый день, я новичок, не могу разобраться, как выровнять последнее слово или словосочетание, не прибегая к куче пробелов ( ), если это находится в рамке с открытым тэгом .. например этот фрагмент :

Стиль: ( это то, что должно быть по центру рамки ) - Progressive Metal

Если ставить значение внутри уже открытого , то тогда остальной текст смещается за рамку..

вот весь код :

<center> Описание группы Северный крест </center>

Стиль:

Progressive Metal

Состав группы:

Мужской вокал - Михаил Коваленко

Женский вокал - Екатерина Рундуева

Клавишные - Александра Даммер

Бас-гитара - Артёмий Гречкин

Гитара - Григорий Ерёменко

Гитара - Владимир Ерёменко

Ударные - Константин Мартынов

Большое спасибо, за помощь.

Vlad · October 2, 2011

1. Выкиньте ваш учебник по HTML подальше, он безнадёжно устарел.

2. Нарисуйте, что хотите в итоге получить, подскажем, как это сделать правильно.

Span4 · October 2, 2011

1. Выкиньте ваш учебник по HTML подальше, он безнадёжно устарел.
2. Нарисуйте, что хотите в итоге получить, подскажем, как это сделать правильно.

1. Выкиньте ваш учебник по HTML подальше, он безнадёжно устарел. =) Их сотни в инете, прочитал один внимательно по HTML, второй, третий уже пробежал, в одном испольpование фреймов, в другом каскадные таблицы, формы, ещё что-то... по отдельности всё работает, но вот как это всё совместить...

вот результат, (работает только в MOZILLA), но здесь приходится долго редактировать отступы, используя пробелы. Дело в том, что таких страниц будет много, и таким образом нельзя сделать готовый шаблон, придётся на каждой странице ставить отступы, причём считать пробелы, чтобы выглядело везде ровно. Буду благодарен, если подскажите, как выровнять фамилии по центру.

вот код:

<BODY>

P.figure {

text-align: center; /* Выравнивание по центру */

font-style; italic; /* Курсивное начертание */

margin-top: 0; /* Отступ сверху */

margin-bottom: 150px; /* Отступ снизу */

color: white; /* Цвет подрисуночной подписи */

}

IMG.frame {

border: 4px solid white;}

</STYLE>

<center> Описание группы Северный крест </center>

Стиль:

Progressive Metal

Состав группы :

Мужской вокал - Михаил Коваленко

Женский вокал - Екатерина Рундуева

Клавишные - Александра Даммер

Бас-гитара - Артёмий Гречкин

Гитара - Григорий Ерёменко

Гитара - Владимир Ерёменко

Ударные - Константин Мартынов

Спасибо за помощь.

Edited October 2, 2011 by Span4

psywalker · October 2, 2011

Мда...тут всё жёстко очень. Советую начать с этого сайта http://htmlbook.ru/ и прям от А до Я, изучить

Span4 · October 2, 2011

Мда...тут всё жёстко очень. Советую начать с этого сайта http://htmlbook.ru/ и прям от А до Я, изучить

Всё понял =)

может учился не там, где надо, выбор велик

спасибо )

psywalker · October 2, 2011

Мда...тут всё жёстко очень. Советую начать с этого сайта http://htmlbook.ru/ и прям от А до Я, изучить
Всё понял =)
может учился не там, где надо, выбор велик

Ещё как не там)))

hedgehog · October 2, 2011

надеюсь, никто не будет против, если я подскажу топикстартеру использовать таблицу для вывода табличных данных

psywalker · October 2, 2011

надеюсь, никто не будет против, если я подскажу топикстартеру использовать таблицу для вывода табличных данных

А ты где их увидел?

hedgehog · October 2, 2011

А ты где их увидел?

на скриншоте - весьма похоже на таблицу: _http://imagepost.ru/images/v/at/vatxfpxxfcxozgagjgbfkrdfzhnczo.jpg

psywalker · October 2, 2011

Воообщет смахивает на список определений.

hedgehog · October 2, 2011

Воообщет смахивает на список определений.

благодарю за разъяснения. о таком и не слыхивал.

psywalker · October 2, 2011

Воообщет смахивает на список определений.
благодарю за разъяснения. о таком и не слыхивал.

http://htmlbook.ru/html/dl

Gotafak · October 2, 2011

уберите кучу пробелов. я сам новичек, но попробуйте:

align="center"

или каждую фамилию брать в теги <div></div>

и прописывать стили

position: center;

Span4 · October 2, 2011

в учебнике на вашем сайте я не нашёл ничего, что бы мне помогло, к тому же не очень подробный учебник, хотя ответов и советов много, до сих пор куча вкладок висит. Вообще почти каждый день брожу по новым сайтам и урокам по HTML, почти везде всё по-своему написано, где то что-то новое, какие нибудь нюансы с тэгами, что не встречалось раньше, где то очень кратко, или то, до чего мне пока ещё рано.

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

на скриншоте - весьма похоже на таблицу

Это не таблица, вот css класс :

.textnaglavnoi { /* id для текста на главной */

text-indent:40px; /* Величина отступа первой строки ( красная строка ) */

word=spacing:40px; /* Расстояние между словами */

font-style:italic;

font-size:17px;

border: 2px solid white;

background-color: black;

padding: 30px;

margin-left: 150px;

margin-right: 120px;

}

и вот внутри этой рамки, пример с вашего сайта взял - http://htmlbook.ru/faq/kak-dobavit-vokrug-teksta-ramku-opredelennogo-tsveta

так вот внутри неё уже нельзя открыть тэг и соответственно не получается выравнять фамилии по центру. Если кто знает, как это сделать, буду благодарен. Опять же, в учебниках всё отрывками, как комбинировать не описано

psywalker · October 2, 2011

Span4,

Ты можешь показать скриншот, как нужно, чтобы было, прям чётко.

Span4 · October 2, 2011

уберите кучу пробелов. я сам новичек, но попробуйте:
align="center"
или каждую фамилию брать в теги <div></div>
и прописывать стили
position: center;

попробовал с <div>, любое изменение приводит к тому, что весь остальной текст уходит за рамку, а у position нет значения center..

Span4,
Ты можешь показать скриншот, как нужно, чтобы было, прям чётко.

пожалуйста, вот скрин :

http://imagepost.ru/?v=vatxfpxxfcxozgagjgbfkrdfzhnczo.jpg

Edited October 2, 2011 by Span4

psywalker · October 2, 2011

уберите кучу пробелов. я сам новичек, но попробуйте:
align="center"
или каждую фамилию брать в теги <div></div>
и прописывать стили
position: center;
попробовал с <div>, любое изменение приводит к тому, что весь остальной текст уходит за рамку, а у position нет значения center..
Span4,
Ты можешь показать скриншот, как нужно, чтобы было, прям чётко.
пожалуйста, вот скрин :
http://imagepost.ru/?v=vatxfpxxfcxozgagjgbfkrdfzhnczo.jpg

Т.е. выравнивться должен сам заголовок вверху?

Span4 · October 3, 2011

уберите кучу пробелов. я сам новичек, но попробуйте:
align="center"
или каждую фамилию брать в теги <div></div>
и прописывать стили
position: center;
попробовал с <div>, любое изменение приводит к тому, что весь остальной текст уходит за рамку, а у position нет значения center..
Span4,
Ты можешь показать скриншот, как нужно, чтобы было, прям чётко.
пожалуйста, вот скрин :
http://imagepost.ru/?v=vatxfpxxfcxozgagjgbfkrdfzhnczo.jpg
Т.е. выравнивться должен сам заголовок вверху?

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

" УДАРНЫЕ -  КОНСТАНТИН МАРТЫНОВ " <-- фамилия по центру рамки -->

пробовал с <div align: -moz-center>, просто с <div>, любое изменение и весь последующий текст вне рамки, я уже думаю отказаться от этого, так как рамка видна только в Mozilla..

Edited October 3, 2011 by Span4

psywalker · October 3, 2011

Span4,

Лови, дружище. Вот тебе пример, прееделай под себя.

<!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=utf-8" />
<title></title>
<style type="text/css">
	.wrap { overflow: hidden; width: 600px; border: 1px solid #000; min-height: 300px;}
		.wrap .left { position: absolute; width: 200px;}
		.wrap .right { text-align: center;}
		.wrap .field { position: relative;}
</style>
</head>

<body>
	<div class="wrap">
		<div class="field">
			<div class="left">УДАРНЫЕ </div>
			<div class="right">КОНСТАНТИН МАРТЫНОВ</div>
		</div>
	</div>
</body>
</html>

Span4 · October 6, 2011

Span4,

Лови, дружище. Вот тебе пример, прееделай под себя.

<!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=utf-8" />
<title></title>
<style type="text/css">
	.wrap { overflow: hidden; width: 600px; border: 1px solid #000; min-height: 300px;}
		.wrap .left { position: absolute; width: 200px;}
		.wrap .right { text-align: center;}
		.wrap .field { position: relative;}
</style>
</head>

<body>
	<div class="wrap">
		<div class="field">
			<div class="left">УДАРНЫЕ </div>
			<div class="right">КОНСТАНТИН МАРТЫНОВ</div>
		</div>
	</div>
</body>
</html>

Спасибо большое, это что надо =)

Span4 · October 8, 2011

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

HTML :

<tr>

Женский вокал -

Клавишные -

Бас-гитара -

Гитара -

Ударные -

</td>

Екатерина Рундуева

Александра Даммер

Артёмий Гречкин

Григорий Ерёменко

Владимир Ерёменко

Константин Мартынов

</td>

</tr>

</table>

CSS :

.text2 {

margin: 0 auto; /* Оступ таблицы от границ экрана */

padding: 40px;

width: 600px;

border: 1px white solid;

background-color: black;

}

#text4

{

text-align: left;

color:white;

font-size: 20px;

}

#text3

{

text-align: right;

color: white;

font-size: 20px;

}

создал две ячейки, в одной интсрументы, в другой фамилии, и каждой ячейке присвоил свой id с параметрами

Edited October 8, 2011 by Span4

Sign In

как выровнивнять по центру одно слово в рамке ?

Question

Link to comment

Share on other sites

20 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

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