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



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Расположение блоков
Alexeev
Alexeev
Topic Starter сообщение 11.7.2014, 21:34; Ответить: Alexeev
Сообщение #1


Подскажите как можно выстраивать блоки один под другим с помощью <div>! Например меню (слева), контент (по середине) и 2 блока (оба класс login в примере), выровненные по правой стороне один под другим!
<html>
<head>
<title>
123
</title>
<style type="text/css">
.menu {
float: left;
width: 200px;
height: 500px;
margin: 5px;
padding: 0px;
font-size: 20px;
font-family: Calibri;
text-align: center;
color: white;
background-color: black;
}
.login {
float: right;
width: 200px;
height: 500px;
margin: 5px;
padding: 0px;
font-size: 15px;
font-family: Calibri;
text-align: center;
color: white;
background-color: black;
}
</style>
</head>
<body>

<div class = "menu">123</div>
<div class = "login">567</div>
<div class = "login">6789</div>
<div align = "center">
<table border = "1" width = "75%" height = "1000">
<tr>
<td>
123
</td>
</tr>
</table>
</div>

</body>
</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 12.7.2014, 10:26; Ответить: Degradator
Сообщение #2


.menu{
float: left;
width: 100px;
}
.center{
width: 300px;
}
.login{
float: right;
clear: right;
}

хотя я бы засунул оба login в один контейнер, чтобы было так
.left{
float: left;
width: 100px;
}
.center{
width: 300px;
}
.right{
float: right;
}
<div class="left">11</div>
<div class="center">22</div>
<div class="right"><div class = "login">567</div>
<div class = "login">6789</div></div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alexeev
Alexeev
Topic Starter сообщение 12.7.2014, 18:17; Ответить: Alexeev
Сообщение #3


Но правый блок съезжает вниз при изменении высоты центрального, нужно что бы блоки были независимые
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
And-spb
And-spb
сообщение 12.7.2014, 18:35; Ответить: And-spb
Сообщение #4


Помести все блоки в один DIV #main
Пример как это сделано у меня все работает!

#main{
width:1244px;
margin:auto 0;
}

#leftblock{
width:271px;
height:300px;
float:left;
}

#centerblock{
width:735px;
float:left;
}

#rightblock{
width:238px;
height:500px;
float:right;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alexeev
Alexeev
Topic Starter сообщение 12.7.2014, 19:18; Ответить: Alexeev
Сообщение #5


Пасиб, и последний вопрос, как теперь это выровнять по центру браузера и изменять отступы между блоками изменяя один параметр margin?
<html>
<head>
<title>
123
</title>
<style type="text/css">
.menu {
float: left;
width: 200px;
height: 500px;
font-size: 20px;
font-family: Calibri;
text-align: center;
color: white;
background-color: black;
}
.content {
width: 60%;
height: 500px;
font-size: 15px;
font-family: Calibri;
text-align: center;
color: white;
background-color: black;
}
.login {
float: right;
clear: right;
width: 200px;
height: 100px;
font-size: 15px;
font-family: Calibri;
text-align: center;
color: white;
background-color: black;
}
.info {
float: right;
clear: right;
width: 200px;
height: 400px;
font-size: 15px;
font-family: Calibri;
text-align: center;
color: white;
background-color: black;
}
.center {
width:1500px;
margin:auto 0;
}
</style>
</head>
<body>
<div align = "center" class = "center">
<div class="menu">МЕНЮ</div>
<div class="login">ЛОГИН</div>
<div class="info">ИНФОРМАЦИЯ</div>
<div class="content">КОНТЕНТ</div>
</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
And-spb
And-spb
сообщение 12.7.2014, 21:26; Ответить: And-spb
Сообщение #6


допиши в

.content{
margin:auto;
}

расстоянии между блоками margin: ; у каждого блока
или один margin: у
.center указать отступы слева и справа.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
And-spb
And-spb
сообщение 12.7.2014, 22:19; Ответить: And-spb
Сообщение #7


а зачем ты в .info с начало назначаешь float: right; а потом его сразу удаляешь clear: right; ????
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alexeev
Alexeev
Topic Starter сообщение 14.7.2014, 23:07; Ответить: Alexeev
Сообщение #8


(And-spb @ 13.7.2014, 01:19) *
а зачем ты в .info с начало назначаешь float: right; а потом его сразу удаляешь clear: right; ????

Потому что без этого структура нарушается! Спасибо за ответ!

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) ПРОЦЕССИНГ НА РУ-КАРТЫ, КИВИ, СИМ С ГАРАНТИЕЙ ОТ БЛОКОВ
 0 Dark_process 1014 7.11.2022, 13:48
автор: Dark_process
Открытая тема (нет новых ответов) Нужен дизайнер для прорисовки блоков на сайте
 3 kolyas 1598 12.5.2020, 21:24
автор: kolyas
Открытая тема (нет новых ответов) Правила обертывание блоков
 1 sergei_burg 5591 17.10.2016, 19:34
автор: -Degradator-
Открытая тема (нет новых ответов) Растягивание блоков ,оцентровка
 2 DONit09 6067 16.5.2016, 17:57
автор: -DONit09-
Открытая тема (нет новых ответов) Как при блочной вёрстке в один из блоков вставить таблицу по центру
 1 benefit 10483 4.4.2013, 23:02
автор: -almac-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 23.4.2024, 18:00

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet