tigerpvr
-
Posts
4 -
Joined
-
Last visited
tigerpvr's Achievements
Explorer (1/14)
0
Reputation
-
Три колонки, вторая - в центре, и имеет фиксированную ширину
tigerpvr replied to tigerpvr's question in HTML Coding
СПасибо! Чисто из спортивного интереса - можно ли было бы решить данную задачу с помощью таблиц? (3 ячейки, центральная имеет фиксированную ширину и в центре экрана) -
Три колонки, вторая - в центре, и имеет фиксированную ширину
tigerpvr replied to tigerpvr's question in HTML Coding
К сожалению, не все проблемы до конца решились. При сильном уменьшении ширины окна браузера центральный блок смещается под левый, и все становится ужасно. В примере, любезно предложенном psywalker, такого безобразия почему-то нет. Вот мой код: <!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: #fff url(img/gradient.png) repeat-x; padding: 0; margin: 0; } div.top_box { /* контейнер */ position: relative; z-index: 1; } div.top_left { /* контейнер для левой части */ float: left; width: 50%; height: 300px; } div.top_left div { /* собственно, левая часть */ margin-right: 400px; background: url(img/top-left.png) top right repeat-x; height: 300px; } div.top_center { /* центр */ float: left; position: relative; z-index: 2; width: 800px; height: 300px; background: url(img/top-center.png) top center no-repeat; margin-left: -400px; } div.top_right { /* контейнер для правой части */ float: right; width: 50%; margin-left: -400px; height: 300px; } div.top_right div { /* собственно, правая часть */ margin-left: 400px; background: url(img/top-right.png) top left repeat-x; height: 300px; } </style> </head> <body> <div class="top_box"> <div class="top_left"> <div>Левая часть</div> </div> <div class="top_center"> <div>Центр</div> </div> <div class="top_right"> <div>Правая часть</div> </div> </div> </body> </html> Это происходит тогда, когда ширина окна браузера становится меньше ширины, которую имеет центральный фиксированный слой - 800 пикселей. -
Три колонки, вторая - в центре, и имеет фиксированную ширину
tigerpvr replied to tigerpvr's question in HTML Coding
Да, спасибо! Сработало! -
Три колонки, вторая - в центре, и имеет фиксированную ширину
tigerpvr posted a question in HTML Coding
Нужно сделать так, чтобы центральный слой имел фиксированную ширину (например, 800px), а 2 других обтекали его слева и справа, заполняя оставшееся место в окне браузера. Никак не получается, наверно из-за погоды. body { /* стиль всего документа */ background: #fff url(img/gradient.png) repeat-x; padding: 0; margin: 0; } div.top_center { background: url(img/top-center.png) top center no-repeat; width: 800px; height: 300px; margin: 0 auto; } div.top_left { float: left; background: url(img/top-left.png) top right repeat-x; height: 300px; } div.top_right { float: right; background: url(img/top-right.png) top left repeat-x; height: 300px; } Не знаю, зачемя это пишу, ничего же не получилось. Документ: <!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> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="top_left"> </div> <div class="top_center"> </div> <div class="top_right"> </div> </body> </html> Центральный блок отображается как и задумано, а левого и правого вообще нет.