Javascript-форум - Не срабатывают стили

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Не срабатывают стили (https://javascript.ru/forum/xhtml-html-css/21342-ne-srabatyvayut-stili.html)

romantik2011

05.09.2011 22:01

Не срабатывают стили

Вложений: 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>

Только в Опере отображает так, в гуглхром и мозиле наезжает.

devote

05.09.2011 22:14

<!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>

romantik2011

05.09.2011 22:23

Скажите, а что вы именно сделали такое что заработало?

devote

05.09.2011 22:25

Ну дык сравните со своим кодом, и увидите разницу

romantik2011

05.09.2011 22:42

От этого все стало на места?

margin: 0 auto 0 auto;

Если написать 1 раз 0 auto margin = 0 и элемент над которым это действие производилось становится по центру
Двойное такое написание что означает?
0 auto 0 auto
Почему 2 раза, а не один раз 0auto

devote

05.09.2011 22:46

ну привычка у меня писать все четыре значения, хотя для этого случая можно просто 0 auto

romantik2011

05.09.2011 23:39

Я заметил вы взяли моего id="header" ещё в один див id="wrapper", а в хидера можно сделать или ещё в один блок нужно обязательно?

ksa	06.09.2011 09:30

devote, если добавить контента в левую или правую части - 2-хколоночного макета не получится.

ksa	06.09.2011 09:31

Полная каша.

<!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>

devote

06.09.2011 09:33

Цитата:

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

devote, если добавить контента в левую или правую части - 2-хколоночного макета не получится.

Ну если говорить о том что будет и т.д. то придеться еще много чего править и дописывать... Человек попросил что бы одинаково работало везде... Я ему сделал... что будет дальше... Ему виднее.

devote

06.09.2011 09:34

<!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;clear: both;} 
</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>

Просто добавил clear: both; у footer

ksa	06.09.2011 09:42

Как вариант решения...

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	margin:0px; 
	padding:0px; 
	font-family:Arial, Helvetica, sans-serif;
} 
#wrapper {width:800px; margin: 0 auto 0 auto; text-align: center;}
#header {background-color:#FFCC99;} 
#left { 
	width:35%; 
	float:left; 
	text-align:center; 
	border-right:1px solid black;
} 
#kontent{
	margin-left: 35%; 
	background-color: white; 
	text-align:center;  
} 
#footer{
	text-align: center; 
	background-color:#CC9966;
	clear: both;
} 
#content {
	background-color:#FFFFCC;
	border:1px solid black;
}
.end {
	clear: both;
}
</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 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 class="end"></div>
		</div> 
	</div> 
	<div id="footer">Copyright © Филип Киркоров <? echo date('Y'); ?></div> 
<div>
</body>
</html>

ksa	06.09.2011 09:44

Цитата:

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

Просто добавил clear: both; у footer

А рамки? :D

Цитата:

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

Я ему сделал... что будет дальше... Ему виднее

:lol:

devote

06.09.2011 09:45

ну тоже вариант, но повторюсь... все от задачи зависит... так что нам не известно что конкретно человеку нужно.

ksa	06.09.2011 09:47

devote, просто если уш делать примеры... Так законченые. ;)
Поскольку это все стандартные приёмы для таких макетов...

devote

06.09.2011 09:55

Цитата:

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

devote, просто если уш делать примеры... Так законченые.
Поскольку это все стандартные приёмы для таких макетов...

Ну простите, уж не думал что людям так трудно дописать див внутрь контента с очищенным флоатом

Часовой пояс GMT +3, время: 11:32.