Рещиновая шапка сайта
У меня картинка-шапка размером 1240Х185 Как сделать чтоб она нормально отображалась во всех браузераз при разных разрешениях?
Может при маленьком разрешении экрана лучше её обрезать? Попробовал растягивать получаеться какие-то буквы суженые и не очень красиво смотриться, что можно придумать? Или может картинку делать меньшим размером на фотошопе? Хочу чтоб так растягивалась на всю ширину шапка как на этом сайте: http://ruseller.com Код:
|
Попробовал чтоб картинку выровнять по левому краю, и добавить картинку фон в правую сторону от картинки-шапки ,что-то не происходит дублирование, фоновой картинки, это тчоб по всей ширине экрана шапка была. Как сделать дублирование картинки-фона, что-то у меня не срабатывает.
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
Вот так работает, но появляеться дополнтельная полоса прокрутки, подскажите как убрать её?
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
Цитата:
Покажи картинкой что за шапку ты делаешь... |
Цитата:
|
Вложений: 1
Мне нужно чтоб обрезало картинку справа при разрешении 800х600, но чтоб при этом панель навигации, которая справа должна не обрезаться а сдвинуться.
Если написать так. Код:
Происходит обрезка изображения, но как быть если у меня панель навигации слева и справа, оно обрежет его справа, как сделать так чтоб не обрезало,чтоб не обрезало правую часть, 3-ую ячеку 2 строки таблицы? |
Golovastik, я не вижу того, что видешь ты... И картинок твоих у меня нет... Например если сделать так
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#container {
height: 100px;
}
#right {
float: right;
width: 200px;
height: 100%;
background-color: silver;
}
#left {
float: left;
width: 200px;
height: 100%;
background-color: red;
}
#center {
margin-left: 200px;
margin-right: 200px;
height: 100%;
background-color: blue;
/* для пущей уверености */
overflow: hidden;
}
</style>
</head>
<body>
<div id='container'>
<div id='right'></div>
<div id='left'></div>
<div id='center'></div>
</div>
</body>
</html>
центр никогда не перекроет как правую, так и левую часть... |
Вложений: 1
В браузере ИЕ, сдвигов при разрешении 800х600 обрезка происходит изображения справа,навигацию обрезает, а сдвигов навигации влево не происходит, а в др. браузерах сдвиг происходит со странными пустотами. Вот я для теста всё сделал и посомтрите что за бред вышел.
|
Вот код.
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Нормально как я хотел. Вот фото отображения в ИЕ,Опера,Мозила. http://ipicture.ru/uploads/100902/p1jvhCuL1x.jpg В браузере гуглхром вот такую ерунду отображает. http://ipicture.ru/uploads/100902/GUuVs4Uh7I.jpg 1)Проблема №1, неправильно отображение в браузере ГУГлхром, в самом начале при большом разрешении,скажите как исправить? 2) 2-ая проблема, вот что произойдёт ,если сменить разрешение экрана на 800х600, и проверить отображение в браузере ИЕ,МОЗИЛА,ОПЕРА. Вот что произойдёт,с чем я не могу побороться и в чём была главная проблема всей этой темы. http://ipicture.ru/uploads/100902/3QDVOy6dpa.jpg |
Вот так сработало,вот что я хотел получить при маленьком разрешении экраеа,наконец-то.
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
Извиняюсь, если кто знает как можно тот же самый результат получить на дивах без использования таблицы, напишите пожалуйста.
Чтоб так же имено работало при разных разрешениях экрана. Заранее благодарю. |
Цитата:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {
margin: 0;
padding: 0;
}
img {
border: 0;
}
#head,
#container {
min-width: 800px;
}
#head {
height: 155px;
background: url('img/fon.jpg');
}
#right {
float: right;
width: 200px;
background-color: silver;
}
#left {
float: left;
width: 200px;
background-color: red;
}
#center {
margin-left: 200px;
margin-right: 200px;
/* для пущей уверености */
overflow: hidden;
}
.navigation {
height: 35px;
}
.item {
height: 35px;
}
.end {
clear: both;
}
</style>
</head>
<body>
<div id='head'>
<img src='img/header.jpg' />
</div>
<div id='container'>
<div id='right'>
<div class='navigation'>
<img src='img/videoyroki.png' />
</div>
<div class='item'>
<img src='img/n1.png' />
</div>
</div>
<div id='left'>
<div class='navigation'>
<img src='img/videoyroki.png' />
</div>
<div class='item'>
<img src='img/n1.png' />
</div>
</div>
<div id='center'>
<p>content</p>
</div>
<div class='end'></div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 11:08. |