Розовая полоса

romantik2011 · September 5, 2011

Как сделать чтоб розовая полоса не переходила на другую строку, а чтоб было слева желтое на 35%, а справа все заполнялось розовой полосой?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<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">
body,html{
margin:0px;
padding:0px;
}
#header {width:60%; background-color:#CCFFCC; text-align:center; margin:0px auto;}
#left{width:35%; background-color:#FFFFCC; }
#content{background-color:#FFCCCC; }
#footer{ background-color:#669900;}
</style>
</head>
<body>
<div id="header">  
<div id="left"> </div>  
<div id="content"> </div>  
<div id="footer"> </div>  
</div> 
 </body>
</html>

sigma77 · September 5, 2011

http://htmlbook.ru/layout/rezinovaya-shirina-navigatsiya-sleva

romantik2011 · September 5, 2011

Вот так вышло.


<!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;}
#header {margin:0px auto; width:800px; background-color:#FFCC99; }
#left{margin-top:20px; background-color:#FFFFCC; width:35%; float:left;  border-left:1px solid black; border-right:1px solid black; text-align:center;}
#kontent{background-color:white; text-align:center;  border:1px solid black; border-collapse:collapse;}
#footer{text-align: center; background-color:#CC9966;}
</style>
</head>
<body>
<div id="header">Моя страница
<div id="left">Menu</div>
<div id="kontent">Главная страница</div>
<div id="footer">Copyright © Филип Киркоров <? echo date('Y'); ?></div>
</div>
 </body>
</html>

Как записать, вот эти 2 записи одной записью в ксс?

border-left:1px solid black; border-right:1px solid black;

Edited September 5, 2011 by romantik2011

romantik2011 · September 5, 2011

Как сделать чтоб вот так отображало на всех браузерах, что-то не выходит.


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

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

http://s1.ipicture.ru/uploads/20110905/qe2L1EhW.jpg

Sign In

Розовая полоса

Question

romantik2011

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

sigma77

Link to comment

Share on other sites

romantik2011

Link to comment

Share on other sites

romantik2011

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information