Jump to content
  • 0

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

Span4

Asked by Span4,

 Share

Question

Span4 Explorer

Span4

Posted
Posted

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

<P>

<font color = "darkgreen" size= "+1"> Стиль: </font> ( это то, что должно быть по центру рамки ) - Progressive Metal <BR>

</P>

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

вот весь код :

<P id="textnaglavnoi">

<font color = "darkgreen" size= "+1"> <center> Описание группы <font color="white" size= "+2"> Северный крест </font> </center> </font> <BR>

<font color = "darkgreen" size= "+1"> Стиль:

</font> Progressive Metal <BR>

            

<font color = "darkgreen" size= "+1"> Состав группы: </font> <BR>

<font color = "darkgreen" size= "+1"> Мужской вокал - </font> Михаил Коваленко <BR>

<font color = "darkgreen" size= "+1"> Женский вокал - </font> Екатерина Рундуева <BR>

<font color = "darkgreen" size= "+1"> Клавишные - </font> Александра Даммер <BR>

<font color = "darkgreen" size= "+1"> Бас-гитара - </font> Артёмий Гречкин <BR>

<font color = "darkgreen" size= "+1"> Гитара - </font> Григорий Ерёменко <BR>

<font color = "darkgreen" size= "+1"> Гитара - </font> Владимир Ерёменко <BR>

<font color = "darkgreen" size= "+1"> Ударные - </font> Константин Мартынов <BR>

</P>

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

Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0
Span4 Explorer

Span4

Posted
  • Author
Posted (edited)

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

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

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

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

vatxfpxxfcxozgagjgbfkrdfzhnczo.jpg

вот код:

<BODY>

<STYLE type="text/css">

P.figure {

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

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

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

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

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

}

IMG.frame {

border: 4px solid white;}

</STYLE>

<P CLASS = "figure"> <IMG src= "img.sevkrest/2.jpg" ALT= "фото группы Северный крест" WIDTH="600" CLASS="frame" /> </p>

<P CLASS = "figure">

</P>

<P class="textnaglavnoi">

<font color = "darkgreen" size= "+1"> <center> Описание группы <font color="white" size= "+2">Северный крест </font> </center> </font> <BR>

<font color = "darkgreen" size= "+1"> Стиль:

</font> <font color="white">              Progressive Metal </font> <BR>

<font color = "darkgreen" size= "+1"> Состав группы : </font> <BR>

<font color = "darkgreen" size= "+1"> Мужской вокал - </font>     Михаил Коваленко <BR>

<font color = "darkgreen" size= "+1"> Женский вокал - </font>     Екатерина Рундуева <BR>

<font color = "darkgreen" size= "+1"> Клавишные - </font>        Александра Даммер <BR>

<font color = "darkgreen" size= "+1"> Бас-гитара - </font>       Артёмий Гречкин <BR>

<font color = "darkgreen" size= "+1"> Гитара - </font>            Григорий Ерёменко <BR>

<font color = "darkgreen" size= "+1"> Гитара - </font>            Владимир Ерёменко <BR>

<font color = "darkgreen" size= "+1"> Ударные - </font>           Константин Мартынов <BR>

</P>

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

Edited by Span4
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

Всё понял =)

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

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

  • Like 1
Link to comment
Share on other sites
  • 0
Span4 Explorer

Span4

Posted
  • Author
Posted

в учебнике на вашем сайте я не нашёл ничего, что бы мне помогло, к тому же не очень подробный учебник, хотя ответов и советов много, до сих пор куча вкладок висит. Вообще почти каждый день брожу по новым сайтам и урокам по 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

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

Link to comment
Share on other sites
  • 0
Span4 Explorer

Span4

Posted
  • Author
Posted (edited)

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

align="center"

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

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

position: center;

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

Span4,

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

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

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

Edited by Span4
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

align="center"

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

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

position: center;

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

Span4,

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

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

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

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

Link to comment
Share on other sites
  • 0
Span4 Explorer

Span4

Posted
  • Author
Posted (edited)

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

align="center"

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

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

position: center;

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

Span4,

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

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

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

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

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

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

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

Edited by Span4
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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>

Link to comment
Share on other sites
  • 0
Span4 Explorer

Span4

Posted
  • Author
Posted

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>

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

Link to comment
Share on other sites
  • 0
Span4 Explorer

Span4

Posted
  • Author
Posted (edited)

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

HTML :

<table class="text2">

<tr>

<td id="text4">

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

Клавишные - <BR>

Бас-гитара - <BR>

Гитара - <BR>

Гитара - <BR>

Ударные - <BR>

</td>

<td id="text3">

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

Александра Даммер <BR>

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

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

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

Константин Мартынов <BR>

</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 by Span4
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