Помогите настроить высоту и отступ

winston3d · June 18, 2013

Привет всем!

Решил сделать простенький шаблон, состоящий из модных сейчас хабов (как windows 8 или Google Play).

Сделать хабы я смог, но свойства у них не очень...

1. Нужно в верхнем правом квадрате сделать отступ текста во внутрь квадрата, но padding: 20px; убивает всю сетку.

2. Необходимо сделать зависимость, между блоком с текстом и блоком с категориями. Что бы при увеличении блока с текстом из-за его большого количества, увеличивался и блок с категориями (по высоте). Ну и наоборот тоже.

Запарился уже это делать, помогите пожалуйста.

P.S: Решил таблицы не использовать, не люблю их. Может можно как-то без них?

http://html.v-arhiv.ru/

HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Сайт</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="/" class="logo"></a>
<div id="number">
+7 (343) 987 654 32 10
</div>
<div id="content">
Текст
</div>

<div id="cats">
	 1 категория<br>
	 2 категория<br>
	 3 категория<br>
	 4 категория<br>
	 5 категория<br>
	 6 категория<br>
	 7 категория<br>
	 8 категория
</div>
<div id="fast-comments">
	 Самые лучшие в мире комментарии
</div>

<div id="image-bar">
Картинки
</div>
<div id="contacts">
Контакты
</div>
<div id="feedback">
Обзатная связь
</div>
<footer>
<div id="copyleft">
Левый текст
</div>
<div id="copyright">
Правый текст
</div>
</footer>
</body>
</html>

CSS


html
{
background: url(bg.jpg);
}
body
{
margin: 2% 10%;
min-width: 800px;
}
.logo
{
margin: 0 0 0.5% 0;
background: url(logo.jpg) no-repeat center white;
width: 49.75%;
height: 200px;
display: inline-block;
float: left;
}
#number
{
margin: 0 0 0.5% 0;
background: white;
width: 49.75%;
height: 200px;
display: inline-block;
float: right;
}
#content
{
background: white;
width: 69.75%;
display: inline-block;
float: left;
margin: 0 0 0.5% 0;
}
#cats
{
margin: 0 0 0.5% 0;
background: white;
width: 29.75%;
float: right;
}
#fast-comments
{
margin: 0 0 0.5% 0;
background: white;
width: 29.75%;
float: right;
height: 200px;
}
#image-bar
{
margin: 0 0 0.5% 0;
background: white;
width: 100%;
height: 100px;
float: left;
}
#contacts
{
margin: 0 0 0.5% 0;
background: white;
width: 49.75%;
height: 200px;
display: inline-block;
float: left;
}
#feedback
{
margin: 0 0 0.5% 0;
background: white;
width: 49.75%;
height: 200px;
display: inline-block;
float: right;
}
footer
{
width: 100%;
float: left;
}
#copyleft
{
display: inline-block;
float: left;
color: white;
margin: 0 0 0 10%;
}
#copyright
{
display: inline-block;
float: right;
color: white;
margin: 0 10% 0 0;
}

Edited June 18, 2013 by winston3d

sigma77 · June 18, 2013

Залейте куда-нибудь на хостинг. Архив качать мало кто будет.

Sign In

Помогите настроить высоту и отступ

Question

winston3d

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

sigma77

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information