Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
0 / 0 / 1
Регистрация: 05.03.2013
Сообщений: 15
1

Выравнивание блоков (css)

05.03.2013, 20:54. Показов 2064. Ответов 8
Метки нет (Все метки)

Привет ребят, не могу выровнять блоки, точнее 3 блок(выложу скриншот). Прошу помощи). Плюс, к проблеме, стиль, с id = topmenu, выходит за рамки экрана и получается горизонтальный скрол(второй скриншот)
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
#head {
    background-image: url(../images/header.png);
    background-repeat: repeat-x;
    margin:0px;
    height: 140px;
    background-color: red;
}
 
#topmenu {
    background-color: #c0deed;
    padding: 10px;
    height: 20px;
    margin:0 0 10px;
    width: 100%;
    -moz-box-shadow: 0 5.5px 3px rgba(0,0,0,0.5); /* Для Firefox */
    -webkit-box-shadow: 0 5.5px 3px rgba(0,0,0,0.5); /* Для Safari и Chrome */
    box-shadow: 0 5.5px 3px rgba(0,0,0,0.5); /* Параметры тени */
}
 
#leftcol {
    background-color: #a8d0e4;
    padding: 10px;
    width: 200px;
    height: 200px;
    float: left;
    margin: 0px 0 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
}
 
#content {
    background-color: #a8d0e4;
    margin: 0px 230px 10px 230px;
    padding: 10px;
    text-align: justify;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
}
 
#rightcol {
    background-color: #a8d0e4;
    padding: 10px;
    width: 200px;
    height:200px;
    float: right;
    -moz-box-margin: -598px 0 5px;
    -webkit-box-margin: 0px 0 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
}
Миниатюры
Выравнивание блоков (css)   Выравнивание блоков (css)  
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.03.2013, 20:54
Ответы с готовыми решениями:

Выравнивание блоков в css, height
Добрый день, очень нужна ваша помощь, не смог найти решение. Нужен сайт: шапка - резиновая, в...

Выравнивание блоков двухколоночного резинового макета по высоте через CSS без задания конкретной высоты
Здравствуйте! Есть страница с двумя колонками. Левая колонка имеет фиксированную ширину, правая...

Выравнивание блоков
В чем разница, при выравнивании блоков через display: inline-block; или через float: left; ...

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

8
0 / 0 / 0
Регистрация: 05.03.2013
Сообщений: 6
05.03.2013, 21:05 2
скорее всего что то с float:right не так
простите я пока что мало чего знаю в верстке но можно ли узнать код родительского элемента то есть оболочки в которой сидит ваш центр ( левая контент и правая колонки )
0
0 / 0 / 1
Регистрация: 05.03.2013
Сообщений: 15
05.03.2013, 22:00  [ТС] 3
jedinho, только так=)
HTML5
1
2
3
4
5
6
7
8
<body>
<div id = "leftcol">
</div>
<div id = "content">
</div>
<div id = "rightcol ">
</div>
</body>
0
0 / 0 / 0
Регистрация: 05.03.2013
Сообщений: 6
05.03.2013, 22:17 4
Onahapa, нет мне стилевые свойства блока который содержит 3 этих блока

Добавлено через 9 минут
вообщем попробуй в селекторе топменю прописать правило

position:fixed;
0
0 / 0 / 1
Регистрация: 05.03.2013
Сообщений: 15
05.03.2013, 23:11  [ТС] 5
jedinho, ты похоже не понял=) или я не понял, скину:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
 
<?php
    include("bloks/header.inc.php");
    require("bloks/topmenu.inc.php");
    require("bloks/leftcol.inc.php");
?>
 
    <div id = "content">
        <?php
 
        ?>
    </div>
    <div id = "rightcol">
        <div id = "div_link"><a href = "index.html">Меню1</a></div>
        <div id = "div_link"><a href = "str2.html">Меню2</a></div>
        <div id = "div_link"><a href = "str3.html">Меню3</a></div>
    </div>
    <div id = "foot">
        <p id = "p_foot">Сайт</p>
    </div>
 
</body>
bloks/leftcol.inc.php
HTML5
1
2
3
4
5
<div id = "leftcol">
    <div id = ""><a href = "index.php">Главная</a></div>
    <div id = ""><a href = "str2.html">Меню2</a></div>
    <div id = ""><a href = "str3.html">Меню3</a></div>
</div>
bloks/topmenu.inc.php
HTML5
1
2
3
4
5
<div id = "topmenu">
    <?php
 
    ?>
</div>
и для топменю в js прописан тот самый position

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
    $(function() {
        var fixblock_height = $('#topmenu').height(); // определяем высоты фиксированного блока
        var fixblock_pos = $('#topmenu').position().top; ; // определяем его первоначальное положение
        $(window).scroll(function(){
            if ($(window).scrollTop() > fixblock_pos){ // Если страницу прокрутили дальше, чем находится наш блок
                $('#topmenu').css({'position': 'fixed', 'top':'0px', 'z-index':'10'}); // То мы этот блок фиксируем и отображаем сверху.
                $('#head').css('padding-bottom', fixblock_height+'px'); // А чтобы это было плавно, добавляем отсуп снизу для верхнего блока (как будто этот блок там все еще есть)
            }else{  // Если же позиция скрола меньше (выше), чем наш блок
                $('#topmenu').css({'position': 'static'}); // то возвращаем все назад
                $('#head').css('padding-bottom', '0px'); // И убираем отступ
            }
        })
    });
