X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Выравнивание Css
Furin
Furin
Topic Starter сообщение 15.7.2011, 21:31; Ответить: Furin
Сообщение #1


Бог
*****

Группа: Active User
Сообщений: 833
Регистрация: 19.5.2010
Из: Волгоград/Москва/Лондон
Поблагодарили: 213 раз
Репутация:   42  


Хеллоу! Подскажите пожалуйста, как выравнять <div> блок.

Прикрепленное изображение

На картинке сделал выравнивание блока "Сайдбар" по средствам float: right. Если указать left, переносит блок под блок с текстом. Нужно поднять блок "сайдбар" на уровень с текстом (где текст начинается).
Заранее благодарен, Гуглить нет возможности, Edge свзять(((
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
rjksdfhe
rjksdfhe
сообщение 15.7.2011, 21:34; Ответить: rjksdfhe
Сообщение #2


Straight arms
*******

Группа: Active User
Сообщений: 2760
Регистрация: 21.4.2009
Из: Мытищи, МО, РФ
Поблагодарили: 1111 раз
Репутация:   163  


скорее всего ширину надо уменьшить
проще понять будет если поставить background:yellow у сайдбара


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LOAD
LOAD
сообщение 15.7.2011, 21:35; Ответить: LOAD
Сообщение #3


Участник
***

Группа: User
Сообщений: 106
Регистрация: 1.2.2008
Поблагодарили: 42 раза
Репутация:   8  


Ширину блоков правильно посчитайте.
<div style="width:800px; overflow:hidden;" class="container">
    <div style="float:left; width:500px;" class="content">
        content
    </div>
    <div style="float:right; width:300px;" class="sidebar">
        sidebar
    </div>
</div>


Сообщение отредактировал LOAD - 15.7.2011, 21:37


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LeeRon
LeeRon
сообщение 15.7.2011, 21:36; Ответить: LeeRon
Сообщение #4


Бывалый
****

Группа: User
Сообщений: 253
Регистрация: 6.12.2009
Поблагодарили: 69 раз
Репутация:   16  


(Furin @ 15.7.2011, 20:31) *
Хеллоу! Подскажите пожалуйста, как выравнять <div> блок.

Прикрепленное изображение

На картинке сделал выравнивание блока "Сайдбар" по средствам float: right. Если указать left, переносит блок под блок с текстом. Нужно поднять блок "сайдбар" на уровень с текстом (где текст начинается).
Заранее благодарен, Гуглить нет возможности, Edge свзять(((



Надо и текстовому блоку и сайдбару дать Float:left вот только нужно задаль еще и ширину каждого в пикселях или процентах.


--------------------
Портфолио | HTML+CSS верстка | icq#454 400 082


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 15.7.2011, 21:37; Ответить: x64
Сообщение #5


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3432
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2750 раз
Репутация:   289  


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

#left {
width:75%;
float:left;
}

#right {
width:25%;
float:right;
clear:right;
}


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Furin
Furin
Topic Starter сообщение 15.7.2011, 21:37; Ответить: Furin
Сообщение #6


Бог
*****

Группа: Active User
Сообщений: 833
Регистрация: 19.5.2010
Из: Волгоград/Москва/Лондон
Поблагодарили: 213 раз
Репутация:   42  


(rjksdfhe @ 15.7.2011, 21:34) *
скорее всего ширину надо уменьшить
проще понять будет если поставить background:yellow у сайдбара

Ширина вписывается, желтый не лезет за пределы)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
artanik
artanik
сообщение 15.7.2011, 21:47; Ответить: artanik
Сообщение #7


Участник
***

Группа: User
Сообщений: 225
Регистрация: 3.5.2011
Из: Украина, Львов
Поблагодарили: 147 раз
Репутация:   47  


Нужно и контену тоже задать свойство float, только там есть "подводный камень", нужно поместить всё в ещё один div и задать ему свойство overflow:hidden, потому что всё что ниже, полезет наверх и будет криво
CSS:
#container {
  width:1000px;
  overflow:hidden;
}
#content {
  width:800px;
  float:left;
}
#sidebar {
  width:200px;
  float:right;
}

HTML:
<div id="container">
    <div id="content">
        content
    </div>
    <div id="sidebar">
        sidebar
    </div>
</div>


--------------------
Мой промо-сайт

Нужна качественная вёрстка сайтов? Обращайтесь: ICQ 555-177-362 


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
S1xteen
S1xteen
сообщение 15.7.2011, 22:18; Ответить: S1xteen
Сообщение #8


Бывалый
****

Группа: User
Сообщений: 293
Регистрация: 20.9.2010
Поблагодарили: 64 раза
Репутация:   12  


Для однозначного ответа напишите свой код.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
wlad224
wlad224
сообщение 16.7.2011, 0:24; Ответить: wlad224
Сообщение #9


Новичок
*

Группа: Banned
Сообщений: 25
Регистрация: 4.1.2011
Поблагодарили: 2 раза
Репутация:   1  


ого сколько камментов полезных, в мое время никто так не помогал =)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LeeRon
LeeRon
сообщение 16.7.2011, 0:35; Ответить: LeeRon
Сообщение #10


Бывалый
****

Группа: User
Сообщений: 253
Регистрация: 6.12.2009
Поблагодарили: 69 раз
Репутация:   16  


Вопрос на самом деле простой, но в свое время сам недогонял как эти float пашут... а как оказалось принцып простой- что выше в коде стоит то и всплывает раньше. То есть для того что бы получить 3 колонки лепиш всем ширину на 33% и float:left.


--------------------
Портфолио | HTML+CSS верстка | icq#454 400 082
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Проги для редактирования style.css
14 minutkin 1075 11.12.2017, 16:01
автор: Nell
Горячая тема (нет новых ответов) [предлагаю] Качественные услуги по PHP/HTML/CSS/JS, любые движки
Услуги программирования
31 Alexandr_js 10063 2.11.2017, 16:36
автор: gretskov
Открытая тема (нет новых ответов) Оформление внешних ссылок при помощи CSS
Каким образом можно оформить стилями внешние ссылки сайта
7 komarik_vlad 874 25.10.2017, 9:30
автор: x64
Открытая тема (нет новых ответов) Помощь по css
5 Mistic 688 17.10.2017, 13:04
автор: prapod
Горячая тема (нет новых ответов) ВНИМАНИЕ: Тема имеет прикрепленные файлыКомплекс услуг по движку Joomla и xhtml+css верстка
61site.ru - Верстаем и делаем сайты под ключ
321 lostprophet 204243 28.9.2017, 15:32
автор: NAEL


 



RSS Текстовая версия Сейчас: 18.12.2017, 3:37
Дизайн