Jump to content

dangler

User
  • Posts

    36
  • Joined

  • Last visited

Information

  • Sex
    Мужчина

Contacts

  • Web site
    http://atahanov.ru/

dangler's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. раз уж учиться, то можно еще вопрос? я вот тут прочитал: hidden Отображается только область внутри элемента, остальное будет обрезано. И как-то не понял совсем, как это связано с моим блоком.. а что "остальное будет обрезано"? И вообще: "Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров." То есть у меня не помещалось содержимое? Но я ведь не задавал фиксированной высоты и ширины, почему же оно не помещалось? Хм..
  2. ух ты, спасибо большое! и правда, работает
  3. то есть у тебя не такая картинка: ?? то есть, один блок снизу всегда один? я, если добавляю 1 блок div id="goods" до последнего div id="edge" у меня это блок встает в новой строке, то есть, получаются снизу 2 строки и в каждой только по 1 блоку слева. если добаляю еще, то начинает заполняться эта предпоследняя строка, в последней всегда остается один блок.. и при этом расстояние по вертикали между последней строкой и предпоследней в 2 раза меньше, чем остальные (см. рисунок)
  4. http://spice.atahanov.ru/ вот, это последний вариант ) а в сообщении я процесс описал..
  5. хм, не совсем понял.. у меня просто есть уже див centerLayer, он общий для всего, чтобы содержимое по центру выравнивалось.. ион работает нормально.. а не получается именно расположить блоки в несколько горизонтальных рядов.. или, если добавить в мой centerLayer свойство overflow: hidden; zoom:1;, то все заработает? или только в ИЕ6? хм, хм. я просто в мозиле проверяю..
  6. Здравствуйте! У меня такая ситуация. Вот, нарисовал недавно дизайн сайта: Ну и, соответственно, нужно сверстать. Поскольку я дизайнер, то верстаю не слишком часто и до этого в основном, по старинке, верстал таблицами. Сейчас же решил, что это совсем уж прошлый век, поэтому сверстал все дивами и цсс. Вот такой код получился в первоначальном варианте: сам сайт: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Магазин спайса</title> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> <link rel="stylesheet" type="text/css" href="spiceshop.css" /> </head> <body> <div id="centerLayer"> <div id="top"> <img src="top.jpg" height="119" width="672" alt="" title="" /> </div> <div id="but"> <a href="page1.html"><img src="but1.jpg" alt="" title="" /></a> </div> <div id="but"> <a href="page2.html"><img src="but2.jpg" alt="" title="" /></a> </div> <div id="but"> <a href="page3.html"><img src="but3.jpg" alt="" title="" /></a> </div> <div id="but"> <a href="page4.html"><img src="but4.jpg" alt="" title="" /></a> </div> <div> <a href="page5.html"><img src="but5.jpg" alt="" title="" /></a> </div> <div id="topline"> </div> <div id="shopback"> <div id="shopframe"> <div id="goods"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <div id="goods"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <div id="goods"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <div id="goods"> 2<br>text<br>text2<br>text </div> <div id="goods"> 2<br>text<br>text2<br>text </div> <div id="goods"> 2<br>text<br>text2<br>text </div> <div id="goods"> 2<br>text<br>text2<br>text </div> <div id="goods"> 2<br>text<br>text2<br>text </div> </div> </div> </div> </body> </html> и цсс: body { background: url(sersv16_gr.jpg); margin: 0; padding: 0;} #centerLayer { width: 672px; /* Ширина слоя в пикселах */ height: 100%; margin: 0 auto; /* Отступ слева и справа */ background: #ffffff; /* Цвет фона */ padding: 0; /* Поля вокруг текста */ } img { margin: 0; padding: 0; border: 0;} #top { width: 100%; /* Ширина слоя в пикселах */ height: 119px; margin: 0; /* Отступ слева и справа */ background: #ffffff; /* Цвет фона */ padding: 0; /* Поля вокруг текста */} #topline { width: 100%; height: 8px; margin: 0; /* Отступ слева и справа */ background: url(topback.gif); /* Цвет фона */ padding: 0; /* Поля вокруг текста */} #but { float:left; margin: 0; /* Отступ слева и справа */ background: #ffffff; /* Цвет фона */ padding: 0; /* Поля вокруг текста */ } #shopback { height: 100%; background: #c8d6b5; /* Цвет фона */ padding: 7px; /* Поля вокруг текста */ } #shopframe { border: 1px solid #406a20; height: 100%; background: #c8d6b5; /* Цвет фона */ padding: 0; /* Поля вокруг текста */ } #goods { float:left; width: 130px; border: 1px solid #a7ba8e; height: 170px; background: #dce4d2; /* Цвет фона */ padding: 6px; /* Поля вокруг текста */ margin: 16px 0 16px 16px; } но результат получился не совсем таким, как я ожидал: то блок с фоном закрылся раньше, чем началось содержимое, хотя в коде он закрывается позже. я решил, что это из-за значения свойства float: left. я добавил в конце каждого ряда блок со значением clear: хтмл: <div id="edge"> 2<br>text<br>text2<br>text </div> цсс: #edge { clear:left; width: 130px; border: 1px solid #a7ba8e; height: 170px; background: #dce4d2; /* Цвет фона */ padding: 6px; /* Поля вокруг текста */ margin: 16px 0 16px 16px; } стало получше, но все равно неправильно: то есть после каждого clear строчка пропускается, а, если в конце нет блока с clear, тогда остальные уходят за фон.. тогда я сделал все блоки просто #goods и в конце добавил блок #edge (у которого clear:left). получилось довольно близко к тому, что нужно, но все равно не то...: В связи с этим, у меня общий вопрос: как же сделать так, чтобы блоки располагались, как в дизайне? Ну и, более частные: почему после clear:left происходит перенос на новую строку, но без него фоновый блок закрывается раньше времени? И второй - почему расстояние между блоками по вертикали отличается и как-то не всегда совпадает с горизонтальным, хотя у всех блоков одинаково margin: 16px 0 16px 16px ? Очень длинный получился вопрос.. ) Но я надеюсь, что тема интересна не только мне, поэтому был бы очень признателен знатокам за ответы!
  7. блин, да я бы рад, но это ведь переверстывать все страницы.. заново нарезать все, да и я верстал всегда в таблицах, с блоками тольком не умею.. а тут вот не рассчитал что-то.. а в такой ситуации, как сейчас, можно еще как-то справиться? да, кстати, у меня вся таблица с картинками заключена в див #centerLayer { width: 828px; margin: 0 auto; background: #ffffff; padding: 0; text-align: center; } чтобы по центру все было... может, как-нибудь к этому диву привязать еще один, чтобы в нем уже всю информацию писать, но чтобы он не был связан таблицей.. или еще, может, как нибудь можно?
  8. здравствуйте! у меня вот такая ситуация - дизайн сверстан жестко в таблице, слева и сверху - картинки, а справа снизу пустое пространство для контента. (см. рисунок). если текста немного, то его можно втавить в эту ячейку. но, если он по высоте превышает левое меню, то ячейка растягивается и "разламывает" весь дизайн.. поэтому, я хотел бы расположить слой поверх этой таблицы на этом пустом месте, чтобы этот блок тянулся вниз вне зависимости от количества текста. то есть "привязать" его верхний угол к краю этой пустой ячейки, но чтобы он не зависил от размера этой ячейки, а шел поверх нее.. подскажите, пожалуйста, можно это это сделать как-нибудь?
  9. у меня такая ситуация - сверстал снала главную страницу, сверху рисунок, сбоку меню - по центру - красивые графические кнопки. все сверстано целиком в таблице, с жескими размерами. чтобы было по центру, всю таблицу целиком заключил в див: #centerLayer { width: 828px; /* Ширина слоя в пикселах */ margin: 0 auto; /* Отступ слева и справа */ background: #ffffff; /* Цвет фона */ padding: 0; /* Поля вокруг текста */ text-align: center; /* Выравнивание содержимого слоя по левому краю */ } сейчас стал делать другие страницы, на них верх и левая часть остается точно такой же, а в центре вместо кнопок - текстовое наполнение. я взял за основу код главной страницы, удалил все кнопочки оттуда и превратил все в одну ячейку: <td class="content" colspan="4" rowspan="11"> чтобы это ячейка не "разломала" всю верстку, я задал ей жесткие размеры: .content { vertical-align: top; text-align: left; width: 600px; height: 379px; } После этого вписал туда текст и вне понадобилось задать ему отступы и поля. Однако, добаление к классу content марджина и паддинга ничего не дало. Тогда я сделал див внутри этой ячейки с классом: .text { margin: 20; padding: 40; font-size: 12px; font-family: Tahoma, Verdana, Arial, sans-serif; text-align: left; color: #444444; width: 80%; vertical-align: top; } цвет текста, гарнитура, размер меняются, как и задано, однако свойства margin и padding не работают абсолютно... при этом, для всего документа, в силу верстки таюлицами задано в цсс: table { border-collapse: collapse; margin: 0; padding: 0; spacing: 0; } td { padding: 0; border 0; } но это ведь в общем для документа, а тут я отдельным классом хочу все-таки иметь отступы, однако они не работают.. подскажите, пожалуйста, сталкивался ли кто-нибудь с этим? есть какое-нибудь решение?
  10. хм, сейчас залил на хостинг и получается так, что при первом просмотре при наведении на картинку на ее месте появляется пустое место и лишь через некоторое время загружается картинка.. а ведь многие первый раз будут заходить, а это очень уж некрасиво смотрится.. подскажите, пожалуйста, можно ли это как-то решить?
  11. то есть через цсс стиль ссылки задавать, да? а раньше вроде (лет 8 назад) я как-то это без цсс делал, правда, уже и не вспомню как только вот у меня в меню много пунктов, а текст на них - в картинке, так что для каждого пункта свой стиль ссылки.. ) но по-другому особо никак и не сделаешь, я думаю правда в ИЕ при наведении притормаживает на доли скунды перед сменой картинки, если бытро по пуктам водить. но, главное, что работает спасибо, сделал вот так: a.main1 { background: url(images/main_slice_21.jpg); display: block; width: 233px; height: 142px; } a.main1:hover { background: url(images/main_slice_on_21.jpg); } и так 12 пунктов, у всех разные картинки
  12. Justnewone, спасибо! я думал просто, что если для table указал, то в ячейках тоже исчезнет паддинг, ан нет ) но теперь все работает ) Searcher, ну да, это я указал вроде (см выше) Nekromancer, да согласен, наверное, читал тут на сайте про различия верстки таблицами и слоями и, как я понимаю, слоями современне и чем-то лучше.. но таблицами хоть привык, все понятно в них, а сроки горят как всегда, нужно было сверстать за сутки буквально.. почитал немного и понял, что за такой котроткий срок не успею научиться слоями верстать.. а вообще, надо будет, наверное, освоить )
  13. решил сверстать страницу полностью по правилам. написал сверху <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> все теги в документе закрываются, даже незакрывающиеся, все стили решил прописать в цсс: body { background: #ffffff; margin: 0; padding: 0; } table { border-collapse: collapse; margin: 0; padding: 0; spacing: 0; } #centerLayer { width: 829px; margin: 0 auto; background: #ffffff; padding: 0; text-align: center; } всю страницу сверстал жестко в таблице, а таблицу всю ставил в центральный див: <body> <div id="centerLayer"> <table id="Table_01" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="9" rowspan="3"> <img src="images/main_01.jpg" width="228" height="102" alt=""></td> <td colspan="8"> <img src="images/main_02.jpg" width="600" height="42" alt=""></td> ........ <td> <img src="images/spacer.gif" width="75" height="1" alt=""></td> <td></td> </tr> </table> </div> </body> </html> только вот в таблице все равно получается заданы отсупы и границы прям в коде хтмл: border="0" cellpadding="0" cellspacing="0" а если это убрать и открыть таблицу прото тегом <table>, то все картинки "разъезжаются" - толи паддинг, толи спейсинг, уж не знаю появляется. хотя вроде в цсс все обнулил - и граница колапс и отступы..спочему так, можете подсказать? хотелось просто чтбы прям по всем правилам все сделано было.. )
  14. собственно, вопрос в теме ) подскажите, пожалуйста, какой код написать в html, чтобы при наведении мыши изображение менялось на другое?
×
×
  • 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