Объединенный Открытый Проект - Сайт для Настоящих Компьютерщиков

Объединенный Открытый Проект

Сайт для Настоящих Компьютерщиков

; Логин:
  Пароль:
Обычный
Безопасный
Запомнить пользователя



Зарегистрироваться
Забыли пароль?
 
 
 
Объединенный Открытый Проект »   Дизайн, HTML, CSS, JavaScript »   Проблемы с css("резиновая вёрстка")
RSS

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

Текущий рейтинг темы: Нет

<<Назад  Вперед>>Модератор: GramПечать
 
PavelCh
Новичок


Всего сообщений: 4
Рейтинг пользователя: 0





Дата регистрации на форуме:
14 сен. 2006
Всем привет !

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

P.S. Сам я в этом деле "чайник", ну-у, правельнее сказать — "продвинутый чайник", поскольку некоторые приставления об html, и css есть, но не достаточно для того, чтобы разобратся самому...
4X_Pro
Руководитель Проекта
Настоящий Компьютерщик
4X_Pro
Откуда: Москва
Всего сообщений: 2994
Рейтинг пользователя: 79





Дата регистрации на форуме:
29 сен. 2001
Не задавать для слоев ширину 100% (обычно это из-за такого происходит), а также прописать правильно DOCTYPE (в какой-то из соседних тем я приводил пример, как это правильно делается, кажется, она называется "DTD имеет значение"), чтобы страница отображалась в соответствии со стандартами W3C, а не в режиме обратной совместимости.
Собственно говоря, второе даже важнее...

---
Каждый человек всегда может найти, чем он может быть полезен окружающим. Проблема только в одном: слишком многие не хотят это искать.
PavelCh
Новичок


Всего сообщений: 4
Рейтинг пользователя: 0





Дата регистрации на форуме:
14 сен. 2006
Перед HEAD пишу:

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

Для слоёв пишу только конкретные размеры в px.
4X_Pro
Руководитель Проекта
Настоящий Компьютерщик
4X_Pro
Откуда: Москва
Всего сообщений: 2994
Рейтинг пользователя: 79





Дата регистрации на форуме:
29 сен. 2001
Сложно давать советы, не видя кода... Ты свойство float используешь?
Еще иногда бывает полезным взять несколько слоев в еще один div.

---
Каждый человек всегда может найти, чем он может быть полезен окружающим. Проблема только в одном: слишком многие не хотят это искать.
PavelCh
Новичок


Всего сообщений: 4
Рейтинг пользователя: 0





Дата регистрации на форуме:
14 сен. 2006
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;

}
4X_Pro
Руководитель Проекта
Настоящий Компьютерщик
4X_Pro
Откуда: Москва
Всего сообщений: 2994
Рейтинг пользователя: 79





Дата регистрации на форуме:
29 сен. 2001
Ну вот и причина всех этих неприятностей:

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

}


Тут же есть те самые width:100%, о которых я говорил.

---
Каждый человек всегда может найти, чем он может быть полезен окружающим. Проблема только в одном: слишком многие не хотят это искать.
PavelCh
Новичок


Всего сообщений: 4
Рейтинг пользователя: 0





Дата регистрации на форуме:
14 сен. 2006
XXXX Pro

Попробывал, не помогло, к сожалению...

.contentpane и .contentpaneopen отвечают за вывод основного контента, width:100% означает, что контент будет занимать всю ширину используемого для вывода слоя...
PanLancelot
Новичок

PanLancelot
Всего сообщений: 3
Рейтинг пользователя: 0





Дата регистрации на форуме:
25 окт. 2006
да возми ты и посмотри как другие сайты делаются
http://www.cssblast.ru/ - вот тут хорошая подборка.

и вот тебе пример офигенной верстки на дивах... http://www.e-klinik.ru/

<<Назад  Вперед>>Модератор: GramПечать
Объединенный Открытый Проект »   Дизайн, HTML, CSS, JavaScript »   Проблемы с css("резиновая вёрстка")
RSS
Быстрый переход в раздел:


Время выполнения скрипта: 0.1029. Количество выполненных запросов: 17, время выполнения запросов 0.0622