Jump to content

Master of Code

Newbie
 View Profile  See their activity

  • Posts

    5

  • Joined

  • Last visited

 Content Type 

Everything posted by Master of Code

  1. Master of Code
    И так, ситуация вот первоначальный генерируемый код (во много раз упрощенный, но сути не меняет). Соданные элементы получают размер и параметр обтекания справа: <!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>Untitled Document</title> <style type="text/css"> <!-- .div1 { height:150px; width:150px; border:1px solid #000000; float:left; margin:5px; } .div2 { height:50px; width:50px; border:1px solid #00ff00; } --> </style></head> <body> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> </body> </html> И так, затем нам нужно внетренный квадрат расположить посередине, добавляем относительное позиционирование. Все бы хорошо, но я получаю вот такой эффект как на втором куске кода в этом моем посте, то есть при динамическом изменении размеров одного блока - http://forum.htmlbook.ru/index.php?showtopic=10122 проблему решает если назначить каждому маленькому блоку абсолютное позиционирование, получается эффект наложения на другие элементы, но это допустимо: <!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>Untitled Document</title> <style type="text/css"> <!-- .div1 { height:150px; width:150px; border:1px solid #000000; float:left; margin:5px; } .div2 { height:50px; width:50px; border:1px solid #00ff00; position: absolute; } --> </style></head> <body> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> <div class="div1"><div class="div2"></div></div> </body> </html> казалось бы, вот оно, счастье, но.... квадрат то нужен посередине, ну мы его и двигаем на 50 пикселей в право добавив в класс div2 left:50px; не буду постить весь код с одним изменением, просто добавьте в последний смещение на 50 пикселей. причем что самое интересное, блоки собираются в кучку только на одной строке, то есть по горизонтали, по вертикали они нормально располагаются. вот и вопрос, как быть, может стоит не дивами играться, а в табличку запихнеть? вариант с изменением кода и с выводом в таблицу не проходит по ТЗ, потому как количество элементов на строке должно варьироваться в зависимости от размеров окна
  2. Master of Code
    под словами начинают двигаться я имел ввиде начинаю их позиционировать, то есть смещать от стартового их положения в ту или иную сторону, с помощью left, right ....
  3. Master of Code
    Други, вновь за помощью спешу к вам. Ситуация такая нужно к множественным элементам, которые генерируются и имеют один класс применить абсолютное позиционирование, это получается, но вот проблема в том, что когда они начинают двигаться с помощью left, right.... т .п. то они собираются в одну кучку, причем относительное не потоходит по причине того что динамический элемент расширяет границы блока и верстка едет. подскажите как быть?
  4. Master of Code
    я уже демал над этим, но ведь тогда получается что размер будет меняться у всех контейнеров, что будет совсем не красиво, может есть еще какие нить варианты?
  5. Master of Code
    Друзья, в общем не знаю можно ли сделать что нибудь с этим или нет но примерно опишу что нужно. В общем есть скрипт, скрипт выводит элементы на экран в контейнере DIV, понятное дело что каждый новый ДИВ переносится на новую строку. Я делаю float:left; тем самым добиваясь размещения на одной строке и переноса на следующую всех не поместившихся. Все бы было отлично если бы не одно НО. В каждом контекнере есть активные элементы, по просту добавляющие элементы формы, тем самым раздвикая мой контейнер (только один!) по высоте, отсюда получается что те контейнеры что были внизу, на второй строчке переносятся дальше, начиная с того, чья высота была изменена. вот код гогда все элементы постоянны по размерам: <!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>Untitled Document</title> </head> <body> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> </body> </html> а вот если например 4-й элемент имеет большую высоту чем остальные <!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>Untitled Document</title> </head> <body> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:180px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> </body> </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>Untitled Document</title> </head> <body> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:180px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="clear:both"></div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> <div style="float:left; width:150px; height:150px; margin:5px; border:#000000 solid 1px;">blah-blah-blah</div> </body> </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