Jump to content
  • 0

Как правильно сверстать многоблочный DIV


PaLyCH
 Share

Question

Хочу отказать от таблиц и полностью сверстать дизайн. Но произошел затык. Я не могу 1) отцентровать блок 2) правильно отобразить положение блоков. Что бы были рядом, а не по краям. Как это сделать? Вот пример трех блочной верстки. Left_c это левый блок, main правый блок. User2 находится под блоком user1.

<div id="all">
<div id="left_c>
<div id="user1"></div>
<div id="user2"></div>
</div>
<div id="main"></div>
</div>

#all {
width: 1000px;
margin: 0 auto;
}
#left_c {
width: 370px;
float: left;
}
#main {
width: 630px;
padding-left: 370px;
}
#user1 {
width: 100%;
padding-left: 10px;
float: left;
}
#user2 {
width:100%;
float: none;
padding-left: 10px;
}

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
И еще, у тебя ошибки... например

 <div ud="main"></div>

что за чудо?

И где

Лишь те основы, которые касаются исключительно блоков DIV. На данный момент мной сделано 13 сайтов, и еще три в очереди. Как я описал в самом начале, в основном верстал только на таблицах, а их возможности меня не совсем устраивают. Вот и постоянно происходят затыки с позициями в различных браузерах.

Ошибки подправил, ну бывает, за это не стоит ругать.

Link to comment
Share on other sites

  • 0
Ч? за этот код? Я со стула упал! Ты бы, создатель этого скромного кодика, почитал повнимательнее! Мда... Не забывай о position или, если нужны тексты, то text-align !

Тексты это последний и самый простой вопрос, который я и сам могу решить без проблем.

Link to comment
Share on other sites

  • 0
Как правильно сверстать многоблочный DIV

топикстартер, вы хоть поняли что написали???

где вы вообще в HTML видели многоблочный div???

На данный момент мной сделано 13 сайтов, и еще три в очереди. Как я описал в самом начале, в основном верстал только на таблицах, а их возможности меня не совсем устраивают. Вот и постоянно происходят затыки с позициями в различных браузерах.

эти "затыки" скорее всего от того что вы владеете малым кол-вом опыта.

и даже если вы сделаете хоть 100 сайтов то далеко не факт что вы будете уметь и знать 10ю часть того что знают, к примеру, гуру данного ресурса.

а если говорить по сабжу, я б вам настоятельно рекомендовал начать со статей по блочной верстки предоставленную Владом. Немного терпения и желание обучаться новому Вас направят на путь истинный.

зы: Блочная верстка это не панацея. Правильное решения для верстки любого блока страницы исходит из правильной оценки поставленной задачи.

Link to comment
Share on other sites

  • 0

для преведенного вами кода было бы логично сделать так (c комментариями):

html (будьте внимательнее с кавычками.. в вашем примере у left_c закрывающая отсутствовала.):

<div id="all">
<div id="left_c">
<div id="user1">user1</div>
<div id="user2">user2</div>
</div>
<div id="main">main</div>
</div>

CSS:

#all {
width:1000px; /* размер основного контейнера 1000px */
margin: 0 auto; /* и он отцентрован относительно окна =) */
overflow:auto; /* было бы неплохо, чтобы основной блок не схлопывался, когда содержимое изымается из потока */
background:lime; /* для наглядности */
}

#left_c {
width:370px; /* размер левой части 370px */
float:left; /* и эта часть прижата влево с обтеканием по правому краю */
background:yellow; /* для наглядности */
}

#main {
width:auto; /* данная строчка означает, что блок займет все свободное пространство по горизонтали, строчку можно убрать, так как это значение div имеет "по-умолчанию" */
margin:0 0 0 370px; /* отступ слева 370px (по размеру левого блока) */
background:red; /* для наглядности */
}

#user1, #user2 { /* поскольку контейнеры идиентичны, логично объеденить их свойства путем группировки селекторов */
width:auto; /* блок займет всю ширину родительского элемента (в данном случае #left_c = 370px ) */
clear:both; /* запрещаем обтекание блока по сторонам.. тоесть все что вне блока - будет после него уже снизу */
padding:0 0 0 10px; /* левое поле внутри блока 10px */
background:orange; /* для наглядности */
}

ну и в заключении:

Тексты это последний и самый простой вопрос, который я и сам могу решить без проблем.

а вот это вы зря.. форматирование текстовых блоков задача не всегда простая, и о ней нужно думать уже на этапе написания каркаса (грида, лойаута ? как вам больше нравится)...

зы: Блочная верстка это не панацея. Правильное решения для верстки любого блока страницы исходит из правильной оценки поставленной задачи.

+1 :) но для того, чтобы выбирать из своего арсенала инструментов при оценке задачи, нужно этими инструментами владеть хотябы на базовом уровне.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • 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