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

Общий раздел => Веб-программирование для Opera => Изучение Html => Тема начата: CreatoR от 20.04.2008, 05:51:46



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

Я почистил страницу от всего лишнего, и самые "жизненно важны" (для меня :) ) стили мигрировал прямо в <head>. Страничка обитает тут (http://creator-lab.ucoz.ru/Testing_Zone/opera_about_Style_Html.html).

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

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

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


Название: Re: Веб страница в стиле opera:about
Отправлено: Lex1 от 20.04.2008, 11: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>


Название: Re: Веб страница в стиле opera:about
Отправлено: CreatoR от 20.04.2008, 19:31:23
Lex1 12:00:40 (http://bit-center.ru/forum/index.php?topic=713.msg6246#msg6246)
Цитировать
Добавь в стили
Я знал что пропустил что-то :) Спасибо!

Цитировать
выдели нужный контент
Вот по этому поводу ещё вопрос; можно как то задать в стилях, чтобы этот 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> перед таким заголовком, и начинать новый для следующего абзаца, и т.к этот заголовок имеет свой стиль форматирования, получается не очень красивый заголовок :(.


Название: Re: Веб страница в стиле opera:about
Отправлено: Lex1 от 21.04.2008, 01:26:20
Не очень понял. <h1> находящийся внутри div-а унаследует его стили. Можно задать нужные стили для <h1> и они будут иметь больший приоритет чем div-ные.


Название: Re: Веб страница в стиле opera:about
Отправлено: CreatoR от 21.04.2008, 03:05:11
Lex1 02:26:20 (http://bit-center.ru/forum/index.php?topic=713.msg6255#msg6255)
Цитировать
<h1> находящийся внутри div-а унаследует его стили
Вот именно это мне и нужно предотвратить...

Цитировать
они будут иметь больший приоритет чем div-ные
Хм... т.е получается нужно те же стили задавать, но с другими свойствами?
Вот что я имел в виду: Opera Style Page (http://creator-lab.ucoz.ru/Testing_Zone/Opera_Style_Page.html) - как видно, второй заголовок немного не в тему, хотелось сделать один <div id="content"> на весь контент страницы, и при использовании (внутри этого div'а) h1 делать такой же заголовок как и первый (который до div'а)...


Название: Re: Веб страница в стиле opera:about
Отправлено: CreatoR от 21.04.2008, 03: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 подгоняет заголовок идеально (к самому левому краю), а будет ли оно также у других, у кого может быть другое разрешение экрана? или оно не влияет?


Название: Re: Веб страница в стиле opera:about
Отправлено: Lex1 от 22.04.2008, 00:53:06
CreatoR 04:05:11 (http://bit-center.ru/forum/index.php?topic=713.msg6256#msg6256)
Цитировать
при использовании (внутри этого div'а) h1 делать
Два  тега <h1> практически никогда не используют. Потому что он используется для основного заголовка.
Цитировать
Но это лишний кусок кода
Я вообще не понимаю смысла этого. Если страница должна быть похожа на opera:about, прицепи к ней about.css. И всё :)