Jump to content

Aurica

Newbie
 View Profile  See their activity

  • Posts

    18

  • Joined

  • Last visited

 Content Type 

Everything posted by Aurica

  1. Aurica
    читала. Из всего моего поста вы сказали только про склеенность блоков, да про див с клиром, на это и ответила. Поняла так, что остальное вас устраивает. Значит помочь не могу, пробуйте как Great Rash сказал
  2. Aurica
    Так в чем проблема? Нужно это? .banner_class{ ... margin:5px; ... } Опять-таки с размерами поиграться, чтобы они были как у вас, я подгонять не стала.
  3. Aurica
    Естественно, картинка у меня была в обоих местах: - и в корне сайта и на уровень выше. И относительные адреса, слава богу, люблю использовать, особенно в far без них намаешься. Я видела такие варианты, когда люди некоторые картинки убирали с корня сайта (или с любой другой папки внутри сайта) на уровень выше (самого корня сайта), хотя не понимаю зачем. К сожалению, тогда не проверяла работает ли в IE6. images/ корень сайта/ images/ 1.html (стили определены в самом файле). images/ корень сайта/ css/ images/ 1.html images/ корень сайта/ images/ test/ css/ 1.html Все эти варианты переставали работать в IE6 как только я обращалась к картинке вне корня сайта и начинали работать, когда картинка была внутри корня сайта, независимо от уровня вложенности. В Firefox работают любые варианты. Автор ведь не уточнял где его картинка лежит. Если у кого-то по-другому - напишите.
  4. Aurica
    А почему такой сложный код? разве не проще все сделать используя левую границу? <style type="text/css"> body{ } .banners { background: #000000; margin: 0 auto; width:90%; } .banner_class{ float:left; width:92px; /*единственное, надо поиграться с размерами, установить правильные padding и margin*/ height:68px; margin:5px auto; /*тут auto не имеет никакого действия вроде, блоки вне стандартного потока, поэтому бесполезно.*/ padding:13px 5px 5px 5px; border-left:70px solid #ccc; background-color: #3333FF; text-align:right; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size: 12px; } </style> </head> <body> <div class="banners"> <div class="banner_class">Блок 01</div> <div class="banner_class">Блок 02</div> <div class="banner_class">Блок 03</div> <div class="banner_class">Блок 04</div> <div class="banner_class">Блок 05</div> <div class="banner_class">Блок 06</div> <div class="banner_class">Блок 07</div> <div class="banner_class">Блок 08</div> <!-- <div style="clear:both"></div>--> </div> Выглядит гораздо пристойнее... Если вы хотите разместить по центру блок banners, то вам нужно указать ему ширину (мне, по крайней мере, хватало такого выхода, другого способа пока не искала). Если же вам нужно разместить по центру содержимое внутри блока banners... к сожалению как это сделать - не знаю. У вас у блока banners указан черный фон, в таком виде блок схлопывается и фон не виден, если вам надо, чтобы был виден черный фон - укажите любой элемент внутри этого блока с свойством clear:both, например div
  5. Aurica
    я попробовала с фоновой картинкой проверить, так вот дело в пути. Если путь обозначить background:url(images/sq1.jpg) repeat-x bottom; то все работает, как только добавляется "../" в начале, IE6 перестает понимать путь. Из-за чего - не знаю. Переноси картинки в другую директорию, чтоб без "../" обращаться.
  6. Aurica
    Вы просто клад! Спасибо вам большое! Единственное, не поняла что делает в text-wrap свойство zoom:1. Ага, нашла... ZOOM-Fixing-CSS-Issues-In-Internet-Explorer. Действительно, без него в IE7 (по крайней мере) верхний блок схлопывается. И непонятна эта запись: font: 75%/130%. Хотя что-то нашла тут font-size/line-height... Я правильно поняла - речь идет о записи font-size/line-height? даже не знала что так можно. Благодарю! Это очень полезный код.
  7. Aurica
    еще один вопрос. как быть в том случае, если высота родительского элемента заранее неизвестна? Поясняю. Есть задача: сверстать резиновый в высоту блок. Блок сложный. Фон полупрозрачный, сверху и снизу градиенты. Реализовано через 4 дива - контейнер блока с основным фоном, верхний градиент, блок с текстом (position: relative, top:-высота верхнего градиента), блок с нижним градиентом. Блок с текстом по высоте должен растягивать контейнер, если текста больше. Скриншот: обозначила рамки верхнего блока(зел), нижнего (черный) и текстового (красн) просто чтобы видеть какой где заканчивается/начинается. Проблемы: 1) та же, если обратите внимание, расстояние между границами верхнего и нижнего блока увеличивается на высоту текстового блока (максимально на те самые 220px(высота верхнего градиента)). На картинке это красная стрелка. Но в этот раз высоту блока контейнера я не знаю, она резиновая. 2) текстовый блок должен заходить на нижний градиент, я пробовала поставить bottom:109px (высота нижнего градиента), но не работает. (я не совсем понимаю, что тут нужно поставить +109 или -109, но не работает ни то, ни другое) ссылка на тестовую страницу test ссылка на основную страницу argint css .block{ margin:1em 2em; } .block_top{ height:220px; width:100%; position:relative; z-index:0; } .block_bot{ height:109px; position:relative; width:100%; z-index:0; } .block_text{ position:relative; top:-220px; z-index:1; bottom:109px; } .main{ width:710px; min-height:340px; } .block{ background:url(images/back_block.png); text-align:center; } .block_top{ background:url(images/block_top.png) repeat-x; border-bottom:1px solid green; } .block_bot{ background:url(images/block_bot.png) repeat-x; border-top:1px solid black; } .block_text{ border-bottom:1px solid red; border-top:1px solid red; text-align:left; } html <div class="block main"> <div class="block_top">top</div> <div class="block_text"> text text text text text <br> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> <div class="block_bot">bottom</div> </div> Есть какие-то решения? или может сверстать блок как-нибудь по-другому? P.S.Насчет второй проблемы - поняла, что top:-109px надо ставить нижнему градиенту, а main поставить overflow:hidden и конкретную высоту (что проблематично, но относительно решаемо)... но остается проблема дополнительного расстояния между верхним и нижним градиентами...
  8. Aurica
    Сработало! мда... Благодарю!
  9. Aurica
    Здравствуйте. вот что есть сейчас: у блока menu_text position:relative;он встает на правильное место. Но вот высота у него как 2 блока, ниже меню большое расстояние. Если я этот блок удаляю, то лишнее пространство исчезает. Как сделать так, чтобы блок advert_list начинался сразу после меню? html: <div id="menu_wrapper"> <div id="menu_center"> </div> <div id="menu_text"> <div class="menu_button"> <img src="images/menu_home_page.png"><br> Главная </div> <div class="menu_button"> <img src="images/menu_education.png"><br> Образование </div> <div class="menu_button"> <img src="images/menu_training.png"><br> Тренинги </div> <div class="menu_button"> <img src="images/menu_contacts.png"><br> Контакты </div> </div> </div> <div id="menu_left"> </div> <div id="menu_right"> </div> <div class="clearence"> </div> <div id="advert_list"> <ul> <li class=advert_item>объявление 1</li> <li class=advert_item>объявление 2</li> <li class=advert_item>объявление 3</li> <li class=advert_item>объявление 4</li> <li class=advert_item>объявление 5</li> </ul> </div> css: #menu_wrapper{ float:left; width:100%; } #menu_center{ margin: 0 250px; height:77px; } #menu_left{ width:250px; height:77px; float:left; margin-left:-100%; } #menu_right{ width:250px; height:77px; float:left; margin-left:-250px; } #menu_text{ top:-65px; right:-40px; z-index:100; position:relative; width:90%; height:70px; } .menu_button{ float:left; margin:0 2em; } #advert_list{ margin:0.5em; } .advert_item{ float:left; width:120px; height: 45px; margin: 0 0.5em; border: solid black 1px; } страничка находится по адресу http://studii.md/t1/
  10. Aurica
    Всем доброго времени суток. Имеется список вакансий. Должно быть так: На данный момент так: одна вакансия, 2 блока левый блок плавающий. 1) надо сделать левый блок растягивающимся по высоте правого. (в принципе необязательно, я могу сделать нижнюю рамку у контейнера родителя. А с другой стороны, как тогда прибить этот блок к низу родительского блока?) 2) надо прибить текст в левой колонке к низу. html-код <div class="elem"> ... <div class="elem_title"> <a href="?rm=show_vacancy;vacId=3446"> бухгалтер </a> </div> <div class="info_left"> 24.07.2010<br/> <a href="?rm=show_vacancy;vacId=3446"> ... </a> </div> <div class="info_right"> <b>компания: </b>Trest-Info<br/> <b>требования: </b> ... </div> </div> css-код body, table, tr, td { margin:0; padding:0; border:0; } body { font-size:11px; font-family:Verdana, Tahoma, sans-serif; color:#777777; text-align:center; padding:0.5em; } ... table.category_vac_cv th, p.list_title { #background-color:#EFF7DF; background-color:#EAF0DA; color:#223311; font-family:Tahoma, Arial, sans-serif; text-transform:uppercase; text-align:center; vertical-align:middle; padding: 4px 0; border:0 #112200 solid; border-width:1px 0; } a { color:inherit; text-decoration:none; } ... p.list_title { width:100%; font-weight:bold; border:0; letter-spacing:0.3em; margin-bottom:1em; } div.elem { text-align:left; margin:0px; padding:0px; color:#777777; font-size:0.91em; overflow:hidden; } div.elem_title { color:#607450; font-size:inherit; text-transform:uppercase; text-decoration:underline; font-weight:600; padding-left:1.82em; margin:0.3em 0; } div.info_left, div.info_right { font-size:inherit; border: 1px solid #C7D5B9; padding:0.3em 0.5em;; } div.info_left { border-width: 1px 0 1px 0; vertical-align:bottom; float:left; width:12.73em; } div.info_right { border-width: 1px 0 1px 1px; margin-left:13.82em; } ссылки на сгенерированные страницы: на странице одна вакансия список вакансий Увидела, что на странице элементарно нет doctype. Добавила. Не сработало, все то же самое. Добилась валидации и css и hml на страничке с одной вакансией. Так что вопрос в силе.
  11. Aurica
    psywalker, а в данном случае они должны быть активными? я в курсе вашей ветки, может там кто решение и подскажет. Там уже кто-то говорил про onclick для td. Так что можно попробовать обе сделать кликабельными
  12. Aurica
    А это не подходит? : <div style="padding-left:1em;"> (padding какой угодно) element 1<br />element 2 <div style="margin-left:-1em";>element 3</div> (а вот тут главное margin-top и margin-bottom не ставить отрицательными) </div>
  13. Aurica
    Тут изменить 2 строчки всего... Какой бы ни был человек начинающий, на 5-6 странице именно в этом вопросе он еще вас научит где и что менять. Повторив это 200 раз ему этот код снится будет и поднимете его ночью - он скажет где и что нужно вставить... <td style="height:100px; border:1px solid; vertical-align:top; background:url(clock.png) no-repeat left bottom"> <img src="clock.png" /> </td> Сами строчки-то вы составить можете, а ctrl+c, ctrl+v еще никто не отменял... думайте лучше о ваших друзьях, они наверняка умнее, чем вам кажется... P.S. Прошу прощения... я не заметила что вы хотите сделать это с помощью CSS... только CSS - не знаю. Но хотя бы классы ему проставлять 200 раз все равно придется. Так что какая разница: класс или полностью строчки? P.P.S А если вы хотите, чтобы он вообще ничего не менял сам, то можете написать программку, например, на перле, которая это сделает сама хоть на 200 страницах, хоть на 500... Останется только закинуть все файлы в одну директорию и запустить ее.
  14. Aurica
    Я только недавно стала этим интересоваться, но что получилось у меня: 1. Если вы хотите, чтобы картинка изменялась в зависимости от разрешения экрана, то ее не нужно ставить как фон. 2. Таблица у вас там пока лишняя. Текст, который сверху - это просто строчка текста, даже не список (меню). 3. поскольку эта картинка - заставка, можно задать абсолютное позиционирование для текста на картинке. Что имеем: <div><img src="http://guards-of-death.ucoz.ru/Yulia.gif" width="100%" /></div> <div style="padding-left: 20px; color: rgb(218, 165, 32); position:absolute; left: 20px; top: 16px;" height="5">Вторник, 12.05.2009, 13:37Приветствую Вас <b>Гость</b> | <a linkindex="0" href="http://guards-of-death.ucoz.ru/news/rss/">RSS</a></div> <div> Что там дальше. </div> Скрин: Проверяла в IE7, Ff3, O9 Может быть, можно и как-то по-другому... "<div style="padding-left: 20px; ": - не нужно. На скрине уже исправленное, а в примере кода забыла исправить. "position:absolute; left: 20px; top: 16px;" - сверху надо будет указать 46, например, - у вас там еще пикселей 30 фоновой картинки.
  15. Aurica
    Спасибо! По отдельности не сработало, а вместе помогли!
  16. Aurica
    Хм, не совсем понимаю, что значит текст разной длины? В FF вроде ясно видно, что после текста еще много места остается... А текст слева мне совсем не нужен, и display:none для текста левой колонки убирает всю его полезность. Цвета фона сделать его не могу - там градиент будет. Может есть еще вариант чтобы текст присутствовал в левом столбце, но не был виден? В левом столбце будут только фоновые картинки
  17. Aurica
    Не могу. Для других разрешений экрана крайние столбцы должны заполнять все оставшееся пространство Кстати, ширина разная, я меряла и на меньших размерах среднего столбца. Разница около 10 пикселей, просто это заметно на 1024х768, на б'ольших разрешениях особо не заметно. Можно делать расширяющимся центральный столбец но тогда в нем появится еще одна таблица или дивы, поскольку придется разбивать фоновый рисунок, да и все странички на сайте придется переделывать... В чем разница других страничек и этой - понять не могу, единственное знаю - те я просто редактировала (много, но тем не менее сама структура осталась) а эту сама написала от и до и выскочила эта проблемка. Показываю, естественно, не весь код, а минимальный, при котором проблема выскакивает.
  18. Aurica
    Имеется таблица, центральный столбец фиксированный, крайние разъезжаются и делят по 50% оставшейся ширины. Как только добавляю div в крайний столбец - он разъезжается, хотя текст влезает в ту ширину что была, и крайняя колонка становится заметно шире первой, причем, вроде только в Firefox (у меня 3.08). Код: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Документ Без Имени</title> <style type="text/css"> <!-- table,td { margin:0px; padding:0px; border-collapse:collapse; border-width:1px; border-color:#000000; border-style:solid; } --> </style> </head> <body> <table> <tr> <td style="width:50%">1</td> <td style="width:766px"><div style="width:766px;">2</div></td> <td style="width:50%">3</td> </tr> <tr> <td>4</td> <td>5</td> <td> <div>Есть вопросы?</div> </td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html> Ну, а мне надо, чтоб ширина крайних столбцов была одинакова, и div необходим, там фон и у ячейки и у дива нужен будет... Вот в картинках:Firefox Opera
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept