‘орум программистов, компьютерный форум, киберфорум
Ќаши страницы
HTML, CSS
¬ойти
–егистраци€
¬осстановить пароль
 
nb21
0 / 0 / 0
–егистраци€: 26.10.2016
—ообщений: 13
1

ѕрикрепить футер в табличной вЄрстке или просто закрепить нижнюю область

26.10.2016, 00:11. ѕросмотров 293. ќтветов 14
ћетки нет (¬се метки)

¬сем привет!
Ќужно сверстать страницу именно в табличном варианте и что бы прижать футер к низу, подскажите пожалуйста как это лучше всего реализовать? ≈сли никак, или это сверх "идиотска€" зате€, подскажите пожалуйста в таком случае, как еще можно улучшить существующий вариант в плане дизайна и практичности, буду очень признателен за любые ваши советы и рекомендации, спасибо! «адача стоит на ва€ть некий улучшенный вариант и что бы красиво, но ума не приложу как его улучшить =(

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<STYLE>
a{text-decoration:none;}
TABLE {
    font-weight: normal;
    font-size: 8pt;
    border:none;
    border-collapse:collapse;
    border-spacing : 0px;
    left : 0px;
    letter-spacing : 0px;
    right : 0px;
}
BODY {font-family:Arial Cyr, Arial;
    font-weight: normal;
    font-size: 8pt; 
    color: black;
  .table_name {
  border: 3px;
  border-left: 3px solid #83C447;
  border-right: 3px solid #83C447;
  border-bottom: 3px solid #83C447;
  border-top: 3px solid #83C447;
  font-family: "Lucida Grande", sans-serif;
    }
</STYLE>
</head>
<body>
<table width="100%" border=0>
 
 
<TR>
  <TD><img src="logo.jpg" width="50%" height="50%"></TD>
  <TD align="right" width="5%"></TD>
  <TD align="right">
    <table>
    <TR>
      <TD align="left">~MAST_NM~</TD>
    </TR>
    <TR>   
      <TD align="left">¬™√Д√Р√П√О√У ~MAST_OKPO~</TD>
    </TR>   
    <TR>   
      <TD align="left">√Ю√∞√®√§√®√Ј√•√±√™√®√© √*√§√∞√•√±: ~MAST_UADDR~</TD>
    </TR>   
    <TR>   
      <TD align="left">√≤√•√Ђ. ~MAST_TEL_FOR_DOC~</TD>
    </TR>   
    <TR>   
      <TD align="left">e-mail: ~MAST_MAIL_FOR_DOC~</TD>
    </TR>
    </table>
  </TD>
</TR>  
</table>
 
<hr color="#83c447" width="100%" size="8">
<div align="center"><font color="#000000" style="FONT-WEIGHT: bold; FONT-SIZE: 10pt; FONT-FAMILY: Arial">√К√О√М√Е√Р√Ч√Е√С√К√О√Е √П√Р√Е√Д√Л√О√Ж√Е√Н√И√Е
√Ѓ√≤ ~DOC_DT~ 
 
 
</font></div>
 
<table width="100%" border=0 align="center">
 
 
<TR>
  <TD align="left" width="19%">
  <TD align="right" valign="top" width="30%">√Д√Ђ√њ
  <TD align="left">~FIRM_NM~</TD>
<TR>
  <TD align="left" width="5%">
  <TD align="right"  valign="top">√К√Ѓ√§
  <TD align="left"> ~FIRM_OKPO~</TD>
<TR>
  <TD align="left" width="5%">
  <TD align="right"  valign="top">√А√§√∞√•√±
  <TD align="left">~FIRM_UADDR~</TD>
<TR>
  <TD align="left" width="5%">
        <TD align="right"  valign="top">√≤√•√Ђ.
        <TD align="left">~FIRM_TEL_FOR_DOC~</TD>
   <TD align="right" width="15%">
 
 
</table>
<table>
  <tr>
    <td height="12%"></td>
  </tr>  
</table>
<table width="100%" class="table_name" border="1">
  <TR>
      <th width="21%" valign="middle" bgcolor="#787878"><font size="2" font color="#FFFFFF">√М√Ѓ√§√•√Ђ√Љ</font></th>
      <th width="10%" valign="middle" bgcolor="#787878"><font size="2" font color="#FFFFFF">√М√*√∞√™√*</font></th>
      <th width="30%" valign="middle" bgcolor="#787878"><font size="2" font color="#FFFFFF">√О√ѓ√®√±√*√*√®√•</font></th>
      <th width="9%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">√Ц√•√*√* ~curr_sign~</font></th>
      <th width="3%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">√Е√§. √®√І√ђ.</font></th>
      <th width="3%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">√Ш√≤</font></th>
      <th width="9%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">√В√±√•√£√Ѓ ~curr_sign~</font></th>
  </TR>
</table>
<table width="100%" border="1" bordercolor="#000000">
  <tr bordercolor="#000000" bgcolor="#FFCD9B" border="1"> 
    <th width="21%" valign="middle"><font size="2">√М√Ѓ√§√•√Ђ√Љ</font></th>
    <th width="10%" valign="middle" bgcolor="#FFCD9B"><font size="2">√М√*√∞√™√*</font></th>
    <th width="30%" valign="middle" bgcolor="#FFCD9B"><font size="2">√О√ѓ√®√±√*√*√®√•</font></th>
    <th width="9%" valign="middle"><font size="2">√Ц√•√*√* ~curr_sign~</font></th>
    <th width="3%" valign="middle"><font size="2">√Е√§. √®√І√ђ.</font></th>
    <th width="3%" valign="middle"><font size="2">√Ш√≤</font></th>
    <th width="9%" valign="middle"><font size="2">√В√±√•√£√Ѓ ~curr_sign~</font></th>
  </tr>
  <tr bordercolor="#000000" bgcolor="#C1FFD1"> 
    <th colspan="7" align="left" ><font size="2">~GMSTF_NM~ ~header(GMSTF_NM)~</font></th>
  </tr>
  <tr bordercolor="#000000" > 
    <td width="21%" valign="middle"><font size="2">~ART~</font></td>
    <td width="10%"><font size="2">~DF2~</font></td>
    <td width="30%"><font size="2">~CMNT~</font></td>
    <td width="9%" align="right" valign="middle"><font size="2">~pr1~</font></td>
    <td width="3%" align="center" valign="middle"><font size="2">~ED~</font></td>
    <td width="3%" align="center" valign="middle"><font size="2">~QTY~</font></td>
    <td width="9%" align="right" valign="middle"><font size="2">~sumsnds~</font></td>
  </tr>
  <tr bordercolor="#000000"> 
    <th height="19" colspan="7" align="right"><font size="2">√В√±√•√£√Ѓ:&nbsp ~footer(GMSTF_NM)~~SUM(sumsnds,GMSTF_NM)~</font></th>
  </tr>
  <tr bordercolor="#000000"> 
    <th height="17" colspan="7" align="right" valign="middle"><font size="2">√В√±√•√£√Ѓ √ѓ√Ѓ √ѓ√∞√•√§√Ђ√Ѓ√¶√•√*√®√Њ:&nbsp ~SUM(sumsnds)~</font></th>
  </tr>
</table>
 
 
 
<td colspan="8"><font size="3"><font style="WIDTH: 21%"
     >√О√°√є√*√њ √±√≥√ђ√ђ√* √±√Ѓ√±√≤√*√Ґ√Ђ√њ√•√≤:</font><font  
      style="WIDTH: 78%; BACKGROUND-COLOR: #b0b0b0">  <b>&nbsp;&nbsp;&nbsp;~SUMSLOV~</b> </font> 
 
</body>
</html>
0
Similar
Ёксперт
41792 / 34177 / 6122
–егистраци€: 12.04.2006
—ообщений: 57,940
26.10.2016, 00:11
ќтветы с готовыми решени€ми:

«акрепить футер
«дравствуйте. Ќикак не получаетс€ закрепить футер. ≈сли на ноутбуке с...

 ак закрепить футер?
¬сем привет почему-то футер плавающий как сделать чтоб он всегда был ниже...

 ак прикрепить футер
начал учить css уже 2 недели!трудно даетс€ позиционирование!!! пока стоит...

как прикрепить футер к низу страницы
¬сем привет. ѕодскажите пожалуйста как прикрепить футер к низу страницы, чтобы...

ѕрикрепить футер сайта к низу страницы
 ак сделать чтобы подвал был в самом низу.  огда информации много тогда он...

14
mrtoxas
ћодератор
Ёксперт HTML/CSS
2622 / 1935 / 1204
–егистраци€: 12.07.2015
—ообщений: 5,163
«аписей в блоге: 3
26.10.2016, 11:31 2
Ќе пон€тно:
- где там футтер?
- где доктайп?
- почему windows-1251?
- где закрывающа€ скобка стил€ body?
- что это за <tr> внизу, оторванный от таблицы - это футтер?

—тили, указанные в тэгах - плохо. “эг <font> устарел.
0
nb21
0 / 0 / 0
–егистраци€: 26.10.2016
—ообщений: 13
26.10.2016, 11:41  [“—] 3
- футера пока нет, футер должен быть в виде полосы зелЄного цвета на которой должен быть текст: тел,е-мейл,адрес.
- доктайп, кодировка и фонт не столь важны, это в интернет не пойдЄт, данный шаблон будет работать как шаблон счЄт-фактуры в программе, а сама программа не понимает блочную вЄрстку, по-этому приходитьс€ так извращатьс€)
0
mrtoxas
ћодератор
Ёксперт HTML/CSS
2622 / 1935 / 1204
–егистраци€: 12.07.2015
—ообщений: 5,163
«аписей в блоге: 3
26.10.2016, 13:14 4
ѕробуйте
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Document</title>
  <style type="text/css">
    html,body{
    height:100%;
  }
  </style>
</head>
<body>
  <table height="100%" width="100%" cellspacing="0">
    <tr>
      <td valign="top" height="100%">
        <table border="3" bordercolor="green" cellpadding="5" cellspacing="0" rules="all">
          <tr>
            <th>item1</th>
            <th>item2</th>
            <th>item3</th>
            <th>item4</th>
          </tr>
          <tr>
            <td>item5</td>
            <td>item6</td>
            <td>item7</td>
            <td>item8</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td height="45px" bgcolor="green">‘уттер</td>
    </tr>
  </table>
</body>
</html>
0
nb21
0 / 0 / 0
–егистраци€: 26.10.2016
—ообщений: 13
26.10.2016, 14:43  [“—] 5
ƒа отлично, но вопрос почему при печати не вывод€тьс€ те цвета которые € задал?

ƒобавлено через 1 минуту
и еще вопрос почему когда задаю
CSS
1
background-image: url(images/bg.jpg);
картинка не по€вл€етс€?
0
mrtoxas
ћодератор
Ёксперт HTML/CSS
2622 / 1935 / 1204
–егистраци€: 12.07.2015
—ообщений: 5,163
«аписей в блоге: 3
26.10.2016, 14:47 6
 артинка не по€вл€етс€ при печати, или на экране?
0
nb21
0 / 0 / 0
–егистраци€: 26.10.2016
—ообщений: 13
26.10.2016, 14:50  [“—] 7
 артинка не по€вл€етс€ на экране, а вот цвета которые € говорил не по€вл€ютс€ на печати, к примеру та зелЄна€ область внизу или €чейки верхнии у мен€ серого цвета а текст белого, но при печати стандартно фон белый а текст чЄрный.
0
mrtoxas
ћодератор
Ёксперт HTML/CSS
2622 / 1935 / 1204
–егистраци€: 12.07.2015
—ообщений: 5,163
«аписей в блоге: 3
26.10.2016, 14:59 8
Ќасчет картинки, покажите код, так сложно сказать. ј насчет печати, не сталкивалс€. ѕопробуйте указать цвета в hex, rgb или rgba.
0
nb21
0 / 0 / 0
–егистраци€: 26.10.2016
—ообщений: 13
26.10.2016, 15:22  [“—] 9
я в стил€х прописал вверху, а по-поводу печати странно ведь остальные цвета, рамки доспустим он нормально печатает в зеленом цвете.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Commercial_offer</title>
  <style>
    html,body{
    background-image: url(img/bg.jpg);
    background-repeat: no-repeat;
    height:100%;
    font-family:Sans-serif;
    font-weight: normal;
    font-size: 8pt; 
    color: black;
  }
    .table_name {
    border: 2px;
    border-left: 2px solid #83C447;
    border-right: 2px solid #83C447;
    border-bottom: 2px solid #83C447;
    border-top: 2px solid #83C447;
    font-family: "Verdana";
  }
 
  </style>
</head>
<body>
<table width="100%" border=0>
 
 
<TR>
  <TD><img src="Comtel_logo.jpg" width="50%" height="50%"></TD>
  <TD align="right" width="5%"></TD>
  <TD align="right">
    <table>
    <TR>
      <TD align="left">~MAST_NM~</TD>
    </TR>
    <TR>   
      <TD align="left">¬™√Д√Р√П√О√У ~MAST_OKPO~</TD>
    </TR>   
    <TR>   
      <TD align="left">√Ю√∞√®√§√®√Ј√•√±√™√®√© √*√§√∞√•√±: ~MAST_UADDR~</TD>
    </TR>   
    <TR>   
      <TD align="left">√≤√•√Ђ. ~MAST_TEL_FOR_DOC~</TD>
    </TR>   
    <TR>   
      <TD align="left">e-mail: ~MAST_MAIL_FOR_DOC~</TD>
    </TR>
    </table>
  </TD>
</TR>  
</table>
<hr color="#83c447" width="100%" size="5">
<div align="center"><font color="#000000" style="FONT-WEIGHT: bold; FONT-SIZE: 10pt; FONT-FAMILY: Arial">√К√О√М√М√Е√Р√Ч√Е√С√К√О√Е √П√Р√Е√Д√Л√О√Ж√Е√Н√И√Е<br>
√Ѓ√≤ ~DOC_DT~ <br>
<br>
 
</font></div>
 
<table width="100%" border=0 align="center">
 
 
<TR>
  <TD align="left" width="19%">
  <TD align="right" valign="top" width="30%">√Д√Ђ√њ
  <TD align="left">~FIRM_NM~</TD>
<TR>
  <TD align="left" width="5%">
  <TD align="right"  valign="top">√К√Ѓ√§
  <TD align="left"> ~FIRM_OKPO~</TD>
<TR>
  <TD align="left" width="5%">
  <TD align="right"  valign="top">√А√§√∞√•√±
  <TD align="left">~FIRM_UADDR~</TD>
<TR>
  <TD align="left" width="5%">
        <TD align="right"  valign="top">√≤√•√Ђ.
        <TD align="left">~FIRM_TEL_FOR_DOC~</TD>
   <TD align="right" width="15%">
 
 
</table>
 
<table>
  <tr>
    <td height="12%"></td>
  </tr>  
</table>
<table width="100%" class="table_name" border="3" bordercolor="ffffff">
  <TR>
      <th width="21%" valign="middle" bgcolor="#787878"><font size="2" font color="#FFFFFF">√М√Ѓ√§√•√Ђ√Љ</font></th>
      <th width="10%" valign="middle" bgcolor="#787878"><font size="2" font color="#FFFFFF">√М√*√∞√™√*</font></th>
      <th width="30%" valign="middle" bgcolor="#787878"><font size="2" font color="#FFFFFF">√О√ѓ√®√±√*√*√®√•</font></th>
      <th width="9%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">√Ц√•√*√* ~curr_sign~</font></th>
      <th width="3%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">√Е√§. √®√І√ђ.</font></th>
      <th width="3%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">√Ш√≤</font></th>
      <th width="9%" valign="middle" bgcolor="#787878"><font size="2" color="#FFFFFF">√В√±√•√£√Ѓ ~curr_sign~</font></th>
  </TR>
  <tr bordercolor="#ffffff" bgcolor="#83C447"> 
    <th colspan="7" align="left" ><font size="2">~GMSTF_NM~ ~header(GMSTF_NM)~</font></th>
  </tr>
  <tr bordercolor="#000000" > 
    <td width="21%" valign="middle"><font size="2">~ART~</font></td>
    <td width="10%"><font size="2">~DF2~</font></td>
    <td width="30%"><font size="2">~CMNT~</font></td>
    <td width="9%" align="right" valign="middle"><font size="2">~pr1~</font></td>
    <td width="3%" align="center" valign="middle"><font size="2">~ED~</font></td>
    <td width="3%" align="center" valign="middle"><font size="2">~QTY~</font></td>
    <td width="9%" align="right" valign="middle"><font size="2">~sumsnds~</font></td>
  </tr>
  <tr bordercolor="#000000"> 
    <th height="19" colspan="7" align="right"><font size="2">√В√±√•√£√Ѓ:&nbsp ~footer(GMSTF_NM)~~SUM(sumsnds,GMSTF_NM)~</font></th>
  </tr>
  <tr bordercolor="#000000"> 
    <th height="17" colspan="7" align="right" valign="middle"><font size="2">√В√±√•√£√Ѓ √ѓ√Ѓ √ѓ√∞√•√§√Ђ√Ѓ√¶√•√*√®√Њ:&nbsp ~SUM(sumsnds)~</font></th>
  </tr>
</table>
 
<br/>
 
<td colspan="8"><font size="3"><font style="WIDTH: 21%" 
     >√О√°√є√*√њ √±√≥√ђ√ђ√* √±√Ѓ√±√≤√*√Ґ√Ђ√њ√•√≤:</font><font   
      style="WIDTH: 78%; BACKGROUND-COLOR: #b0b0b0">  <b>&nbsp;&nbsp;&nbsp;~SUMSLOV~</b> </font>
       <tr>
      <td height="45px" bgcolor="green"></td>
    </tr>
 
  <table height="50%" width="100%" cellspacing="0">
    <tr>
      <td valign="top" height="100%">
        <table border="3" bordercolor="green" cellpadding="5" cellspacing="0" rules="all">
        </table>
      </td>
    </tr>
    <tr>
      <td height="25px" bgcolor="#83C447"></td>
    </tr>
  </table>
</body>
</html>
0
mrtoxas
ћодератор
Ёксперт HTML/CSS
2622 / 1935 / 1204
–егистраци€: 12.07.2015
—ообщений: 5,163
«аписей в блоге: 3
26.10.2016, 15:40 10
ѕомен€йте color: black на:
CSS
1
2
3
4
5
color: #000000;
/* или */
color: rgb(0,0,0);
/* или */
color: rgba(0,0,0,1);
ћожно еще в конец стилей попробовать добавить:
CSS
1
2
3
4
5
@media print{
 body{
 color: #000000;
}
}
ѕопробуйте убрать <font>, если программа с css работает нормально.
0
nb21
0 / 0 / 0
–егистраци€: 26.10.2016
—ообщений: 13
26.10.2016, 15:43  [“—] 11
ѕо-поводу печати разобралс€, это настройки браузера, там можно в режиме предварительной печати выбрать (печать графики), и всЄ заработало. ј вот по-поводу картинки так и не отображаетс€, подскажите пожалуйста в чЄм проблема.
0
mrtoxas
ћодератор
Ёксперт HTML/CSS
2622 / 1935 / 1204
–егистраци€: 12.07.2015
—ообщений: 5,163
«аписей в блоге: 3
26.10.2016, 15:48 12
—тиль относительно правильно написан. “олько так будет правильнее:
CSS
1
2
3
4
5
6
7
8
9
10
11
 html,body{
    height:100%;
}
 body{
    background-image: url(img/bg.jpg);
    background-repeat: no-repeat;
    font-family:Sans-serif;
    font-weight: normal;
    font-size: 8pt; 
    color: black;
  }
’от€ это не решит проблему, но сделайте так.
ѕуть к картинке правильно указан? ¬ инструментах разработчика не пишетс€, "не могу найти картинку"?
0
nb21
0 / 0 / 0
–егистраци€: 26.10.2016
—ообщений: 13
26.10.2016, 15:53  [“—] 13
Ќеа роли не сыграло, картинка находитьс€ в корне с самим файлом HTML
0
mrtoxas
ћодератор
Ёксперт HTML/CSS
2622 / 1935 / 1204
–егистраци€: 12.07.2015
—ообщений: 5,163
«аписей в блоге: 3
26.10.2016, 16:47 14
“огда
HTML5
1
2
3
4
5
  <style>
    body{
       background-image: url(bg.jpg);
    }
  </style>
0
nb21
0 / 0 / 0
–егистраци€: 26.10.2016
—ообщений: 13
26.10.2016, 17:27  [“—] 15
«аработало, там с размером была проблема, картинка была в самом низу, когда ее в фотошопе повесил наверх сразу по€вилась. ѕравда задум не оправдал моих ожиданий, получаетьс€ очень колхозно =(
€ просто думал сделать подложку в виде:

ѕрикрепить футер в табличной вЄрстке или просто закрепить нижнюю область


ќдно дело такое нарисовать в »ллюстраторе или подогнать в браузере а другое в табличной вЄрстке дл€ прайс-листа (
0
26.10.2016, 17:27
MoreAnswers
Ёксперт
37091 / 29110 / 5898
–егистраци€: 17.06.2006
—ообщений: 43,301
26.10.2016, 17:27

прикрепить футер к нижней границе родительского блока
ѕроблема така€: есть обертка, в ней заголовок фиксированной ширины, N блоков...

ѕрижатый к низу футер и одинаковые колонки на всю область видимости
ѕривет, реб€та! Ќужно сделать прижатый к низу футер и колонки одинаковой высоты...

«акрепить область виджета на главной страниц?
¬иджет Nomad world map ¬ставл€етс€ через диалоговые окна темы ставлю...


»скать еще темы с ответами

»ли воспользуйтесь поиском по форуму:
15
ќтвет —оздать тему
ќпции темы

 ибер‘орум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
–ейтинг@Mail.ru