Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Умучился уже я с этой таблицей...
 
 автор: Владимир55   (19.10.2011 в 16:27)   письмо автору
36.7 Кб
 
 

Вторую неделю ковыряюсь я в этом коде, да всё безуспешно!

В левой части таблица для меню, а остальной текст должен её обтекать. Но получается так, что ширина страницы увеличивается на ширину этой таблицы и возникает горизонтальная прокрутка (скриншот). Какой-то тут есть нюанс, но не пойму, какой именно.

Вот код (привожу полностью - на всякий случай):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Настройка</title>


<style type="text/css">
<!--

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;}

.men {
    margin-top:     0pt;
    margin-bottom:     0pt;
    margin-right:     10px;
    margin-left:      10px;
    font-family:     Arial, Helvetica, sans-serif;
    font-size:         18px;
    font-style:     normal;
    line-height:     100%;
    font-weight:     normal;
    font-variant:     normal;
    text-transform: none;
    text-align:     justify;
    text-indent:     25px;
}


.tex {
    margin-top:     0pt;
    margin-bottom:     0pt;
    margin-right:     10px;
    margin-left:      10px;
    font-family:     Arial, Helvetica, sans-serif;
    font-size:         18px;
    font-style:     normal;
    line-height:     25px;
    font-weight:     normal;
    font-variant:     normal;
    text-transform: none;
    text-align:     justify;
    text-indent:     25px;
    line-height:     100%;
    width:             980px;
}

H1 {
    text-align:     center;
    font-size:         18px;

}


.vv {
    font-family:     Verdana, Geneva, sans-serif;
    font-size:         12px;
    font-style:     normal;
    text-align:     left;
    text-indent:     25px;
    text-decoration: underline;
}

.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;
}


-->
</style>
</head>

<body>

<div class="wrapper">
    <div class="headpage">Шапка</div>
    <div class="flash_left">Левый текст</div>
    <div class="flash_right">Правый текст</div>
    <div class="flashed"><!-- Flash area -->
        <object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="766" height="415">
        <param name="movie" value="/flash/header_fv7.swf?button=1" />
        <param name="quality" value="high" />
        <PARAM NAME="wmode" VALUE="transparent" />
        <embed src="/flash/header_fv7.swf?button=1" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="766" height="415"></embed>
        </object>                            
    </div><!-- //Flash area -->
</div>


<table width="200" border="1" align="left" cellpadding="5" cellspacing="7">
  <tr>
    <td class="men"><p><a href="claim-to-bank.html">Первая строка</a></p>
    <p>Вторая строка</p></td>
  </tr>
</table> 



<p class="tex">Тело страницы 8 8 8 8 8 88 8 8 8 8 8 8 8 8 88 8 8  9 9 9 9  8 8  7 7 6 6 6  5 5 5 55 5 5 5 5 5 5  55 5 5 5 5 5 </p>

</body>
</html>


ОЧЕНЬ хотелось бы, что бы необходимая правка оказалась внутри контейнера table, а не где-то в контейнере <style type="text/css">

  Ответить  
 
 автор: ONYX   (20.10.2011 в 07:28)   письмо автору
 
   для: Владимир55   (19.10.2011 в 16:27)
 

Дело в том что вы задаете строгий размер для тега <p class="tex"> в 980 пикселов
.tex {
     width:             980px;
}


в тандеме со строго заданной шириной для меню в 200 пикселов
<table width="200"...>

они делают ширину родительского блока равной 1180 пикселов, а у вас я полагаю разрешение экрана в 1024 х 768 в результате вы получаете боковой скроллинг.

Как этого избежать? Уберите строго заданную ширину для тега <p class="text"> и блок автоматически будет заполнятся текстом на ширину блока.

  Ответить  
 
 автор: Владимир55   (20.10.2011 в 10:37)   письмо автору
 
   для: ONYX   (20.10.2011 в 07:28)
 

Спасибо, так оно и оказалось!

Скажите, а если я задам фон таблицы вот так
<table width="200" border="1" align="left" cellpadding="5" cellspacing="7" bgcolor="#FF00FF"> 

это корректно?

  Ответить  
 
 автор: ONYX   (20.10.2011 в 11:27)   письмо автору
 
   для: Владимир55   (20.10.2011 в 10:37)
 

Вполне валидный хтмл атрибут с указанием цвета фона.

  Ответить  
 
 автор: АЯС   (20.10.2011 в 12:45)   письмо автору
 
   для: ONYX   (20.10.2011 в 11:27)
 

Ну да... "валидно"... если СОВСЕМ не учитывать, что в спецификации HTML 4.01 атрибут BGCOLOR объявлен для таблицы deprecated - см. http://www.w3.org/TR/1999/REC-html401-19991224/index/attributes.html

Впрочем, как и ALIGN, и WIDTH...

Валидно будет так:
<table cellpadding="5" cellspacing="7" border="1" style="width: 200px; text-align: left; backgroud-color: #FF00FF">

Но вы тут все умные...

  Ответить  
 
 автор: Владимир55   (20.10.2011 в 16:20)   письмо автору
14.1 Кб
 
   для: АЯС   (20.10.2011 в 12:45)
 

Однако, этот код работает неправильно: обтекания таблицы не происходит !
(скриншот)

  Ответить  
 
 автор: Lelik   (20.10.2011 в 16:43)   письмо автору
 
   для: Владимир55   (20.10.2011 в 16:20)
 

надо в style добавить float: left;

  Ответить  
 
 автор: Владимир55   (20.10.2011 в 16:54)   письмо автору
 
   для: Lelik   (20.10.2011 в 16:43)
 

Тогда работает, но при условии, что удален text-align: left;

Спасибо!

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования