CSS (float) Цвет не ложится полностью

Ван · 09.03.2015, 19:42

Подскажите,цвет не ложится полностью в блочные элементы.
Вот записи html и css и внизу фото.

index.html

!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>Плавающие элементы</title>
<link href="css/style.css" type="text/css" rel="stylessheat">
</head>

<body>

<div id="make">
<div id="colors">
<div id="blue">
<h4>Dedicated 24/7 Support</h4>
<p>Pellentesque tellus tortor, lobortis eget venenatis non, aliquet a massa. Mauris aliquam ultrices lectus, quis</p>
<a>Read More</a></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
</div>

</body>
</html>

style.css
#make{
height:700px;
width:1024px;
margin:0 auto;
padding-top:30px;
}

#colors{
height:147px;
outline:1px solid #000000;
padding:0 49px 0 42px;
}

#blue{
height:147px;
width:306px;
float:left;
outline:1px solid #800000;
background-color:#2c789c;
}

#yellow{
height:147px;
width:321px;
float:left;
outline:1px solid #800000;
background-color:#e5b00d;
}

#green{
height:147px;
width:306px;
float:left;
outline:1px solid #800000;
background-color:#97ba15;
}

mamon-88 · 10.03.2015, 16:05

привет! пропиши в css такое правило
p{
margin:0;
padding:0;
}
поясню для чего оно: у тега "р" есть свой отступы, это правило их убирает.

Hispanic · 10.03.2015, 16:33

Даже нет предположений зачем это все, но все банально, ReadMore вылазит за 147px, сделай 160px

mamon-88 · 11.03.2015, 17:51

Цитата:

Сообщение от Hispanic

Даже нет предположений зачем это все, но все банально, ReadMore вылазит за 147px, сделай 160px

Ты знаешь что твой совет не работает!

Hispanic · 12.03.2015, 10:54

вообщето работает, я проверял, хотел тебе ответить той же монетой, но оказалось что и твой вариант тоже работает) как не странно... я просто при верстке всегда обнуляю стили поэтому такими моментами никогда не заморачиваюсь. И вообще, если честно не понимаю для чего это, и зачем там P

mamon-88 · 12.03.2015, 13:10

Цитата:

Сообщение от Hispanic

вообщето работает, я проверял, хотел тебе ответить той же монетой, но оказалось что и твой вариант тоже работает) как не странно... я просто при верстке всегда обнуляю стили поэтому такими моментами никогда не заморачиваюсь. И вообще, если честно не понимаю для чего это, и зачем там P

я может чего то не понимаю, но где ты имено меняешь правила что у тебя работает!

Hispanic · 12.03.2015, 18:01

о боже
после вопроса обычно ставят "?" не дошли еще в школе?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>Плавающие элементы</title>
<link href="css/style.css" type="text/css" rel="stylessheat">

<style type="text/css">

#make{
height:700px;
width:1024px;
margin:0 auto;
padding-top:30px;
}

#colors{
height:160px;
outline:1px solid #000000;
padding:0 49px 0 42px;
}

#blue{
height:160px;
width:306px;
float:left;
outline:1px solid #800000;
background-color:#2c789c;
}

#yellow{
height:160px;
width:321px;
float:left;
outline:1px solid #800000;
background-color:#e5b00d;
}

#green{
height:160px;
width:306px;
float:left;
outline:1px solid #800000;
background-color:#97ba15;
}

</style>

</head>

<body>

<div id="make">
<div id="colors">
<div id="blue">
<h4>Dedicated 24/7 Support</h4>
<p>Pellentesque tellus tortor, lobortis eget venenatis non, aliquet a massa. Mauris aliquam ultrices lectus, quis</p>
<a>Read More</a></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
</div>

</body>
</html>

скопируй и вставь в текстовый документ и сохрани как HTML, справишься?
и к стати, в опере и так все хорошо, и для этой задачи я бы лучше использовал таблицу а не дивы

mamon-88 · 13.03.2015, 13:41

да всё верно работает! А за вопросительный пардон, тупа про него забыл.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Проблема с float в IE 6-7	Apologet	HTML, CSS, JavaScript	1	21.03.2012 20:34
Странно себя ведет float: left	dima_kiv	HTML, CSS, JavaScript	2	04.05.2011 11:32
float и position проблема	life24x7	HTML, CSS, JavaScript	9	19.09.2009 13:42
Float и valign	adbared	HTML, CSS, JavaScript	7	04.06.2008 18:10
Проблема с CSS параметром float в div боксах	dav	HTML, CSS, JavaScript	1	18.12.2006 14:03

10.03.2015, 16:05	#2
mamon-88	привет! пропиши в css такое правило p{ margin:0; padding:0; } поясню для чего оно: у тега "р" есть свой отступы, это правило их убирает.

10.03.2015, 16:33	#3
Hispanic	Даже нет предположений зачем это все, но все банально, ReadMore вылазит за 147px, сделай 160px

12.03.2015, 10:54	#5
Hispanic	вообщето работает, я проверял, хотел тебе ответить той же монетой, но оказалось что и твой вариант тоже работает) как не странно... я просто при верстке всегда обнуляю стили поэтому такими моментами никогда не заморачиваюсь. И вообще, если честно не понимаю для чего это, и зачем там P

12.03.2015, 18:01	#7
Hispanic	о боже после вопроса обычно ставят "?" не дошли еще в школе? <html> <head> <meta http-equiv="Content-Type" content="text/html charset=utf-8"> <title>Плавающие элементы</title> <link href="css/style.css" type="text/css" rel="stylessheat"> <style type="text/css"> #make{ height:700px; width:1024px; margin:0 auto; padding-top:30px; } #colors{ height:160px; outline:1px solid #000000; padding:0 49px 0 42px; } #blue{ height:160px; width:306px; float:left; outline:1px solid #800000; background-color:#2c789c; } #yellow{ height:160px; width:321px; float:left; outline:1px solid #800000; background-color:#e5b00d; } #green{ height:160px; width:306px; float:left; outline:1px solid #800000; background-color:#97ba15; } </style> </head> <body> <div id="make"> <div id="colors"> <div id="blue"> <h4>Dedicated 24/7 Support</h4> <p>Pellentesque tellus tortor, lobortis eget venenatis non, aliquet a massa. Mauris aliquam ultrices lectus, quis</p> <a>Read More</a></div> <div id="yellow"></div> <div id="green"></div> </div> </div> </body> </html> скопируй и вставь в текстовый документ и сохрани как HTML, справишься? и к стати, в опере и так все хорошо, и для этой задачи я бы лучше использовал таблицу а не дивы

13.03.2015, 13:41	#8
mamon-88	да всё верно работает! А за вопросительный пардон, тупа про него забыл.

09.03.2015, 19:42
Ссылки