0
292 / 168 / 29
Регистрация: 16.09.2012
Сообщений: 369
06.03.2013, 00:02 6
У #topmenu ширина 100% плюс padding, оттого ширина 100%+20пх (по 10 на каждую сторону) = скролл.


CSS
1
2
3
#leftcol {float: left}
#rightcol {float: right}
#content {overflow: hidden}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 < body>
<?php
    include ( "bloks/header.inc.php" ) ;
require ( "bloks/topmenu.inc.php" ) ;
?>
< div id = "rightcol" >
< div id = "div_link" >< a href = "index.html" > Меню1 < / a >< / div >
< div id = "div_link" >< a href = "str2.html" > Меню2 < / a >< / div >
< div id = "div_link" >< a href = "str3.html" > Меню3 < / a >< / div >
< / div> 
<?php require ( "bloks/leftcol.inc.php" ) ; ?> 
< div id = "content" >
< / div>
< div id = "foot" >
< p id = "p_foot" > Сайт< / p >
< / div>
< / body>
1
0 / 0 / 1
Регистрация: 05.03.2013
Сообщений: 15
06.03.2013, 00:55  [ТС] 7
StopSmell, вау, спасибо! Можешь объяснить почему "leftcol", следует после "rightcol", и "rightcol" идет до "content"?
И как можно избавиться от скролла? Если не делать padding, текст прилипает, что не хорошо.
0
0 / 0 / 1
Регистрация: 05.03.2013
Сообщений: 15
12.03.2013, 16:54  [ТС] 8
Решил проблему с гор. скролом, таким образом, мб и не самый лучший вариант, но работает
CSS
1
2
3
4
#topmenu {
    padding: 1%;
    width: 98%;
}
может кому пригодится=)
0
1 / 1 / 0
Регистрация: 17.03.2013
Сообщений: 21
19.03.2013, 01:11 9
Смотри можно просто обычную верстку сделать.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
    <head>
        <title>Сайт</title>
        <link href="style.css" rel="stylesheet">
    </head>
    
    <body>
    <div class="header"><h1>Шапка сайта</h1></div>
        <div id="container">
            <div id="right">
                    <h3 class="h3">Меню</h3>
                    <p class="p1">
                        <ul>
                            <li><a href="#" class="a1">Ссылка</a></li>
                            <li><a href="#" class="a1">Ссылка</a></li>
                            <li><a href="#" class="a1">Ссылка</a></li>
                            <li><a href="#" class="a1">Ссылка</a></li>
                            <li><a href="#" class="a1">Ссылка</a></li>
                            <li><a href="#" class="a1">Ссылка</a></li>
                            <li><a href="#" class="a1">Ссылка</a></li>
                            <li><a href="#" class="a1">Ссылка</a></li>
                        </ul>
                    </p>
            </div>
            <div id="content">
            <h3 class="p2">Новости</h3>
            <hr>
                <p class="p1">
                    Блок новостей №1
                </p>
            </div>
            <div id="content">
            <h3 class="p2">Новости</h3>
            <hr>
                <p class="p1">
                    Блок новостей №2
                </p>
            </div>
            <div id="content">
            <h3 class="p2">Новости</h3>
            <hr>
                <p class="p1">
                    Блок новостей №3
                </p>
            </div>
        </div>
    </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
body, html{
margin:0px;
padding:0px;
}
#container{
width:600px;
margin:0 auto;
}
#n1{
height:20px;
}
#right{
background-color:#a9d28c;
width:150px;
float:right;
border:2px solid black;
}
#content{
margin-top:5px;
background-color:#d5d7b5;
margin-right:160px;
border:2px solid black;
}
.p1{
margin-left:5px;
margin-right:5px;
margin-top:5px;
}
.p2{
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:-5px;
}
.header{
border:2px solid black;
background-color:#fc5;
text-align:center;
width:596px;
margin-left:auto;
margin-right:auto;
}
.h3{
margin:5px;
text-align:center;
color:yellow;
}
.a1{
text-decoration: none;
color:red;
}
По такому коду можно твой вопрос решить. Главное правильно указать float
1
19.03.2013, 01:11
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
19.03.2013, 01:11

Выравнивание блоков
Привет! Не могу выровнять блок с картинкой и блок с текстом при уменьшении окна браузера. Зелёный...

Выравнивание блоков
Привет, никак не могу сообразить в чем дело, почему футер не хочет прижиматься к низу, блоки с...

Выравнивание див блоков
Есть блок шириной в 440пх и высотой 100%. Мне нужно в этот блок поместить 3 дива следующим образом:...

Выравнивание блоков в header'e
Здравствуйте. Вопрос по CSS. Как в хедере вставить ещё 2 блока ( прямоугольника), что бы каждый...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru