Jump to content

DDX

User
 View Profile  See their activity

  • Posts

    37

  • Joined

  • Last visited

DDX's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. DDX
    Чтобы не создавать отдельную тему спрошу тут. Можно ли средствами HTML и CSS как то ограничить либо блок div, либо ячейку таблицы table таким образом, чтобы текст набранный внутри блока или ячейки никогда не выходил за пределы их границ (в случае если текста очень много), а автоматически переносился на следующую строку.
  2. DDX
    psywalker В свою очередь я эти идеи нашёл на разных сайтах, в том числе англоязычных, в том числе и на http://msdn.microsoft.com/en-us/library/ms537634.aspx откуда собственно, как я понял ноги то и ростут, а называется эта штука Dynamic Properties (динамическое свойство). Способ {height:expression(this.height < 468? "468px":"auto");} найден путём простого тыка в попытке найти где код перестанет работать, если из него что то удалить.
  3. DDX
    klierik, psywalker Не могу не поделиться радостной вестью. Удалось разобраться с вертикальной эластичностью ячеек. Пытался разобраться с указанным фиксом div.ie6-wifth-fix {_height:expression(this.height = document.body.clientHeight-300 + 'px');}, но поскольку до конца не понял, как образуется такое выражение, а статей толковых на этом сайте нашёл только одну да то не совсем к моему случаю относящуюся (http://www.htmlbook.ru/faq/?a=61), то начал искать на других сайтах и нашёл весьма интересное решение в плане упрощении кода. Вместо {_height:expression(this.height = document.body.clientHeight-300 + 'px');} можно прописать {height:expression(468 + "px");} , что даёт равнозначный результат. Хорошо бы если кто нибудь столь важные вещи по оптимизации кода в IE6 и IE7 вывел в отдельную статью на сайте, с множеством разных примеров, способов написания и объяснением откуда, что следует, это было бы полезно в ряде случаев. Вот мой код сейчас: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> <style type="text/css"> BODY{ margin:0px; padding:0px; } .maintable{ table-layout:fixed; width:100%; height:100%; } .blocklefttop{ width:300px; max-width:300px; height:300px; } .blockcentertop{ width:724px; height:300px; } .blockrighttop{ height:300px; } .blockleftmiddle{ width:300px; min-height:468px; } .blockcentermiddle{ width:724px; min-height:468px; } .blockrightmiddle{ min-height:468px; } .blockmiddletr{ height:expression(468 + "px"); } .blockleftbottom{ width:300px; max-width:300px; height:70px; } .blockcenterbottom{ width:724px; height:70px; } .blockrightbottom{ height:70px; } .aalogo{ } .headtext{ position:absolute; top:11px; left:450px; right:90px; width:534px; font-style:normal; font-variant:normal; font-weight:bold; font-size:44px; font-family:Arial, Helvetica, sans-serif; color:#9DB8FD; } .tel{ position:absolute; top:55px; left:530px; right:225px; width:309px; font-style:normal; font-variant:normal; font-weight:bold; font-size:36px; font-family:Arial, Helvetica, sans-serif; color:#9DB8FD; } .email{ position:absolute; top:115px; left:570px; right:273px; width:201px; font-style:normal; font-variant:normal; font-weight:bold; font-size:20px; font-family:Arial, Helvetica, sans-serif; } .maincontent{ width:724px; min-height:468px; margin-left:0px; margin-top:20px; } .hmenu{ font-family:Arial, Helvetica, sans-serif; font-size:16px; width:724px; height:20px; position:absolute; z-index:100; left:300px; top:300px; } .hmenu ul li a, .hmenu ul li a:visited{ display:block; line-height:20px; text-decoration:none; width:101px; height:20px; text-align:center; border:1px solid #FFF; background:#7A6CDB; font-size:16px; overflow:hidden; color:#FFF; } .hmenu ul{ padding:0; margin:0; list-style:none; } .hmenu ul li{ float:left; position:relative; } .hmenu ul li ul{ display:none; } .hmenu ul li:hover a{ background:#FFF; color:#1E56A1; } .hmenu ul li:hover ul{ display:block; position:absolute; top:21px; left:0; } .hmenu ul li:hover ul li a{ display:block; background:#1E56A1; color:#FFF; } .hmenu ul li:hover ul li a:hover{ background:#FFF; color:#1E56A1; } .vmenu { font-family:Arial, Helvetica, sans-serif; font-size:16px; position:absolute; z-index:100; left:50px; top:320px; width:200px; height:25px; } .vmenu ul li a, .vmenu ul li a:visited{ display:block; text-decoration:none; width:200px; height:25px; text-align:center; border:1px solid #FFF; background:#7A6CDB; font-size:16px; line-height:20px; overflow:hidden; color:#FFF; } .vmenu ul{ padding:0; margin:0; list-style:none; } .vmenu ul li{ position:relative; } .vmenu ul li ul{ display:none; } .vmenu ul li:hover a{ background:#FFF; color:#1E56A1; } .vmenu ul li:hover ul{ display:block; position:absolute; top:0; left:200px; } .vmenu ul li:hover ul li a{ display:block; background:#1E56A1; color:#FFF; } .vmenu ul li:hover ul li a:hover{ background:#FFF; color:#1E56A1; } </style> </head> <body> <table border="0" cellpadding="0" cellspacing="0" class="maintable"> <col><col><col> <tr> <td class="blocklefttop" style="background-color:#333"> <div class="aalogo"><img src="logo.png" alt="logo"></div> </td> <td class="blockcentertop" style="background-color:#CCC"> <div class="headtext">Заголовок сайта.....</div> <div class="tel">+7 (495) 123-45-67</div> <div class="email"><a href="mailto: info@mysite.ru" style="text-decoration:none; color:#9DB8FD" >info@mysite.ru</a></div> </td> <td class="blockrighttop" style="background-color:#9DB8FD"></td> </tr> <tr class="blockmiddletr"> <td class="blockleftmiddle" style="background-color:#333"> <div class="vmenu"> <ul> <li><a class="hide" href="11.html">1</a></li> <li><a class="hide" href="22.html">2</a></li> <li><a class="hide" href="33.html">3</a> <ul> <li><a href="1.html" title="">1</a></li> <li><a href="2.html" title="">2</a></li> <li><a href="3.html" title="">3</a></li> <li><a href="4.html" title="">4</a></li> <li><a href="5.html" title="">5</a></li> </ul> </li> <li><a class="hide" href="44.html">4</a></li> <li><a class="hide" href="55.html">5</a></li> <li><a class="hide" href="66.html">6</a></li> <li><a class="hide" href="77.html">7</a></li> </ul> </div> </td> <td class="blockcentermiddle" style="background-color:#CCC"> <div class="hmenu"> <ul> <li><a class="hide" href="11.html">1</a></li> <li><a class="hide" href="22.html">2</a></li> <li><a class="hide" href="33.html">3</a> <ul> <li><a href="1.html" title="">1</a></li> <li><a href="2.html" title="">2</a></li> <li><a href="3.html" title="">3</a></li> <li><a href="4.html" title="">4</a></li> <li><a href="5.html" title="">5</a></li> </ul> </li> <li><a class="hide" href="44.html">4</a></li> <li><a class="hide" href="55.html">5</a></li> <li><a class="hide" href="66.html">6</a></li> <li><a class="hide" href="77.html">7</a></li> </ul> </div> <div class="maincontent">11111111111111111111<br> 11111111111111111111<br> 11111111111111111111<br> 11111111111111111111<br> 11111111111111111111<br> </div> </td> <td class="blockrightmiddle" style="background-color:#9DB8FD"></td> </tr> <tr> <td class="blockleftbottom" style="background-color:#333"></td> <td class="blockcenterbottom" style="background-color:#CCC"></td> <td class="blockrightbottom" style="background-color:#9DB8FD"></td> </tr> </table> </body> </html> P.S. Так же есть вариант замены {_height:expression(this.height = document.body.clientHeight-300 + 'px');} на {height:expression(this.height < 468? "468px":"auto");}.
  4. DDX
    klierik Спасибо за два варианта, я решил попробовать сделать на таблицах, но потом позже обязательно переделаю на блоки. Если експресион это строка как во втором примере div.ie6-wifth-fix {_height:expression(this.height = document.body.clientHeight-300 + 'px');} , то я вроде нашёл на этом сайте упоминание об этом, что это и как работает, читаю, и пытаюсь разобраться. Хотя странно почему этот способ написания стилей не поместили в общем списке свойств и параметров CSS. Кстати ошибка с шириной таблицы если не указать свойство и параметр в стилях table-layout:fixed появляется даже в IE7, я проверял. При этом начинает плыть весь левый столбик. Согласен, почва для раздумий есть как решать вопрос, а ты бы как его решил? Какой способ считаешь более правильным для такого случая? Вот мой код на данный момент. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> <style type="text/css"> BODY{ margin:0px; padding:0px; } .maintable{ table-layout:fixed; width:100%; height:100%; } .blocklefttop{ width:300px; max-width:300px; height:300px; } .blockcentertop{ width:724px; height:300px; } .blockrighttop{ height:300px; } .blockleftmiddle{ width:300px; max-width:300px; min-height:468px; } .blockcentermiddle{ width:724px; min-height:468px; } .blockrightmiddle{ min-height:468px; } .blockleftbottom{ width:300px; max-width:300px; height:70px; } .blockcenterbottom{ width:724px; height:70px; } .blockrightbottom{ height:70px; } .aalogo{ } .headtext{ position:absolute; top:11px; left:450px; right:90px; width:534px; font-style:normal; font-variant:normal; font-weight:bold; font-size:44px; font-family:Arial, Helvetica, sans-serif; color:#9DB8FD; } .tel{ position:absolute; top:55px; left:530px; right:225px; width:309px; font-style:normal; font-variant:normal; font-weight:bold; font-size:36px; font-family:Arial, Helvetica, sans-serif; color:#9DB8FD; } .email{ position:absolute; top:115px; left:570px; right:273px; width:201px; font-style:normal; font-variant:normal; font-weight:bold; font-size:20px; font-family:Arial, Helvetica, sans-serif; } .maincontent{ width:724px; min-height:468px; margin-left:0px; margin-top:20px; } .hmenu{ font-family:Arial, Helvetica, sans-serif; font-size:16px; width:724px; height:20px; position:absolute; z-index:100; left:300px; top:300px; } .hmenu ul li a, .hmenu ul li a:visited{ display:block; line-height:20px; text-decoration:none; width:101px; height:20px; text-align:center; border:1px solid #FFF; background:#7A6CDB; font-size:16px; overflow:hidden; color:#FFF; } .hmenu ul{ padding:0; margin:0; list-style:none; } .hmenu ul li{ float:left; position:relative; } .hmenu ul li ul{ display:none; } .hmenu ul li:hover a{ background:#FFF; color:#1E56A1; } .hmenu ul li:hover ul{ display:block; position:absolute; top:21; left:0; } .hmenu ul li:hover ul li a{ display:block; background:#1E56A1; color:#FFF; } .hmenu ul li:hover ul li a:hover{ background:#FFF; color:#1E56A1; } .vmenu { font-family:Arial, Helvetica, sans-serif; font-size:16px; position:absolute; z-index:100; left:50px; top:320px; width:200px; height:25px; } .vmenu ul li a, .vmenu ul li a:visited{ display:block; text-decoration:none; width:200px; height:25px; text-align:center; border:1px solid #FFF; background:#7A6CDB; font-size:16px; line-height:20px; overflow:hidden; color:#FFF; } .vmenu ul{ padding:0; margin:0; list-style:none; } .vmenu ul li{ position:relative; } .vmenu ul li ul{ display:none; } .vmenu ul li:hover a{ background:#FFF; color:#1E56A1; } .vmenu ul li:hover ul{ display:block; position:absolute; top:0; left:200px; } .vmenu ul li:hover ul li a{ display:block; background:#1E56A1; color:#FFF; } .vmenu ul li:hover ul li a:hover{ background:#FFF; color:#1E56A1; } </style> </head> <body> <table border="0" cellpadding="0" cellspacing="0" class="maintable"> <col><col><col> <tr> <td class="blocklefttop" style="background-color:#333"> <div class="aalogo"><img src="logo.png"></div> </td> <td class="blockcentertop" style="background-color:#CCC"> <div class="headtext">Заголовок сайта.....</div> <div class="tel">+7 (495) 123-45-67</div> <div class="email"><a href="mailto: info@mysite.ru" style="text-decoration:none; color:#9DB8FD" >info@mysite.ru</a></div> </td> <td class="blockrighttop" style="background-color:#9DB8FD"></td> </tr> <tr> <td class="blockleftmiddle" style="background-color:#333"> <div class="vmenu"> <ul> <li><a class="hide" href="11.html">1</a></li> <li><a class="hide" href="22.html">2</a></li> <li><a class="hide" href="33.html">3</a> <ul> <li><a href="1.html" title="">1</a></li> <li><a href="2.html" title="">2</a></li> <li><a href="3.html" title="">3</a></li> <li><a href="4.html" title="">4</a></li> <li><a href="5.html" title="">5</a></li> </ul> </li> <li><a class="hide" href="44.html">4</a></li> <li><a class="hide" href="55.html">5</a></li> <li><a class="hide" href="66.html">6</a></li> <li><a class="hide" href="77.html">7</a></li> </ul> </div> </td> <td class="blockcentermiddle" style="background-color:#CCC"> <div class="hmenu"> <ul> <li><a class="hide" href="11.html">1</a></li> <li><a class="hide" href="22.html">2</a></li> <li><a class="hide" href="33.html">3</a> <ul> <li><a href="1.html" title="">1</a></li> <li><a href="2.html" title="">2</a></li> <li><a href="3.html" title="">3</a></li> <li><a href="4.html" title="">4</a></li> <li><a href="5.html" title="">5</a></li> </ul> </li> <li><a class="hide" href="44.html">4</a></li> <li><a class="hide" href="55.html">5</a></li> <li><a class="hide" href="66.html">6</a></li> <li><a class="hide" href="77.html">7</a></li> </ul> </div> <div class="maincontent">11111111111111111111<br> 11111111111111111111<br> 11111111111111111111<br> 11111111111111111111<br> 11111111111111111111<br> </div> </td> <td class="blockrightmiddle" style="background-color:#9DB8FD"></td> </tr> <tr> <td class="blockleftbottom" style="background-color:#333"></td> <td class="blockcenterbottom" style="background-color:#CCC"></td> <td class="blockrightbottom" style="background-color:#9DB8FD"></td> </tr> </table> </body> </html> psywalker Да вот во всю уже раздумываю. А ты как считаешь какой способ было бы правильнее использовать для сайта? P.S. А вообще это ужас конечно когда приходится прописывать кучу ненужных свойств вроде table-layout, одновременного указания width и max-width как это пришлось делать в левой колонке, а иначе вёрстка плыла, ещё експресион. Потому что смотришь, вроде как всё правильно написал, а появляются ошибки. И главное ну никакой логики в этом нет, потому что какие могут быть ещё уточнения если заданы жёсткие размеры. Пишешь ширину одну для ячейки, а потом ещё будь любезен прописать максимальную ширину, потому что разработчикам браузеров закон не писан, вот ты хоть тресни, хоть весь мир там развались, и то что у ячейки указана жёсткая ширина 300 пикселей это ещё не повод обрабатывать её, как 300 пикселей.
  5. DDX
    psywalker Да, подвал должен быть всегда внизу. Да, середина должна вытягиваться на весь экран как минимум даже когда контента нет.
  6. DDX
    psywalker А тогда может хотя бы сможешь объяснить почему свойства, bottom, margin-bottom, padding-bottom не дают эфекта когда им ставить значение 0 пикселей для блоков 5, 6, ведь вроде должно быть всё нормально и они должны держаться внизу постоянно. Я максимум чего смог добиться это что они внизу держаться за счёт position:fixed , но они внизу только экрана браузера, а не сайта. Да и фиг с правой колонкой блоков 5, 7, 9. Мне бы только 5 и 6 прикрутить нормально, а то невозможно ведь получается ничего в блоках 3 и 4 разместить так, чтобы всё время контент внизу страницы сайта был, а не только экрана браузера. Код который я получил от klierik я разбираю, чтобы его понять, а не тупо скопировать. Получилось, что можно некоторые вещи удалить безболезнено. Вроде работает. Или он считается кривым? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> <style type="text/css"> * {margin:0; padding:0;} div.l-layout {width: 1024px;} div.l-case {} .leftup {float:left; width:300px; height:300px;} .centerup {height:300px; margin-left:300px;} .leftmiddle {float:left; width:300px; min-height:468px;} .centermiddle {min-height:468px; margin-left:300px;} .dawn .leftup, .dawn .centerup {height:30px;} </style> </head> <body> <div class="l-layout"> <div class="l-case"> <div class="leftup" style="background:#f00;"></div> <div class="centerup" style="background:#f0f;"></div> </div> <div class="l-case"> <div class="leftmiddle" style="background:#0f0;"></div> <div class="centermiddle" style="background:#00f;"></div> </div> <div class="dawn"> <div class="leftup" style="background:#ff0;"></div> <div class="centerup" style="background:#f00;"></div> </div> </div> </body> </html> Если найдёшь в себе силы рассказать каким образом блок l-case узнаёт каким образом ему позиционироваться друг за другом без указания margin, padding, left(right/top/bottom) и не сыпаться, а так же зачем, почему и для чего в блоке div можно прописывать одновременно два селектора и при этом код всё равно остаётся рабочим то буду крайне благодарен. Читаю всё время что на сайте пишут, но там таких примеров к сожалению нет.
  7. DDX
    psywalker То есть надо оставлять свой код и добавлять float как подсказывает klierik? Или ещё что то надо? Самое дурацкое что нижняя строка не хочет выравниваться да и колонка правая плывёт хотя везде этот float стоит. И ещё почему то нельзя указывать у центрального столбика нормально ширину, а только минимальную, если указать нормально ширину то блоки сужаются.
  8. DDX
    1 и 2 фиксированные размеры 3 и 4 фиксированно по горизонтали и эластично по вертикали 5 и 6 фиксированные размеры 7 и 9 фиксированно по вертикали и эластично по горизонтали 8 эластично по вертикали и горизонтали
  9. DDX
    psywalker Я не могу этого сделать, потому что блоки то не становятся туда куда мне нужно, как я скриншот то сделаю? klierik Посмотрел код, всё равно тяжко, пытаюсь его для себя приспособить, упростить. Тем более что мне нужно, чтобы документ был <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> , а не <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> <style type="text/css"> * {margin:0; padding:0;} /* layout */ div.l-layout {} div.l-case {} div.l-left {float:left; width:300px; height:300px;} div.l-right {height:300px; min-width:724px;} div.1-colup {height:300px; background-color:#0F3} div.l-left1 {float:left; width:300px; min-height:468px;} div.l-right1 {min-height:468px; min-width:724px;} div.1-colmiddle {min-height:468px; background-color:#0F3} div.1-left2 {float:left; width:300px; height:30px;} div.1-right2 {height:30px; width:724px;} div.1-coldown {height:30px; background-color:#0F3} </style> </head> <body> <!-- layout --> <div class="l-layout"> <div class="l-case"> <div class="l-left" style="background:#f00;"></div> <div class="l-right" style="background:#f0f;"></div> <div class="1-colup"></div> </div> <div class="l-case"> <div class="l-left1" style="background:#0f0;"></div> <div class="l-right1" style="background:#00f;"></div> <div class="1-colmiddle"></div> </div> <div class="l-case"> <div class="1-left2" style="background:#ff0;"></div> <div class="1-right2" style="background:#f00;"></div> <div class="1-coldown"></div> </div> </div> <!-- /layout --> </body> </html> Я там добавил ещё одну колонку справа, она будет появлятся когда размер экрана будет больше чем 1024 пикселя, но почему то она помещается под два других блока и выравнивание float не помогает вообще, хоть плач. А нижняя строка тоже почему то не выравнивается хотя свойство float используется. Пожалуйста помогите.
  10. DDX
    rus Хотелось бы всё таки решить проблему в рамках только свойства position, да и просто интересно, почему не срабатывает свойство когда вроде всё правильно прописанно. klierik С целью указания позиционирования блоков, просто без указания свойства position вёрстка ломается, я указал не весь код, чтобы не громоздить не нужное, если для полноты для решения нужно видеть весь код то вот. <!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=utf-8"> <title>Анатомия Авто</title> <style type="text/css"> BODY{ background-color:; background-image:url(); background-repeat:repeat-y; margin:0; width:1024px; } .main{ width:1024px; margin:0px; } .leftup{ position:absolute; width:300px; height:300px; left:0px; top:0px; } .centerup{ position:absolute; width:724px; height:300px; left:300px; top:0px; background-color:#CCC; } .leftmiddle{ position:absolute; width:300px; left:0px; top:300px; min-width:300px; min-height:468px; background-color:#333; } .centermiddle{ position:absolute; width:724px; left:300px; top:300px; min-width:724px; min-height:468px; background-color:#CCC; } .leftdown{ position:absolute; width:300px; height:30px; left:0px; bottom:0px; background-color:#F00; } .centerdown{ position:absolute; width:724px; height:30px; left:300px; background-color:#F00; } .autologo{ top:170px; left:300px; position:absolute; } a.active{ color:#666; } a.link{ color:#666; } a.visited{ color:#666; } .headtext{ position:absolute; top:11px; left:450px; right:90px; width:534px; font-style:normal; font-variant:normal; font-weight:bold; font-size:44px; font-family:Arial, Helvetica, sans-serif; color:#F00; } .tel{ position:absolute; top:55px; left:530px; right:225px; width:309px; font-style:normal; font-variant:normal; font-weight:bold; font-size:36px; font-family:Arial, Helvetica, sans-serif; color:#F00; } .email{ position:absolute; top:115px; left:570px; right:273px; width:201px; font-style:normal; font-variant:normal; font-weight:bold; font-size:20px; font-family:Arial, Helvetica, sans-serif; } .maintext{ position:absolute; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-style:normal; font-variant:normal; font-weight:normal; top:335px; left:350px; right:50px; width:624px; } .hmenu{ font-family:Arial, Helvetica, sans-serif; font-size:16px; width:724px; height:20px; position:absolute; z-index:100; left:300px; top:300px; } .hmenu ul li a, .hmenu ul li a:visited{ display:block; line-height:20px; text-decoration:none; width:101px; height:20px; text-align:center; border:1px solid #FFF; background:#1E56A1; font-size:16px; overflow:hidden; color:#FFF; } .hmenu ul{ padding:0; margin:0; list-style:none; } .hmenu ul li{ float:left; position:relative; } .hmenu ul li ul{ display:none; } .hmenu ul li:hover a{ background:#FFF; color:#1E56A1; } .hmenu ul li:hover ul{ display:block; position:absolute; top:21; left:0; } .hmenu ul li:hover ul li a{ display:block; background:#1E56A1; color:#FFF; } .hmenu ul li:hover ul li a:hover{ background:#FFF; color:#1E56A1; } .vmenu { font-family:Arial, Helvetica, sans-serif; font-size:16px; position:relative; z-index:100; left:50px; top:320px; width:200px; height:25px; } .vmenu ul li a, .vmenu ul li a:visited{ display:block; text-decoration:none; width:200px; height:25px; text-align:center; border:1px solid #FFF; background:#1E56A1; font-size:16px; line-height:20px; overflow:hidden; color:#FFF; } .vmenu ul{ padding:0; margin:0; list-style:none; } .vmenu ul li{ position:relative; } .vmenu ul li ul{ display:none; } .vmenu ul li:hover a{ background:#FFF; color:#1E56A1; } .vmenu ul li:hover ul{ display:block; position:absolute; top:0; left:200px; } .vmenu ul li:hover ul li a{ display:block; background:#1E56A1; color:#FFF; } .vmenu ul li:hover ul li a:hover{ background:#FFF; color:#1E56A1; } </style> </head> <body> <div class="main"> <div class="aalogo"><img src="logo.jpg"></div> <div class="leftup"></div> <div class="centerup"></div> <div class="leftmiddle"></div> <div class="centermiddle"></div> <div class="leftdown"></div> <div class="centerdown"></div> <div class="headtext">1234567890</div> <div class="tel">+7 (495) 000-00-00</div> <div class="email"><a href="mailto: info@mysite.ru" style="text-decoration:none; color:#F00" >info@mysite.ru</a></div> <div class="hmenu"> <ul> <li><a class="hide" href="1.html">1</a></li> <li><a class="hide" href="2.html">2</a></li> <li><a class="hide" href="3.html">3</a> <ul> <li><a href="11.html" title="">1</a></li> <li><a href="22.html" title="">2</a></li> <li><a href="33.html" title="">3</a></li> <li><a href="44.html" title="">4</a></li> <li><a href="55.html" title="">5</a></li> </ul> </li> <li><a class="hide" href="4.html">4</a></li> <li><a class="hide" href="5.html">5</a></li> <li><a class="hide" href="6.html">6</a></li> <li><a class="hide" href="7.html">7</a></li> </ul> </div> <div class="vmenu"> <ul> <li><a class="hide" href="1.html">1</a></li> <li><a class="hide" href="2.html">2</a></li> <li><a class="hide" href="3.html">3</a> <ul> <li><a href="11.html" title="">1</a></li> <li><a href="22.html" title="">2</a></li> <li><a href="33.html" title="">3</a></li> <li><a href="44.html" title="">4</a></li> <li><a href="55.html" title="">5</a></li> </ul> </li> <li><a class="hide" href="4.html">4</a></li> <li><a class="hide" href="5.html">5</a></li> <li><a class="hide" href="6.html">6</a></li> <li><a class="hide" href="7.html">7</a></li> </ul> </div> <div class="maintext"> <p>1111111111111111111111111111111111111111111<br> 1111111111111111111111111111111111111111111<br> 1111111111111111111111111111111111111111111<br> 1111111111111111111111111111111111111111111<br> 1111111111111111111111111111111111111111111<br></p> </div> </div> </body> </html> За свой пример спасибо, разбираюсь.
  11. DDX
    Всем привет! Такой вопрос. Ниже я выложил код, хочу, чтобы блоки leftdown и centerdown распологались под leftmiddle и centermiddle соответственно, однако ничего не получается, со свойством position я уже возился, разные параметры ставил, однако никак не получается из за того что блоки leftmiddle и centermiddle эластичные. Кто нибудь знает, вообще возможно такое сделать, что я хочу? Может подскажете какое нибудь свойство которое регулирует это действие. Памагите!!! <style type="text/css"> BODY{ background-color:; background-image:url(); background-repeat:repeat-y; margin:0; width:1024px; } .main{ width:1024px; margin:0px; } .leftup{ position:absolute; width:300px; height:300px; left:0px; top:0px; } .centerup{ position:absolute; width:724px; height:300px; left:300px; top:0px; background-color:#CCC; } .leftmiddle{ position:absolute; width:300px; left:0px; top:300px; min-width:300px; min-height:468px; background-color:#333; } .centermiddle{ position:absolute; width:724px; left:300px; top:300px; min-width:724px; min-height:468px; background-color:#CCC; } .leftdown{ position:absolute; width:300px; height:30px; left:0px; bottom:0px background-color:#F00; } .centerdown{ position:absolute; width:724px; height:30px; left:300px; background-color:#F00; } </style> <body> <div class="main"> <div class="leftup"></div> <div class="centerup"></div> <div class="leftmiddle"></div> <div class="centermiddle"></div> <div class="leftdown"></div> <div class="centerdown"></div> </div> </body>
  12. DDX
    Justnewone "Ах, как грубо. Если Вы не заметили, то я модератор этого раздела и мне совершенно не обязательно собственноручно прикоснуться к Вашему обучению." Да не уж то и впрямь грубо? Нет, не заметил, но судя по упоминанию об этом, это главное и ключевое слово, обычно об этом упоминают когда сказать уже совсем нечего. "Да, круто Вы сами, достойно. Половина советов тут - это разжевывание." Да, мы сами, я же ведь не пришёл со словами: "создайте мне страницу", - а лишь спросил помощи по сложному участку. Может и разжёвывание, но в чём собственно проблема то? Это нормально. Одни чего то знают, другие чего то не знают, одни могут помочь другим, по собственной воле, по собственной. И никто никого к этому не принуждает. Вот человек захотел мне помочь делом он и помог, а кто то захотел надавать общих советов, вместо конкретной помощи, которая как раз требовалась. "И далее, и я же не одинок. Обратите внимание. Что Вы только мне высказались?" Я высказываюсь тому кто является участником разговора. Какая мне необходимость высказываться кому то ещё? "PS: и не ТЫкайте мне, пожалуйста." Не хочешь, чтобы тыкали? Просто не обращайся ко мне. Это очень просто, никто ведь никого не принуждает помогать и разговаривать. Всё делается по собственному желанию.
  13. DDX
    Justnewone "Круто, это Вы называете "как только закончу", что за Вас тут тупо все делают другие люди. Прелестно, говорите и далее всем что "я новичек" и все, ключ к любой помощи." За меня этого пока никто не делает, это делаю я сам и в случае когда окончательно попадаю в тупиковую ситуацию то спрашиваю у знающих людей. Я говорю о том, что новичок, чтобы люди которые читают сообщения, примерно понимали мой уровень знания html/css. "Несмотря на советы, принципиального прогресса в освоении не видно." На какие советы? Пока что тут советы непосредственно по теме вопроса дал только один человек, в остальном же я слышу только предложения пойти учить дальше, а потом приходить и спрашивать. "Большая просьба, не нужно "начну осваивать на примерах" тут, попробуйте для начала пройти хотя бы тут "по шагам", чтобы общаться можно было более продуктивно и не разжевывать самые азы. Так, на будущее, от себя лично попросил." А ты разжёвывал самые азы? О какой продуктивности может быть речь если мы люди с разным опытом в познании данного языка? От себя просить стоит, если была продемонстрирована хоть какая то практическая помощь, а не общие советы о том, что надо продолжать учить язык. Searcher Почитаю.
  14. DDX
    Searcher "У вас стандартный 2-х колоночный сайт, это легко делается блоками, изучите способы верстки блоками:" Как только закончу с этим сайтом, то начну осваивать на примерах. panig "давай постепенно. вот ты код предоставил. 1. убери padding-bottom:325px; у vmenu в нем. 2. находишь меню и добавляешь у td class какой нравится smile.gif ну давай например class="td_vmenu". В css добавишь .td_vmenu {width: 724px; height: 391px; vertical-align: top;}. (пиши размеры в css!) пока такой способ тебе подойдет." Сделал, белое поле на чужих компьютерах исчезло, вертикальное меню поднялось. Всё работает. Но всё равно не понятно, почему у меня на компьютере всё работало и так, а у других поле вылезало. Насчёт того, что можно применять стиль в CSS не с тегом div или span не знал. Или знал, но забыл. Но тем не менее, xhtml пока что более сложен для меня, поэтому всё таки остановлюсь на обычном 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" /> <title>Документ без названия</title> <style type="text/css"> body { background-color:#FFF; background-image:url(main.JPG); background-repeat:no-repeat; margin:0; } .letter { color:#006; font-size:36px; font-family:Arial, Helvetica, sans-serif; } P { color:#333; font-size:18px; font-family:Arial, Helvetica, sans-serif; } a.active { color:#F00; } a.link { color:#080E44; } a.visited { color:#080E44; } .tel { margin-top:20px; margin-bottom:0px; margin-left:190px; font-style:normal; font-variant:normal; font-weight:bold; font-size:36px; font-family:Arial, Helvetica, sans-serif; color:#080E44; } .email { margin-top:17px; margin-bottom:130px; margin-left:270px; font-style:normal; font-variant:normal; font-weight:bold; font-size:20px; font-family:Arial, Helvetica, sans-serif; color: #080E44; } .maintext { margin-left:50px; margin-right:50px; } .hmenu { font-family:Arial, Helvetica, sans-serif; font-size:16px; width:724px; height:20px; position: absolute; z-index:100; top:300px; left:300px; } .hmenu ul li a, .hmenu ul li a:visited{ display:block; line-height:20px; text-decoration:none; width:101px; height:20px; text-align:center; border:1px solid #FFF; background:#1E56A1; font-size:16px; overflow:hidden; color:#FFF; } .hmenu ul{ padding:0; margin:0; list-style:none; } .hmenu ul li{ float:left; position:relative; } .hmenu ul li ul{ display:none; } .hmenu ul li:hover a{ background:#FFF; color:#1E56A1; } .hmenu ul li:hover ul{ display:block; position:absolute; top:21; left:0; } .hmenu ul li:hover ul li a{ display:block; background:#1E56A1; color:#FFF; } .hmenu ul li:hover ul li a:hover{ background:#FFF; color:#1E56A1; } .vmenu { font-family:Arial, Helvetica, sans-serif; font-size:16px; position:relative; z-index:100; margin:0px; padding-left:50px; width:200px; height:25px; } .vmenu ul li a, .vmenu ul li a:visited{ display:block; text-decoration:none; width:200px; height:25px; text-align:center; border:1px solid #FFF; background:#1E56A1; font-size:16px; line-height:20px; overflow:hidden; color:#FFF; } .vmenu ul{ padding:0; margin:0; list-style:none; } .vmenu ul li{ position:relative; } .vmenu ul li ul{ display:none; } .vmenu ul li:hover a{ background:#FFF; color:#1E56A1; } .vmenu ul li:hover ul{ display:block; position:absolute; top:0; left:200px; } .vmenu ul li:hover ul li a{ display:block; background:#1E56A1; color:#FFF; } .vmenu ul li:hover ul li a:hover{ background:#FFF; color:#1E56A1; } .main{ width:1024px; height:768px; } .td_vmenu{ width:300px; height:391px; vertical-align:top; } </style> </head> <body> <div class="main"> <table width="1024" height="768" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="300" height="300"> </td> <td width="724" height="300"><div class="tel">+7 (495) хххххххххх</div><div class="email"><a href="mailto: info@ххххххххххх.ru">info@хххххххххххх.ru</a></div></td> </tr> <tr> <td class="td_vmenu" width="300" height="391"> <div class="vmenu"> <ul> <li><a class="hide" href="">Главная</a></li> <li><a class="hide" href="">О компании</a></li> <li><a class="hide" href="">Прайс</a> <ul> <li><a href="" title="">CHEVROLET</a></li> <li><a href="" title="">CADILLAC</a></li> <li><a href="" title="">OPEL</a></li> <li><a href="" title="">SAAB</a></li> <li><a href="" title="">HUMMER</a></li> </ul> </li> <li><a class="hide" href="">Оплата</a></li> <li><a class="hide" href="">Доставка</a></li> <li><a class="hide" href="">Контакты</a></li> <li><a class="hide" href="">Новости</a></li> </ul> </div> </td> <td width="724" height="391"> <div class="hmenu"> <ul> <li><a class="hide" href="">Главная</a></li> <li><a class="hide" href="">О компании</a></li> <li><a class="hide" href="">Прайс</a> <ul> <li><a href="" title="">CHEVROLET</a></li> <li><a href="" title="">CADILLAC</a></li> <li><a href="" title="">OPEL</a></li> <li><a href="" title="">SAAB</a></li> <li><a href="" title="">HUMMER</a></li> </ul> </li> <li><a class="hide" href="">Оплата</a></li> <li><a class="hide" href="">Доставка</a></li> <li><a class="hide" href="">Контакты</a></li> <li><a class="hide" href="">Новости</a></li> </ul> </div> <div class="maintext"><p>«<span class="letter">Х</span>хххххххххххххххххххххххххххххххххххххххххххххххх</p> <p><span class="letter">Х</span>ххххххххххххххххххххххххххххххххххххххххххххххххххххххххххх</p></div></td> </tr> <tr> <td height="77" width="300"> </td> <td height="77" width="724"> </td> </tr> </table> </div> </body> </html> Searcher "Это не фокус, это единственно верное. Все размеры задаются через стили. Вы как-будто читаете только часть того, что вам пишут. Я же четко написал html - только структура данных, без визуального оформления вообще! А css - все оформление этой структуры данных." Я уже говорил, что новичок и могу многие вещи не знать, и не понимать, по мере возможностей стараюсь освоить. Читаю я всё, что пишут. "Задаете класс этой ячейке, а в стилях уже описываете этот класс, вы же уже все так делаете, а тут почему-то не понимаете..." Я не знал, что так можно делать, читал, что стили в CSS применяются для тегов div и span. "это что такое??? между <tr> и <td> ничего не должно быть" Ну это я от безысходности. Ничего другого в голову не пришло. Я понимал, что так нельзя, но вдруг можно, я ведь не всё ещё знаю в вёрстке.
  15. DDX
    "Ну да, можете например через стили задать width: 955px; height: 768px;" Толково, потом попробую такой фокус. "вообще-то vertical-align: top; нужно прописать через стили НЕ у блока с классом vmenu а у td в который вложено все меню. Тогда оно должно подняться." Не совсем понимаю как можно прописать стиль только для одного тега td, только для одной ячейки. Попробовал так сделать, вот, что получилось. У меня то на компе всё нормально, а у остальных поле вылезает. Там поставил кроме того общий тег div, нижним ячейкам задал ширину и недостающие 7 пикселей высоты, у параметра BODY в CSS сменил с буквы с заглавных на строчные, читал, что xhml работает только со строчным кодом HTML, о CSS ничего сказано не было, но на всякий случай уменьшил их. <!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" /> <title>Документ без названия</title> <style type="text/css"> body { background-color:#FFF; background-image:url(main.JPG); background-repeat:no-repeat; margin:0; } .letter { color:#006; font-size:36px; font-family:Arial, Helvetica, sans-serif; } P { color:#333; font-size:18px; font-family:Arial, Helvetica, sans-serif; } a.active { color:#F00; } a.link { color:#080E44; } a.visited { color:#080E44; } .tel { margin-top:20px; margin-bottom:0px; margin-left:190px; font-style:normal; font-variant:normal; font-weight:bold; font-size:36px; font-family:Arial, Helvetica, sans-serif; color:#080E44; } .email { margin-top:17px; margin-bottom:130px; margin-left:270px; font-style:normal; font-variant:normal; font-weight:bold; font-size:20px; font-family:Arial, Helvetica, sans-serif; color: #080E44; } .maintext { margin-left:50px; margin-right:50px; } .hmenu { font-family:Arial, Helvetica, sans-serif; font-size:16px; width:724px; height:20px; position: absolute; z-index:100; top:300px; left:300px; } .hmenu ul li a, .hmenu ul li a:visited{ display:block; line-height:20px; text-decoration:none; width:101px; height:20px; text-align:center; border:1px solid #FFF; background:#1E56A1; font-size:16px; overflow:hidden; color:#FFF; } .hmenu ul{ padding:0; margin:0; list-style:none; } .hmenu ul li{ float:left; position:relative; } .hmenu ul li ul{ display:none; } .hmenu ul li:hover a{ background:#FFF; color:#1E56A1; } .hmenu ul li:hover ul{ display:block; position:absolute; top:21; left:0; } .hmenu ul li:hover ul li a{ display:block; background:#1E56A1; color:#FFF; } .hmenu ul li:hover ul li a:hover{ background:#FFF; color:#1E56A1; } .vmenu { font-family:Arial, Helvetica, sans-serif; font-size:16px; position:relative; z-index:100; margin:0px; padding-left:50px; padding-bottom:325px; width:200px; height:25px; } .vmenu ul li a, .vmenu ul li a:visited{ display:block; text-decoration:none; width:200px; height:25px; text-align:center; border:1px solid #FFF; background:#1E56A1; font-size:16px; line-height:20px; overflow:hidden; color:#FFF; } .vmenu ul{ padding:0; margin:0; list-style:none; } .vmenu ul li{ position:relative; } .vmenu ul li ul{ display:none; } .vmenu ul li:hover a{ background:#FFF; color:#1E56A1; } .vmenu ul li:hover ul{ display:block; position:absolute; top:0; left:200px; } .vmenu ul li:hover ul li a{ display:block; background:#1E56A1; color:#FFF; } .vmenu ul li:hover ul li a:hover{ background:#FFF; color:#1E56A1; } .td{ vertical-align:top; } .main{ width:1024px; height:768px; } </style> </head> <body> <div class="main"> <table width="1024" height="768" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="300" height="300"> </td> <td width="724" height="300"><div class="tel">+7 (495) хххххххххх</div><div class="email"><a href="mailto: info@ххххххххххх.ru">info@хххххххххххх.ru</a></div></td> </tr> <tr> <div class="td"> <td width="300" height="391"> <div class="vmenu"> <ul> <li><a class="hide" href="">Главная</a></li> <li><a class="hide" href="">О компании</a></li> <li><a class="hide" href="">Прайс</a> <ul> <li><a href="" title="">CHEVROLET</a></li> <li><a href="" title="">CADILLAC</a></li> <li><a href="" title="">OPEL</a></li> <li><a href="" title="">SAAB</a></li> <li><a href="" title="">HUMMER</a></li> </ul> </li> <li><a class="hide" href="">Оплата</a></li> <li><a class="hide" href="">Доставка</a></li> <li><a class="hide" href="">Контакты</a></li> <li><a class="hide" href="">Новости</a></li> </ul> </div> </td> </div> <td width="724" height="391"> <div class="hmenu"> <ul> <li><a class="hide" href="">Главная</a></li> <li><a class="hide" href="">О компании</a></li> <li><a class="hide" href="">Прайс</a> <ul> <li><a href="" title="">CHEVROLET</a></li> <li><a href="" title="">CADILLAC</a></li> <li><a href="" title="">OPEL</a></li> <li><a href="" title="">SAAB</a></li> <li><a href="" title="">HUMMER</a></li> </ul> </li> <li><a class="hide" href="">Оплата</a></li> <li><a class="hide" href="">Доставка</a></li> <li><a class="hide" href="">Контакты</a></li> <li><a class="hide" href="">Новости</a></li> </ul> </div> <div class="maintext"><p>«<span class="letter">Х</span>хххххххххххххххххххххххххххххххххххххххххххххххх</p> <p><span class="letter">Х</span>ххххххххххххххххххххххххххххххххххххххххххххххххххххххххххх</p></div></td> </tr> <tr> <td height="77" width="300"> </td> <td height="77" width="724"> </td> </tr> </table> </div> </body> </html> Justnewone и Searcher Ну я естественно ещё и CSS параллельно осваиваю, иначе бы я страницу только средствами 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

  I accept