Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Проблемы резиновой вёрстки

#1 9pXocT

9pXocT
  • Пользователь
  • 5 сообщений
  • Репутация: 0
0

Отправлено 06 Ноябрь 2013 - 13:13

Общий вид когда таков
<div id="wrapper">
<div class="header">sdf</div>
<div class="content">sdf</div>
<div class="right_columns">asd</div>
<div class="footer">sdf</div>
</div>
Стили:
#wrapper{width:90%; padding:0; margin:0 auto; min-width:700px;}
.header{height:200px;}
.content{float:left; height:1000px; width:68%; min-width:400px;}
.right_columns{float:right; height:1000px; width:27%; min-width:200px;}
.footer{clear:both; height:100px;}
.header, .content, .right_columns, .footer{padding:1%;background:gray; border:solid 1px black;}

Все хорошо до того момента,когда назначаешь ширину для соседствующих блоков-content и .right_columns.Если поиграться с процентами,то остается шов-отступ.Но даже так в какой то момент при увеличении страницы,правый блок все равно пытается спрятаться в то же место.Вопросы:

1.Как правильно прицепить друг к другу блоки,чтобы не было шва и чтобы блоки при масштабировании не уезжали.Это при учёте margin,которых в этом образце нет,но они будут и padding?Пробовал и позиционирование и марждин-райт 28% для контента.Удобного варианта не нашел.Бьюсь не первый день.
Если убрать min-width для обертки и для блоков,то на определенном этапе,правый блок повторяет свою вылазку под угол контента,вместо того,чтобы продолжать вытягиваться на своём месте.

 

 

  • 0

#2 kickboxer

kickboxer
  • Пользователь
  • 30 сообщений
  • Репутация: 1

Отправлено 06 Ноябрь 2013 - 14:02

Советую поизучать http://blog.html.it/layoutgala/
  • 1

#3 9pXocT

9pXocT
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 06 Ноябрь 2013 - 14:56

С удовольствием б прочел,только англ не знаю :-(
  • 0

#4 9pXocT

9pXocT
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 06 Ноябрь 2013 - 16:47

Немного разобрался, что можно скачать макет.Скачал 2х колоночный,начал редактировать,сначала все было хорошо, пока не поставил паддинги и все! Та же проблема-блоки разъехались

Впринципе,концепция сложноватая, но подходит.Спасибо, придется немного изменить мое html мировоззрение :-) и потренироваться.
  • 0

#5 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

Отправлено 08 Ноябрь 2013 - 15:44

Скачал 2х колоночный,начал редактировать,сначала все было хорошо, пока не поставил паддинги и все! Та же проблема-блоки разъехались

Проблема в том, что вы не хотите учитывать падинги?
  • 0


#6 kickboxer

kickboxer
  • Пользователь
  • 30 сообщений
  • Репутация: 1

Отправлено 08 Ноябрь 2013 - 19:39

если так, то тогда пропишите блоку, у которого не хотите учитывать отступы, вот это border-box:

box-sizing:border-box;

http://simonenko.su/...css3-box-sizing
  • 0

#7 9pXocT

9pXocT
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 19 Ноябрь 2013 - 07:18

Спасибо,паддинги вроде учитывал,но блоки разъезжались,может конечно ошибся.А на крайний случай насколько правильно реализовывать отступы внутри не паддингом,а маржином с вложенным блоком?
Еще 2 вопроса созрело в тему,чтоб новую не плодить:

1)Насколько правильно строить 3 блока-левый,контент и правый через притягивания за уши маржинами и обязательными float-leftкак вверху по ссылке на макеты,там где в маржинах отрицательные значения?
Почему нельзя реализовать левый блок с флоат-лефт,правый с флоат-райт?
2)Как правильно реализовать резиновый макет,чтобы из 3 блоков в ряд,средний-контент занимал всю область,если боковые блоки пустые?А если боковые заполняются-контент возвращается на середину?
Простите,не могу коды поставить для удобства или ссылки-пишу из электрички по пути на работу.
  • 0

#8 wmas

wmas
  • Пользователь
  • 22 сообщений
  • Репутация: 4

Отправлено 29 Декабрь 2013 - 20:58

Если вам сложно разобраться в блочной верстке - используйте таблицы!
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru