Проблемы с css("резиновая вёрстка")
Текущий рейтинг темы: Нет
PavelCh
Новичок
Всего сообщений: 4 Рейтинг пользователя: 0
Дата регистрации на форуме: 14 сен. 2006
|
Профиль | Сообщить модератору | ИгнорироватьNEW! Сообщение отправлено: 14 сентября 2006 20:39
Всем привет !
Делаю сайт на div'ах, вставляю div, для него id, и в css прописываю элемент графики, его позицию, и т.д. Проблема в том, что, когда окно браузера на весь экран, то всё выглядит нормально, а вот когда я уменьшаю окно, или меняю разрешиние монитора на меньшее, то всё сбивается к центру, или вообще, просто сбивается в кучу... Подскажите, пожалуйста, как можно сделать, чтобы все элементы графики оставались на месте, и не сбивались к центру, или в кучу...?
P.S. Сам я в этом деле "чайник", ну-у, правельнее сказать — "продвинутый чайник", поскольку некоторые приставления об html, и css есть, но не достаточно для того, чтобы разобратся самому... | | |
4X_Pro
Руководитель Проекта
Настоящий Компьютерщик
Откуда: Москва Всего сообщений: 2994 Рейтинг пользователя: 79 Дата регистрации на форуме: 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
Руководитель Проекта
Настоящий Компьютерщик
Откуда: Москва Всего сообщений: 2994 Рейтинг пользователя: 79 Дата регистрации на форуме: 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
Руководитель Проекта
Настоящий Компьютерщик
Откуда: Москва Всего сообщений: 2994 Рейтинг пользователя: 79 Дата регистрации на форуме: 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
да возми ты и посмотри как другие сайты делаются
http://www.cssblast.ru/ - вот тут хорошая подборка.
и вот тебе пример офигенной верстки на дивах... http://www.e-klinik.ru/
| | |
Время выполнения скрипта: 0.1108. Количество выполненных запросов: 18, время выполнения запросов 0.0178
|