Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
0 / 0 / 0
Регистрация: 15.03.2012
Сообщений: 24
1

Два дива горизонтально

12.01.2014, 21:57. Показов 1367. Ответов 1
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Приветствую всех. Я только недавно начал заниматься верской и пытаюсь сделать первый шаблон. Подскажите пожалуйста что я делаю не так. Думаю на картинках все понятно. Всем спасибо. Так же буду очень сильно благодарен за то что вы укажите мои ошибки.

Кликните здесь для просмотра всего текста
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
<html lang="ru">
<head>
<meta chartset="utf-8" />
<title>Главная</title>
<link rel="stylesheet" href="css/style.css" media="screen" />
</head>
<body>
<div class="wrap">
<header class="head">
<a class="logo" href=""><img src="img/logo.png" alt="logo" /> </a>
<div class="text_header">
<h2>lorem ipsum doloe sit amet</h2>
<p>consectetur adepisicing elit, sed do eiusmod tempor incididunt</p>
</div>
</header>
 
<nav class="navi">
<ul>
        <li><a href="">home</a></li>
        <li><a href="">products</a></li>
        <li><a href="">news</a></li>
        <li><a href="">about as</a></li>
        <li><a href="">contact as</a></li>
    </ul>
</nav>
 
<div class="content">
<div class="pics">
    <h3>featured products</h3>
    <div class="pic_1"> <img src="img/pic_1.png" alt="pic_1" />
    <h3>Lipsum comoodo Manager</h3>
    </div>
    <div class="pic_2"> <img src="img/pic_2.png" alt="pic_1" /> </div>
</div>
 
 
</div>
 
<footer class="footer_wrap">
 
2009
</footer>
</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
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
/*start reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img {
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym {
    border:0;
}
/*end reset*/
 
 
body{
background: url(../img/bg.jpg) repeat;
width: 1000px;
margin: 0 auto;
margin-top: 50px;
}
 
.wrap{
background: #fff;
min-height: 100%;
position:relative;
border: 1px solid #cccccc;
border-top: 8px solid #f2ac04;
}
 
.head{
height: 130px;
}
 
.head a.logo{
float: left;
padding-top: 40px;
padding-left: 35px;
}
.text_header{
float: right;
margin-top: 40px;
margin-right: 200px;
padding-left: 20px;
border-left: 1px solid #cccccc;
}
 
.text_header h2{
text-transform: uppercase;
color: #f2ac04;
font-size: 20pt;
}
 
.text_header p{
color: #929292;
font-size: 14pt;
}
 
 
.navi ul, .navi li{
display: inline-block;
vertical-align: top;
color: #929292;
font-size: 14pt;
text-transform: uppercase;
}
 
.navi ul{
width: 925px;
margin-left:35px;
margin-right:35px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
 
.navi li{
margin-left: 75px;
margin-top: 13px;
margin-bottom: 13px;
}
 
.navi li:first-child{
margin-left: 0;
}
 
.navi li a{
color: #929292;
text-decoration: none;
}
 
.content{
 
padding-top:40px;
padding-left:35px;
padding-right:35px;
display:block-inline;
}
 
.pics h3{
color: #555656;
font-size: 14pt;
text-transform: uppercase;
margin-bottom: 11px;
}
 
.pic_1{
width: 445px;
height: 250px;
border: 1px solid #cccccc;
height: 250px;
float: left;
}
.pic_1 img{
width: 445px;
 
}
 
.pic_2{
width: 440px;
border: 1px solid #cccccc;
float: left;
}
.pic_2 img{
width: 445px;
height: 250px;
float: right;
}

Миниатюры
Два дива горизонтально   Два дива горизонтально  
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
12.01.2014, 21:57
Ответы с готовыми решениями:

В диве есть два дива. Высота родительского дива равно 0
Подскажите, есть див контента, в котором две колонки. Высота контента равна нулю. почему? &lt;div...

Два дива рядом внутри дива
Здравствуйте! Не могу сделать вот такую конструкцию: На приложенном изображении показаны рамки...

два Дива
Здравствуйте, помогите решить проблему, нужно чтобы Красный квадрат - это div, был всегда...

Разместить два блока горизонтально
Добрый вечер. Есть два блока с сылками как на скрине. Подскажите, как разместить второй блок...

1
27 / 27 / 10
Регистрация: 26.01.2013
Сообщений: 231
12.01.2014, 23:45 2
CSS
1
2
3
.wrap{
  overflow: hidden;
}
Добавлено через 1 минуту
Цитата Сообщение от verpl Посмотреть сообщение
min-height: 100%;
в .wrap не к месту. В дальнейшем и без него можно обойтись
1
12.01.2014, 23:45
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
12.01.2014, 23:45
Помогаю со студенческими работами здесь

Сдвигаются два дива
Ребята! Кто шарит в хтмл верстке, просветите! Есть код... &lt;div &lt;!--1--&gt; style=&quot;background:...

Два дива по горизонтали, каждый по 50%
Доброго всем дня! Подскажите, как создать в блоке &quot;content&quot;--&gt;&gt;&quot;tab1&quot; два блока равные 50% и...

Не получается вывести два блока с рисунками горизонтально
В чем ошибка.Не получается вывести два блока с рисунками горизонтально. Вот код) #menu{ width:...

Два блока DIV горизонтально друг за другом
Доброго времени суток. Подскажите как можно сделать так чтобы два блоки DIV располагались...


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru