CSS-верстка и разрешение монитора

Люди добрые, я тут пробую самостоятельно верстать темы для вордпреса и вот проблема – как сделать так, чтобы на разных мониторах мой сайт всеравно полностю помещался и сайдбар никуда не падал (он у меня подключается после контента), какая оптимальная ширина в пикселях и может есть какой-то хак для разных мониторов?

а ты выложи класс сайдбара и контента…..

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

А резиновый тоже не трудно сделать…… просто ты более внятно скажи что за проблема и какие желания!!! вот и все….

Желание одно – сделать много колонок и пошире, но я тут єкспериментировал с разрешением монитора – бывает не влазит и падает сайбар под контент…. Я не знаю как проценты в css віставлять – нигде еще такого не видел…

Воть, хотя с шириной я играюсь…

#wrapper { padding-left: 30px;}
#mini-nav{
    width: 20px;
    float: left;
    margin: 5px;
    padding-top: 30px;
    position:fixed;
}

#mini-nav img{
    margin:1px;
}

#content {
    width: 600px;
    text-align: justify;
    border-top:solid 1px #CED4CA;
    border-bottom:solid 3px #CED4CA;
    border-left:solid 1px #CED4CA;
    border-right:solid 3px #CED4CA;
    float: left;
    margin: 5px;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    background-color:#FFFFFF;
}
#block {
    width: 350px;
}
#sidebar-1 {
    width: 150px;
}
#sidebar-2 {
    width: 150px;
}
#logo {
    width: 140px;
    padding:10px;
}
.sidebar {
    text-align: left;
    padding: 20px;
    border-top:solid 1px #CED4CA;
    border-bottom:solid 3px #CED4CA;
    border-left:solid 1px #CED4CA;
    border-right:solid 3px #CED4CA;
    float: left;
    margin: 5px;
    background-color:#FFFFFF;
    font-size: 0.9em;
}

тебе просто надо составить сайт на 800х600 или 1024х768 ….. но если во весь экран то тебе надо работать с %-ми….

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

если верстаешь для разных разрешений — это называется "резина", то ширина выставляется не в пикселях, а в процентах (или em).
за основу возьми разрешение 1024х768, для меньшего разрешения не страшно, если появится скролл по горизонтали (чтобы не прыгал контент воспользуйся min-width)

если не силён в css — воспользуйся готовыми решениями http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/

Пасибки, люди! Это я и хотел узнать! 1024 пикселей – стандат! Ура!

Не факт… Не у всех браузеры на весь экран развернуты. 😉

Ну это уже… их проблемы 🙂

Шапка сайта при разрешении 1024х768 выглядит так http://mooot.ru/img/shot01.jpg
При более высоком разрешении появляется пробел http://mooot.ru/img/shot02.jpg

Вот код из ксс

.main { width:100%; text-align:left; background:url(images/haha.gif) top left no-repeat}

Возможно ли между изображением с надписью mooot.ru и изображением формулы вставить и растянуть вот такой элемент http://mooot.ru/wp-content/themes/theme361/images/bg-top.gif ?
Нужно добавлять в ксс новый класс для этого?

.main {background-image:url(‘йа_фоновое_картинко’);background-repeat:repeat-x;}
А простые картинки должны быть вставлены как img, а не как css-фон .

Anonymous
Отправить
Ответ на: