выравнивание блоков(2 в 1)

atew · October 18, 2011

Научите как правильно выравнивать блоки.

У меня есть блок с черным контуром в который нужно поместить красный и синий блок с растоянием между ними, например 10px

Для наглядности есть макет:

zSpx · October 18, 2011

Нуу, красному, например, margin-right: 10px;

atew · October 18, 2011

не выходит(

ceil100 · October 18, 2011

можно использовать float

какова конечная цель?блоки фиксированной ширины или относительной?

как вариант:


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	#wrap {width:960px;border:1px solid #000;margin:auto;overflow:hidden;}
	#left {width:475px;height:600px;background:#ae54ff;float:left}
	#right {width:475px;height:600px;background:#ff34af;float:right}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="left"></div>
		<div id="right"></div>
	</div>
</body>
</html>

правильно или неправильно зависит от конкретной ситуации

Edited October 18, 2011 by ceil100

atew · October 18, 2011

Спасибо.

Но всё= не то что хотелось бы

вот что я пишу:

index.html

<div id="main">	
			<div id="right-main">
			<h3 class="obrat-sv">Обратная связь</h3>
				<form action="process.php" method=post>
				<table	border="0" width="310">
					<tr>
						<td width=25%>Имя*</td>
						<td width=75%><input type="text" name="namety" size="30" maxlength="10"/></td>
					</tr>
					<tr>
						<td>Заголовок*</td>
						<td><input type="text" name="titlety" size="30" maxlength="10"></td>
					</tr>
					<tr>
						<td>Сообщение*</td>
						<td width="350"><input type="text" name="messagety" size="30"  rows="5" maxlength="100"></td>
					</tr>
					<tr>
						<td colspan="2" align="right" height="50"><input type="submit" value="    Отправить    " /></td>
					</tr>
				</table>
				</form>
			</div>
			<div id="left-main">
			<h3>Контактная информация</h3>
				<p>
				г. Киев, ул Протасова Яр, 13<br>
				тел. (044) 529 65 11<br>
					<a class="decor-text">info@motodom.kiev.ua</a><br><br>	
				г. Одесса, ул Разумовская, 19<br>
				тел. (048) 784 77 54<br>
					<a class="decor-text">info@motodom.kiev.ua</a><br><br>
				г. Днепропетровск, проспект Кирова 46А<br>
				тел. (0562) 31 40 95<br>
				тел. (050) 533 00 82<br><br>
				г.Севастополь, проспект Побуде 56<br>
				тел. (066) 55 63 157<br>
				тел. (095) 57 31 289				
				</p>
			</div>
		</div>

style.css

#main {
width: 700px;
}
#right-main {
float: left;
width: 320px; 
height: 420px;
background: url(img/coll1.png) no-repeat;
}
h3 {
text-align: center;
color: #bfbbbb;
}
#left-main {
float: right;
height: 420px;
background: url(img/coll1.png) right no-repeat; 
}
.decor-text {
color: #334371;
}

на выходе

Хотелось бы видеть то что, я задумал в фотошопе:

но навыков мало, что бы это реализовать для начинающего верстальщика...(

Edited October 18, 2011 by atew

biginer · October 18, 2011

насчет левого блока


#left-main {
float: right;
height: 420px;
background: url(img/coll1.png) right no-repeat; 
padding-right:10px;
}

ну а цвет и шрифт думаю вы в состоянии изменить

Ссылки и заголовки


.decor-text {
color: #334371;
text-decoration: underline;
}
h3 {
text-align: center;
color: #bfbbbb;
padding-bottom:10px;
}

если не правильно то сори)

Arinden · October 18, 2011


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#main {
width: 700px;
height: 420px;
background-color: #000;
color: #a0a19c;
}
#right-main {
float: left;
width: 331px; 
height: 420px;
background-color: #10100e;
padding-left: 20px;
}
h3 {
text-align: center;
color: #bfbbbb;
}
#left-main {
float: right;
width: 310px;
height: 420px;
background-color: #10100e;
padding-left: 20px;
}
.decor-text {
color: #334371;
}
.input {
	width: 282px;
	border: 1px solid #454543;
	background-color: #000;
	color: #737371;
	padding-left: 10px;
	padding-right: 10px;
}
#msg {
	width: 282px;
	height: 200px;
	border: 1px solid #454543;
	background-color: #000;
	color: #737371;
	padding: 10px;
}
#submit {
	width: 100px;
	height: 30px;
	background-color: #21211f;
	color: #9c9c9c;
	text-align: center;
	border: 1px solid #454543;
}
-->
</style>
</head>

<body>
<div id="main"> 
                        <div id="right-main">
                        <h3 class="obrat-sv">Обратная связь</h3>
                                <form action="process.php" method=post>
                                <table  border="0" width="310">
                                        <tr>
                                                <td><input class="input" type="text" name="namety" rows="1" maxlength="10" value="Ваше имя*"/></td>
                                        </tr>
                                        <tr>
                                                <td><input class="input" name="titlety" size="40" maxlength="10" value="E-Mail*"/></td>
                                        </tr>
                                        <tr>
                                                <td><input class="input" name="messagety" size="40"  rows="5" maxlength="100" value="Заголовок"></td>
                                        </tr>
                                        <tr>
                                               <td><textarea id="msg" maxlength="1000" rows="15">Сообщение</textarea></td>
                                        </tr>
                                        <tr>
                                                <td colspan="2" align="right" height="50"><input id="submit" type="submit" value="Отправить" /></td>
                                        </tr>
                                </table>
                                </form>
                        </div>
                        <div id="left-main">
                        <h3>Контактная информация</h3>
                                <p>
                                г. Киев, ул Протасова Яр, 13<br>
                                тел. (044) 529 65 11<br>
                                        <a class="decor-text">info@motodom.kiev.ua</a><br><br>

                                г. Одесса, ул Разумовская, 19<br>
                                тел. (048) 784 77 54<br>
                                        <a class="decor-text">info@motodom.kiev.ua</a><br><br>

                                г. Днепропетровск, проспект Кирова 46А<br>
                                тел. (0562) 31 40 95<br>
                                тел. (050) 533 00 82<br><br>
                                г.Севастополь, проспект Побуде 56<br>
                                тел. (066) 55 63 157<br>
                                тел. (095) 57 31 289                            
                                </p>
                        </div>
                </div>
</body>
</html>

Дальше сам.

Edited October 18, 2011 by Arinden

atew · October 19, 2011

Спасибо большое всем за помощь! Особенно Arinden и biginer +1

Sign In

выравнивание блоков(2 в 1)

Question

atew

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

zSpx

Link to comment

Share on other sites

atew

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

atew

Link to comment

Share on other sites

biginer

Link to comment

Share on other sites

Arinden

Link to comment

Share on other sites

atew

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information