X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> нужна подсказка новичку
Leha_1985
Leha_1985
Topic Starter сообщение 1.4.2011, 20:36; Ответить: Leha_1985
Сообщение #1


Здравствуйте, только начинаю учить html, css, попробовал создать универсальный шаблон ! Кто может, проверьте пожалуйста мои html,css и на самом скриншоте пару вопросов пока не понятных мне !
Заранее спасибо!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>
Каркас
</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div class="wrapper">
<div class="header">
<h1 align="center"><font color="maroon">Клуб и форум для любителей MOTO GP</font></h1>
</div>
<div class="container">
<p align="center"></p><font color="orange"><h1>Ссылки на трансляции MOTO GP</h1></font></p>
<p align="left"><font size="+1"><img src="moto2.jpg" align="left">В ближайшие выходные, 1-3 апреля, в Испании на треке Херес-де-ла-Фронтера состоится второй в этом сезоне этап чемпионата мира по кольцевым мотогонкам серии MotoGP.</font></a></p>
<p align="center"><font color="yellow"><h2>MotoGP: Херес, ряд интересных цифр</h2></font></p>
<div class="back backL">
</div>
<div class="back backC">

</div>
<div class="back backR">
</div>

<div class="contentInner">
</div>

<div class="column content">
</div>
<div class="column left">
</div>
</div>
<div class="column right">
</div>
<div class="footer">

</div>
</div>




</body>
</html>



[CSS]html, body {
padding: 0;
margin: 0;
height: 100%;
font: 12px/16px Arial, Helvetica, sans-serif;
background: #99C7E6;

}


.wrapper {
height: 100%;
width: 1000px;
min-width: 1000px;
margin: 0 auto;
background: #eeeeFF;
}

.container {
height: auto !important;
height: 100%;
min-height: 100%;
float: right;
width: 100%;
background: #0080FF;


}

.header {
height: 110px;
background: #804040;
float: left;
width: 100%;
z-index: 5;
background: url(img/top.gif) bottom no-repeat scroll;
background-image: url(moto1.jpg);
background-position: right;

}

.footer {
height: 40px;
margin-top: -40px;
background-image: url(moto3.jpg);
float: left;
width: 100%;

}


.column {
padding-top: 100px;
padding-bottom: 75px;
float: left;
position: relative;
z-index: 4;
}

.content {
width: 100%;
}


.left {
margin-left: -100%;
width: 300px;
}

.right {
width: 250px;
margin-left: -250px;
}

.contentInner {
margin-left: 300px;
margin-right: 250px;
}
[/CSS]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
hisbvdis
hisbvdis
сообщение 1.4.2011, 23:05; Ответить: hisbvdis
Сообщение #2


Привет. Я тоже новичок в этом деле, но поделюсь тем, что заметил.
Все, что ниже -мое мнение, которое может быть ошибочным.

1)Тэг <font> - нерекомендуется сейчас и будет запрещен в HTML5, так что лучше на первых порах сразу отказывайся от него, чтобы не привыкнуть.
2)Отказывайся от любого оформления текста через html. Все (от цвета текста до положения картинки и т.п.) нужно оформлять через CSS.
3)Хотел бы помочь насчет проблем со скриншота, но картинок ведь нет, на которые идет ссылка с кода HTML.
Можешь сделать архив, в котором будут файлы HTML, CSS связанные, и необходимые картинки. Выложи где-то на файлообменнике и дай ссылку.
Так легче будет помочь.

И еще раз укажу на всякий случай.
Если ты новичок и уже делаешь оформление через код HTML - мне кажется, что это очень плохо.
Запрещай себе это делать, чтобы не привыкнуть.
Делай все через CSS.

Удачи. И жду архива.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
adlic
adlic
сообщение 2.4.2011, 0:43; Ответить: adlic
Сообщение #3


<div class="header">
<div style="float:left;"><img src="moto2.jpg" align="left"></div><div style="float:left;">
<h1 align="center"><font color="maroon">Клуб и форум для любителей MOTO GP</font></h1>
</div>
</div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Leha_1985
Leha_1985
Topic Starter сообщение 2.4.2011, 1:12; Ответить: Leha_1985
Сообщение #4


hisbvdis, спасибо дружище )

1) Чем тогда заменять font для HTML5 ?? (и вроде бы он сейчас не очень активно используется и что так трудно будет потом перестроится :?)
2) ясно
3)сделал ( ссылка http://exfile.ru/166530 )

и еще вопросик !! на что влияют эти классы, не совсем понятно:rolleyes:
<div class="back backL">
</div>
<div class="back backC">

</div>
<div class="back backR">
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Leha_1985
Leha_1985
Topic Starter сообщение 2.4.2011, 1:18; Ответить: Leha_1985
Сообщение #5


alek_sania, я извиняюсь ) можно немного подробней описать, что вы сделали, а то еще совсем сырой!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
hisbvdis
hisbvdis
сообщение 2.4.2011, 1:34; Ответить: hisbvdis
Сообщение #6


(Leha_1985 @ 2.4.2011, 04:12) *
1) Чем тогда заменять font для HTML5 ?? (и вроде бы он сейчас не очень активно используется и что так трудно будет потом перестроится :?)

Ничем не заменять. Переходить на оформление с помощью CSS.
Трудно ли перестроиться - не знаю, но лично я люблю делать все по "последней моде" :) (Кстати, у меня редактор кода html даже зачеркнул тэг <font>. Так что делаем выводы :)

