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

people2010 · August 30, 2010

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

psywalker · August 30, 2010

Поставь минимальную ширину на body

people2010 · August 30, 2010

Если весь код оставить как есть и дописать так:

<body class="marginpadding rezina">

ничего не изменилось

psywalker · August 30, 2010

<!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">
body { min-width: 800px;}

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


</style>

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

<div style="overflow: hidden; min-width: 800px;">
<table style="width: 100%; overflow: hidden;">
<tr >
<td>
	 <img src="bg.png" style="width: 100%; height: 180px; display: block;">
</td>
</tr>
</table>
</div>
</body>
</html>

people2010 · August 30, 2010

Попробовал поменять разрешение экрана и на всю ширину глянуть свою картинку, как-то она вроде бы как сузилась и некрасиво как-то.

Как сделать может быть яваскриптом. Чтоб если уменьшен экран к примеру на 800 пикселей, обрезать картинка справа обрез сделать?

people2010 · August 31, 2010

У меня картинка размером 1240Х185 Как сделать чтоб она нормально отображалась во всех браузераз при разных разрешениях?

Может при маленьком разрешении экрана лучше её обрезать? Попробовал растягивать получаеться какие-то буквы суженые и не очень красиво смотриться, что можно придумать? Или может картинку делать меньшим размером на фотошопе?

Хочу чтоб так растягивалась на всю ширину шапка как на этом сайте: http://ruseller.com

Searcher · August 31, 2010

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

Порезать на несколько картинок, отделить фон и передний план. Фон целиком или только его часть, соответственно, сделать размножающимся, а остальное с относительными координатами повесить сверху.

klierik · August 31, 2010

а вот не надо было выставлять картинке ширину 100%.

сделайте как сказал psywalker

people2010 · August 31, 2010

У меня есть картинка размером 1240x185. Нарисуйте как резать её, что не очень понятно.

Great Rash · August 31, 2010

У меня стоит под столом системный блок. Отгадайте какого он цвета?

klierik · August 31, 2010

покажите макет, что бы иметь представление о том что вообще вы хотите получить в конце

people2010 · August 31, 2010

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

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

psywalker · August 31, 2010

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

- вот тут ты сначала пишешь общее правило, а потом отдельно для направления фона.

Пиши всё в общем правиле. background:url(img/fon.jpg) repeat-x;

people2010 · August 31, 2010

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

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

psywalker · August 31, 2010

.bordur{border:1px solid black;} - убери рамку и полоса исчезнет

people2010 · August 31, 2010

Это в разрешениях экрана 1280х1240 не появляеться ,а в 800х600 появляеться.Проблема осталась, подскажите как её решить?

people2010 · September 1, 2010

Мне нужно чтоб обрезало картинку справа при разрешении 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 строки таблицы?

http://www.cyberforum.ru/attachment.php?at...mp;d=1283370463

Searcher · September 2, 2010

Уф, ну вот зачем вы нас мучаете?! Зачем заставляете копаться в вашем коде для решения элементарных задач? Начните уже думать и учиться. Почитайте хотябы htmlbook.ru

people2010 · September 2, 2010

Мучал потому-что много часов старался и не получаеться, получалось бы не мучал, если не хотите не отвечайте.

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

И легче всего сказать иди иди и читай,вместо того чтоб подсказать, я читал но чтоб решеить данную проблему не нашёл в htmlbook.ru. и в др. источниках,

поэтому и спросил не для того чтоб меня отправляли подальше.

Edited September 2, 2010 by people2010

Searcher · September 2, 2010

Вам легче всего спрашивать и ждать, что дадут панацею, чем самому изучать?

Вы посмотрите для начала на то как вы описываете таблицу. Как может быть в первой строке 1 ячейка, а во второй 3. И как там дела с colspan? Вот я вас и отправляю к теории, потому как тут читать лекции нет возможности. Читайте попорядку с раздела "Создание таблиц".

Я уж не говорю о том, что макеты страниц в большинстве случаев давно делаются блоками, а не таблицами:

http://layouts.ironmyers.com/

http://www.dynamicdrive.com/style/layouts/category/C10/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

http://blog.html.it/layoutgala/

http://csstemplater.com/

Я бы вообще ваш макет переделал на блочную верстку, но не знаю что там вы дальше планируете разместить. А для начала нужно установить для первой ячейки colspan 3, а не 2

Еще необходимо все атрибуты типа width и align перевести в стили.

Searcher · September 2, 2010

html описывает структуру данных, а css - все оформление. Вот в этом ключе и для начала хоть как-нибудь приведите код в соответствие стандартам. Хотябы так:

<!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 {height: 180px; 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>

Теперь найдите, что в этом коде при ширине окна меньше 800 обрезает вашу панель навигации?

Ключевое слово: "минимальная ширина".

people2010 · September 2, 2010

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

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

http://www.sharemania.ru/0229844

Edited September 2, 2010 by people2010

Searcher · September 2, 2010

Спсибо конечно за подсказки как правильно нужно код формлять, всё в стили прятать, но написав вот так, как вы говорите получаеться
в браузере ИЕ, сдвигов при разрешении 800х600 обрезка происходит изображения справа, а сдвигов навигации в лево не происходит, а в др. браузерах сдвиг происходит со странными пустотами. Вот я дл теста всё сделал и посомтрите что за бред вышел.
http://www.sharemania.ru/0229844

Ничего не понял! Такое впечатление, что вы пользуетесь каким-то автоматическим переводчиком... Не совсем понятно, что вы хотите получить. Нарисуйте схему того, какое поведение вы хотите.

Бреда не вижу, все работает как написано. Сдвигов не присходит потому что указан min-width, уберите его, и будет у вас сдвиг до упора.

people2010 · September 2, 2010

Вот код.

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

Edited September 2, 2010 by people2010

Searcher · September 2, 2010

1) Попробуйте установить для средней ячейки ширину в 70%

2) Что происходит при сужении экрана - понятно, так и записано в коде. Не понятно, что вы хотите получить при сужении?

people2010 · September 2, 2010

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

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

Edited September 2, 2010 by people2010

Sign In

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

Question

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information