VPF::Розовая полоса - Форум программистов

romantik2011

Дата 5.9.2011, 14:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 20.7.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>

0Scrum

Дата 5.9.2011, 15:33 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Код


<!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;
}
#wrap {
  width: 60%;
  margin: 0 auto;
  text-align: center;
  background-color:#CCFFCC;
}
#left{
  width:35%;
  float:left; /* add */
  background-color:#FFFFCC;
  }
#content{
  background-color:#FFCCCC;
  margin-left: 35%; /* add */
  }
#footer{
  background-color:#669900;
  }
</style>
</head>
<body>
<div id="wrap">
    <div id="header">header</div>
    <div id="left"> left </div>
    <div id="content"> content </div>
    <div id="footer"> footer </div>
</div>
 </body>
</html>

romantik2011

Дата 5.9.2011, 19:49 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 20.7.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;

romantik2011

Дата 5.9.2011, 20:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 20.7.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>

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

Это сообщение отредактировал(а) romantik2011 - 5.9.2011, 20:55

Присоединённый файл ( Кол-во скачиваний: 3 )

clip_image002.jpg 10,89 Kb

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »