Javascript-форум - Рещиновая шапка сайта

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Рещиновая шапка сайта (https://javascript.ru/forum/xhtml-html-css/11567-reshhinovaya-shapka-sajjta.html)

Golovastik

31.08.2010 17:05

Рещиновая шапка сайта

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

Код:



<!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:600px;}

.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"    cellspacing="0" cellpadding="0" >

<tr >

 <td colspan="2">

     <img src="1.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>

Golovastik

31.08.2010 20: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">

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

Golovastik

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>

ksa	01.09.2010 08:34

Цитата:

Сообщение от Golovastik

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

Там "картинка" размера не меняет... Какой бы размер окна не был - "картинка" всегда находится в левом углу и размеры у нее статичны.

Покажи картинкой что за шапку ты делаешь...

ksa	01.09.2010 08:36

Цитата:

Сообщение от Golovastik

У меня картинка-шапка размером 1240Х185

Гигантомания! :blink:

Golovastik

01.09.2010 23:52

Вложений: 1

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

ksa	02.09.2010 09:10

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>

центр никогда не перекроет как правую, так и левую часть...

Golovastik

02.09.2010 15:19

Вложений: 1

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

Golovastik

02.09.2010 16:37

Вот код.

Код:

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

Golovastik

02.09.2010 17:38

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

Код:

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

Часовой пояс GMT +3, время: 05:35.

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице