Aurica
-
Posts
18 -
Joined
-
Last visited
Aurica's Achievements
Explorer (1/14)
0
Reputation
-
читала. Из всего моего поста вы сказали только про склеенность блоков, да про див с клиром, на это и ответила. Поняла так, что остальное вас устраивает. Значит помочь не могу, пробуйте как Great Rash сказал
-
Так в чем проблема? Нужно это? .banner_class{ ... margin:5px; ... } Опять-таки с размерами поиграться, чтобы они были как у вас, я подгонять не стала.
-
Естественно, картинка у меня была в обоих местах: - и в корне сайта и на уровень выше. И относительные адреса, слава богу, люблю использовать, особенно в far без них намаешься. Я видела такие варианты, когда люди некоторые картинки убирали с корня сайта (или с любой другой папки внутри сайта) на уровень выше (самого корня сайта), хотя не понимаю зачем. К сожалению, тогда не проверяла работает ли в IE6. images/ корень сайта/ images/ 1.html (стили определены в самом файле). images/ корень сайта/ css/ images/ 1.html images/ корень сайта/ images/ test/ css/ 1.html Все эти варианты переставали работать в IE6 как только я обращалась к картинке вне корня сайта и начинали работать, когда картинка была внутри корня сайта, независимо от уровня вложенности. В Firefox работают любые варианты. Автор ведь не уточнял где его картинка лежит. Если у кого-то по-другому - напишите.
-
А почему такой сложный код? разве не проще все сделать используя левую границу? <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
-
я попробовала с фоновой картинкой проверить, так вот дело в пути. Если путь обозначить background:url(images/sq1.jpg) repeat-x bottom; то все работает, как только добавляется "../" в начале, IE6 перестает понимать путь. Из-за чего - не знаю. Переноси картинки в другую директорию, чтоб без "../" обращаться.
-
Вы просто клад! Спасибо вам большое! Единственное, не поняла что делает в text-wrap свойство zoom:1. Ага, нашла... ZOOM-Fixing-CSS-Issues-In-Internet-Explorer. Действительно, без него в IE7 (по крайней мере) верхний блок схлопывается. И непонятна эта запись: font: 75%/130%. Хотя что-то нашла тут font-size/line-height... Я правильно поняла - речь идет о записи font-size/line-height? даже не знала что так можно. Благодарю! Это очень полезный код.
-
еще один вопрос. как быть в том случае, если высота родительского элемента заранее неизвестна? Поясняю. Есть задача: сверстать резиновый в высоту блок. Блок сложный. Фон полупрозрачный, сверху и снизу градиенты. Реализовано через 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 и конкретную высоту (что проблематично, но относительно решаемо)... но остается проблема дополнительного расстояния между верхним и нижним градиентами...
-
Сработало! мда... Благодарю!
-
Здравствуйте. вот что есть сейчас: у блока 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/
-
Всем доброго времени суток. Имеется список вакансий. Должно быть так: На данный момент так: одна вакансия, 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 на страничке с одной вакансией. Так что вопрос в силе.
-
psywalker, а в данном случае они должны быть активными? я в курсе вашей ветки, может там кто решение и подскажет. Там уже кто-то говорил про onclick для td. Так что можно попробовать обе сделать кликабельными
-
А это не подходит? : <div style="padding-left:1em;"> (padding какой угодно) element 1<br />element 2 <div style="margin-left:-1em";>element 3</div> (а вот тут главное margin-top и margin-bottom не ставить отрицательными) </div>
-
Тут изменить 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... Останется только закинуть все файлы в одну директорию и запустить ее.
-
Я только недавно стала этим интересоваться, но что получилось у меня: 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 фоновой картинки.
-
Div внутри таблицы меняет ширину столбца, а не должен...
Aurica replied to Aurica's question in HTML Coding
Спасибо! По отдельности не сработало, а вместе помогли!