Jump to content

DDX

User
 View Profile  See their activity

  • Posts

    37

  • Joined

  • Last visited

 Content Type 

Everything posted by DDX

  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 делал.
  16. DDX
    panig "1. да, сейчас этот тег есть. так удобней кажется. если что и выровнять по центру можно smile.gif ну в общем так." Да, я не подумал о необходимости этого тега, у меня небольшой совсем опыт в html/css и я не знал можно ли вкладывать один тег div в другой, но я честно говоря в данном конкретном случае не вижу удобства, ничего же не изменилось, а остальные теги div иметь ведь своё позиционирование на странице, у них ведь и так отступы от краёв заданы. Или смысл в этом теге был, что он позволяет ограничить размеры страницы? "2. во втором варианте. выравнивание у td вот свойством vertical-align: top;" Только это не второй, а третий вариант, ну не суть. Убрал padding-bottom:325px, поставил vertical-align: top, теперь вижу следующее, нижнее белое поле исчезло, но вертикальное меню упало на середину ячейки таблицы в которую заключено. Вопрос, зачем мне это? Или необходимо теперь другими тегами его обратно поднимать? "3. ну доктайп создает некие правила, правильно так скажем. если начали делать по правилам зачем их отменять и сделать так «чтоб работало». Просто нужно найти ошибку в коде. " Я новичок, я новичок, я новичок, я новичок. Сколько раз повторить стоит? Я прочитал о спецификациях HTML и XHTML и понял, что XHTML подходит скорее более продвинутым, более знающим, более опытным пользователям поскольку имеет более жёсткие правила вёрстки и является переходным этапом к XML, и скорее всего новичкам не подходит. Я и на HTML то не умею верстать, вот только начал, а мне предлагается продолжить работу с XHTML, зачем? Ведь лучше же от простого к сложному, а не наоборот. Сначала освоим HTML, а потом продолжим по нарастающей, перейдём на XHTML.
  17. DDX
    panig "В вашем коде нет никакого блока чтобы все элементы объединить. кстати." А зачем все элементы объединять и что за блок нужен? Код должен так выглядеть? <!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:#FFF; background-image:url(main.JPG); background-repeat:no-repeat; margin:0; width:1024px; height:768px; } .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{ position:absolute; top:55px; left:490px; font-style:normal; font-variant:normal; font-weight:bold; font-size:36px; font-family:Arial, Helvetica, sans-serif; color:#080E44; } .email{ position:absolute; top:115px; left:550px; font-style:normal; font-variant:normal; font-weight:bold; font-size:20px; font-family:Arial, Helvetica, sans-serif; color:#080E44; } .maintext{ position:absolute; top:335px; left:350px; right:50px; width:624px; height:348px; } .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; } .main{ width:1024px; height:768px; margin:0px; } </style> </head> <body> <div class="main"> <div class="tel">+7 (495) xxxxxxxxxxxxx</div> <div class="email"><a href="mailto: info@xxxxxxxxxxxx.ru">info@xxxxxxxxxxxxxx.ru</a></div> <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="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> <div class="maintext"><p>«<span class="letter">X</span>»xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> <p><span class="letter">X</span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div> </div> </body> </html> "а чтобы убрать внизу «белое» нужно у блока с классом vmenu убрать padding-bottom:325px; и сделать выравнивание по вертикали top." В каком из вариантов кода? "а это, простите, чушь. " Что конкретно чушь?
  18. DDX
    Проблема решена! Загвоздка во первых заключалась в том, что оказывается я использовал вместо XHTML вместо более простого HTML. Дримвьювер по умолчанию предлагает создать страницу именно в этом языке, а, чтобы выбрать HTML 4 Strict необходимо зайти в меню Файл => Создать и там уже указав формат документа HTML выбрать его нужную разновидность в выпадающем списке, а во вторых после того как я вчера заменял доктайп с XHTML на HTML то не заметил, что в документе XHTML тег <html> имеет дополнительный параметр, а именно <html xmlns="http://www.w3.org/1999/xhtml">, если убрать дополнительный параметр, то всё начинает превосходно работать. До этого правда тоже всё превосходно работало, но были почему то проблемы с нижнем полем на чужих компьютерах. Теперь всё отлично. Опробовано на версии где вёрстка производилась тегом div, без использования table.
  19. DDX
    gesandte "Имеется ввиду если делать вообще без таблиц, а показывать я тебе нечиго не обязан, так что ты не зарывайся" Обязан, просто обязан, если не хочешь показать свою голословность и бессмысленность сообщения. "На ul можно повесить все то же самое что и на div wink.gif" А смысл? Особенно в данном конкретном случае. "Один хрен какой там вариант смотреть, смыл одинаков" Там разные варианты, в первом вообще нет td. panig "разрешение 1024x768 пишется же не width="1024px" а width="955px". Я всегда так делал. " А почему 955 пикселей? Это за минусом панели задач win и окна браузера? Searcher "Совершенно не понимаю, что за поле у вас там вылезает?" От нижней границы фонового изображения, до нижней границы браузера вылезает белое поле, это начало появляться после того как добавил код вертикального и горизонтального меню. На скриншотах пример того как должно быть (так оно у меня на компьютере, в дримвьювере и браузерах) и как оно не должно быть (на чужих компьютерах и если открывать через локальную сеть с общей папки). "Возникло ощущение, что вы просто делаете фиксированную высоту под размер окна броузера, и не понимаете, что размеры окна броузера могут быть у всех совершенно разные, особенно, если другое разрешение экрана." Да, я делаю страничку с фиксированными размерами, насчёт того, что разрешение и размер окна у всех могут быть разными я понимаю, просто хочу сделать сайт под разрешение 1024х768 пикселя. Немного правда ошибся насчёт разрешения когда почему то решил, что страница 1024х768 пикселя будет полностью отображаться на мониторе с разрешением 1024х768 пикселя.
  20. DDX
    Я не понимаю как так вышло, но задавал я точно таблицу 1024х768 и почему тогда она идеально ложиться на границы заднего плана? Хотя конечно там в параметре всей таблицы указано 768, но почему тогда не указывается, в каком месте автоматом приплюсовывают пиксели. Добавил я эти 7 пикселей к нижней строке таблицы, не помогло, всё равно белое поле на чужих компьютерах вылезает. "div и td, если нормально делать, здесь не нужны. Все параметры можно на ul повесить" Ок, а почему ты рассматриваешь только последний вариант? Я же там написал, что код скорее всего наиболее кривой из всех трёх вариантов. Я ведь сделал всё без тега table, таблицы, потом, используя тег div. А теперь по существу, какие параметры можно повесить на ul? Я не давно начал изучать HTML/CSS и не видел таких примеров. Каким образом можно обойтись и без td и без div? Не будь голословным и покажи как можно это было бы сделать. Мне интересно какой третий вариант есть. Не видел ещё пока таблиц без тега td.
  21. DDX
    "Да, табличная основа верстки уже себя изжила." А вроде как есть мнение, что табличная вёрстка допустима. Иногда она позволяет сделать страницу проще чем при применении тега div. "Ну и первое, что бросается в глаза. Атрибут height для таблицы при вашем доктайпе игнорируется всеми броузерами полноценно поддерживающими стандарты." А где это можно посмотреть, что атрибут height при таком доктайпе игнорируется всеми браузерами? Что в нём не так? Игнорирование началось только после добавления горизонтального и вертикального меню после таблицы, до этого всё корректно отображалось. "С ИЕ как всегда полный бардак, где-то поддерживает, где-то по-своему все понимает... Сумма высот строк = 761. При игнорировании атрибута высоты таблицы высота складывается из высот ячеек, отсюда лишние 7 пикселей будут вылезать." С браузерами проблема только на других компьютерах, на моём компьютере все браузеры корректно всё отображают. "Никогда не используйте редакторы по типу WYSIWYG! Дримвьювер с вашим уровнем знаний настоятельно рекомендую не использовать. Пишите все ручками в Notepad++ например. Вы не представляете как плохо выглядит ваш код. Там столько хрени всякой..." Чем плохи визуальные редакторы? Можно сразу же видеть конечный результат работы, мне удобен дримвьювер потому что сразу виден результат, потому что не требуется постоянно тупо набивать по нескольку раз подряд одни и те же теги, параметры, проверять все ли скобки закрыты, это очень удобно, больше времени остаётся непосредственно не на проверку кода от глупых ошибок, а на практические действия. Вот если бы у меня были хорошие знания в HTML/CSS то я бы может и отказался от дримвьювера и сидел бы в одном блокноте плюс плюс, может я тогда бы сразу представлял как будет выглядеть страница, а в данный момент мне гораздо удобней визуальным редактором пользоваться. Мой код плохо выглядит? Что там необходимо изменить, оптимизировать? Какой именно хрени? Памагите!!! _ Прочитал на htmlbook и в википедии о различии в спецификациях xHTML (который как оказалось я использую), и HTML. Интересно. Сменил доктайп тот, что был на новый, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, не помогло. Белое поле всё равно вылезает если открывать страничку на других компьютерах или если открывать на моём, но из папки расположенной на сетевом ресурсе. Ну может быть тут хоть кто нибудь знает чем можно помочь в такой ситуации, может у кого похожие случаи были. Памагите!!! _ Сменил доктайп на <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">, не помогло. Пересчитал высоту таблицы, ну вот как так может быть? Я задавал размеры по высоте 768, а таблица создалась с высотой 761. А самое главное, что я вот уменьшил в визуальном режиме масштаб страницы с наложенной на неё таблицей, вот картинка заднего фона 1024х768 пикселя, я несколько раз перепроверил только что, а таблица 1024х761 пиксель и ОНИ В ГРАНИЦАХ СХОДЯТСЯ! Накладываются в акурат один к одному, то есть по цифрам размеры разные, а когда накладываются то оказывается, что размеры их равны!!!
  22. DDX
    А если попробовать это делать на VBS, то нормально получится? Мне кажется визуал бейсик (скрипт) проще будет в освоении, я как то давно ставил его, покрутил чего то, простенькие вещи получаются вроде, мне кажется меню на нём слепить не сложно будет.
  23. DDX
    "DDX, а как вы, для начала, собираетесь сообщить вашим потенциальным клиентам, которые привыкли, лазя в инете и набирая все на английском, что теперь им нужно по русски название сайта вводить? Объявления на столбах клеить будете?" А почему такое мнение, что все слова набирают на английском? Кроме того когда в поисковую машину будет вбит запрос и она выдаст список сайтов отвечающих запросу максимально близко, то человек попадёт на сайт по ссылке и ему ничего не потребуется вводить, а, чтобы при последующем посещении ввести название сайта, на русском языке, в адресной строке, я думаю семи пядей во лбу иметь для этого не потребуется. Проблема с кириллическими доменами высосана из пальца. Если поисковые системы будут индексировать сайты с кириллическими доменами, если браузеры будут нормально воспринимать кириллические символы при вводе в адресную строку, если будут виртуальные клавиатуры, то всё будет нормально. Ну если же создадут англоязычные аналоги кириллических доменов как это есть в зоне .SU например то я вообще проблем не вижу, я не помню как это называется, но там кириллический домен имеет аналог в англоязычной раскладке и представляет мало понятный со стороны код.
  24. DDX
    Жаль, а то я JS вообще не знаю, вот и пришлось делать меню на HTML/CSS.
  25. DDX
    "Наврядли для физ. лиц будут такие цены" Ну если цены упадут то только плюс будет, будем ждать, во всяком случае ру центр и центрхост уже сейчас более менее нормальные цены дают, у центрхоста вообще 1150 руб. "Очень плохая идея. Представь китайский сайт. Как ты попадешь на него, если адрес нужно писать на китайском? И не надо говорить, что кому это надо. Даже у меня был один такой случай, когда надо было попасть на китайский сайт." Очень хорошая идея, имел я в виду в большинстве случаев китайские сайты, это право граждан страны создавать домены на национальных языках, не нравится?... не можешь набрать на клавиатуре?... это только твои проблемы,... опять же можно сделать виртуальную клавиатуру и не париться, те кто не видит перспектив у таких сайтов просто мыслят не в перспективе. У меня например *нет желания, нет возможности, нет необходимости* (на выбор) делать сайт с англоязычным доменом. Это моё право и я им пользуюсь, а то, что кто то ко мне сайт не попадёт, в ком собственно мне нет никакой необходимости, так то мне безразлично. Вот простой пример, у меня интернет магазин, я торгую только по своему городу и дальше не суюсь, по каким причинам это не важно это уже мелочи, так вот меня мало будет волновать, что какой то житель китая или какой то другой страны не сможет набрать в адресной строке адрес моего сайта, я всё равно не смогу продать свой товар или услугу этому человеку. И в конце концов есть виртуальные клавиатуры. Опять же можно приобрести англоязычный домен для этого сайта если есть необходимость облегчить участь иностранных пользователей. А жителей русскоговорящих стран эта проблема должна волновать меньше всего, особенно владельцев сайтов которые позиционируют свои сайты как локальные.
×
×
  • 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