Jump to content

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

htmlonline

By htmlonline,
in Flame

 Share

Recommended Posts

htmlonline Explorer

htmlonline

Posted
  • Author
Posted

Влад, прчему нельзя делать так?

Ща обнулю стили...

А пему у меня строка поиска и кнопка к низу прижались?

Я же им маргины задал...

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

<!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;
margin: 0;
padding: 0;
}
div.menu
{/*Описываю position*/
position: relative;
text-align: center;
top: 0;
background: #6495ed;
right: 0;
width: 100%;/*ширина на всё окно браузера*/
height: 20%;/*высота относительно окна браузера*/
font-family: Tahoma, Arial, sans-serif;
}
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: 20%;
}
div.search 
{
width: 70%;
margin-top: 32%;
height: 35%;
border: none;
text-align: center;
font-size: 40;
font-family: Arial;
margin-right: 15%;
margin-left: 15%;
}
.line
{
border: 2px outset 33ccff;
text-align: center;
margin-left: 2%;
margin-top: 4%;
margin-bottom: 4%;
font-family: Comic Sans MS, sans-serif;
margin-right: 0;
}
div.footer
{
width: 100%;
height: 20%;
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;">
 <input type="text" class="line" size="35">
  <div style="text-align: center; border:1px solid blue; padding:3px; float: right; right: 10px; margin-top: 4%; margin-right: 8%; margin-bottom:4%; margin-left: 0;">
   Search
  </div>
</div>
</body>
</html>

Link to comment
Share on other sites
  • Replies 156
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Yahoo! Explorer

Yahoo!

Posted
Posted (edited)

Ну во-первых, укажи для body {margin: 0; padding: 0} а то эти отступы...

Затем, что б нормально отцентрировать блок, посмотри топик или погугли.

Например мне нужно прилепить текст к блоку поиска...

какой текст?

Да, и зачем вы верхнему списку задаёте высоту, причём в пикселях??

Edited by Yahoo!
Link to comment
Share on other sites
htmlonline Explorer

htmlonline

Posted
  • Author
Posted

Как это у меня кнопки аж на блок поиска залезли?!

Я полностью обновил верхнее меню...

Объясните мне почему мое меню "притянуто" к блоку поиска? Если блока нет, то все нормально...

Link to comment
Share on other sites
htmlonline Explorer

htmlonline

Posted
  • Author
Posted

Ну для начала как нарисовать серенький блок?

А потом уж сверстать...

Кстати посмотрите, я шапку обновил...

Только не знаю чем заполнить пространиство после строки поиска?

Link to comment
Share on other sites
Verder Explorer

Verder

Posted
Posted
Ну для начала как нарисовать серенький блок?

А потом уж сверстать...

Кстати посмотрите, я шапку обновил...

Только не знаю чем заполнить пространиство после строки поиска?

Эмм... Странный вопрос про серенький блок.

Rounded Rectangle Tool с радиусом 20px. Под него рисуешь тень. Как еще объяснить я не знаю.

Link to comment
Share on other sites
Verder Explorer

Verder

Posted
Posted
Я щас тебе свой скрин покажу...

А почему так?

А сейчас посмотри, я меню в контейнер пихнул...

Я это показал к тому, что всегда надо ставить минимальную ширину.

Вот в полный экран - http://freeway-design.ru/files/h2.png

Link to comment
Share on other sites
Verder Explorer

Verder

Posted
Posted
А какую здесь поставить?

Я поставил хедер..

Выставил ему позошн абсолют, z-index:0

Всем остальным элементам выставил z-index:1

Как это хедер оказался поверх остальных?

min-width: 980px;

И при чем тут абсолют? Какие нахрен индексы? Все верстается обычными блоками.

Забудь вообще про абсолют (кроме некоторых случаев типа размещения логотипа) когда верстаешь резину.

Основная ошибка новичков — везде где можно воткнуть абсолютные блоки.

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

Link to comment
Share on other sites
Verder Explorer

Verder

Posted
Posted
Как мне поместить хедер на задний план?

Блин, ну купи ты книжку, что-ли. «Убийца Яндексов»

z-index: -1

Какой нахер z-index:-1? Зачем там вообще абсолют?

Простой контейнер для хедера и внутри какие душе угодно вложенные блоки.

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
Reply to this topic...

×   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 topic listing
×
×
  • 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