Jump to content
  • 0

Шапка сайта из <div>


Sipan
 Share

Question

Всем привет. Нужна помощь. ^_^

Сделал шапку сайта из дивов, но не уверен что все правильно написал, нужен совет...

Сайт - ссылка

Вот html код шапки:

<div class="head">
<div class="logo"><img src="/images/logo.png" alt="logo" /></div>
<div class="head_dt"><small>$WDAY$, $DATE$, $TIME$</small></div>
<div class="head_banner"><script type="text/javascript" src="http://hayclub.net.ru/rtr/1-1"></script></div>
<div class="clear"></div>
</div>

И CSS:

/* Head Style */

.head{
background:url('/images/bg.png') repeat-x;
height:216px;
width:100%;
min-width:995px;
}
.logo{
float:left;
background:url('/images/bg.png') repeat-x;
height:123px;
width:520px;
}
.head_dt{
float:right;
padding-right:8px;
left:48px;
color:#fff;
}

.head_banner{
float:right;
top:42px;
right:10px;
color:#fff;
position:absolute;
}

.clear{clear:both;}
/* ———- */

Еще вопрос: как сделать так чтобы при разных разрешениях экрана сайт не сжимался до конца, а скажем шириной меньше 900px появлялась полоса прокрутки?

Заранее спасибо!

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
Всем привет. Нужна помощь. ^_^

Сделал шапку сайта из дивов, но не уверен что все правильно написал, нужен совет...

лично от меня совет, в div.head проставь overflow: hidden; и zoom: 1 для IE6 и можешь спокойно убирать нижний див с классом .clear

Link to comment
Share on other sites

  • 0
лично от меня совет

Sipan да, да... послушай этого парня, он знает толк в верстке. ^_^

Если тебе нужна полоса прокрутки, то оверфлоу:авто (или скролл).

Edited by rus
Link to comment
Share on other sites

  • 0
лично от меня совет, в div.head проставь overflow: hidden; и zoom: 1 для IE6 и можешь спокойно убирать нижний див с классом .clear

Спасибо большое)

А то что баннер наезжает на логотип, норм? как сделать чтобы баннер оставался на месте как и время сверху?

Sipan да, да... послушай этого парня, он знает толк в верстке. ^_^

Если тебе нужна полоса прокрутки, то оверфлоу:авто (или скролл).

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

Link to comment
Share on other sites

  • 0
Спасибо большое)

А то что баннер наезжает на логотип, норм? как сделать чтобы баннер оставался на месте как и время сверху?

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

ставь мин-вайт:размер и усе будет норм.

Link to comment
Share on other sites

  • 0
Спасибо большое)

А то что баннер наезжает на логотип, норм? как сделать чтобы баннер оставался на месте как и время сверху?

у тебя див с классом logo у него ширина 20%, а логотип то у тебя фиксированный то есть картинка сама 550 пикселей, так почему бы блоку logo тоже не проставить 550 вместо 20%, это первое, а второе проставь в .head position: relative тогда header_banner будет отсчитываться именно от head а так он у тебя сейчас от окна браузера на сколько я понял отсчитывается ;)

IE7 не хочет работать с минивайт...

http://hayclub.net.ru/ - вот посмотри сам, в лисе все норм

that`s impossible ^_^ всмысле что min-width IE7 точно распознает

Edited by TonKhaO
Link to comment
Share on other sites

  • 0
у тебя див с классом logo у него ширина 20%, а логотип то у тебя фиксированный то есть картинка сама 550 пикселей, так почему бы блоку logo тоже не проставить 550 вместо 20%, это первое, а второе проставь в .head position: relative тогда header_banner будет отсчитываться именно от head а так он у тебя сейчас от окна браузера на сколько я понял отсчитывается ;)

that`s impossible ^_^ всмысле что min-width IE7 точно распознает

все поставил как ты написал ) спасибо большое, но почему-то баннер всеравно наезжает немного на лого закрывает 'ru' и только тогда останавливается...

а min-width исправил) :)

Проблему решил выставив right:0px; у header_banner

Edited by Sipan
Link to comment
Share on other sites

  • 0
все поставил как ты написал ) спасибо большое, но почему-то баннер всеравно наезжает немного на лого закрывает 'ru' и только тогда останавливается...

а min-width исправил) ^_^

ну смотри блок с логотипом у тебя зафлочен, то есть у него float: left а у баннерного блока стоит абсолют, то есть правый блок никак с левым не взаимодействует так как он вне потока, сожми картинку с логотипом пикселей на 20-30, разница будет не заметна и как раз будет вмещаться, ну и не забудь уменьшить тож на 20-30 пикселей ширину блока ;)

Link to comment
Share on other sites

  • 0
ну смотри блок с логотипом у тебя зафлочен, то есть у него float: left а у баннерного блока стоит абсолют, то есть правый блок никак с левым не взаимодействует так как он вне потока, сожми картинку с логотипом пикселей на 20-30, разница будет не заметна и как раз будет вмещаться, ну и не забудь уменьшить тож на 20-30 пикселей ширину блока ^_^

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

Link to comment
Share on other sites

  • 0
ага, уже подумал об этом)) щас сделаю. Как думаешь что можно ниже поставить? там где красный фон(ниже лого и баннера) ... думаю меню какое-нибудь красивое поставить, не могу в инете ничего подходящего найти, не знаешь пример какой-нибудь подходящий? )

да полно в нете примеров, думаю JQuery с выпадающими под пунктами самое то )

вот кучу примеров тута

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
Answer this question...

×   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

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