tipoc
-
Posts
8 -
Joined
-
Last visited
tipoc's Achievements
Explorer (1/14)
0
Reputation
-
Спасибо, помогло
-
Здравствуйте! Есть трехколоночный макет фиксированной ширины (который корректно работает под всеми браузерами). CSS (см. секцию LAYOUT в нем): /********** TOP-LEVEL ELEMENTS **********/ html, body { margin: 0; padding: 0; text-align: center; /* for centering layout */ } /********** FONT **********/ body { font: 76% arial, sans-serif; } /********** COLORS **********/ /* blue - #99f, orange - #fc3, black - #666, gray - #ccc */ body { background-color: #ccc; } .body { background-color: #fff; } .header { background-color: #666; color: #FFF; } .left { background-color: #99f; } .right { background-color: #99f; } .footer { background-color: #666; color: #FFF; } /********** MAIN BLOCKS **********/ .header { text-align: center; } .header h1 { height: 35px; margin: 0; } .footer { text-align: center; padding: 5px; } .left_menu { padding-top: 10px; padding-left: 20px; } .right_menu { padding-top: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; } /********** LAYOUT **********/ .container { width: 980px; min-height: 500px; margin: 0 auto; text-align: left; /* returning to default text-align for text */ } .main { float: right; width: 100%; } .center { float: left; margin-right: -200px; width: 100%; } .content { padding: 10px 210px; } .right { float: right; width: 199px; } .left { float: right; margin-right: -200px; width: 199px; } .footer { clear: both; } .body, .center, .right, .left { overflow: hidden; zoom: 1; } .main, .right, .left { margin-bottom: -32767px; padding-bottom: 32767px; } /********** BORDERS **********/ .left { border-right: 1px solid black; } .header { border-bottom: 1px solid black; } .right { border-left: 1px solid black; } .footer { border-top: 1px solid black; } /********** OTHER **********/ a img { border: none; /* Убираем границу */ } .feedback_quote { background-color: #E8EFFF; border: 1px solid black; padding: 10px } .feedback_span { font-style: italic; } 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=UTF-8"/> <link rel="stylesheet" type="text/css" href="css/main.css"/> <title>FAQ</title> </head> <body> <div class="container"> <div class="header"> This is header! </div> <div class="body"> <div class="main"> <div class="center"> <div class="content"> <h2>Test FAQ</h2> <ul> <li><a href="#faq1">Вопрос 1</a><br/><br/></li> <li><a href="#faq2">Вопрос 2</a><br/><br/></li> <li><a href="#faq3">Вопрос 3</a><br/><br/></li> <li><a href="#faq4">Вопрос 4</a><br/><br/></li> <li><a href="#faq5">Вопрос 5</a></li> </ul> <a name="faq1"><strong>Вопрос 1</strong></a><br/> Ответ 1.<hr/> <a name="faq2"><strong>Вопрос 2</strong></a><br/> Ответ 2.<hr/> <a name="faq3"><strong>Вопрос 3</strong></a><br/> Ответ 3.<hr/> <a name="faq4"><strong>Вопрос 4</strong></a><br/> Ответ 4.<hr/> <a name="faq5"><strong>Вопрос 5</strong></a><br/> Ответ 5.<hr/> </div> </div> <div class="right"> <div class="right_menu"> This is right_menu! </div> </div> </div> <div class="left"> <div class="left_menu"> This is left_menu! </div> </div> </div> <div class="footer"> This is footer! </div> </div> </body> </html> Проблема в том, что при переходе по какой-либо ссылке (Вопрос 1, Вопрос 2 и т.д.) верхняя часть страницы обрезается, а не скроллится. Все дело в overflow: hidden (см. CSS код). Но без него layout будет некорректным. Подскажите как решить проблему с анкорами, при этом не ломая сам layout?
-
Подскажите как сделать трехколонный дизайн сайта с колонками одинаковой высоты. Что-то не получается у меня Чтобы работало хотя бы в файрфоксе. Простейший пример: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Три колонки одной высоты</title> <style type="text/css"> html, body {margin: 0;padding: 0} body {font: 76% arial, sans-serif} div#container { width: 100%; min-height: 500px; min-width: 500px; } div#header { text-align: center; background: blue; color: white; } div#center { border-left: 200px solid orange; border-right: 150px solid lightgrey; } div#wrapper { float: left; } div#left { position: absolute; margin-left: -200px; float: left; } div#right { margin-right: -150px } div#footer { clear: left; text-align: center; background: black; color: white; } </style> </head> <body> <div id="container"> <div id="header">This is header</div> <div id="center"> <div id="wrapper">This is wrapper</div> <div id="left">This is left</div> <div id="right">This is right</div> </div> <div id="footer">This is footer</div> </div> </body> </html> Как вот в этом коде сделать так. Чтобы надпись "This is right" была в правом диве (светло-серого цвета).
-
Еще проблема. Layout кривой при отображении данного кода в ослике (explorer). Вот например как отображаются корневые категории (cat-1, cat-2, cat-3, cat-4): explorer (первая категория cat-1 уехала далеко вправо): firefox (отображает как надо): А вот что происходит при открытии первой категории cat-1: explorer (первая категория cat-1 уехала вправо, а ее подкатегории (cat-11, cat-12, cat-13, cat-14) - влево): firefox (отображает как надо): При открытии второй категории cat-2: explorer(подкатегории cat-22, cat-21 второй категории cat-2 уехали влево): firefox(отображает как надо): Как сделать корректное отображение в ослике?
-
Так и сделал. Помогло. Спасибо.
-
2homm: Что в кавычках?
-
Если по-простому, то проблема такая: ie не отображает фоновые изображения для элемента span. Как решить данную проблему?
-
Всем привет! Есть кусок html кода: <ul class="CategoryTree"> <li class="submenu"> <span class="nodeImage" onclick="java script:ajaxOpenCategory(1);return false"></span> <a href="category.html?catId=1">cat-1 id=1</a></li> <li class="submenu"><span class="nodeImage" onclick="java script:ajaxOpenCategory(2);return false"></span> <a href="category.html?catId=2">cat-2 id=2</a></li> <li class="leaf"><span class="nodeImage" onclick="java script:ajaxOpenCategory(3);return false"></span> <a href="category.html?catId=3">cat-3 id=3</a></li> <li class="leaf"><span class="nodeImage" onclick="java script:ajaxOpenCategory(4);return false"></span> <a href="category.html?catId=4">cat-4 id=4</a></li> </ul> Есть css-файл к нему: .CategoryTree { list-style: none; text-decoration: none; display: inline; color: black; } .CategoryTree ul{ list-style: none; margin: 0; padding: 0; } .CategoryTree li { list-style: none; margin-left: 5px; padding: 2px; } .CategoryTree a { display: inline; padding:0px; } .CategoryTree .nodeImage { padding-left: 17px; background-repeat:no-repeat; background-position: left; } .CategoryTree .selectedSubmenu .nodeImage { background-image: url(../images/open.gif); } .CategoryTree .submenu .nodeImage { background-image: url(../images/closed.gif); } .CategoryTree .leaf .nodeImage { background-image: url(../images/list.gif); } В firefox файлы open.gif, closed.gif, list.gif отображаются нормально. А в IE 6/7 они не отображаются. В чем может быть дело?