Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Резиновый сайт

Автор: Syltan 30.8.2010, 22:19

Есть шапка размером 1024Х180px Хочу сделать чтоб шапка при больших разрещениях увеличивалась ,а при уменьшении экрана на 700-800 пикселей ,чтоб появлялась во всех браузерах полоса прокрутки, чтоб нормально показывалось на всю ширину на экранах 15,17,19,22 дюйма. Подскажите как, код пробный. Проблема в том, что у меня не появляеться полоса прокрутки при уменьшении окна браузера на меньше 800 пикселей в браузере ИЕ, там и 900 и 1000 пикселей, полоса появляеться. А в др. браузерах аообще не появляеться при уменьшении на меньше 800 пикселей.
Хочу чтоб на всю шрину было в экранах размером 15,17,19,22 дюйма. Подскажите как в моём коде правильно написать. Заранее благодарю за ответ.

Код



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Видео</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
.rezina{min-width:800px;}
.marginpadding{margin:0px; padding:0px;}
.bordur{border:1px solid black;}
.menubordur {border: #000 solid 1px; border-top:0;}
.d img{display:block; }
</style>

</head>
<body class="marginpadding" > 

<!-- ШАПКА -->
<table width="100%" class="bordur rezina"    cellspacing="0" cellpadding="0" >
<tr >
 <td colspan="2">
     <img src="shapka.jpg" width="100%" height="180" align="center" >
 </td>
</tr>

<!-- СЕРЕДИНА -->
<tr >
   <td width="15%">
      <div class="d">
        <img  src="videoyroki.png"  >
         <img src="n1.png"  >
         </div>

         
   </td>
  <td class="bordur" > С новым годом!</td>
    
  

</tr>

</table>
</body>
</html>

Автор: magelan 31.8.2010, 02:06

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

Код


<tr >
 <td colspan="2">
     <img src="blank.gif" width="800" height="1"><br>
 </td>
</tr>

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

Автор: Syltan 31.8.2010, 15:48

У меня картинка размером 1240Х185 Как сделать чтоб она нормально отображалась во всех браузераз при разных разрешениях?
Может при маленьком разрешении экрана лучше её обрезать? Попробовал растягивать получаеться какие-то буквы суженые и не очень красиво смотриться, что можно придумать? Или может картинку делать меньшим размером на фотошопе?
Хочу чтоб так растягивалась на всю ширину шапка как на этом сайте: http://ruseller.com

Автор: Syltan 31.8.2010, 19:22

Вот так работает, но появляеться дополнтельная полоса прокрутки, подскажите как убрать её?

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Видео</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
.shapkafon{background:url(img/fon.jpg); background-repeat:repeat-x;
 }
.body{min-width:700px;}
.marginpadding{margin:0px; padding:0px;}
.bordur{border:1px solid black;}
.menubordur {border: #000 solid 1px; border-top:0;}
.d img{display:block; }
</style>

</head>
<body class="marginpadding"> 

<!-- ШАПКА -->
<table  class="bordur"  width="100%"  cellspacing="0" cellpadding="0" >
<tr >
 <td colspan="2" class="shapkafon">
     <img   src="img/shapka.jpg" width="100%"  height="180" align="left" >
 </td>
</tr>

<!-- СЕРЕДИНА -->
<tr >
   <td width="15%">
      <div class="d">
        <img  src="img/videoyroki.png"  >
         <img src="img/n1.png"  >
         </div>

         
   </td>
  <td class="bordur" > С новым годом!</td>
    
  

</tr>

</table>
</body>
</html>

Автор: Syltan 1.9.2010, 22:55

Мне нужно чтоб обрезало картинку справа при разрешении 800х600, но чтоб при этом панель навигации, которая справа должна не обрезаться а сдвинуться.
Если написать так.

Код



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head><title>Видео</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

.shapkafon{background:url(img/fon.jpg); repeat-x; }

body{min-width:800px; overflow:hidden;}

.marginpadding{margin:0px; padding:0px;}

.bordur{border:1px solid black;}

.menubordur {border: #000 solid 1px; border-top:0;}

.d img{display:block; }

</style>

</head>

<body class="marginpadding"> 

<!-- ШАПКА -->

<table class="bordur" width="100%" cellspacing="0" cellpadding="0" >

<tr >

<td colspan="2" class="shapkafon">

<img src="img/header.jpg" height="180" align="left" >

</td>

</tr>

<!-- СЕРЕДИНА -->

<tr >

<td width="15%">

<div class="d">

<img src="img/videoyroki.png" >

<img src="img/n1.png" >

</div>



</td>

<td class="bordur" > С новым годом!</td>



<td width="15%">

<div class="d">

<img src="img/videoyroki.png" >

<img src="img/n1.png" >

</div>



</tr>

</table>

</body>

</html>

Происходит обрезка изображения,

но как быть если у меня панель навигации слева и справа, оно обрежет его справа, как сделать так чтоб не обрезало,чтоб не обрезало правую часть, 3-ую ячеку 2 строки таблицы?

Добавлено через 12 минут и 29 секунд
Есть кто живой?

Автор: Syltan 2.9.2010, 14:29

В браузере ИЕ при разрешении 800х600 обрезка происходит изображения справа,навигацию обрезает, а сдвигов навигации влево не происходит, а в др. браузерах сдвиг происходит со странными пустотами. Вот я для теста всё сделал и посомтрите что за бред вышел.

Автор: Syltan 2.9.2010, 15:40

Вот код.

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Видео</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
*{margin:0; padding:0;}
body{min-width:800px; overflow:hidden;}
img {border: none;}
.shapkafon {background:url(img/fon.jpg); repeat-x; }
.shapkafon img { text-align:left;}
.bordur {width: 100%; border-collapse:collapse;}
.bordur td {border:1px solid black;}
.menubordur {border: 1px solid black; border-top:none;}
.d {width:15%;}
.d img {display:block;}
</style>
</head>

<body class="marginpadding">

<!-- ШАПКА -->
<table class="bordur">
<tr >
<td colspan="3" class="shapkafon" >
<img src="img/header.jpg" >
</td>
</tr>
<!-- СЕРЕДИНА -->
<tr >
<td class="d">
<img src="img/videoyroki.png" >
<img src="img/n1.png" >
</td>
<td> С новым годом!</td>
<td class="d">
<img src="img/videoyroki.png" >
<img src="img/n1.png" >
</tr>
</table>

</body>
</html>

Сейчас у меня экран размером 1280х1024. Этот архив при запуске файла индекс, отображает вот такое в браузере ИЕ7,Опера, Мозила.
Нормально как я хотел. Вот фото отображения в ИЕ,Опера,Мозила.
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

Автор: Syltan 2.9.2010, 16:39

Вот так сработало,вот что я хотел получить при маленьком разрешении экраеа,наконец-то.

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Видео</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
* {margin:0; padding:0;}
body{overflow:hidden;}
img {border: none;}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
.shapkafon img { text-align:left;}
.bordur {width: 100%; border-collapse:collapse;}
.bordur td {border:1px solid black;}
.menubordur {border: 1px solid black; border-top:none;}
.d {width:15%;}
.d img {display:block;}
</style>
</head>

<body class="marginpadding">

<!-- ШАПКА -->
<table class="bordur">
<tr >
<td colspan="3" class="shapkafon" >
<div class="shapka" ></div>
</td>
</tr>
<!-- СЕРЕДИНА -->
<tr >
<td class="d">
<img src="img/videoyroki.png" >
<img src="img/n1.png" >
</td>
<td> С новым годом!</td>
<td class="d">
<img src="img/videoyroki.png" >
<img src="img/n1.png" >
</tr>
</table>

</body>
</html>

Автор: Syltan 2.9.2010, 17:39

Извиняюсь, если кто знает как можно тот же самый результат получить на дивах без использования таблицы, напишите пожалуйста.
Чтоб так же имено работало при разных разрешениях экрана. Заранее благодарю.