Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как сделать три блока div по горизонтали / 7 сообщений из 7, страница 1 из 1
09.04.2013, 17:09
    #38219183
fobster
fobster
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как сделать три блока div по горизонтали
как сделать три блока по горизонтали? почему у меня получается фигня?
Код: sql
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<style type="text/css">
html,body{margin:0;padding:0}
body
	{ 
	font: 12px/18px Georgia,Arial, Helvetica, sans-serif;
	background:url(img/bg.jpg) top no-repeat #000000;
	line-height:22px;
	color: #D5D5D6;
	}

a:link, a:visited 
	{
	color: #fff;
	outline: none;
	text-decoration: none;
	}

a:hover 
	{
	color: #FC5A02;
	text-decoration: none;
	}

div#header 
h1
	{
	height:80px;
	line-height:80px;
	margin:0;
	padding-left:10px;
	padding-top:10px;
	color: #79B30B;
	background:url(img/logo.png) center no-repeat;
	}

div#content 
	{
	height:60%;
	background:url(img/centr.png) center no-repeat;
	padding: 16%;
	background-size:50%;
	}

.content_left 
	{
	width: 200px;
	background: #17181A;
	color: #FD6204;
	margin: 0 25% 0 25%;/*верх прав ниж лев*/
	border: 3px solid #27292B;
	padding: 10px;
	float:left;
	}

.content_right 
	{
	background: #17181A;
	color: #FD6204;
	margin: 0 25% 0 48%;/*верх прав ниж лев*/
	border: 3px solid #27292B;
	padding: 10px;
	float:right;
	width:200px;
	}

.middle_content 
	{
	margin: 0 230px 0 ;
	width: 500px;
	height: 300px;
	border: 10px solid green;
        }

div#transparent
	{
	background-color: rgba(0, 0, 0, 0.2);
	margin: 0 25% 0 25%;
	padding: 1% 1%;
	text-transform: uppercase;
	color:#ffffff;
	font: bold 12px Georgia, "Times New Roman", serif;
	}

p
	{
	margin:0;
	padding:5px 10px;
	}

#menu 
	{
	list-style:none;
	padding:0;
	margin:0 auto;
	overflow:hidden;
	position:relative;
	z-index:1;
	} 

#menu ul,li, hover 
	{
	color:#FD6204;
	float:left;
	} 

p.new::after 
	{
	content: "/"; /* Добавляемый текст */ 
	color: #fff; /* Цвет текста */ 
	padding: 30px; /* Поля вокруг текста */ 
	}

div#footer
	{
	background: #333;
	color: #FFF;
	width:50%;
	margin: 2% 25% 0 25%;
	}

</style>
</head>
<body>

<div id="header"><h1></h1></div>
<div id="transparent">
<ul id="menu">
	<li><p class="new"><a href="">Главная</a></p></li>
	<li><p class="new"><a href="">Миссия</a></p></li>
	<li><p class="new"><a href="">Услуги</a></p></li>
	<li><p class="new"><a href="">Советы</a></p></li>
        <li><p class="new"><a href="">Контакты</a></p></li>
</ul>
</div>
<div id="content">
</div>
<div class="content_left">текст 1
</div>
<div class="middle_content">текст 2
</div>
<div class="content_right">текст 3
</div>
<div id="footer"><p>© бла бла бла</p></div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.04.2013, 17:32
    #38219227
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как сделать три блока div по горизонтали
Может потому что content открыт и закрыт? А left, middle и right как бы сами по себе. И в конце еще бесхозный </div> болтается.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.04.2013, 17:36
    #38219233
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как сделать три блока div по горизонтали
width у content не задано, у его содержимого display:block по умолчанию, с какой стати им вообще по горизонтали становиться?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.04.2013, 17:38
    #38219238
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как сделать три блока div по горизонтали
fobster,

на всякий случай...
По мотивам Выравнивание DIV свойством float
Код: html
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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
div {
  text-align: center;
}
#div1 {
  float: left;
  width: 200px;
  background-color: #8DD5EB;
}
#div2{
  float: left;
  width: 200px;
  background-color: #9C8DEB;
}
#div3{
  float: left;
  width: 200px;
  background-color: #FF9999;
}
</style>
</head>
<body>
<div id="div1"> DIV 1 </div>
<div id="div2"> DIV 2 </div>
<div id="div3"> DIV 3 </div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.04.2013, 17:42
    #38219246
fobster
fobster
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как сделать три блока div по горизонтали
спасибо, уже до дыр затерты похожие статьи, ну не становятся дивы в ряд, читаю еще..
ненужные </div> убрала
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.04.2013, 17:49
    #38219266
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как сделать три блока div по горизонтали
Лучше нарисуйте в фотошопе, из кода совершенно не ясно, как должен выглядеть результат.
Если убрать конские резиновые маргины, можно получить это:
Код: 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.
div#content 
	{
	height:60%;
    width:100%;
	background:url(img/centr.png) center no-repeat #FD6204;
	background-size:50%;
    text-align:center;
	}

    div#content > div {display:inline-block}

.content_left 
	{
	width: 200px;
	background: #17181A;
	color: #FD6204;
	border: 3px solid #27292B;
	padding: 10px;
	}

.content_right 
	{
	background: #17181A;
	color: #D5D5D6;
	border: 3px solid #27292B;
	padding: 10px;
	width:200px;
	}

.middle_content 
	{
	width: 500px;
	height: 300px;
	border: 10px solid green;
        }
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.04.2013, 21:13
    #38219494
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как сделать три блока div по горизонтали
fobsterкак сделать три блока по горизонтали?
Начать можно с этого...

Код: html
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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#right {
	float: right;
	width: 30%;
	background-color: silver;
}
#left {
	float: left;
	width: 200px;
	background-color: orange;
}
#center {
	margin-left: 200px;
	margin-right: 30%;
	background-color: blue;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='right'>right</div>
<div id='left'>left</div>
<div id='center'>center</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как сделать три блока div по горизонтали / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 443ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1448464]:
 0ms
get settings:
 6ms
get forum list:
 11ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 176ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 29ms
get tp. blocked users:
 1ms
others: 205ms
total:  443ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]