Проблемы с css (резиновая вёрстка)

PavelCh · 14.09.2006, 20:06

Всем привет !

Делаю сайт на div'ах, вставляю div, для него id, и в css прописываю элемент графики, его позицию, и т.д. Проблема в том, что, когда окно браузера на весь экран, то всё выглядит нормально, а вот когда я уменьшаю окно, или меняю разрешиние монитора на меньшее, то всё сбивается к центру, или вообще, просто сбивается в кучу... Подскажите, пожалуйста, как можно сделать, чтобы все элементы графики оставались на месте, и не сбивались к центру, или в кучу...?

P.S. Сам я в этом деле "чайник", ну-у, правельнее сказать — "продвинутый чайник", поскольку некоторые приставления об html, и css есть, но не достаточно для того, чтобы разобратся самому...

zero.module · 18.09.2006, 21:07

Я думаю, абсолютное позиционирование Вам поможет.

Uratsakidogi · 18.09.2006, 21:36

Я думаю, код страницы стоит-таки обнародовать.

PavelCh · 18.09.2006, 22:37

Index.php:

Код:

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="758" height="32">
<param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/navigator/images/top_menu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" /> 
<embed src="<?php echo $mosConfig_live_site;?>/templates/navigator/images/top_menu.swf" width="758" height="32" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object></div>
<div id="main">
<div id="logo_f"><div id="logo_f3" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#2F2F2F', gradientType='0')"></div></div><div id="logo_f2"></div>
<div id="fn"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="541" height="28" align="left">
<param name="movie" value="<?php echo $mosConfig_live_site;?>/templates/navigator/images/fn.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="<?php echo $mosConfig_live_site;?>/templates/navigator/images/fn.swf" width="541" height="28" align="left" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object></div><div id="logo_f4"></div>
<div id="lbg_m"></div><div id="lbg_m2"></div><div id="lbg_m3"></div>
<div id="bg_m"><div id="bg_m2"><div id="bg_ml"></div></div></div>
<div id="rbg_up"></div>
<div id="right_bg" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#D4D4D4', endColorStr='#8C8C8C', gradientType='0')"></div>
<div id="m_body"></div>
</div>
</body>
</html>

css-файл:

Код:

body{
background-image:url(../images/bg_up.jpg);
background-repeat:repeat-x;
background-color:#8C8C8C;
font-family:Tahoma,Arial;
color:#383839;
line-height:12px;
margin:0px;
padding:52px;
}
td, tr, p{
font-size:12px;
}
a.mainlevel:link, a.mainlevel:visited{
color:#000000;
font-size:20px;
}
a.mainlevel:hover{
color:#FF4800;
font:bold;
}/* formirovanie table modulya */
table.moduletable{
width:758px;
align:center;
}/* formirovanie zagalovka i nazvaniya modulya */
table.moduletable th{
font-size:12px;
font-weight:bold;
color:#00ff00;
text-align:left;
height:22px;
line-height:22px;
text-indent:0px;
letter-spacing:1px;
color:#ff00ff;
}/* formirovanie table samogo modulya s soderzhimim*/
table.moduletable td{
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
margin: 4px;
}/* oprosi 
.poll {} format table oprosa */
/* ato stil dlya otobrazheniya zagalovka sekcii:"data","nazvanie","name" */
.sectiontableheader{
color:#00ff00;
background:#FF4800;
background:url(../images/arrow.png) no-repeat padding-left: 16px;
padding-left:12px;
}/* "<< Start < Previous 1 Next > End >>" */
.pagenav{
font-size:12px;
color:#FF4800; 
}/* esli chto, to dabavim ih - a.pagenav:link, a.pagenav:visited {}*/
a.pagenav:hover{
color:#000000;
text-decoration:underline;
}/* stil dlya otobrazheniya dati sozdaniya statii/news */
.createdate, .small{
color:#FF4800;
font:bold;
}/* .modifydate {} - stil dlya otobrazheniya dati poslednego obnovleniya statii/news */
/* .smalldark {} - stil dlya rezultatov oprosa, stroka "chislo golosovavshih".. */
/* nazvanie statii */
.contentpagetitle{
font-family:Franklin Gothic Demi Cond,Tahoma,Arial;
font-size:3px;
color:#000000;
}/* table, v kotoroy nahodyatsa komponenti,kontakti,no ne elementi kontenta */
.contentpane{
width:100%;
padding:5px;
border-spacing:0px;
margin-bottom:12px;
}/* table dlya kontent */
.contentpaneopen{
width:100%;
padding-left:25px;
padding-right:25px;
border-spacing:0px;
margin-bottom:12px;
}/* naverno ato viravnivanie osnovnogo texta v table */
.contentpane{
margin:12px;
}/* otobrazhenie nazvaniy kategoriy */
a.category:link, a.category:visited{
color:#000000;
font:bold;
}
a.category:hover{
  color: #FF4800;
}

