Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript
Перезагрузить страницу

Очень нужна помощь


Очень нужна помощь

Обсуждение темы Очень нужна помощь в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Ребят, я в веб-программировании практически полный ноль, потому прошу помощи у вас. Делаю сайт при помощи wyswig web builder, но вот столкнулся с ...


Закрытая тема
 
Опции темы
Старый 20.12.2010, 18:34   #1
Ребят, я в веб-программировании практически полный ноль, потому прошу помощи у вас.
Делаю сайт при помощи wyswig web builder, но вот столкнулся с проблемой:
при смене разрешения экрана сайт изменяет размеры и у него появляются полосы прокрутки (чего быть не должно). Хотелось бы чтобы сайт просто растягивался на ширину окна браузера вне зависимости от разрешения экрана пользователя.
Читал по форумам как это изменить, но так и не понял куда нужно прописывать ширину экрана не в пикселях, а в процентах.

Сайт http://www.ohr-viking.ru

Код:
PHP код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Language" content="ru">

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

<title>ohr-viking.ru</title>

<meta name="generator" content="WYSIWYG Web Builder - http://www.wysiwygwebbuilder.com">

<link rel="shortcut icon" href="favicon.ico">

<style type="text/css">

div#container

{

   width: 1246px;

   height: 772px;

   margin-top: 0px;

   margin-left: 0px;

   text-align: left;

}

</style>

<style type="text/css">

body

{

   background-color: #000000;

   background-image: url(images/img0001.png);

   background-attachment: fixed;

   background-repeat: no-repeat;

   color: #000000;

}

</style>

<style type="text/css">

a

{

   color: #FF6820;

}

a:visited

{

   color: #A52A00;

}

a:active

{

   color: #666666;

}

a:hover

{

   color: #282828;

}

</style>

<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>

<style type="text/css">

#NavigationBar1 ul.navbar

{

   list-style: none;

   margin: 0;

   padding: 0;

}

#NavigationBar1 ul.navbar li

{

   height: 50px;

   width: 100px;

   float: left;

   margin: 0px 25px 0px 0px;

}

#NavigationBar1 ul.navbar li a

{

   display: block;

   position: relative;

}

#NavigationBar1 ul.navbar li a img

{

   position: absolute;

   z-index: 1;

   border-width: 0px;

}

#NavigationBar1 ul.navbar li span

{

   display: block;

   height: 50px;

   width: 100px;

   position: absolute;

   z-index: 2;

}

</style>

<script type="text/javascript">

<!--

function PreloadImages()

{

   var imageObj = new Image();

   var images = new Array();

   images[0]="./images/img0005.gif";

   images[1]="./images/img0005_over.gif";

   images[2]="./images/img0006.gif";

   images[3]="./images/img0006_over.gif";

   images[4]="./images/img0007.gif";

   images[5]="./images/img0007_over.gif";

   images[6]="./images/img0008.gif";

   images[7]="./images/img0008_over.gif";

   images[8]="./images/img0009.gif";

   images[9]="./images/img0009_over.gif";

   for (var i=0; i<=9; i++)

   {

      imageObj.src = images[i];

   }

}

// -->

</script>

<script type="text/javascript">

$(document).ready(function()

{

   $("#NavigationBar1 .navbar a").hover(function()

   {

      $(this).children("span").stop().fadeTo(500, 0);

   }, function()

   {

      $(this).children("span").stop().fadeTo(500, 1);

   })

});

</script>

</head>

<body>

<div id="container">

<div id="wb_Polygon2" style="margin:0;padding:0;position:absolute;left:1px;top:2px;width:1262px;height:500px;text-align:left;z-index:0;">

<img src="http://web-silver.ru/forum/images/img0001.png" id="Polygon2" alt="" title="" style="border-width:0;width:1262px;height:500px"></div>

<div id="wb_Image1" style="margin:0;padding:0;position:absolute;left:922px;top:5px;width:357px;height:348px;text-align:left;z-index:1;">

<img src="http://web-silver.ru/forum/images/img0002.jpg" id="Image1" alt="" border="0" style="width:357px;height:348px;"></div>

<div id="wb_Image2" style="margin:0;padding:0;position:absolute;left:283px;top:20px;width:544px;height:332px;text-align:left;z-index:2;">

<img src="http://web-silver.ru/forum/images/wwb_img5.jpg" id="Image2" alt="" border="0" style="width:544px;height:332px;"></div>

<div id="wb_Image4" style="margin:0;padding:0;position:absolute;left:306px;top:352px;width:295px;height:148px;text-align:left;z-index:3;">

<img src="http://web-silver.ru/forum/images/wwb_img8.jpg" id="Image4" alt="" border="0" style="width:295px;height:148px;"></div>

<div id="wb_Image3" style="margin:0;padding:0;position:absolute;left:0px;top:352px;width:601px;height:134px;text-align:left;z-index:4;">

<img src="http://web-silver.ru/forum/images/wwb_img13.jpg" id="Image3" alt="" border="0" style="width:601px;height:134px;"></div>

<div id="wb_Line1" style="margin:0;padding:0;position:absolute;left:0px;top:413px;width:1274px;height:1px;text-align:left;z-index:5;">

<img src="http://web-silver.ru/forum/images/img0003.png" id="Line1" alt="" title="" style="border-width:0;width:1282px;height:9px"></div>

<div id="wb_ImageMap1" style="margin:0;padding:0;position:absolute;left:0px;top:1px;width:306px;height:344px;text-align:left;z-index:6;">

<img src="http://web-silver.ru/forum/images/logo123.jpg" id="ImageMap1" alt="" usemap="#ImageMapImageMap6" border="0" style="width:306px;height:344px;">

<map name="ImageMapImageMap6">

</map>

</div>

<div id="wb_Line2" style="margin:0;padding:0;position:absolute;left:0px;top:497px;width:440px;height:2px;text-align:left;z-index:7;">

<img src="http://web-silver.ru/forum/images/img0004.png" id="Line2" alt="" title="" style="border-width:0;width:448px;height:10px"></div>

<div id="NavigationBar1" style="position:absolute;left:645px;top:359px;width:625px;height:50px;z-index:8">

<ul class="navbar">

<li><a href=""><img alt="" src="http://web-silver.ru/forum/images/img0005_over.gif"><span><img alt="" src="http://web-silver.ru/forum/images/img0005.gif"></span></a></li>

<li><a href=""><img alt="" src="http://web-silver.ru/forum/images/img0006_over.gif"><span><img alt="" src="http://web-silver.ru/forum/images/img0006.gif"></span></a></li>

<li><a href=""><img alt="" src="http://web-silver.ru/forum/images/img0007_over.gif"><span><img alt="" src="http://web-silver.ru/forum/images/img0007.gif"></span></a></li>

<li><a href=""><img alt="" src="http://web-silver.ru/forum/images/img0008_over.gif"><span><img alt="" src="http://web-silver.ru/forum/images/img0008.gif"></span></a></li>

<li><a href=""><img alt="" src="http://web-silver.ru/forum/images/img0009_over.gif"><span><img alt="" src="http://web-silver.ru/forum/images/img0009.gif"></span></a></li>

</ul>

</div>

<div id="wb_Image5" style="margin:0;padding:0;position:absolute;left:2px;top:0px;width:1277px;height:14px;text-align:left;z-index:9;">

<img src="http://web-silver.ru/forum/images/wwb_img14.jpg" id="Image5" alt="" border="0" style="width:1277px;height:14px;"></div>

<div id="wb_CurvedText2" style="margin:0;padding:0;position:absolute;left:0px;top:0px;width:310px;height:292px;text-align:left;z-index:10;">

<img src="http://web-silver.ru/forum/images/img0010.png" id="CurvedText2" alt="" title="" style="border-width:0;width:310px;height:292px"></div>

</div>

</body>

</html> 
Edited by Silver
 
Старый 20.12.2010, 18:34
Ссылки
Старый 20.12.2010, 19:02   #2
div#container
{
width:100%
height: 100%;
margin-top: 0px;
margin-left: 0px;
text-align: left;
}

Добавлено через 20 секунд

если я всё правильно понял
Последний раз редактировалось S1xteen; 20.12.2010 в 19:02.. Причина: Добавлено сообщение
 
Этот пользователь сказал спасибо S1xteen за это полезное сообщение:
Ring (20.12.2010)
Старый 20.12.2010, 19:19   #3
Я пробовал так, но к сожалению не прокатывает...
 
Старый 20.12.2010, 21:50   #4
естественно.
Цитата:
div id="wb_Polygon2" style="margin:0;padding:0;position:absolute;left:1 px;top:2px;width:1262px;
мешает. и вообще, бросьте вы это дело - пользоваться wis-редакторами. потратьте неделю на изучение HTML
 
Старый 20.12.2010, 22:05   #5
Цитата:
Сообщение от vladendark Посмотреть сообщение
и вообще, бросьте вы это дело - пользоваться wis-редакторами. потратьте неделю на изучение HTML
Полностью согласен
 
Старый 20.12.2010, 22:07   #6
Цитата:
Сообщение от vladendark Посмотреть сообщение
естественно.
мешает. и вообще, бросьте вы это дело - пользоваться wis-редакторами. потратьте неделю на изучение HTML
Согласен на все 100%
 
Старый 20.12.2010, 22:14   #7
http://habrahabr.ru/blogs/webdev/80915/ - почитайте после того, как подучите html немного - это модульная сетка - упрощает создание сайта в разы. для новичков самое оно
 
Старый 25.12.2010, 02:13   #8
Цитата:
Сообщение от Ring Посмотреть сообщение
Ребят, я в веб-программировании практически полный ноль, потому прошу помощи у вас.
Делаю сайт при помощи wyswig web builder, но вот столкнулся с проблемой:
при смене разрешения экрана сайт изменяет размеры и у него появляются полосы прокрутки (чего быть не должно). Хотелось бы чтобы сайт просто растягивался на ширину окна браузера вне зависимости от разрешения экрана пользователя.
Читал по форумам как это изменить, но так и не понял куда нужно прописывать ширину экрана не в пикселях, а в процентах.

Сайт http://www.ohr-viking.ru

Код:
PHP код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Language" content="ru">

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

<title>ohr-viking.ru</title>

<meta name="generator" content="WYSIWYG Web Builder - http://www.wysiwygwebbuilder.com">

<link rel="shortcut icon" href="favicon.ico">

<style type="text/css">

div#container

{

   width: 1246px;

   height: 772px;

   margin-top: 0px;

   margin-left: 0px;

   text-align: left;

}

</style>

<style type="text/css">

body

{

   background-color: #000000;

   background-image: url(images/img0001.png);

   background-attachment: fixed;

   background-repeat: no-repeat;

   color: #000000;

}

</style>

<style type="text/css">

a

{

   color: #FF6820;

}

a:visited

{

   color: #A52A00;

}

a:active

{

   color: #666666;

}

a:hover

{

   color: #282828;

}

</style>

<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>

<style type="text/css">

#NavigationBar1 ul.navbar

{

   list-style: none;

   margin: 0;

   padding: 0;

}

#NavigationBar1 ul.navbar li

{

   height: 50px;

   width: 100px;

   float: left;

   margin: 0px 25px 0px 0px;

}

#NavigationBar1 ul.navbar li a

{

   display: block;

   position: relative;

}

#NavigationBar1 ul.navbar li a img

{

   position: absolute;

   z-index: 1;

   border-width: 0px;

}

#NavigationBar1 ul.navbar li span

{

   display: block;

   height: 50px;

   width: 100px;

   position: absolute;

   z-index: 2;

}

</style>

<script type="text/javascript">

<!--

function PreloadImages()

{

   var imageObj = new Image();

   var images = new Array();

   images[0]="./images/img0005.gif";

   images[1]="./images/img0005_over.gif";

   images[2]="./images/img0006.gif";

   images[3]="./images/img0006_over.gif";

   images[4]="./images/img0007.gif";

   images[5]="./images/img0007_over.gif";

   images[6]="./images/img0008.gif";

   images[7]="./images/img0008_over.gif";

   images[8]="./images/img0009.gif";

   images[9]="./images/img0009_over.gif";

   for (var i=0; i<=9; i++)

   {

      imageObj.src = images[i];

   }

}

// -->

</script>

<script type="text/javascript">

$(document).ready(function()

{

   $("#NavigationBar1 .navbar a").hover(function()

   {

      $(this).children("span").stop().fadeTo(500, 0);

   }, function()

   {

      $(this).children("span").stop().fadeTo(500, 1);

   })

});

</script>

</head>

<body>

<div id="container">

<div id="wb_Polygon2" style="margin:0;padding:0;position:absolute;left:1px;top:2px;width:1262px;height:500px;text-align:left;z-index:0;">

<img src="http://web-silver.ru/forum/images/img0001.png" id="Polygon2" alt="" title="" style="border-width:0;width:1262px;height:500px"></div>

<div id="wb_Image1" style="margin:0;padding:0;position:absolute;left:922px;top:5px;width:357px;height:348px;text-align:left;z-index:1;">

<img src="http://web-silver.ru/forum/images/img0002.jpg" id="Image1" alt="" border="0" style="width:357px;height:348px;"></div>

<div id="wb_Image2" style="margin:0;padding:0;position:absolute;left:283px;top:20px;width:544px;height:332px;text-align:left;z-index:2;">

<img src="http://web-silver.ru/forum/images/wwb_img5.jpg" id="Image2" alt="" border="0" style="width:544px;height:332px;"></div>

<div id="wb_Image4" style="margin:0;padding:0;position:absolute;left:306px;top:352px;width:295px;height:148px;text-align:left;z-index:3;">

<img src="http://web-silver.ru/forum/images/wwb_img8.jpg" id="Image4" alt="" border="0" style="width:295px;height:148px;"></div>

<div id="wb_Image3" style="margin:0;padding:0;position:absolute;left:0px;top:352px;width:601px;height:134px;text-align:left;z-index:4;">

<img src="http://web-silver.ru/forum/images/wwb_img13.jpg" id="Image3" alt="" border="0" style="width:601px;height:134px;"></div>

<div id="wb_Line1" style="margin:0;padding:0;position:absolute;left:0px;top:413px;width:1274px;height:1px;text-align:left;z-index:5;">

<img src="http://web-silver.ru/forum/images/img0003.png" id="Line1" alt="" title="" style="border-width:0;width:1282px;height:9px"></div>

<div id="wb_ImageMap1" style="margin:0;padding:0;position:absolute;left:0px;top:1px;width:306px;height:344px;text-align:left;z-index:6;">

<img src="http://web-silver.ru/forum/images/logo123.jpg" id="ImageMap1" alt="" usemap="#ImageMapImageMap6" border="0" style="width:306px;height:344px;">

<map name="ImageMapImageMap6">

</map>

</div>

<div id="wb_Line2" style="margin:0;padding:0;position:absolute;left:0px;top:497px;width:440px;height:2px;text-align:left;z-index:7;">

<img src="http://web-silver.ru/forum/images/img0004.png" id="Line2" alt="" title="" style="border-width:0;width:448px;height:10px"></div>

<div id="NavigationBar1" style="position:absolute;left:645px;top:359px;width:625px;height:50px;z-index:8">

<ul class="navbar">

<li><a href=""><img alt="" src="http://web-silver.ru/forum/images/img0005_over.gif"><span><img alt="" src="http://web-silver.ru/forum/images/img0005.gif"></span></a></li>

