Trust
-
Posts
112 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Trust
-
Вот что получилось. Но это работает неправильно. Поправьте пожалуйста! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> <title>Vertical center</title> <style type="text/css"> body { color: #000; background: #fff; font-size: 100%; font-family: georgia, times new roman, serif; line-height: 1.4; height:100%; background:url(../images/b.jpg); } .wrap1 { background:#ccc url(checkb_ff0.gif); } /* ie5 mac*/ /**/ .openm { display: none; } * html .openm, * html .wrap1 { display: inline-block; vertical-align: middle; } * html .wrap1 { width: 100%; } * html .openm { height: 100%; } /*ie5 mac*/ * html .openm, * html .wrap1 { display: inline; } /*/ .openm { width: 1px; margin-left: -1px; } /**/ .wrap1 { color: #666; } .wrap1 p, .wrap1 ol { margin-top: 0; margin-bottom: 0; } .wrap1 p { padding: 0 0.2em; } code { font-size: 1em; } * { border-collapse: collapse; /* Op */ } .small { font-size: .8em; } #b { width:1024px; height:768px; background:url(../images/t.jpg); background-repeat:no-repeat; margin: 0 auto } #k { width:246px; height:72px; margin-top:583px; background:url(../images/k.jpg); background-repeat:no-repeat; float:left; font-size:13px; font-family:"Times New Roman", Times, serif; color:#CCCCCC } a { text-decoration:none; color:#CCCCCC } #m { width:186px; height:296px; margin-top:359px; background:url(../images/m.jpg); background-repeat:no-repeat; float:right } #l { margin-left:897px; height:113px; width:76px; background:url(../images/l.jpg); background-position: left bottom; background-repeat:no-repeat } </style> </head> <body> <div class="wrap0"><div class="wrap1"> <div id="b"> <div id="l"></div> <div id="k"><?php mosLoadModules ( 'k' ); ?></div> <div id="m"><?php mosLoadModules ( 'm' ); ?></div> </div> </div><div class="openm"></div></div> <h1> </h1> </body></html>
-
Согласен, но сегодня мне пришлось и так очень много думать К тому же, если я просто не знаю, я могу научиться только с чужих советов и других источников.
-
Если ты знаешь, почему бы просто не подсказать? Я вот сейчас сижу и думаю, как бы сделать то же самое, только для связки слой-боди, но ничего не получается. С момента создания темы прошло уже более четыр?х часов, а если бы кто-то просто кинул ссылку, то это время сократилось бы в разы... Да и если бы я мог найти то, как это сделать, стал бы я создавать тему?
-
Да не то вс? Нашел только выравнивание дива внутри дива, и ещ? статью, но там нужно аж три блока для выравнивая одного.
-
vvsh, да ладно вам. Я же серь?зно. Стал бы я тему тут создавать, если бы знал как это делать?
-
Ну что, поможет мне кто?
-
Dimitry Wolotko, я тему создал, чтобы как раз про верикальное выравнивание спросить)) Если по аналогии делать с горизонтальным выравниванием (margin-left:autol margin-right:auto и margin:0 auto) - у меня так не получается.
-
Dimitry Wolotko, спасибо. Забыл написать, что нужно, как по горизонтали, так и по вертикали. html <?php defined( '_VALID_MOS' ) or die( '?????? ?????????' ); ?> <!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" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>"> <head> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <?php if ($my->id) { initEditor(); } ?> <?php mosShowHead(); ?> <link href="templates/<?php echo $cur_template; ?>/css/css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="b"> <div id="l"></div> <div id="k"><?php mosLoadModules ( 'k' ); ?></div> <div id="m"><?php mosLoadModules ( 'm' ); ?></div> </div> </body> </html> css /* CSS Document */ body { margin:0 0 0 0; background:url(../images/b.jpg); vertical-align:middle } #b { width:1024px; height:768px; background:url(../images/t.jpg); background-repeat:no-repeat; margin: 0 auto } #k { width:246px; height:72px; margin-top:583px; background:url(../images/k.jpg); background-repeat:no-repeat; float:left; font-size:13px; font-family:"Times New Roman", Times, serif; color:#CCCCCC } a { text-decoration:none; color:#CCCCCC } #m { width:186px; height:296px; margin-top:359px; background:url(../images/m.jpg); background-repeat:no-repeat; float:right } #l { margin-left:897px; height:113px; width:76px; background:url(../images/l.jpg); background-position: left bottom; background-repeat:no-repeat }
-
Сабж. Ребята, выручайте! Чего-то совсем ничего в выдаче не видно Везде описано выравнивание относительно другого блока. Т.е. нужно отцентровать блок относительно экрана без экспрешенов и прочей лабуды. Читсый css. В коде просто блок с содержимым (тоже блоки).
-
Вот последняя версия кода:mad: уже не могу...)) Вс? что нужно, это чтобы правый серый блок тянулся до пола и тянул за собой нижнюю часть (футер). И ТОЛЬКО И ВСЕГО! но я не знаю, как это сделать... html <?php defined( '_VALID_MOS' ) or die( 'Доступ ограничен' ); ?> <!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" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>"> <head> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <?php if ($my->id) { initEditor(); } ?> <?php mosShowHead(); ?> <link href="templates/<?php echo $cur_template; ?>/css/css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="a"> <div id="k"> <div id="ba"></div> </div> <div id="m"><?php mosLoadModules ( 'm1' ); ?></div> </div> <div id="m2"> <?php mosLoadModules ( 'm2' ); ?> </div> <div id="telo"> <div id="l"> <div id="po"> <div id="lev"></div> <div id="poi"><?php mosLoadModules ( 'poisk' ); ?></div> </div> <div id="te"><?php echo mosMainBody();?></div> </div> <div id="container"> <div id="sh"></div> </div> <div id="fg"> <div id="f1"></div> <div id="f2"><?php mosLoadModules ( 'f' ); ?></div> </div> </div> </body> </html> css body { font-family: Arial, Helvetica, sans-serif; font-size:11px; } * { padding: 0; margin: 0; } html, body { height: 100%; } * html #container { height: 100%; } #a { height:130px; width:1000px; margin-left:auto; margin-right:auto } #k { width:670px; height:133px; float:left; background-image:url(../images/kart.jpg); background-repeat:no-repeat; } #ba { background-image:url(../images/lev1.jpg); background-repeat:no-repeat; width:132px; height:133px } #m { width:163px; height:130px; background-color:#ffffff; float:right; background-image:url(../images/b.jpg); background-position:left top; background-repeat:no-repeat; text-align:left; } #m2 { width:1000px; margin-left:auto; margin-right:auto; height:23px; background:#9c0000; background-image:url(../images/lev2.jpg); background-repeat:no-repeat } #lev { width:132px; height:44px; background-image:url(../images/lev3.jpg); background-repeat:no-repeat; float:left } #telo { width:1000px; margin-left:auto; margin-right:auto; } #l { float:left; width:710px; height:auto } #container { float:right; width:265px; background:#f4f8ff; min-height:100%; margin-top:1px } #po { height:50px } #poi { height:30px; width:250px; float:right; margin-right:15px; margin-top:3px } #sh { background-image:url(../images/pal.jpg); background-repeat:repeat-x; height:29px; } #te { height:50px } #fg { height:40px; width:1000px; margin-left:auto; margin-right:auto; float:left } #f1 { height:18px; background-color:#9c0000; width:1000px; } #f2 { height:25px; background-color:#ffffff; width:1000px; text-align:right; } .moduletable-fo { float:right; margin-top:5px; font-size:10px; color:#666666; margin-right:30px } .moduletable-fo a { font-size:10px; color:#666666 } .moduletable-mainlevel { width:69px; margin-top:15px; margin-left:25px; } a.mainlevel-mainlevel:link, a.mainlevel-mainlevel:visited, a#active_menu-mainlevel.mainlevel-mainlevel { background-image:url(../images/but.jpg); background-repeat:no-repeat; font-size:10px; color:#9c0000; text-decoration:none; padding-left:15px; width:69px; line-height:6px; } table.moduletable-mainlevel { margin-top:20px; margin-left:30px; padding: 0px; } .mainlevel-mainlevel { height:17px; display:block; list-style-image:none; list-style-position:outside; list-style-type:none; text-align:left; white-space:nowrap; } .contentpaneopen td { font-size:11px; text-align:justify; background-color:#f4f8ff; border: 1px solid #e3e3e3; border-top:none; color:#494949; padding:10px 7px 7px 7px; } table.contentpaneopen { margin-top:-5px; border-bottom:none; width:100%; } td.contentheading { border-bottom:none; width:100%; padding-top:5px; border-top: 4px solid #e3e3e3; background-image:url(../images/li.jpg); background-repeat:no-repeat; color:#990000 } td.contentheading a { font-size:11px; color:#9c0000; text-decoration:none } .inputbox-poisk { border:1px solid #7f9db9; height:15px; font-size:9px; float:left; width:150px } .moduletable-poisk { float:left; color:#9c0000; font-size:10px; text-align:left; margin-bottom:4px; } .button-poisk { border:1px solid #7f9db9; font-size:10px; color:#9c0000; background-color:#FFFFFF; height:17px; margin-left:10px; margin-top:1px; padding-bottom:2px; width:80px }
-
У меня сейчас две проблемы: нужно сделать так, чтобы правый серый блок тянулся до пола и чтобы модуль поиска отображался коррекно в IE. Я совершенно не могу понять почему отображается таким образом модуль поиска в ie. Мало того, что он намного правее, но ещ? и правый серый блок отодвигается вниз. Вот html <?php defined( '_VALID_MOS' ) or die( 'Ainooi cai?au?i' ); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php $iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <?php mosShowHead(); ?> <?php if ( $my->id ) { initEditor(); } ?> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <link href="<?php echo $GLOBALS['mosConfig_live_site'];?>/templates/<?php echo $GLOBALS['cur_template']; ?>/css/css.css" rel="stylesheet" type="text/css" /> </head> </head> <body> <div id="container"> <div id="a"> <div id="logo"></div> <div id="k"></div> <div id="m"> <?php mosLoadModules ( 'm1' ); ?> </div> <div id="m2"><?php mosLoadModules ( 'm2' ); ?></div> </div> <div id="r"> <div id="sh"></div> </div> <div id="po"> <?php mosLoadModules ( 'poisk' ); ?> </div> <div id="l"><?php echo mosMainBody();?></div> <div id="fg"> <div id="f1"></div> <div id="f2"><?php mosLoadModules ( 'f' ); ?></div> </div> </div> </body> </html> Вот css * { padding: 0; margin: 0; } html, body { height: 100%; } body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; } #container { width: 1000px; text-align: center; min-height: 100%; margin-left:auto; margin-right:auto; height:100% } * html #container { height: 100%; } #a { height:130px; width:1000px; } #rig { height:133px; width:100px; background:#FFFFFF } #po { width:290px; text-align:left; margin-top:10px; float:left; margin-left:290px } .inputbox-poisk { border:1px solid #7f9db9; height:15px; font-size:9px; float:left; width:150px } .moduletable-poisk { float:left; color:#9c0000; font-size:10px; text-align:left; margin-bottom:4px; } .button-poisk { border:1px solid #7f9db9; font-size:10px; color:#9c0000; background-color:#FFFFFF; height:17px; margin-left:10px; margin-top:1px; padding-bottom:2px; width:80px } #logo { background-image:url(../images/lev.jpg); background-repeat:no-repeat; width:137px; height:208px; float:left } #r { width: 265px; background-color:#f4f8ff; margin-top:2px; float:right; min-height:100%; height:100%; margin-right:5px; margin-bottom:40px; padding-bottom:40px; } #sh { background-image:url(../images/pal.jpg); background-repeat:repeat-x; height:29px; } #l { width: 710px; float:left; margin-top:2px } #l img { border:1px solid #999999; margin-right:4px; margin-top:2px } #fg { height:4%; width:100%; float:left } #f1 { height:18px; background-color:#9c0000; width:1000px; margin-left:auto; margin-right:auto } #f2 { height:25px; background-color:#ffffff; width:1000px; margin-left:auto; margin-right:auto; text-align:right } .moduletable-fo { float:right; margin-top:5px; font-size:10px; color:#666666; margin-right:30px } .moduletable-fo a { font-size:10px; color:#666666 } #k { width:670px; height:133px; float:left; background-image:url(../images/kart.jpg); background-repeat:no-repeat; } #m { width:163px; height:133px; background-color:#ffffff; float:right; background-image:url(../images/b.jpg); background-position:left top; background-repeat:no-repeat; text-align:left; } #m2 { width:863px; height:23px; float:right; background:#9c0000; } .moduletable-mainlevel { width:69px; margin-top:30px; margin-left:40px; } a.mainlevel-mainlevel:link, a.mainlevel-mainlevel:visited, a#active_menu-mainlevel.mainlevel-mainlevel { background-image:url(../images/but.jpg); background-repeat:no-repeat; font-size:10px; color:#9c0000; text-decoration:none; padding-left:15px; width:69px; line-height:6px; } table.moduletable-mainlevel { margin-top:30px; margin-left:40px; padding: 0px; } .mainlevel-mainlevel { height:17px; display:block; list-style-image:none; list-style-position:outside; list-style-type:none; text-align:left; white-space:nowrap; } .contentpaneopen td { font-size:11px; text-align:justify; background-color:#f4f8ff; border: 1px solid #e3e3e3; border-top:none; color:#494949; padding:10px 7px 7px 7px; } table.contentpaneopen { margin-top:-5px; border-bottom:none; width:100%; } td.contentheading { border-bottom:none; width:100%; padding-top:5px; border-top: 4px solid #e3e3e3; background-image:url(../images/li.jpg); background-repeat:no-repeat; color:#990000 } td.contentheading a { font-size:11px; color:#9c0000; text-decoration:none } Спасите помогите!!! Согласен, не подскажите как это сделать на примере вышепривед?нного кода?
-
Может пока не правильный, но я стараюсь Я никогда не делал сайты так, чтобы они растягивались на полную высоту экрана, вот поэтому и начал мутить.
-
Может меня вообще кто-нибудь лично проконсльтировать? А то я щас нафиг ап стенку убьюсь
-
Вот ссылка на сайт - www.webinteractions.ru. Там правый блок (с синей шапкой) должен до пола растягиваться.
-
Вс?, сам доп?р Теперь ещ? одна проблема. Не могу сделать так, чтобы блоки ВНУТРИ блока растягивались на 100%. При помощи height="100%"; min-height:"100%" сделал нормально только в ie, а в двух других - хрен... Вот код: html <!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> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>:)</title> <link href="css/css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="a"> <div id="k"></div> <div id="m"></div> </div> <div id="r"></div> <div id="l"></div> </div> <div id="fg"></div> </body> </html> css * { padding: 0; margin: 0; } html, body { height: 100%; } body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; min-height:100% } #container { width: 1000px; background-color: #F2F2F2; text-align: center; min-height: 96%; margin-left:auto; margin-right:auto } * html #container { height: 95%; } #a { height:160px; background-color:#FF0000; width:1000px } #r { width: 400px; background-color: #cccccc; float:left; height:inherit } #l { width: 400px; background-color: #cccccc; float:right; } #fg { height:4px; width:1000px; margin-left:auto; margin-right:auto } #k { width:800px; height:130px; background-color:#999999; float:left } #m { width:200px; height:130px; background-color:#ffffff; float:right }
-
Ограменная пасиба, ARA! А ещ? вопрос, как сделать так, чтобы при вышенаписанных изменениях, которые я уже вн?с в шаблон, сделать так, чтобы один из блоков div выровнять align="bottom"?
-
И ещ?, как сделать так, чтобы в отсутствии контена тело сайта растягивалось на высоту экрана? Пожалуйста, подскажите!!!
-
Подскажите пожалуйста, как растянуть блок на всю высоту родительского блока от пола до низа?
-
Каким образом?
-
Shuranka, искал Везде искал. Говорю, когда присваиваю класс, они мигают, но не более того
-
Так и не получилось с png. Может кто поможет?
-
landser, не знаю почему все так не любят визуальный редактор дримвейвера. Имхо, для таблицчной, именно для табличной в?рстки, визуальный редактор подходит идеально. Единственное, проверять в опере не помешает через каждую минуту-две. Да это даже и к лучшему... А в блокноте.... ну вы, батенька, зверь...
-
Всю первую страницу яшки прошерстил - НИФИГА! Я себе обещание дал, что сегодня сделаю эту батву, но у нас уже 10 часов вечера Добился требуемого эффекта, НО! Скрипт, который дал эффект нужно вставлять в index.php, а это есть плохо, т.к. он весит много. А во-вторых, самое главное, картинка не соответствует своему истинному размеру и отображается некорректно. Взял даже с официального сайта майкрософта инфу - ничего не работает. Может я не тот стиль пишу? Ну хотя раз мигает, значит тот...
-
Вот такое написал, но не работает! Хотя уже прогресс, при загрузке на секунду появляется изображение без фона Сразу скажу, что для того, чтобы убрать фон, я только прописал в стилях эту строку. Может что-то ещ? нужно написать или сделать? img.seq2 { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.site.ru/templates/shablon/images/arr.png); }
-
Согласен с арой, попробуйте сначала что-то более простое сверстать.