>>Тут уже начинаются стили для графических элементов, размеры, позиция, и т.д.

#logo_f{
position:absolute;
width:739px;
height:166px;
right:271px;
top:84px;
background-image:url(../images/bg_logo.jpg);
background-repeat:repeat-x;
z-index:1;
}
#logo_f2{
position:absolute;
width:19px;
height:194px;
top:84px;
right:252px;
background-image:url(../images/bg_logo_r.jpg);
background-repeat:no-repeat;
z-index:3;
}
#logo_f3{
position:absolute;
width:274px;
height:166px;
background-color:#000000;
left:0px;
top:0px;
z-index:2;
}
#logo_f4{
position:absolute;
width:198px;
height:28px;
top:250px;
right:271px;
background-image:url(../images/bg_logo_down.jpg);
background-repeat:no-repeat;
z-index:7;
}
#fn{
position:absolute;
width:739px;
height:28px;
top:250px;
right:271px;
background-image:url(../images/bg_shadow.png);
background-repeat:repeat-x;
z-index:1;
}
#lbg_m{
position:absolute;
width:23px;
height:254px;
left:252px;
top:278px;
background-image:url(../images/bg_menu_left_man.jpg);
background-repeat:no-repeat;
}
#lbg_m2{
position:absolute;
width:54px;
height:251px;
left:275px;
top:278px;
background-image:url(../images/bg_menu_left_man2.jpg);
background-repeat:no-repeat;
}
#lbg_m3{
position:absolute;
width:61px;
height:251px;
left:329px;
top:278px;
background-image:url(../images/bg_menu_left_man3.jpg);
background-repeat:no-repeat;
}
#right_bg{
position:absolute;
width:21px;
height:196px;
right:271px;
top:278px;
}
#rbg_up{
position:absolute;
width:177px;
height:29px;
right:292px;
top:278px;
background-image:url(../images/ri_up.jpg);
background-repeat:no-repeat;
z-index:1;
}
#bg_m{
position:absolute;
width:403px;
height:251px;
background-color:#FFFFFF;
background-image:url(../images/bgm_up.jpg);
background-repeat:no-repeat;
right:469px;
top:278px;
z-index:1;
}
#bg_m2{
position:absolute;
width:403px;
height:63px;
top:187px;
left:0px;
background-image:url(../images/bgm_up2.jpg);
background-repeat:no-repeat;
z-index:2;
}
#bg_ml{
position:absolute;
width:3px;
height:199px;
bottom:38px;
left:173px;/* liniya poseredine menu */
background-image:url(../images/l_up.jpg);
background-repeat:no-repeat;
z-index:3;
}
#m_body{
position:relative;
width:517px;
height:250px;
top:442px;
right:103px;
background-color:#FFFFFF;
}

Uratsakidogi · 19.09.2006, 12:37

Ужасный код.
Попробуй локализовать проблему и выложить код еще раз.

PavelCh · 19.09.2006, 12:47

Цитата:

Попробуй локализовать проблему и выложить код еще раз.

Если бы я мог локализовать проблему, я бы сюда не обращался бы, и сам всё исправил бы...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Фиксированная высота одной ячейки и резиновая другой	tritobunibuni	HTML, CSS, JavaScript	1	14.05.2010 16:21
CSS -> Резиновая ячейка -> Плавающие объекты -> Позиционирование = ???	dimka_sh	HTML, CSS, JavaScript	1	20.07.2008 23:52
Вёрстка под CMS	Newfelix	Кальянная	5	16.06.2008 15:33
Резиновая вёрстка по высоте...	Денисон	HTML, CSS, JavaScript	4	07.07.2007 22:31
Css. Резиновая верстка	Катя	HTML, CSS, JavaScript	2	06.08.2006 15:46

14.09.2006, 20:06	#1
PavelCh	Всем привет ! Делаю сайт на div'ах, вставляю div, для него id, и в css прописываю элемент графики, его позицию, и т.д. Проблема в том, что, когда окно браузера на весь экран, то всё выглядит нормально, а вот когда я уменьшаю окно, или меняю разрешиние монитора на меньшее, то всё сбивается к центру, или вообще, просто сбивается в кучу... Подскажите, пожалуйста, как можно сделать, чтобы все элементы графики оставались на месте, и не сбивались к центру, или в кучу...? P.S. Сам я в этом деле "чайник", ну-у, правельнее сказать — "продвинутый чайник", поскольку некоторые приставления об html, и css есть, но не достаточно для того, чтобы разобратся самому...

18.09.2006, 21:07	#2
zero.module	Я думаю, абсолютное позиционирование Вам поможет.

18.09.2006, 21:36	#3
Uratsakidogi	Я думаю, код страницы стоит-таки обнародовать.

19.09.2006, 12:37	#5
Uratsakidogi	Ужасный код. Попробуй локализовать проблему и выложить код еще раз.

Опции темы
Версия для печати Отправить по электронной почте