| |
|
|
| | Сначала прошу строго не судить так как только начинаю учить верстку.
В данный момент я верстаю один макет(на нем учусь). Я пытаюсь сверстать шапку страницы. Но толком ничего не выходит. в одном браузере все нормально, а в ие криво.
Например шапка такая. Сначала от левого края идет флеш баннер. а затем фоновая картинка, которая тянется по горизонтали. и фоновую картинку накладывается логотип.
Первый вопрос такой. Как правильно организовать верстку шапки так чтобы фоновая картинка не налазила на флеш баннер? Я не сам код прошу, а именно словами как правильно следовать? | |
| |
|
|
| |
|
|
| |
для: admiral
(22.04.2009 в 12:47)
| | | задать картинку фоном какого-либо тега. например <div style="background: url(img.gif) repeat-x left top "> | |
| |
|
|
| |
|
|
| |
для: AlexSol
(22.04.2009 в 12:57)
| | |
<div id="fl1">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="637" height="338" align="bottom">
<param name="movie" value="flash/l.swf">
<param name="quality" value="high">
<embed src="flash/lava2.swf" width="637" height="338" align="bottom" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</div>
<div id="ustav"><img src="image/gerb.gif" alt="" border="0"></div>
|
и вот стили
#fl1 {
position: absolute;
float: left;
top: 0px;
width: 350px;
left: 0px;
}
#ustav{
float: right;
top: 344px;
width: 650px;
margin: 5px 0 40px 0;
right:640px;
background: url(../image/gerb1.gif);
}
|
Как заставить так чтобы эти слои не накладывались друг надруга и тянулись по всему экрану? | |
| |
|
|
| |
|
|
| |
для: admiral
(22.04.2009 в 14:48)
| | | <div id="ustav">
<div id="fl1">
<object>...</object>
</div>
<img id="logo" src="image/gerb.gif" alt="" border="0">
</div>
#ustav{
position:relative;
background: url(../image/gerb1.gif);
}
#fl1 {
width: 350px;
}
#logo{
position:absolute;
top:10px;
right:20px;
} | |
| |
|
|
| |
|
|
| |
для: AlexSol
(22.04.2009 в 14:58)
| | | Спасибо, немного изменил так
#ustav{
position:relative;
background: url(../image/gerb1.gif);
background-repeat: repeat-x
}
#fl1 {
width: 350px;
}
#logo{
position:absolute;
top:0px;
right:500px;
}
|
Тоесть что разместить логотип как нужно, но если уменьшить размер окно так чтобы появился скрол, логотип image/gerb.gif исчезает. | |
| |
|
|
| |
|
|
| |
для: admiral
(22.04.2009 в 15:29)
| | | у вас для лого задано абсолютное позиционирование. всегде в 500пикселях от правой границы блока #ustav, вот оно и исчезает.
попробуйте от левой границы этого блока прописать позицию | |
| |
|
|
| |
|
|
| |
для: AlexSol
(22.04.2009 в 16:21)
| | | Получилось. Кстати в этом примере от краев - от верха или от левого и правого края, тоесть получается пустое пространство. Например для верха попробовал поставить в ustav - top: 0px; не помогает | |
| |
|
|
| |
|
|
| |
для: AlexSol
(22.04.2009 в 16:21)
| | | Не знаю правильно ли, но читая ман прописал так margin-top: -10px; - помогло | |
| |
|
|
| |
|
|
| |
для: admiral
(22.04.2009 в 17:33)
| | | значит отступ дает один из родительских элементов, у них ищите. ну и не забудьте
body,html{padding:0;margin:0} | |
| |
|
|
| |
|
|
| |
для: AlexSol
(22.04.2009 в 19:25)
| | | Спасибо, теперь все точно работает.
Я справа от логотипа разместил текст, для это создал еще -
#gerb_text {
position:absolute;
width:300px;
height:148px;
margin-left: 766px;
margin-right: 650px;
top: 21px;
font-size: 9px;
font-family: Tahoma, sans-serif;
color: #666666;
line-height: 16px;
}
|
Все бы ничего но, если делать скрол уменьшая размеры окна, то этот текст не меняет пропорци, а выходит за пределы фона. я прописал отсуп от правого края, но это не спасает. | |
| |
|
|
| |
|
|
| |
для: admiral
(22.04.2009 в 19:44)
| | | ширина задана абсолютная потому что. укажите в относительных единицах или убирайте абсолютное позиционирование и используйте float.
а лучше возьмите страницу, к примеру http://csszengarden.com/?cssfile=/213/213.css&page=0
и разберите как она устроена | |
| |
|
|
