X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Не получается разместить блоки с помощью float. Помогите пожалуйста
Rynkovoy
Rynkovoy
Topic Starter сообщение 13.2.2015, 21:54; Ответить: Rynkovoy
Сообщение #1


Не получается разместить блоки с помощью float. Помогите пожалуйста.
нужно , чтобы серые блоки шли слева направо. Если я ставлю и float:left, то у меня пропадает белый задний фон.
[attachment=40647:Безымянный.jpg]
[attachment=40648:Безымянный1.jpg]
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="white-shape">
<!-- MENU -->
<div class="wraper">
<div><a href="#" class="act_menu">main</a></div>
<div><a href="#">about us</a></div>
<div><a href="#">services</a></div>
<div><a href="#">products</a></div>
<div><a href="#">partners</a></div>
<div><a href="#">contacts</a></div>
</div>
<div class="clear"></div>
<!-- LOGOTYPE -->
<div class="logo">
<p><a href="/"><img src="img/logo.png" alt="logo"></a></p>
<p>THE BEST QUALITY PRODUCTS</p>
</div>
<p class="central_img"><img src="img/central.jpg" alt="central image"></p>
<!-- CONTENT (3 blocks) -->
<div class="content">
<div>
<p><img src="img/page1_img_01.png" alt=""></p>
<p><h4><span>PROGRESSIVE</span> METHODS</h4></p>
<p class="text1">
<a href="#">Koleacene anritma haseseralety.</a> Cumaser kertyaseocis ntoquas caaslecenas stricies phaledatyfena nec sit amm easerment. Utdolor dapegementum velursus ifend elineanctor wisiet urliquam. Berat vpaiast rtyase fertasbe.
</p>
<p class="button1"><a href="#"></a></p>
</div>
<div>
<p><img src="img/page1_img_01.png" alt=""></p>
<p><h4><span>PROGRESSIVE</span> METHODS</h4></p>
<p class="text1">
<a href="#">Koleacene anritma haseseralety.</a> Cumaser kertyaseocis ntoquas caaslecenas stricies phaledatyfena nec sit amm easerment. Utdolor dapegementum velursus ifend elineanctor wisiet urliquam. Berat vpaiast rtyase fertasbe.
</p>
<p class="button1"><a href="#"></a></p>
</div>
</div>



</div>


</body>
</html>


[CSS]@charset "utf-8";
/* CSS Document */

body{
margin:0px;
padding:0px;
background:url(img/bg-body.jpg);
padding-top:60px;
}
#white-shape{
background:#FFF;
width:1100px;
margin:0px auto;
}
.wraper{
margin:0px auto;
width:570px;
}
.wraper div{
float:left;
width:95px;
font-size:18px;
font-family: 'Comic Sans MS', cursive;
}
.wraper a{
padding-top:64px;
height:37px;
width:95px;
text-align:center;
margin:0px auto;
text-decoration:none;
color:#7d594d;
display:block;
}
.wraper div:hover{
background:#FDD330;
}
.wraper a:hover{
color:#FFF;
}
.act_menu{
background: #FDD330;
color:#FFF !important;
}
.clear{
clear:both;
}
.logo p{
text-align:center;
color: #c2ac83;
text-transform:uppercase;
font-size:14px;
font-family: 'Comic Sans MS', cursive;
}
.central_img{
text-align:center;
margin:25px auto 0px;

}
.content{
width:955px;
margin:20px auto;
border:1px solid #000;
}
.content div{
padding:20px 0px 20px 0px;
background:url(img/block-1_shape.jpg);
width:300px;
text-align:center;
margin-left:7px;
float:left;
}
.content div h4{
color: #754f44;
}
.content div h4 span{
color: #fdd330;
}
.text1{
color: #9a9785;
text-align:left;
font-size: 15px;
margin-left:50px;
margin-right:33px;
margin-bottom:40px;
}
.text1 a{
color:#6d6a57;
text-decoration:none;
}
.text1 a:hover{
text-decoration:underline;
}
.button1 a{
display:block;
width:100px;
height:33px;
background:url(img/button1.jpg) no-repeat;
margin:0px auto;
}
.button1 a:hover{
background:url(img/button2.jpg);
}

[/CSS]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Shucach
Shucach
сообщение 15.2.2015, 14:27; Ответить: Shucach
Сообщение #2


Пропишите для контейнера где находиться белый фон: [CSS]overflow: hidden;[/CSS]

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Не получается оплатить YouTube Premium (для Турции и Аргентины по VPN YouTube Premium недоступна)
3 rownong27 443 20.3.2024, 21:39
автор: MisterBit
Открытая тема (нет новых ответов) Раскройте свой потенциал заработка с помощью 2x2 Media Network — вашего пути к выгодным предложениям CPA!
Присоединяйтесь к 2x2 Media Network, вашему надежному партнеру в мире
9 2x2MediaLimited 2794 20.3.2024, 4:33
автор: 2x2MediaLimited
Горячая тема (нет новых ответов) Проверка позиций сайтов в поисковых системах с помощью Positon.ru
Мониторинг продвижения сайтов
182 Positon 178934 23.2.2024, 9:53
автор: Positon
Открытая тема (нет новых ответов) Помогите вспомнить рекламного бота Телеграм для обмена рекламой
0 Mixatraider 692 21.2.2024, 23:42
автор: Mixatraider
Открытая тема (нет новых ответов) "Извините, что ожидание затянулось, но не думайте, пожалуйста, что мы про вас забыли. Мы заводим задачи по всем обращениям и контролируем работу над ними самым тщательным образом."
Вопрос
0 kuz999 1188 5.2.2024, 14:06
автор: kuz999


 



RSS Текстовая версия Сейчас: 28.3.2024, 12:32
Дизайн