Резиновый сайт - HTML и CSS

Syltan · 30.08.2010, 23:17

Есть шапка размером 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>

Syltan · 31.08.2010, 17:00

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

Syltan · 31.08.2010, 20:23

Попробовал чтоб картинку выровнять по левому краю, и добавить картинку фон в правую сторону от картинки-шапки ,что-то не происходит дублирование, фоновой картинки, это тчоб по всей ширине экрана шапка была. Как сделать дублирование картинки-фона, что-то у меня не срабатывает.

Код:

<!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">
     <img  class="shapkafon" src="img/shapka.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>
    
  

</tr>

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

shevron · 31.08.2010, 21:06

Код:

.rezina{min-width:800px;}

Убери это
А с картинками я немного не понял, попробую ещё вчитаться

Syltan · 31.08.2010, 22:23

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

Код:

<!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>

slips · 31.08.2010, 22:38

.body{min-width:700px;}
- по какому принципу вы отнесли body к классу ?

Код:

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

Строка
.shapkafon{background:url(img/fon.jpg); background-repeat:repeat-x; }
кратко записывается так.

Код:

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

Syltan · 31.08.2010, 23:13

Написал так ,и ничего не изменилось, при разрешении экрана 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/shapka.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>
    
  

</tr>

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

slips · 31.08.2010, 23:16

Я вас просил убрать точку перед body

Syltan · 01.09.2010, 22:34

Точно, не заметил. Как ни странно, попробовал этот программерсфорум проверить с разрешеним 800х600 полоса прокрутки появляеться.

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

slips · 02.09.2010, 00:02

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

30.08.2010, 23:17	#1
Syltan Заблокирован Регистрация: 27.08.2009 Сообщений: 569	Резиновый сайт Есть шапка размером 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>

31.08.2010, 21:06	#4
shevron Пользователь Регистрация: 27.08.2010 Сообщений: 30	Код: `.rezina{min-width:800px;}` Убери это А с картинками я немного не понял, попробую ещё вчитаться

31.08.2010, 22:38	#6
slips Форумчанин Регистрация: 28.10.2008 Сообщений: 350	.body{min-width:700px;} - по какому принципу вы отнесли body к классу ? Код: `body{min-width:700px; overflow:hidden; }` Строка .shapkafon{background:url(img/fon.jpg); background-repeat:repeat-x; } кратко записывается так. Код: `.shapkafon{background:url(img/fon.jpg) repeat-x; }` Всё о Слот автоматах и Рейтинг Топ 10 казино Последний раз редактировалось slips; 31.08.2010 в 22:41.

31.08.2010, 23:16	#8
slips Форумчанин Регистрация: 28.10.2008 Сообщений: 350	Я вас просил убрать точку перед body Всё о Слот автоматах и Рейтинг Топ 10 казино

02.09.2010, 00:02	#10
slips Форумчанин Регистрация: 28.10.2008 Сообщений: 350	Вы конечно меня извините, но вы хотите убрать скрол и при этом не потерять часть изображения, определитесь наконец-то что для вас важнее. я вообще не понимаю у вас изображение на всю страницу общее что ли ? Сделайте навигацию фиксированной ширины, основную часть тоже. Отцентрируйте. И во всех браузерах будет одинаковая фиксированная ширина. Всё о Слот автоматах и Рейтинг Топ 10 казино Последний раз редактировалось slips; 02.09.2010 в 00:09.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
CSS: резиновый сайт с применением position: absolute	Aliech	HTML и CSS	9	15.11.2009 23:38
css. не получается поменять области местами. резиновый макет.	sergey_kalinin	HTML и CSS	2	09.07.2009 16:48
Как выкладывать свой сайт в интернет, Как мне выложить сайт,	psywalker	HTML и CSS	6	21.05.2009 15:04
Резиновый сайт	Helen_Sof	HTML и CSS	4	09.02.2009 19:08