TavlaD
-
Posts
31 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by TavlaD
-
Помогите, пожалуйста подправить скрипт если это возможно под существующий DOCTYPE. В если на страничке DOCTYPE не указан вообще, то скрипт работает: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Untitled Document</title> <script language=JavaScript> function show(object) { object.style.display='block'; } function hide(object) { object.style.display='none'; } </SCRIPT> </head> <body> <a href="#">Введение</a><br><DIV id=q1 style="DISPLAY: block"></DIV> <a href="java script:show(q2);java script:hide(q1);java script:hide(q3);java script:hide(q4);">Часть 1</a><br> <DIV id=q2 style="DISPLAY: none"> <a href="#">Глава 1.</a><br> <a href="#">Глава 2.</a><br> <a href="#">Глава 3.</a> </DIV> <a href="java script:show(q3);java script:hide(q1);java script:hide(q2);java script:hide(q4);">Часть 2</a><br> <DIV id=q3 style="DISPLAY: none"> <a href="#">Глава 1.</a><br> <a href="#">Глава 2.</a><br> <a href="#">Глава 3.</a> </DIV> <a href="java script:show(q4);java script:hide(q1);java script:hide(q2);java script:hide(q3);">Часть 3</a><br> <DIV id=q4 style="DISPLAY: none"> <a href="#">Глава 1.</a><br> <a href="#">Глава 2.</a><br> <a href="#">Глава 3.</a> </DIV> </body> </html> Но если DOCTYPE уже указан, то скрипт не работает: <!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>Untitled Document</title> <script language=JavaScript> function show(object) { object.style.display='block'; } function hide(object) { object.style.display='none'; } </SCRIPT> </head> <body> <a href="#">Введение</a><br><DIV id=q1 style="DISPLAY: block"></DIV> <a href="java script:show(q2);java script:hide(q1);java script:hide(q3);java script:hide(q4);">Часть 1</a><br> <DIV id=q2 style="DISPLAY: none"> <a href="#">Глава 1.</a><br> <a href="#">Глава 2.</a><br> <a href="#">Глава 3.</a> </DIV> <a href="java script:show(q3);java script:hide(q1);java script:hide(q2);java script:hide(q4);">Часть 2</a><br> <DIV id=q3 style="DISPLAY: none"> <a href="#">Глава 1.</a><br> <a href="#">Глава 2.</a><br> <a href="#">Глава 3.</a> </DIV> <a href="java script:show(q4);java script:hide(q1);java script:hide(q2);java script:hide(q3);">Часть 3</a><br> <DIV id=q4 style="DISPLAY: none"> <a href="#">Глава 1.</a><br> <a href="#">Глава 2.</a><br> <a href="#">Глава 3.</a> </DIV> </body> </html> JS я не знаю, поэтому не могу понять как DOCTYPE влияет на данный скрипт. А надо чтобы этот скрипт работал с DOCTYPE. Кто знает прошу помочь разобраться или объяснить. Заранее благодарю.
-
ну не куча маргинов, а всего лишь один там =) Указал обоим боксам ширину и float все норм стало. Но а вообще в чем прикол и связь маргина и того отступа?
-
Я то вижу, что левый тянет правый, но как это исправить? Ведь согласись, что левый создавался не для того, чтобы там все удалять.
-
Помогите, пожалуйста, разобраться где ошибка и как исправить. При верстке появляется отступ показанный на скриншоте стрелкой... не могу понять как его убрать... Скриншот: HTML: <div class="main"> <div class="col_left"> <div class="blocknews"> <div class="top"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b></div> <div class="cont"> <h1>24 сентября 2009</h1> <span>Добавлено <a href="#">ссылка</a>. <br /> Здесь будет обзор последних новостей, но пока тут пусто</span> <h1>24 сентября 2009</h1> <span>Добавлено <a href="#">ссылка</a>. <br /> Здесь будет обзор последних новостей, но пока тут пусто</span> <h1>24 сентября 2009</h1> <span>Добавлено <a href="#">ссылка</a>. <br /> Здесь будет обзор последних новостей, но пока тут пусто</span> </div> <div class="bottom"><b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></div> </div> </div> <div class="col_right"> <div class="change"> <!-- изменяемая часть --> <div class="lot"> <div class="lot-image"><img src="images/oborud001.jpg" /></div> <div class="lot-description">text</div> <div class="clear"></div> </div> <div class="lot"> <div class="lot-image"><img src="images/oborud001.jpg" /></div> <div class="lot-description">text</div> <div class="clear"></div> </div> <div class="lot"> <div class="lot-image"><img src="images/oborud001.jpg" /></div> <div class="lot-description">text</div> <div class="clear"></div> </div> <!-- конец изменяемой часть --> </div> </div> <div class="clear"></div> </div> CSS: .main {width: 920px; margin: 34px auto; background: #12101E; border: 1px solid #4B3F55;} .clear {clear: both;} .col_left {width: 260px; margin: 0 auto; float: left;} .col_right {margin-left: 261px; padding: 0 20px 10px 0;} .blocknews {margin: 0 18px; padding-top: 120px; overflow: hidden;} .xtop, .xbottom { display: block; background: transparent; font-size: 1px; } .xb1, .xb2, .xb3, .xb4 { display: block; overflow: hidden; } .xb1, .xb2, .xb3 { height: 1px; } .xb2, .xb3, .xb4, .cont { background: #222230; border-left: 1px solid #4B3F55; border-right: 1px solid #4B3F55;} .xb1 { margin:0 5px; background: #4B3F55;} .xb2 { margin:0 3px; border-width: 0 2px; } .xb3 { margin:0 2px; } .xb4 { height: 2px; margin: 0 1px; } .cont { padding: 8px 15px; } .cont h1 {font: bold 11px Arial; color: #FF4B27; margin: 20px 0 5px 0;} .cont, .cont span {font: 11px Arial; color: #fff;} .cont span a, .change a {color: #1F73AC;} .cont span a:hover, .change a:hover {color: #76B9F7;} .change {padding: 20px 0;} .change, .change p, .change ol, .change ul, .change li, .change span, .change table, .change tr, .change td {font: 13px/20px Tahoma, Arial; color: #D0C1DB;} .lot {border: 1px solid #675678; padding: 4px; margin-bottom: 10px;} .lot-image {float: left; width: 250px;} .lot-image img {width: 244px; height: 183px; border: 3px solid #483757;} .lot-description {margin-left: 251px;}
-
Все получилось, большое спасибо
-
Помогите, пожалуйста, разобраться. Недавно только начал верстать слоями и практики в этом мало. Пытаюсь сверстать следующий макет: Ну это примерно какие блоки будут и где примерно они должны находиться. По ходу верстки столкнулся со следующей проблемой. Сайт будет растягиваться по ширине окна браузра. box-r - не изменяется и имеет фиксированную ширину, box-l - растягивается. Так вот надо чтобы слои button располагались по центру внутри слоя box-l и растягивались в зависимости от ширины. Кроме этого когда всталяешь таблицу в box-l либо в box-cont (тоже растягивается) и width таблицы ставишь 100% то в IE таблица вылазит и принимает значение 100% от всего экрана, а не того слоя в котором находится. Где у меня ошибка или как можно это подправить Вот код страницы <div class="whitephon"> <div class="bg-top"> </div> <div class="line-top"></div> <div class="box-r">ссылки<br>ссылки<br>ссылки<br>ссылки<br>ссылки<br>ссылки<br>ссылки<br>ссылки<br>ссылки<br>ссылки<br>ссылки</div> <div class="box-l"> <div class="button"><img name="img1" src="" width="200" height="46" alt=""></div> <div class="button"><img name="img2" src="" width="200" height="46" alt=""></div> <div class="vip-ob"></div> <div class="box-news">text</div> <div class="box-cont">content</div> </div> <div class="clear"></div> </div> А это CSS body { background-color: #EEEEEE; margin: 0px; padding: 0px; } .whitephon { background-color: #FFFFFF; margin-top: 10px; margin-right: 10px; margin-bottom: 15px; margin-left: 10px; } .bg-top, .line-top { margin-right: 3px; margin-left: 3px; } .bg-top { background-image: url(images/bg-top.jpg); top: 3px; position: relative; height: 164px; } .line-top { background-color: #80C9FF; height: 10px; font-size: 1px; } .box-l { background-color: #FFFFCC; margin-right: 220px; margin-top: 10px; margin-left: 5px; } .box-r { background-color: #F5F5F5; width: 200px; border-right-width: 2px; border-right-style: solid; border-right-color: #FCBE00; padding: 0; margin-top: 15px; margin-right: 3px; margin-bottom: 10px; float: right; } .clear { clear: both; } .button { background-image: url(images/bg-button.jpg); background-repeat: repeat-x; float: left; height: 50px; margin-right: 4px; margin-left: 4px; border: 1px solid #000000; text-align: center; [color="#FF0000"]width: 48%;[/color] z-index: 2; position: relative; } .button img { margin-top: 3px; } .vip-ob { background-color: #00FFFF; height: 150px; margin-right: 3px; margin-left: 3px; clear: left; } .box-news { float: left; width: 240px; background-color: #99FF33; } .box-cont { background-color: #0000FF; }