Насчет картинки тебе уже ответили.
Я вроде сделал так же. Распишу, потом alek_sania может еще что-то добавит.
1)В блоке header перед тэгом <h1> надписи "Клуб и форум...." я создал дополнительный блок <div> (для картинки).
2)Указал через CSS для него фоном - желаемую картинку, обтекаемость и размеры (кстати, высота картинки больше высоты header`a. По-моему это не смертельно, но лично мне кажется, что лучше подгонять, чтобы подходило по размерам.)
[CSS]
div{
background: url(moto1.jpg);
width:188px;
height:110px;
float:left;
}
[/CSS]
3).......все. Можно было вместо фона блока добавить картинку в блок через <img>. Я не знаю, как лучше.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Leha_1985
Leha_1985
Topic Starter сообщение 2.4.2011, 2:27; Ответить: Leha_1985
Сообщение #7


hisbvdis, :nea:
все смешивается, абракадабра получается!!! наверное я новичок новичков

Можете, чуть подробнее описать п.1 ??
спасибо!
и буду дальше читать и вникать !!

Вы вставили это в css, а что прописали в html ?? я ничего не должен убрать или подкорректировать у себя ?
[CSS]
div{
background: url(moto1.jpg);
width:188px;
height:110px;
float:left;
}[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
hisbvdis
hisbvdis
сообщение 2.4.2011, 2:48; Ответить: hisbvdis
Сообщение #8


(Leha_1985 @ 2.4.2011, 05:27) *
hisbvdis, :nea:
Можете, чуть подробнее описать п.1 ??

Предлагаю на "ты".
Не могу заново скачать файл, чтобы посмотреть оригинал - что-то не заходит по ссылке.
По-моему твой код HTML изначально имел вид (фрагмент блока header):
<div class="header"> <!--Вот начало блока header-->
<h1 align="center"><font color="maroon">Клуб и форум для любителей MOTO GP</font></h1> <!-- Начало и конец блока h1-->
</div> <!--Вот конец блока header-->


Я вставил в блок <div class="header"> перед блоком <h1> еще один пустой блок <div>. Вот новый html код блока header:
<div class="header"> <!--Вот начало блока header-->
<div id="pic"></div> <!--А вот я вставил пустой блок div с идентификатором id="pic". Он находится в блоке header перед блоком h1-->
<h1 align="center"><font color="maroon">Клуб и форум для любителей MOTO GP</font></h1> <!-- Начало и конец блока h1-->
</div> <!--Вот конец блока header-->


(Leha_1985 @ 2.4.2011, 05:27) *
hisbvdis, :nea:
Вы вставили это в css, а что прописали в html ?? я ничего не должен убрать или подкорректировать у себя ?
[CSS]
div{
background: url(moto1.jpg);
width:188px;
height:110px;
float:left;
}[/CSS]

Да, я забыл написать в прошлом сообщении. Я назначил в коде HTML новому своему пустому блоку идентификатор id="pic" (ты вместо идентификатора назначал классы. Есть некоторое отличие, но в данном случае это не имеет значения). А в коде CSS обратился конкретно к этому блоку:
[CSS]
#pic{
background: url(moto1.jpg);
width:188px;
height:110px;
float:left;
}[/CSS]

Вот назад высылаю архив твой:
http://www.ex.ua/view_storage/376881643895
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
adlic
adlic
сообщение 2.4.2011, 12:25; Ответить: adlic
Сообщение #9


То сообщение было не совсем правильным, я не совсем разобрал какую картинку нужно сделать слева.
И того:
Для того, чтоб логотип располагался слева, нужно просто в
[CSS].header {
height: 110px;
background: #804040;
float: left;
width: 100%;
z-index: 5;
background: url(img/top.gif) no-repeat scroll;
background-image: url(moto1.jpg);
background-position: right;

}[/CSS]
вместо background-position: right; указать background-position: left;
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Leha_1985
Leha_1985
Topic Starter сообщение 2.4.2011, 16:07; Ответить: Leha_1985
Сообщение #10


alek_sania, и
hisbvdis,


вроде разобрался! спасибо !
но, сделал высоты header и рисунка одинаковой, а он все равно как то смещен ?? и сместилась сама надпись "Клуб и форум для любителей MOTO GP" :(

и по поводу колонок которые по бокам (как на скриншоте в первом сообщении), задавать рисунок также для них ??
только я хочу, чтобы они были неподвижны, а только как бы двигалась центральная часть сайта при скролинге !
понятно объяснил ??

http://turbobit.net/mz52oin61u5l.html (то что получилось)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыСостояние после ампутации - нужна помощь
благотворительный топик
49 vitvirtual 5874 1.4.2024, 5:23
автор: vitvirtual
Открытая тема (нет новых ответов) Нужна ли плоская структура категорий в ИМ?
1 noviktamw 1171 26.3.2024, 21:50
автор: c4p1t4l15t
Открытая тема (нет новых ответов) Нужна рассылка по емаил базе сео-студий
0 kasey7 682 2.3.2024, 23:13
автор: kasey7
Горячая тема (нет новых ответов) Человеку нужна своя квартира/дом?
187 metvekot 14218 21.2.2024, 22:39
автор: spomoni
Открытая тема (нет новых ответов) Нужна работа
0 filatd 739 12.1.2024, 17:08
автор: filatd


 



RSS Текстовая версия Сейчас: 19.4.2024, 15:57
Дизайн