| |
|
|
| | Таблица должна располагаться слева и быть шириной 150 пикселей (для меню). Остальной текст страницы эту таблицу должен обтекать справа.
Ниже я привел код, который попытался для этой цели использовать. Он не работает так, как надо: весь текст пишется справа от таблицы и за пределами рабочего поля страницы.
Почему это так, понятно: для форматирования текста используется сss, а таблица задана иначе и эти способы задания форматирования не совмещаются.
Можете дать рабочий код страницы?
<style>
p {
margin-top: 0pt;
margin-bottom: 0pt;
margin-right: 10px;
margin-left: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 25px;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-align: justify;
text-indent: 25px;
width: 980px;
}
</style>
</head>
<body>
<div align="left">
<table border="0" width="150" style="border-collapse: collapse" id="table1" cellspacing="2" align="left">
<tr>
<td>
<p align="center" style="text-indent: 0px; line-height: 100%; text-align: center">
<font face="Arial Narrow" style="font-size: 15pt" color="#FF0000">Меню сайта</font></td>
</tr>
<tr>
<td>
<p align="center" style="text-indent: 0px; line-height: 100%; text-align: center">
<font color="#0000FF" face="Century">Первая строка</font></td>
</tr>
</table>
</div>
<p>Это текст тела страницы Это текст тела страницы Это текст тела страницы </p>
|
| |
| |
|
|
| |
|
|
| |
для: Владимир55
(04.10.2011 в 19:50)
| | | А div-блоку, который окружает таблицу можно присваивать идентификатор id или HTML-код должен оставаться таким, какой приведен выше? | |
| |
|
|
| |
|
|
| |
для: cheops
(04.10.2011 в 20:53)
| | | Как проще, так и лучше. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(04.10.2011 в 21:17)
| | | float: left | |
| |
|
|
| |
|
|
| |
для: Владимир55
(04.10.2011 в 19:50)
| | | >Можете дать рабочий код страницы?
>
<!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></title>
<style>
html {margin:0;height:100%;}
body {margin:0;height:100%; overflow: hidden;}
#wrapper {height:100%; min-height:97%; min-width:100%;}
#container {height:auto !important; height:100%; min-height:100%; min-width:100%;}
#left {float:left; width:150px; height: 100%; min-height: 100%;}
#center {margin-left:150px; height: 100%; min-height: 100%; overflow: auto;}
.clear {clear:both;}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 25px;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-align: justify;
text-indent: 25px;
}
</style>
</head>
<body>
<div id='wrapper'>
<div id='container'>
<div id='left'>
<table border="0" width="150" style="border-collapse: collapse" id="table1" cellspacing="2" align="left">
<tr>
<td>
<p align="center" style="text-indent: 0px; line-height: 100%; text-align: center">
<font face="Arial Narrow" style="font-size: 15pt" color="#FF0000">Меню сайта</font></td>
</tr>
<tr>
<td>
<p align="center" style="text-indent: 0px; line-height: 100%; text-align: center">
<font color="#0000FF" face="Century">Первая строка</font></td>
</tr>
</table>
</div>
<div id='right'><p>Это текст тела страницы Это текст тела страницы Это текст тела страницы </p> </div>
</div>
<div class='clear'></div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: elenaki
(04.10.2011 в 21:49)
| | | Спасибо, всё замечательно работает!!!
Однако есть один нюанс, который я не учел.
В рабочей версии имеется флешка и с ней нагорожено много чего, что для большей выпуклости проблемы я не отразил. И так случайно получилось, что эти обозначения пересеклись с Вашими!
В рабочей версии есть код:
body{ background:#FFFFFF url(images/rez2.gif) 0 0 repeat-x; margin:0; padding:0;}
html, input, textarea{font-family:Verdana; font-size:11px; color:#4E4C32; margin:0; padding:0;}
|
Он не будет конфликтовать с Вашим?
В рабочей версии есть ещё стили:
.wrapper {
width:1000px;
margin:0 auto;
position:relative;
}
.flashed {
width:766px;
margin:0 auto;
z-index:10;
}
.headpage {
color: #0161B8;
font-family: Georgia;
font-size: 47px;
font-weight: bold;
padding-top: 40px;
position: absolute;
text-align: center;
top: 0;
left: 0;
width: 1000px;
z-index:20;
}
.flash_left {
color: #0161B8;
font-family: Verdana;
font-size: 16px;
font-weight: bold;
left: 0;
position: absolute;
top: 347px;
width: 298px;
text-align:center;
z-index:20;
}
.flash_right {
color: #0161B8;
font-family: Verdana;
font-size: 16px;
font-weight: bold;
right: 0;
position: absolute;
top: 347px;
width: 149px;
text-align:center;
z-index:20;
}
|
Я также опасаюсь конфлика...
Как бы это аккуратненько разрулить? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(04.10.2011 в 22:11)
| | |
<!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></title>
<style>
html {margin:0;height:100%;}
body {margin:0;height:100%; overflow: hidden; background:#FFFFFF url(images/rez2.gif) 0 0 repeat-x; padding:0;}
html, input, textarea{font-family:Verdana; font-size:11px; color:#4E4C32; margin:0; padding:0;}
#wrapper {height:100%; min-height:100%; min-width:100%; width:1000px; margin:0 auto; position:relative; }
#container {height:auto !important; height:100%; min-height:100%; min-width:100%;}
#left {float:left; width:150px; height: 100%; min-height: 100%;}
#center {margin-left:150px; height: 100%; min-height: 100%; overflow: auto;}
.clear {clear:both;}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 25px;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-align: justify;
text-indent: 25px;
}
.flashed {
width:766px;
margin:0 auto;
z-index:10;
}
.headpage {
color: #0161B8;
font-family: Georgia;
font-size: 47px;
font-weight: bold;
padding-top: 40px;
position: absolute;
text-align: center;
top: 0;
left: 0;
width: 1000px;
z-index:20;
}
.flash_left {
color: #0161B8;
font-family: Verdana;
font-size: 16px;
font-weight: bold;
left: 0;
position: absolute;
top: 347px;
width: 298px;
text-align:center;
z-index:20;
}
.flash_right {
color: #0161B8;
font-family: Verdana;
font-size: 16px;
font-weight: bold;
right: 0;
position: absolute;
top: 347px;
width: 149px;
text-align:center;
z-index:20;
}
</style>
</head>
<body>
<div id='wrapper'>
<div id='container'>
<div id='left'>
<table border="0" width="150" style="border-collapse: collapse" id="table1" cellspacing="2" align="left">
<tr>
<td>
<p align="center" style="text-indent: 0px; line-height: 100%; text-align: center">
<font face="Arial Narrow" style="font-size: 15pt" color="#FF0000">Меню сайта</font></td>
</tr>
<tr>
<td>
<p align="center" style="text-indent: 0px; line-height: 100%; text-align: center">
<font color="#0000FF" face="Century">Первая строка</font></td>
</tr>
</table>
</div>
<div id='right'><p>Это текст тела страницы Это текст тела страницы Это текст тела страницы </p> </div>
</div>
<div class='clear'></div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Владимир55
(04.10.2011 в 22:11)
| | | К слову - "font" как устаревший в таблице можно чем-то заменить?
Да, и "border-collapse" вроде бы тоже устарел?
В общем, было бы неплохо сделать таблицу в современном CSS стиле, что бы я на будущее взял её за образец. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(04.10.2011 в 22:20)
| | |
<p align="center" style="text-indent: 0px; line-height: 100%; text-align: center; font-family: Arial Narrow; color: #FF0000; font-size: 15pt;">
|
| |
| |
|
|
| |
|
|
| |
для: elenaki
(04.10.2011 в 22:28)
| | | - | |
| |
|
|
