Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.98/43: Рейтинг темы: голосов - 43, средняя оценка - 4.98
Selsh
1

как сделать чтобы 2 блока были на одном уровне

26.04.2013, 00:13. Просмотров 8394. Ответов 3
Метки нет (Все метки)


Как сделать чтобы 2 div блока были на одном уровне в HTML?
Хочу поместить в шапку два блоко с логотипом и с формой авторизации.
Вот мой код html
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
<!DOCTYPE html>
<html>
    <head>
        <title>Мой сайт
        </title>
        <meta charset="windows-1251">
        <link href="css/main.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="page_align" class="rounding">
            <div id="header">
                <div class="logo">
                    <img src="images/logo.png">
                </div>
                <div id="header_profile" class="f_right">
                    ТУТ ДОЛЖНА БЫТЬ АВТОРИЗАЦИЯ
                </div>
            </div>
            <div id="sidebar_top">
                    <ul>
                        <li><a href="#">Главная</a></li>
                        <li><a href="#">ляляля</a></li>
                        <li><a href="#">лялял</a></li>
                        <li><a href="#">2222222</a></li>
                        <li><a href="#">64494681</a></li>
                        <li><a href="#">О нас</a></li>
                    </ul>
                        <form method="" action="">
                            <input type="text" name="topsearch" class="f_left" placeholder="Что-то ищите? ">
                            <img src="images/search.jpg" alt="Поиск по сатйту" width="24px" height="25px" class="search_img f_left">
                        </form>
                </div>
            <div id="shadow">
            </div>
            <div id="sidebar_left" class="f_left">
            меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню меню 
            </div>
            <div id="content" class="f_left">
            контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент 
            </div>
            <div class="clr">
            </div>
            <div id="footer">
            </div>
        </div>
    </body>
</html>
css код
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
*{
    margin:0;
    padding:0;
    outline:none;
}
body{
    background:url("../images/bg.jpg") #d8ddda;
    font:12px Tahoma, Arial, sans-serif;
}
a{
    text-decoration:none;
}
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.rounding{
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -o-border-radius:3px;
    -ms-border-radius:3px;
    -kihtml-border-radius:3px;
 
}
#page_align{
    width:950px;
    margin:33px auto;
    background:#fff;
    box-shadow:0px 1px 3px #727272;
    -webkit-box-shadow:0px 1px 3px #727272;
    -o-box-shadow:0px 1px 3px #727272;
    -moz-box-shadow:0px 1px 3px #727272;
}
#header{
    height:150px;
    background: rgb(245,245,245); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(245,245,245) 0%, rgb(233,233,233) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(245,245,245)), color-stop(100%,rgb(233,233,233))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(245,245,245) 0%,rgb(233,233,233) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(245,245,245) 0%,rgb(233,233,233) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(245,245,245) 0%,rgb(233,233,233) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgb(245,245,245) 0%,rgb(233,233,233) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e9e9e9',GradientType=0 ); /* IE6-9 */
}
.logo{
    height:140px;
}
#header_profile{
 
    width: 215;
    height: 100;
    outline: solid 2px #000;
}
 
#sidebar_top{
    background:#f8f8f8;
    height:37px;
    border-top:solid 2px #e3e3e3;
}
#sidebar_top ul{
    list-style:none;
}
#sidebar_top ul li{
    float:left;
    font-size:14px;
    border-right:solid 2px #e3e3e3;
}
#sidebar_top ul li a{
    background:#f8f8f8;
    color:#9d9d9d;
    display:block;
    line-height:37px;
    padding:0px 10px;
}
#sidebar_top ul li a:hover{
    background:#e3e3e3;
    color:#9d9d9d;
    display:block;
    line-height:37px;
    padding:0px 10px;
}
input[name=topsearch]{
    height:21px;
    margin-top:6px;
    border-top: solid 2px #e3e3e3;
    border-bottom: solid 2px #e3e3e3;
    border-left:none;
    border-right:solid 2px #e3e3e3;
    background:#f8f8f8;
    width:160px;
}
.search_img{
    padding-top:6px;
}
#shadow{
    height:15px;
    background: rgb(227,227,227); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(227,227,227) 0%, rgb(255,255,255) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(227,227,227)), color-stop(100%,rgb(255,255,255))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(227,227,227) 0%,rgb(255,255,255) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(227,227,227) 0%,rgb(255,255,255) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(227,227,227) 0%,rgb(255,255,255) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgb(227,227,227) 0%,rgb(255,255,255) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
 
 
 
}
#sidebar_left{
    background: rgb(245,245,245); /* Old browsers */
background: -moz-linear-gradient(left,  rgb(245,245,245) 95%, rgb(234,234,234) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(95%,rgb(245,245,245)), color-stop(100%,rgb(234,234,234))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgb(245,245,245) 95%,rgb(234,234,234) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgb(245,245,245) 95%,rgb(234,234,234) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgb(245,245,245) 95%,rgb(234,234,234) 100%); /* IE10+ */
background: linear-gradient(to right,  rgb(245,245,245) 95%,rgb(234,234,234) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
    margin-top:20px;
    margin-bottom:20px;
    width:200px;
    border-radius:0px 3px 3px 0px;
    border-top:solid 1px #e3e3e3;
    border-bottom:solid 1px #e3e3e3;
    border-right:solid 1px #e3e3e3;
 
}
#content{
    width:650px;
    background-color:#fff;
    padding:15px 15px 0px 10px;
    overflow:hidden;
}
.clr{
    clear:both;
}
#footer{
    height:55px;
    border-bottom:solid 1px #d1d1d0;
    border-top:solid 3px #e3e3e3;
    background: rgb(233,233,233); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(233,233,233) 0%, rgb(245,245,245) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(233,233,233)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(233,233,233) 0%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(233,233,233) 0%,rgb(245,245,245) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(233,233,233) 0%,rgb(245,245,245) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgb(233,233,233) 0%,rgb(245,245,245) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
}
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
26.04.2013, 00:13
Ответы с готовыми решениями:

Как сделать чтобы 2 разных цвета тянулись в разные стороны на одном уровне
Как сделать чтобы 2 разных цвета тянулись в разные стороны на одном уровне. Нужно реализовать...

Как сделать так, чтобы на одном и том же сайте у разных аккаунтов были разные ip?
Снова я, прошу извинить, ибо я не знала куда свой вопрос впихнуть, cо своими вопросами. Как сделать...

Как выравнивать текстовые колонки, чтоб они были на одном уровне?
#include &lt;iostream.h&gt; #include &lt;fstream.h&gt; #include &lt;stdlib.h&gt; #include &lt;conio.h&gt; #include...

Поставить два блока на одном уровне
Всем привет! Столкнулся с такой проблемой. Создал header, в &lt;div id=&quot;header&quot;&gt; вписываю div лого,...

3
55 / 30 / 1
Регистрация: 25.04.2013
Сообщений: 276
26.04.2013, 00:22 2
Selsh, в css пропишите в .logo{ float:left;
а в #header_profile{ float:right;
0
Selsh
26.04.2013, 00:36 3
Цитата Сообщение от MrViper Посмотреть сообщение
Selsh, в css пропишите в .logo{ float:left;
а в #header_profile{ float:right;
Спасибо )
странник
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
26.04.2013, 10:38 4
Selsh, просто в первоначальном вашем коде, вы прописали в стилях, чтобы блок #header_profile обтекание слева (float: right). Но в этом случае этот блок будут обтекать все элементы расположенные ПОСЛЕ текущего. А у вас логотип стоит до #header_profile.
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
26.04.2013, 10:38

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Как сделать выпадающие пункты меню на одном уровне с родительским пунктом?
Всем доброго дня. Есть вертикальное выпадающее меню. Никак не соображу как сделать, чтобы...

Сделать, чтобы базовые слои layer и layer1, были в одном root а layer2 в другом root
Доброго времени суток. Вот код &lt;html&gt; &lt;head&gt; &lt;title&gt; A Basic GeoExt Page &lt;/title&gt; &lt;script...

вектор, как сделать чтобы его значения были по главной диагонали в матрице,а остальные значения матрицы были нули
подскажите еще.у меня есть вектор, как сделать чтобы его значения были по главной диагонали в...

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

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

Как сделать так что бы новости располагались друг за другом (сверху вниз) а не стояли на одном уровне рядышком
Пользуюсь Jumla 1.5.15 Проблемма в том, что при создании новых статей с прикреплённым файлом -...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.