Реалити шоу: Верстка

[Veseloff]

Начал верстку по второму эскизу...

Описал блок меню:

div.menu
{/*Описываю position*/
position: relative;
width: 100%;/*ширина на всё окно браузера*/
height: 15%;/*высота относительно окна браузера*/
}

Вроде все правильно...

Всё плохо. На моём ноутбучном мониторе 15% окна браузера это мало, а на десктопе — много. Надо обязательно задавать минимальную и максимальную ширину. Не забывайте так же про шрифт. Или вы его хотите по умолчанию оставить?

[htmlonline]

Исправился:

div.menu
{/*Описываю position*/
position: relative;
width: 100%;/*ширина на всё окно браузера*/
height: 20%;/*высота относительно окна браузера*/
font-family: Tahoma, Arial, sans-serif;
min-width: 600px;
}
div.menu a
{
color:maroon;
text-decoration: none;
font-style: italic;
}

Описал блоки пунктов меню,

исправил неточность в div.menu a:

div.menu
{/*Описываю position*/
position: relative;
text-align: center;
width: 100%;/*ширина на всё окно браузера*/
height: 20%;/*высота относительно окна браузера*/
font-family: Tahoma, Arial, sans-serif;
min-width: 600px;
}
div.menu div.sylka a
{
color:maroon;
text-decoration: none;
font-style: italic;
}
div.sylka
{
height: 100%;
padding: 10px;
}

[Veseloff]

Опять плохо — нет вертикального выравнивания текста по центру, нет минимальной и максимальной высот блока, нет никаких указаний по шрифтам. В реальности всё «поплывёт», как это происходит у вас на «эр минус сцкай».

[htmlonline]

Описываю блок контейнер для поиска и логотипа.

div.menu
{/*Описываю position*/
position: relative;
text-align: center;
width: 100%;/*ширина на всё окно браузера*/
height: 20%;/*высота относительно окна браузера*/
font-family: Tahoma, Arial, sans-serif;
min-width: 600px;
}
div.menu div.sylka a
{
color:maroon;
text-decoration: none;
font-style: italic;
}
div.sylka
{
height: 100%;
padding: 10px;
}
div.search 
{
width: 70%;
height: 35%;
border: none;
text-align: center;
font-family: Arial;
}

Опять плохо — нет вертикального выравнивания текста по центру, нет минимальной и максимальной высот блока, нет никаких указаний по шрифтам. В реальности всё «поплывёт», как это происходит у вас на «эр минус сцкай».

Как выравнивание текста по вертикали сделать?

Я подумал и решил, что высота меню должна быть фиксом...

можно так:

text-valign: middle;

Edited February 5, 2011 by htmlonline

[Протуберанец]

краем глаза — прикольно

[htmlonline]

Спасибо!

[Veseloff]

1. А что, слабо высоту сделать тянущейся?

2. Свойства text-valign не существует.

[htmlonline]

1. А что, слабо высоту сделать тянущейся?

2. Свойства text-valign не существует.

Не не слабо, просто подумал будет некрасиво...

А как мне выровнять?

[htmlonline]

Описал строку поиска и логотип.

{/*Описываю position*/
position: relative;
text-align: center;
width: 100%;/*ширина на всё окно браузера*/
height: 20%;/*высота относительно окна браузера*/
font-family: Tahoma, Arial, sans-serif;
min-width: 600px;
}
div.menu div.sylka a
{
color:maroon;
text-decoration: none;
font-style: italic;
}
div.sylka
{
height: 100%;
padding: 10px;
}
div.search 
{
margin-top: 30%;
margin-left: 15%;
width: 70%;
height: 35%;
border: none;
text-align: center;
font-family: Arial;
}
.line
{
border: 2px solid 33ccff;
text-align: center;
font-family: Comic Sans MS, sans-serif;
}

Описал футер

div.menu
{/*Описываю position*/
position: relative;
text-align: center;
width: 100%;/*ширина на всё окно браузера*/
height: 20%;/*высота относительно окна браузера*/
font-family: Tahoma, Arial, sans-serif;
min-width: 600px;
min-height: 120px;
}
div.menu div.sylka a
{
color:maroon;
text-decoration: none;
font-style: italic;
}
div.sylka
{
height: 100%;
}
div.search 
{
width: 70%;

min-width: 420px;
height: 35%;
border: none;
text-align: center;
font-family: Arial;
}
.line
{
border: 2px solid 33ccff;
text-align: center;
font-family: Comic Sans MS, sans-serif;
}
div.footer
{
width: 100%; 
min-width: 600px;
height: 20%; 
min-height: 120px;
bottom: 0;
border-top: 2px solid blue;
}

Так как задать выравнивание по высоте?

[htmlonline]

А можно вот так:

vertical-align: middle;

?

Доперло как выровнять текст по вертикали:

div 
{
display: table;
}
div.menu
{/*Описываю position*/
position: relative;
text-align: center;
width: 100%;/*ширина на всё окно браузера*/
height: 20%;/*высота относительно окна браузера*/
font-family: Tahoma, Arial, sans-serif;
min-width: 600px;
}
div.menu div.sylka a
{
color:maroon;
text-decoration: none;
font-style: italic;
}
div.sylka p
{
display: table cell;
vertical-align: middle;
}
div.sylka
{
height: 100%;
padding: 10px;
}
div.search 
{
width: 70%;
height: 35%;
border: none;
text-align: center;
font-family: Arial;
}
.line
{
border: 2px solid 33ccff;
text-align: center;
font-family: Comic Sans MS, sans-serif;
}
div.footer
{
width: 100%;
min-width: 600px;
height: 20%;
min-height: 120px;

bottom: 0;
}
div.footer p
{
display: table cell;
vertical-align: middle;
}

На этом я прервусь и пойду спать...

Edited February 5, 2011 by htmlonline

[ShumNo]

Раз это реалити шоу так тыб страничку забацал шоле посмотреть как растет будущий покоритель яндекса

[htmlonline]

Ок, ща забацаю..

[htmlonline]

http://htmlonline.3dn.ru/ZS67AAB8EW148X2P.html

У меня получилась вместо меню десткая хрень! Можете посмотреть? Жду ваших советов пока не верстаю...

[ShumNo]

Я не понял что это... квадратики какие-то с надписями

Edited February 5, 2011 by ShumNo

[htmlonline]

Должны были получится четыре дива вверху экрана, причем у них должны быть границы только общие с соседями и нижние...

Осталось разобраться с центрированием мен

ю и вче будет нормально...

[Vlad]

Доктайп включите сразу, без него проблемы с кроссбраузерностью точно будут.

[htmlonline]

Вот что есть на данный момент:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//RU" "http://www.w3.org/TR/html4/
loose.dtd"> 
<html>
<head>
<style type="text/css">
div
{
display: table;
}
div.menu
{/*Описываю position*/
position: relative;
text-align: center;
top: 0;
right: 0;
width: 100%;/*ширина на всё окно браузера*/
height: 20%;/*высота относительно окна браузера*/
font-family: Tahoma, Arial, sans-serif;
min-width: 600px;
}
div.menu div.sylka a
{
color:maroon;
text-decoration: none;
font-style: italic;
}
div.sylka p
{
display: table cell;
vertical-align: middle;
}
div.sylka
{
height: 100%;
padding: 10px;
float: left;
border-bottom: 2px solid maroon;
font-size:25;
width: 25%;
}
div.search 
{
width: 70%;
height: 35%;
border: none;
text-align: center;
font-family: Arial;
}
.line
{
border: 2px solid 33ccff;
text-align: center;
font-family: Comic Sans MS, sans-serif;
}
div.footer
{
width: 100%;
min-width: 600px;
height: 20%;
min-height: 120px;

bottom: 0;
}
div.footer p
{
display: table cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="menu">
 <div class="sylka" style="border-right: 2px solid maroon;">
  <p>HtmlBook</p>
 </div>
 <div class="sylka" style="border-right: 2px solid maroon">
  <p>new answers to you posts</p>
 </div>
 <div class="sylka" style="border-right: 2px solid maroon">
  <p>Post</p>
 </div>
 <div class="sylka">
  <p>Forum</p>
 </div>
</div>
</body>
</html>

Есть проблема с фоном меню...

Не знаю какой поставить цвет...

Чтобы красиво смотрелось...

[htmlonline]

Смотрим законченный блок горизонтального меню.

ЯЧприступаю к позиционированию блока поиска и логотипа. И тут сразу вопрос: у блока поиска позишн релатив и я его по центру размещаю маргинами?

[WalkMan]

Смотрим законченный блок горизонтального меню.

ЯЧприступаю к позиционированию блока поиска и логотипа. И тут сразу вопрос: у блока поиска позишн релатив и я его по центру размещаю маргинами?

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

Edited February 6, 2011 by WalkMan

[Vlad]

Послушайте, htmlonline, почему у вас макет даже близко не похож на первоначальный рисунок или даже не близко к нему? Я конечно понимаю, у вас абстрактное мышление и вы в летящих кирпичах видите любовь (из анекдота), но мне лично сложно уловить аллегорию.

[htmlonline]

У меня проблемы с изменением размера текста, я пишу вот так:

div.menu div.sylka p
{
display: table cell;
vertical-align: middle;
font-size: 5pt;
}

Но ничего не происходит!

В чем ошибка?

[Vlad]

Нет такого значения как table cell

[htmlonline]

Я прописал выше

div
{
display: table;
}

Но тем не менее с выравниванием по вертикали я разобрался...

Теперь не могу разобраться со строкой поиска и кнопкой..

Как сделать чтобы в один ряд были?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//RU" "http://www.w3.org/TR/html4/
loose.dtd"> 
<html>
<head>
<style type="text/css">
div
{
display: table;
}
div.menu
{/*Описываю position*/
position: relative;
text-align: center;
top: 0;
background: #6495ed;
right: 0;
width: 100%;/*ширина на всё окно браузера*/
height: 20%;/*высота относительно окна браузера*/
font-family: Tahoma, Arial, sans-serif;
min-width: 600px;
}
div.menu div.sylka a
{
color:maroon;
text-decoration: none;
font-style: italic;
}
div.sylka p
{
display: table cell;
vertical-align: middle;
font-size: 25;
}
div.sylka
{
height: 100%;
padding: 10px;
float: left;
border-bottom: 2px ridge maroon;
font-size: 5pt;
width: 25%;
}
div.search 
{
width: 70%;
margin-top: 32%;
height: 35%;
border: none;
text-align: center;
font-size: 40;
font-family: Arial;
margin-right: 15%;
}
.line
{
border: 2px outset 33ccff;
text-align: center;
font-family: Comic Sans MS, sans-serif;
}
div.footer
{
width: 100%;
min-width: 600px;
height: 20%;
min-height: 120px;

bottom: 0;
}
div.footer p
{
display: table cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="menu">
 <div class="sylka" style="border-right: 2px ridge maroon;">
  <p>Форум</p>
 </div>
 <div class="sylka" style="border-right: 2px ridge maroon">
  <p>HtmlBook.ru</p>
 </div>
 <div class="sylka" style="border-right: 2px ridge maroon">
  <p>Почта</p>
 </div>
 <div class="sylka" style="border-right: 2px ridge maroon">
  <p>Ответы на ваши сообщения</p>
 </div>
 <div class="sylka">
  <p>Обратная связь</p>
 </div>
</div>
<div class="search" style="border: 1px ridge blue;">
 <font face="Arial" size="35">HtmlBook</font>
 <input type="text" class="line" size="25">
  <div style="text-align: center; border:1px solid blue; padding:3px; float: right; right: 10px;">
   Search
  </div>
</div>

</body>
</html>

Edited February 6, 2011 by htmlonline

[Vlad]

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

Так, стоп!!! Это что за "№;%::?*( в коде, которая #(*&*^, да это же ())@ и @*#), только @#&*#( #*($( #*( у #*((), не говоря про $&().

<font face="Arial" size="35">

За такое, батенька, пожизненный бан и гильотина меньшее зло!

[Yahoo!]

А где обнуление стилей??

я про

html {font-size: 62.5%}
body {font: 1.2em/1.8em verdana}
body, p {margin:0;padding: 0}
и т.д.

Или пока не до этого?