Тема: Веб страница в стиле opera:about (Прочитано 2783 раз)

CreatoR · « : 20.04.2008, 04:51:46 »

На howtocreate.co.uk есть страницы сделаные в стиле opera:about (и т.п.), вот пример одной из них: http://www.howtocreate.co.uk/noclicktoactivate.html

Я почистил страницу от всего лишнего, и самые "жизненно важны" (для меня

) стили мигрировал прямо в <head>. Страничка обитает тут.

Отсалась одна, но значительная проблема: Как теперь присвоить странице свойство отступа, чтобы всё что я писал длее, было немного сдвинуто от краёв рамки, также чтобы если текст слишком длинный, чтобы он как бы переводился на новую строку (wrap?).

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

В моей странице явно видно, что «Some Article...» на границе с рамкой, это я и хочу поправить...

Lex1 · « **Ответ #1, :** 20.04.2008, 10:00:40 »

Добавь в стили

Код: [Выделить]

#content {
	margin-right: 250px;
	padding: 0 3%;
	border: 1px solid rgb(246,246,246);
	border-right-color: rgb(164,164,164);
}

И выдели нужный контент

Код: [Выделить]

<div id="content">
<b>Some Article...</b>
</div>

CreatoR · « **Ответ #2, :** 20.04.2008, 18:31:23 »

Lex1 12:00:40

Цитировать

Добавь в стили

Я знал что пропустил что-то

Спасибо!

Цитировать

выдели нужный контент

Вот по этому поводу ещё вопрос; можно как то задать в стилях, чтобы этот div отменялся, т.е к примеру имеем:

Код: [Выделить]

			H1 {
				font-size: 110%;
				font-weight: bold;
				text-align: left;
				color: rgb(74,74,74);
				background-color: rgb(220,220,220);
				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAABECAYAAAC8lXScAAAAe0lEQVRIie2VSwrAMAhEtbjI/W+aTTb52BvMFKYtKTRbH85ThHhmpoEXpG4HrJpZtNYw0HvHAHOIUgoGIgID7o6BMYYWwRfFHPQOeoQOcEn55G6QpCcnA7rDC1N8ImIHyR1O7gUH3mGt9XDEDmP+wEUg5pwYoL9/rRUCJ+SdUkoxVOhEAAAAAElFTkSuQmCC);
				background-repeat: repeat-x;
				background-position: left center;
				padding: 10px 15px;
				margin: 0;
				border-bottom: 1px solid rgb(144,144,144);
				border-top: 1px solid rgb(144,144,144);
				height: 20px;
			}

вот нужно чтобы при использовании <H1>, <div...> в котором он (заголовок) находится не использовался, т.е как бы отменялся. Иначе приходится закрывать постоянно </div> перед таким заголовком, и начинать новый для следующего абзаца, и т.к этот заголовок имеет свой стиль форматирования, получается не очень красивый заголовок

.

Lex1 · « **Ответ #3, :** 21.04.2008, 00:26:20 »

Не очень понял. <h1> находящийся внутри div-а унаследует его стили. Можно задать нужные стили для <h1> и они будут иметь больший приоритет чем div-ные.

CreatoR · « **Ответ #4, :** 21.04.2008, 02:05:11 »

Lex1 02:26:20

Цитировать

<h1> находящийся внутри div-а унаследует его стили

Вот именно это мне и нужно предотвратить...

Цитировать

они будут иметь больший приоритет чем div-ные

Хм... т.е получается нужно те же стили задавать, но с другими свойствами?
Вот что я имел в виду: Opera Style Page - как видно, второй заголовок немного не в тему, хотелось сделать один <div id="content"> на весь контент страницы, и при использовании (внутри этого div'а) h1 делать такой же заголовок как и первый (который до div'а)...

CreatoR · « **Ответ #5, :** 21.04.2008, 02:29:55 »

Получилось с использованием ещё одного H(2):

Код: [Выделить]

			H2 {
				font-size: 110%;
				font-weight: bold;
				text-align: left;
				color: rgb(74,74,74);
				background-color: rgb(220,220,220);
				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAABECAYAAAC8lXScAAAAe0lEQVRIie2VSwrAMAhEtbjI/W+aTTb52BvMFKYtKTRbH85ThHhmpoEXpG4HrJpZtNYw0HvHAHOIUgoGIgID7o6BMYYWwRfFHPQOeoQOcEn55G6QpCcnA7rDC1N8ImIHyR1O7gUH3mGt9XDEDmP+wEUg5pwYoL9/rRUCJ+SdUkoxVOhEAAAAAElFTkSuQmCC);
				background-repeat: repeat-x;
				background-position: left center;
				padding: 5px 15px;
				margin-left: -23px;
				margin-right: -223px;
				border-bottom: 1px solid rgb(144,144,144);
				border-top: 1px solid rgb(144,144,144);
				height: 20px;
			}

Но это лишний кусок кода, можно как то напрямую использовать свойства h1 в h2 не прописывая их снова, но задать для h2 новые стили? знаю (уже) что можно вот так делать при каждом использовании h1:

Код: [Выделить]

<H2 style="margin-left: -23px; margin-right: -223px;">Contents:</H2>
Но это опять таки лишние строчки... и ещё, будет ли это надёжно, у меня к примеру -23 подгоняет заголовок идеально (к самому левому краю), а будет ли оно также у других, у кого может быть другое разрешение экрана? или оно не влияет?

Lex1 · « **Ответ #6, :** 21.04.2008, 23:53:06 »

CreatoR 04:05:11

Цитировать

при использовании (внутри этого div'а) h1 делать

Два тега <h1> практически никогда не используют. Потому что он используется для основного заголовка.

Цитировать

Но это лишний кусок кода

Я вообще не понимаю смысла этого. Если страница должна быть похожа на opera:about, прицепи к ней about.css. И всё

Конференция Opera AC community

Новости:

Автор Тема: Веб страница в стиле opera:about (Прочитано 2783 раз)

CreatoR

Веб страница в стиле opera:about

Lex1

Re: Веб страница в стиле opera:about

CreatoR

Re: Веб страница в стиле opera:about

Lex1

Re: Веб страница в стиле opera:about

CreatoR

Re: Веб страница в стиле opera:about

CreatoR

Re: Веб страница в стиле opera:about

Lex1

Re: Веб страница в стиле opera:about

	Официальные версии Opera АС
Opera AC 3.7.8 Final Скачать c opera-ac.clan.su, OSzone.net Вопросы и обсуждение в теме		Opera AC 3.7.9 Alpha Скачать c opera-ac.net, OSzone.net Вопросы и обсуждение в теме