Проблемы с css("резиновая вёрстка")
Текущий рейтинг темы: Нет
| PavelCh
Новичок
Всего сообщений: 4 Рейтинг пользователя: 0
Дата регистрации на форуме: 14 сен. 2006
|
Профиль | ИгнорироватьNEW! Сообщение отправлено: 14 сентября 2006 20:39
Всем привет !
Делаю сайт на div'ах, вставляю div, для него id, и в css прописываю элемент графики, его позицию, и т.д. Проблема в том, что, когда окно браузера на весь экран, то всё выглядит нормально, а вот когда я уменьшаю окно, или меняю разрешиние монитора на меньшее, то всё сбивается к центру, или вообще, просто сбивается в кучу... Подскажите, пожалуйста, как можно сделать, чтобы все элементы графики оставались на месте, и не сбивались к центру, или в кучу...?
P.S. Сам я в этом деле "чайник", ну-у, правельнее сказать — "продвинутый чайник", поскольку некоторые приставления об html, и css есть, но не достаточно для того, чтобы разобратся самому... | | | |
4X_Pro
Руководитель Проекта
Настоящий Компьютерщик
 Откуда: Москва Всего сообщений: 3031 Рейтинг пользователя: 75 Дата регистрации на форуме: 29 сен. 2001
|
Профиль | ИгнорироватьNEW! Сообщение отправлено: 14 сентября 2006 22:35 Сообщение отредактировано: 14 сентября 2006 23:07
Не задавать для слоев ширину 100% (обычно это из-за такого происходит), а также прописать правильно DOCTYPE (в какой-то из соседних тем я приводил пример, как это правильно делается, кажется, она называется "DTD имеет значение"), чтобы страница отображалась в соответствии со стандартами W3C, а не в режиме обратной совместимости. Собственно говоря, второе даже важнее...
--- Каждый человек всегда может найти, чем он может быть полезен окружающим. Проблема только в одном: слишком многие не хотят это искать.
| | | |
| PavelCh
Новичок
Всего сообщений: 4 Рейтинг пользователя: 0
Дата регистрации на форуме: 14 сен. 2006
|
Профиль | ИгнорироватьNEW! Сообщение отправлено: 14 сентября 2006 23:40 Сообщение отредактировано: 14 сентября 2006 23:42
Перед 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
Руководитель Проекта
Настоящий Компьютерщик
 Откуда: Москва Всего сообщений: 3031 Рейтинг пользователя: 75 Дата регистрации на форуме: 29 сен. 2001
|
Профиль | ИгнорироватьNEW! Сообщение отправлено: 15 сентября 2006 16:09
Сложно давать советы, не видя кода... Ты свойство float используешь? Еще иногда бывает полезным взять несколько слоев в еще один div.
--- Каждый человек всегда может найти, чем он может быть полезен окружающим. Проблема только в одном: слишком многие не хотят это искать.
| | | |
| PavelCh
Новичок
Всего сообщений: 4 Рейтинг пользователя: 0
Дата регистрации на форуме: 14 сен. 2006
|
Профиль | ИгнорироватьNEW! Сообщение отправлено: 15 сентября 2006 16:25 Сообщение отредактировано: 15 сентября 2006 16:26
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
Руководитель Проекта
Настоящий Компьютерщик
 Откуда: Москва Всего сообщений: 3031 Рейтинг пользователя: 75 Дата регистрации на форуме: 29 сен. 2001
|
Профиль | ИгнорироватьNEW! Сообщение отправлено: 15 сентября 2006 21:24
Ну вот и причина всех этих неприятностей: .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
|
Профиль | ИгнорироватьNEW! Сообщение отправлено: 15 сентября 2006 21:39
XXXX Pro
Попробывал, не помогло, к сожалению...
.contentpane и .contentpaneopen отвечают за вывод основного контента, width:100% означает, что контент будет занимать всю ширину используемого для вывода слоя... | | | |
PanLancelot
Новичок
 Всего сообщений: 3 Рейтинг пользователя: 0 Дата регистрации на форуме: 25 окт. 2006
|
Профиль | ИгнорироватьNEW! Сообщение отправлено: 25 октября 2006 13:39
| | | |
Время выполнения скрипта: 0.9189. Количество выполненных запросов: 17, время выполнения запросов 0.1668
|