<li><a href=""><img alt="" src="http://web-silver.ru/forum/images/img0006_over.gif"><span><img alt="" src="http://web-silver.ru/forum/images/img0006.gif"></span></a></li>

<li><a href=""><img alt="" src="http://web-silver.ru/forum/images/img0007_over.gif"><span><img alt="" src="http://web-silver.ru/forum/images/img0007.gif"></span></a></li>

<li><a href=""><img alt="" src="http://web-silver.ru/forum/images/img0008_over.gif"><span><img alt="" src="http://web-silver.ru/forum/images/img0008.gif"></span></a></li>

<li><a href=""><img alt="" src="http://web-silver.ru/forum/images/img0009_over.gif"><span><img alt="" src="http://web-silver.ru/forum/images/img0009.gif"></span></a></li>

</ul>

</div>

<div id="wb_Image5" style="margin:0;padding:0;position:absolute;left:2px;top:0px;width:1277px;height:14px;text-align:left;z-index:9;">

<img src="http://web-silver.ru/forum/images/wwb_img14.jpg" id="Image5" alt="" border="0" style="width:1277px;height:14px;"></div>

<div id="wb_CurvedText2" style="margin:0;padding:0;position:absolute;left:0px;top:0px;width:310px;height:292px;text-align:left;z-index:10;">

<img src="http://web-silver.ru/forum/images/img0010.png" id="CurvedText2" alt="" title="" style="border-width:0;width:310px;height:292px"></div>

</div>

</body>

</html> 
Edited by Silver
Мда... эт что?))) html ? Не ну так то конечно...
Вообщем вы используете html 4 еще и не в правильной форме...
теги <img>в версиях ниже strict нужно пропорционально закрывать</img>
избежать этого можно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org TR/html4/strict.dtd">
Все равно, лучше чем XHTML нет)... в нем ситуация обстоит с тегами так: <img src="" />, <meta /> и т.д.
Ну вообщем не заморачивайтесь...
В данной ситуации я вам привел пример вашего решения:
Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org TR/html4/strict.dtd"> 
<html> 
<head>
<title>ohr-viking.ru</title> 
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta name="generator" content="WYSIWYG Web Builder - http://www.wysiwygwebbuilder.com">
<link rel="shortcut icon" href="favicon.ico">
<style type="text/css">
body{width:100%;min-height:100%;margin:0;padding:0;}
	#header
	{
		margin:0;
		padding:0;
		width:100%;
		position:relative;
	}
	#header img.header
	{
		margin:0;
		padding:0;
	}
	#header img.right
	{
		position:absolute;
		right:0;
	}
	#header img.left
	{
		position:absolute;
		left:0;
	}
	#center
	{
		width:250px;
		margin:0 auto;
		position:relative;
	}
	#center img.center
	{
		position:absolute;
		top:-500px;
	}
</style>
<body>
<div id="header">
	<img src="/" class="header" width="100%" height="600">
	<img src="/" class="right" width="100" height="300">
	<img src="/" class="left" width="100" height="300">
		<div id="center">
			<img src="/" class="center" width="250" height="300">
		</div>
</div>
</body>
</html>
Тянится... Если, что обращайтесь помогу
 
Старый 25.12.2010, 02:13
Закрытая тема

« Насколько актуален такой способ создания резинового контейнера? | Помогите растянуть шапку и футер »



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Мне очень нужна ваша помощь! Chenko Кальянная 4 15.08.2011 03:06
Очень нужна ваша помощь!!! К.Анатолий Кальянная 8 05.03.2011 04:15
Очень нужна помощь с JS nash2711 HTML, CSS, JavaScript 2 03.09.2010 16:25
Очень нужна помощь! dartik1 HTML, CSS, JavaScript 0 19.03.2007 18:05
Очень нужна помощь. Оплачиваемая. precise ASP, Perl, PHP и MySQL 5 30.03.2005 12:12


Текущее время: 09:24. Часовой пояс GMT +4.



Справка - Обратная связь - Web-silver.ru - Архив - Календарь - Карта - Вверх

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум