Не срабатывают стили
Вложений: 1
Как сделать чтоб вот так отображало на всех браузерах, что-то не выходит.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Основы блочной верстки (Div верстки)</title>
<!--<link href="style.css" rel="stylesheet" type="text/css"> -->
<style type="text/css">
*{margin:0px; padding:0px; border:0px; font-family:Arial, Helvetica, sans-serif;}
html>body #header {margin:0px auto; width:800px; background-color:#FFCC99;}
html>body #left{margin-top:40px; background-color:#FFFFCC; width:35%; float:left; text-align:center;
border-left:1px solid black; border-right:1px solid black;}
html>body #kontent{background-color:white; text-align:center; border:1px solid black; border-collapse:collapse;}
html>body #footer{text-align: center; background-color:#CC9966;}
</style>
</head>
<body>
<div id="header"><span style="font-size:34px;">М</span>
<div id="left">Menu</div>
<div id="kontent">Главная страница</div>
<div id="footer">Copyright © Филип Киркоров <? echo date('Y'); ?></div>
</div>
</body>
</html>
Только в Опере отображает так, в гуглхром и мозиле наезжает. |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Основы блочной верстки (Div верстки)</title>
<!--<link href="style.css" rel="stylesheet" type="text/css"> -->
<style type="text/css">
*{margin:0px; padding:0px; border:0px; font-family:Arial, Helvetica, sans-serif;}
#wrapper {width:800px; margin: 0 auto 0 auto; text-align: center;}
#header {background-color:#FFCC99;}
#left{background-color:#FFFFCC; width:35%; float:left; text-align:center;
border:1px solid black;}
#kontent{padding-left: 35%; background-color:white; text-align:center; border:1px solid black;}
#footer{text-align: center; background-color:#CC9966;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><span style="font-size:34px;">М</span></div>
<div id="left">Menu</div>
<div id="kontent">Главная страница</div>
<div id="footer">Copyright © Филип Киркоров <? echo date('Y'); ?></div>
<div>
</body>
</html>
|
Скажите, а что вы именно сделали такое что заработало?
|
Ну дык сравните со своим кодом, и увидите разницу
|
От этого все стало на места?
margin: 0 auto 0 auto; Если написать 1 раз 0 auto margin = 0 и элемент над которым это действие производилось становится по центру Двойное такое написание что означает? 0 auto 0 auto Почему 2 раза, а не один раз 0auto |
ну привычка у меня писать все четыре значения, хотя для этого случая можно просто 0 auto
|
Я заметил вы взяли моего id="header" ещё в один див id="wrapper", а в хидера можно сделать или ещё в один блок нужно обязательно?
|
devote, если добавить контента в левую или правую части - 2-хколоночного макета не получится.
|
Полная каша.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{margin:0px; padding:0px; border:0px; font-family:Arial, Helvetica, sans-serif;}
#wrapper {width:800px; margin: 0 auto 0 auto; text-align: center;}
#header {background-color:#FFCC99;}
#left{background-color:#FFFFCC; width:35%; float:left; text-align:center;
border:1px solid black;}
#kontent{padding-left: 35%; background-color:white; text-align:center; border:1px solid black;}
#footer{text-align: center; background-color:#CC9966;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<div id="header"><span style="font-size:34px;">М</span></div>
<div id="content"></div>
<div id="left">
<p>Menu</p>
<p>Menu</p>
<p>Menu</p>
<p>Menu</p>
<p>Menu</p>
<p>Menu</p>
<p>Menu</p>
<p>Menu</p>
</div>
<div id="kontent">
<p>Главная страница</p>
<p>Главная страница</p>
<p>Главная страница</p>
<p>Главная страница</p>
</div>
<div id="footer">Copyright © Филип Киркоров <? echo date('Y'); ?></div>
<div>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 18:47. |