Верстка

[Lucifer]

Здравствуйте!

Подскажите как сделать верстку трех колонок по вертикали?

А то весь день сижу мучаюсь они у меня друг под друга заезжают или выстраиваются по горизонтали.

Верстаю с помощью <div> пытаюсь выравнять при помощи float:left.

[Softlink]

Lucifer, а искать-то пробовали сами?

[sigma77]

http://htmlbook.ru/samlayout/tipovye-makety/fiksirovannyi-trekhkolonochnyi-maket

http://htmlbook.ru/samlayout/tipovye-makety/rezinovyi-trekhkolonochnyi-maket

[Lucifer]

Lucifer, а искать-то пробовали сами?

Да!Вы просто не поняли, что мне нужно.

Вот в ссылке,которую вы скинули макет "Фиксированная ширина, три колонки", вот грубо говоря мне нужно эти колонки друг под друга засунуть.

[Softlink]

Lucifer, а искать-то пробовали сами?

Да!Вы просто не поняли, что мне нужно.

Вот в ссылке,которую вы скинули макет "Фиксированная ширина, три колонки", вот грубо говоря мне нужно эти колонки друг под друга засунуть.

Нарисуйте, что вам надо сделать.

[Lucifer]

Lucifer, а искать-то пробовали сами?

Да!Вы просто не поняли, что мне нужно.

Вот в ссылке,которую вы скинули макет "Фиксированная ширина, три колонки", вот грубо говоря мне нужно эти колонки друг под друга засунуть.

Нарисуйте, что вам надо сделать.

Прям на шаблоне разметил.

[MC WEST]

Добавьте всем блокам clearfix. Что это такое почитайте в интернете.

[belash911]

обедени div-и в один div

<div>
      <div>  </dv>
      <div>  </div>
       <div> </div>
</div>

поставь размер в главном диве и верстай далее

[Lucifer]

обедени div-и в один div

<div>
      <div>  </dv>
      <div>  </div>
       <div> </div>
</div>

поставь размер в главном диве и верстай далее

пробывал. получалось ,что второй блок под первый заезжал.((

[Softlink]

Вот, буквально вчера сверстал макет. Там слева есть сайдбар, в котором блоки располагаются как вам надо. И belash911 вам верное решение подсказал. Вам float не нужен совсем.

[Lucifer]

всё равно не получается((

Кто может помочь посмотреть исходники?

[Softlink]

всё равно не получается((

Кто может помочь посмотреть исходники?

Ссылка есть?

Можно сюда залить ваш код http://jsfiddle.net/

[Lucifer]

всё равно не получается((

Кто может помочь посмотреть исходники?

Ссылка есть?

Можно сюда залить ваш код http://jsfiddle.net/

Так сделал?

сайт

[Softlink]

Так сделал?

сайт

Ну вы там нагородили.

Вот вроде работает как надо. Посмотрите у себя. Html не трогал, только стили поправил.

[Lucifer]

Так сделал?

сайт

Ну вы там нагородили.

Вот вроде работает как надо. Посмотрите у себя. Html не трогал, только стили поправил.

не помогло.

Давайте я вам пожалуйста на почту папку скину вы гляните?

[Softlink]

Lucifer, я бы может и глянул, однако есть парочка "НО"

1) сегодня я смотреть уже ничего не буду, ибо у меня уже поздняя ночь

2) завтра раб. день и у меня полно делов.

3) от того что я посмотрю и поправлю вам макет, вам лучше не станет. Вы в следующий раз придете с тем же вопросом. Лучше сами разберитесь. Если вы в конец запутались, советую переверстать все заново. С чувством, толком, расстановкой. Понимая, что откуда растет и как это работает. И это будет единственным верным решением, т.к. в верстке у вас бардак полнейший.

Так что вот, извиняйте, коль не угодил.

[Lucifer]

Lucifer, я бы может и глянул, однако есть парочка "НО"

1) сегодня я смотреть уже ничего не буду, ибо у меня уже поздняя ночь

2) завтра раб. день и у меня полно делов.

3) от того что я посмотрю и поправлю вам макет, вам лучше не станет. Вы в следующий раз придете с тем же вопросом. Лучше сами разберитесь. Если вы в конец запутались, советую переверстать все заново. С чувством, толком, расстановкой. Понимая, что откуда растет и как это работает. И это будет единственным верным решением, т.к. в верстке у вас бардак полнейший.

Так что вот, извиняйте, коль не угодил.

Спасибо)

[Lucifer]

До меня так и не дошло в чём была проблема....

Всё стрёр, написал заново -заработало!

[belash911]

<!--Блок 1-->
    <div class="blok_top">COD4:MW SERVER</div>
     .
     .
     .
          <div class="blok_botton"></div>
    <!--Блок 2-->   
    <div class="blok_top" style="text-align:left;">Голос</span><span style="color:#1cbbbc;"/>ование:</span></div>
     .
     .
     .    

    <div class="blok_botton"></div></div>

    <!--Снизу лежащая картинка—>    
   <div class="bottom"></div>

если ты про эти дивы говоришь то во первых надо коли это блок его сделать таковым типа вот так:

<!--Блок 1-->

<div> или <table>

<div class="blok_top">COD4:MW SERVER</div>

.

.

.

<div class="blok_botton"></div>

</div> или </table>

<!--Блок 2-->

<div> или <table>

<div class="blok_top" style="text-align:left;">Голос</span><span style="color:#1cbbbc;"/>ование:</span></div>

.

.

.

<div class="blok_botton"></div></div>

</div> или </table>

<!--Снизу лежащая картинка—>

<div class="bottom"></div>

а далее уже и объединить три вместе

<div>

<!--Блок 1-->

<div> или <table>

<div class="blok_top">COD4:MW SERVER</div>

.

.

.

<div class="blok_botton"></div>

</div> или </table>

<!--Блок 2-->

<div> или <table> <

div class="blok_top" style="text-align:left;">Голос</span><span style="color:#1cbbbc;"/>ование:</span></div>

.

.

.

<div class="blok_botton"></div></div>

</div> или </table>

<!--Снизу лежащая картинка—>

<div class="bottom"></div>

</div>

И потом в css главному диву установи размер и (можно float:left присвоить чтобы уехал влево)

P.S. Я сам ток недели три версткой заниматься начал так что мож есть віход и полегче без нагромождения дивов, но у меня пока так получается

Edited October 10, 2011 by belash911

[belash911]

.menu

{

position:relative;

float:left;

top:-1;

width:203;

font-size:13pt;

font-weight:Bold;

}

а разве можно позиционирование и флоаут вместе кидать для одного дива?

[Lucifer]

Спасибо за совёт на счёт вложенных дивов, я так до вас пробовал у меня они почему-то друг под друга заезжали.

Всё стёр-написал заново,заработало!!))

.menu

{

position:relative;

float:left;

top:-1;

width:203;

font-size:13pt;

font-weight:Bold;

}

а разве можно позиционирование и флоаут вместе кидать для одного дива?

Ну по идеи да.

Т.к тег position задаёт положение элемента по отношению к другим элементам.

а float просто задаёт с какой стороны его обтекать.

Edited October 10, 2011 by Lucifer

[Justnewone]

а разве можно позиционирование и флоаут вместе кидать для одного дива?

Можно, теплое может быть одновременно мяхким и т.п.