powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выравнивание SPAN кнопки
15 сообщений из 15, страница 1 из 1
Выравнивание SPAN кнопки
    #38018992
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: html
1.
2.
3.
4.
5.
6.
7.
<td align="right">
  <span class="buttons">
    <a class="positive" href="javascript:RunLogin();">
      <img alt="" src="/images/positive.png">Вход</img>
    </a>
  </span>
</td>



Есть вот такая ячейка с css кнопкой. Никак не могу выравнять ее по правому краю.
Подскажите пожалуйста как мне можно это сделать?

Спасибо

PS:Без margin и padding, тк они в разных браузерах по разному смещают.
...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38019016
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Э-э-э, а) зачем такая сложная архитектура, когда можно кнопкой решить? б) где стили, чтобы понять что неправильно?
...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38019037
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: css
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.
.buttons a, .buttons button{  
   display:block;  
   float:left;  
   margin:0 7px 0 0;  
   background-color:#f5f5f5;  
   border:1px solid #dedede;  
   border-top:1px solid #eee;  
   border-left:1px solid #eee;  
   font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;  
   font-size:12px;  
   line-height:130%;  
   text-decoration:none;  
   font-weight:bold;  
   color:#565656;  
   cursor:pointer;  
   padding:5px 10px 6px 7px; /* Links */  
 }  
 .buttons button{  
   width:auto;  
   overflow:visible;  
   padding:4px 10px 3px 7px; /* IE6 */  
 }  
 .buttons button[type]{  
   padding:5px 10px 5px 7px; /* Firefox */  
   line-height:17px; /* Safari */  
 }  
 *:first-child+html button[type]{  
   padding:4px 10px 3px 7px; /* IE7 */  
 }  
 .buttons button img, .buttons a img{  
   margin:0 3px -3px 0 !important;  
   padding:0;  
   border:none;  
   width:16px;  
   height:16px;  
 }  
 button.positive, .buttons a.positive{  
   color:#529214;  
 }  
 .buttons a.positive:hover, button.positive:hover{  
   background-color:#E6EFC2;  
   border:1px solid #C6D880;  
   color:#529214;  
 }  
 .buttons a.positive:active{  
   background-color:#529214;  
   border:1px solid #529214;  
   color:#fff;  
 }  
...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38019336
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
kasikПодскажите пожалуйста как мне можно это сделать?
Сделай вменяемый тестовый пример, на нем и покажем...
...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38019422
Seegile
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
 .buttons button{  
   width:auto;  
   overflow:visible;  
   padding:4px 10px 3px 7px; /* IE6 */  
 }  
 .buttons button[type]{  
   padding:5px 10px 5px 7px; /* Firefox */  
   line-height:17px; /* Safari */  
 }  
 *:first-child+html button[type]{  
   padding:4px 10px 3px 7px; /* IE7 */  



Разработчиков браузеров надо головой об стену за то что не приходят к общему стандарту.
...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38019913
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: html
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.
<!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>

<title>Пример</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<link rel="stylesheet" href="style.css" type="text/css" />


<body>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <td valign="top">
        <img src="1.jpg">
          <td valign="top">
            <table id="835235580264547294" border="0">
              <tbody>
                <tr>
                  <td align="right">
                    <label for="USERNAME" tabindex="999">
                      <span>Имя</span>
                    </label>
                  </td>
                  <td colspan="2" align="left">
                    <input id="USERNAME" name="p_t01" class="text_field" value="user" size="40" maxlength="100" type="text">
                      <tr>
                        <td align="right">
                          <label for="PASSWORD" tabindex="999">
                            <span>Пароль</span>
                          </label>
                        </td>
                        <td align="left">
                          <input size="40" maxlength="100" value="" id="PASSWORD" class="password" type="password">
                            <tr>
                              <td valign="top"></td>
                              <td align="right">
                                <span class="buttons">
                                  <a href="javascript:RunLogin();" class="positive">
                                    <img src="images/positive.png"  alt="">Вход
                                    <span></span>
                                    <br>
                                      <tr>
                                        <td width="20%"></td>
                                        <td align="right"></td>
                                      </tr>
                                    </br></img>
                                  </a>
                                </span>
                              </td>
                            </tr>
                          </input>
                        </td>
                      </tr>
                    </input>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </img>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>



Вот сама страница, стили публиковал выше.
...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38020158
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
kasikВот сама страница, стили публиковал выше.
Вот эта иллюстрация твоего примера тебе что-то скажет?

Код: html
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.
<!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>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.buttons {
	border: 1px solid;
}
.buttons a, .buttons button{  
   display:block;  
   float:left;  
   margin:0 7px 0 0;  
   background-color:#f5f5f5;  
   border:1px solid #dedede;  
   border-top:1px solid #eee;  
   border-left:1px solid #eee;  
   font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;  
   font-size:12px;  
   line-height:130%;  
   text-decoration:none;  
   font-weight:bold;  
   color:#565656;  
   cursor:pointer;  
   padding:5px 10px 6px 7px; /* Links */  
 }  
 .buttons button{  
   width:auto;  
   overflow:visible;  
   padding:4px 10px 3px 7px; /* IE6 */  
 }  
 .buttons button[type]{  
   padding:5px 10px 5px 7px; /* Firefox */  
   line-height:17px; /* Safari */  
 }  
 *:first-child+html button[type]{  
   padding:4px 10px 3px 7px; /* IE7 */  
 }  
 .buttons button img, .buttons a img{  
   margin:0 3px -3px 0 !important;  
   padding:0;  
   border:none;  
   width:16px;  
   height:16px;  
 }  
 button.positive, .buttons a.positive{  
   color:#529214;  
 }  
 .buttons a.positive:hover, button.positive:hover{  
   background-color:#E6EFC2;  
   border:1px solid #C6D880;  
   color:#529214;  
 }  
 .buttons a.positive:active{  
   background-color:#529214;  
   border:1px solid #529214;  
   color:#fff;  
 }  
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <td valign="top">
        <img src="1.jpg">
          <td valign="top">
            <table id="835235580264547294" border="0">
              <tbody>
                <tr>
                  <td align="right">
                    <label for="USERNAME" tabindex="999">
                      <span>Имя</span>
                    </label>
                  </td>
                  <td colspan="2" align="left">
                    <input id="USERNAME" name="p_t01" class="text_field" value="user" size="40" maxlength="100" type="text">
                      <tr>
                        <td align="right">
                          <label for="PASSWORD" tabindex="999">
                            <span>Пароль</span>
                          </label>
                        </td>
                        <td align="left">
                          <input size="40" maxlength="100" value="" id="PASSWORD" class="password" type="password">
                            <tr>
                              <td valign="top"></td>
                              <td align="right">
                                <span class="buttons">
                                  <a href="javascript:RunLogin();" class="positive">
                                    <img src="images/positive.png"  alt="">Вход
                                    <span></span>
                                    <br>
                                      <tr>
                                        <td width="20%"></td>
                                        <td align="right"></td>
                                      </tr>
                                    </br></img>
                                  </a>
                                </span>
                              </td>
                            </tr>
                          </input>
                        </td>
                      </tr>
                    </input>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </img>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38020184
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Вот более наглядно...

Код: html
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.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.buttons {
	border: 1px solid;
}
.buttons a, .buttons button{  
   display:block;  
   float:left;  
   margin:0 7px 0 0;  
   background-color:#f5f5f5;  
   border:1px solid #dedede;  
   border-top:1px solid #eee;  
   border-left:1px solid #eee;  
   font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;  
   font-size:12px;  
   line-height:130%;  
   text-decoration:none;  
   font-weight:bold;  
   color:#565656;  
   cursor:pointer;  
   padding:5px 10px 6px 7px; /* Links */  
 }  
 .buttons button{  
   width:auto;  
   overflow:visible;  
   padding:4px 10px 3px 7px; /* IE6 */  
 }  
 .buttons button[type]{  
   padding:5px 10px 5px 7px; /* Firefox */  
   line-height:17px; /* Safari */  
 }  
 *:first-child+html button[type]{  
   padding:4px 10px 3px 7px; /* IE7 */  
 }  
 .buttons button img, .buttons a img{  
   margin:0 3px -3px 0 !important;  
   padding:0;  
   border:none;  
   width:16px;  
   height:16px;  
 }  
 button.positive, .buttons a.positive{  
   color:#529214;  
 }  
 .buttons a.positive:hover, button.positive:hover{  
   background-color:#E6EFC2;  
   border:1px solid #C6D880;  
   color:#529214;  
 }  
 .buttons a.positive:active{  
   background-color:#529214;  
   border:1px solid #529214;  
   color:#fff;  
 }  
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <td valign="top">
        <img src="1.jpg">
          <td valign="top">
            <table id="835235580264547294" border="0">
              <tbody>
                <tr>
                  <td align="right">
                    <label for="USERNAME" tabindex="999">
                      <span>Имя</span>
                    </label>
                  </td>
                  <td colspan="2" align="left">
                    <input id="USERNAME" name="p_t01" class="text_field" value="user" size="40" maxlength="100" type="text">
                      <tr>
                        <td align="right">
                          <label for="PASSWORD" tabindex="999">
                            <span>Пароль</span>
                          </label>
                        </td>
                        <td align="left">
                          <input size="40" maxlength="100" value="" id="PASSWORD" class="password" type="password">
                            <tr>
                              <td valign="top"></td>
                              <td align="right">
                                <span class="buttons">
									вот твой span
                                  <a href="javascript:RunLogin();" class="positive">
                                    <img src="images/positive.png"  alt="">Вход
                                    <span></span>
                                    <br>
                                      <tr>
                                        <td width="20%"></td>
                                        <td align="right"></td>
                                      </tr>
                                    </br></img>
                                  </a>
                                </span>
                              </td>
                            </tr>
                          </input>
                        </td>
                      </tr>
                    </input>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </img>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>



Это реальный говнокод. Он вообще не валиден!
Это вот что за каша?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<span class="buttons">
  <a href="javascript:RunLogin();" class="positive">
	<img src="images/positive.png"  alt="">Вход
		<span></span>
		<br>
		  <tr>
			<td width="20%"></td>
			<td align="right"></td>
		  </tr>
		</br>
	</img>
  </a>
</span>


В "картинке" (!) находится
Код: html
1.
<br>...</br>


В котором, в свою очередь, находится огрызок от какой-то таблицы!

А ничего что ни img ... Ни br не имеют закрывающего тега вообще? Они применяются только вот в таком виде

Код: html
1.
<img src="images/positive.png"  alt="" />
...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38020187
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
kasik , т.ч. приводи разметку в "человеческий" вид для начала...
...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38020444
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Я знаю что это говонокод, но он формируется по автомату, и мне не нужна привязка конкретно к этому коду, нужно мне понять как действовать в подобных ситуациях и как произвести выравнивание.
...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38020477
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
попытка номер два, немного причесал.

Код: html
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.
143.
144.
145.
<!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>

<title>Пример</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<style>
.buttons a, .buttons button{  
   display:block;  
   float:left;  
   margin:0 7px 0 0;  
   background-color:#f5f5f5;  
   border:1px solid #dedede;  
   border-top:1px solid #eee;  
   border-left:1px solid #eee;  
   font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;  
   font-size:12px;  
   line-height:130%;  
   text-decoration:none;  
   font-weight:bold;  
   color:#565656;  
   cursor:pointer;  
   padding:5px 10px 6px 7px; /* Links */  
 }  
 .buttons button{  
   width:auto;  
   overflow:visible;  
   padding:4px 10px 3px 7px; /* IE6 */  
 }  
 .buttons button[type]{  
   padding:5px 10px 5px 7px; /* Firefox */  
   line-height:17px; /* Safari */  
 }  
 *:first-child+html button[type]{  
   padding:4px 10px 3px 7px; /* IE7 */  
 }  
 .buttons button img, .buttons a img{  
   margin:0 3px -3px 0 !important;  
   padding:0;  
   border:none;  
   width:16px;  
   height:16px;  
 }  
 /* STANDARD */  
 button:hover, .buttons a:hover{  
   background-color:#dff4ff;  
   border:1px solid #c2e1ef;  
   color:#336699;  
 }  
 .buttons a:active{  
   background-color:#6299c5;  
   border:1px solid #6299c5;  
   color:#fff;  
 }  
 /* POSITIVE */  
 button.positive, .buttons a.positive{  
   color:#529214;  
 }  
 .buttons a.positive:hover, button.positive:hover{  
   background-color:#E6EFC2;  
   border:1px solid #C6D880;  
   color:#529214;  
 }  
 .buttons a.positive:active{  
   background-color:#529214;  
   border:1px solid #529214;  
   color:#fff;  
 }  
 /* NEGATIVE */  
 .buttons a.negative, button.negative{  
   color:#d12f19;  
 }  
 .buttons a.negative:hover, button.negative:hover{  
   background:#fbe3e4;  
   border:1px solid #fbc2c4;  
   color:#d12f19;  
 }  
 .buttons a.negative:active{  
   background-color:#d12f19;  
   border:1px solid #d12f19;  
   color:#fff;  
 }  
 /* REGULAR */  
 button.regular, .buttons a.regular{  
   color:#336699;  
 }  
 .buttons a.regular:hover, button.regular:hover{  
   background-color:#dff4ff;  
   border:1px solid #c2e1ef;  
   color:#336699;  
 }  
 .buttons a.regular:active{  
   background-color:#6299c5;  
   border:1px solid #6299c5;  
   color:#fff;  
 }  
</style>


<body>

    <table border="0">
      <tbody>
        <tr>
          <td align="right">
            <label for="USERNAME" tabindex="999">
              <span>Имя</span>
            </label>
          </td>
          <td colspan="2" align="left">
            <input id="USERNAME" name="p_t01" class="text_field"
            value="user" size="40" maxlength="100" type="text" />
          </td>
        </tr>
        <tr>
          <td align="right">
            <label for="PASSWORD" tabindex="999">
              <span>Пароль</span>
            </label>
          </td>
          <td align="left">
            <input name="p_t02" size="40" maxlength="100" value=""
            id="PASSWORD" class="password" type="password" />
          </td>
        </tr>
        <tr>
          <td valign="top"></td>
          <td align="right">
            <span class="buttons">
              <a href="javascript:RunLogin();" class="positive">
              <img src="images/positive.png" alt="" />Вход</a>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </body>




</body>
</html>


...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38021083
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
kasikпопытка номер два
Вот смотрю...
В строчный элемент, который хотят поместить с права в ячейке, засунута ссылка которая стилем переделана в блочный элемент, а это уже фигня полная. Но и это еще не все! Ссылка та ще и плавающая
Код: css
1.
float:left; 



Т.о. блочная (теперь) ссылка положила на строчного родителя большей и толстый, заняв после этого своё левое положение в ячейке.

Возможные варианты решения:
- современный
Код: css
1.
2.
3.
.buttons {
	display: inline-block;  
}


- альтернативный
Код: css
1.
2.
3.
4.
.buttons {
	display: block;  
	float: right;  
}


Но я х/з что там у тебя за картинка... И как все это будет смотреться вмесе с ней...
...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38021229
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
все получилось, оба варианта дают одинаковый результат. Осался на современном))

Поясните переь немного происходящее...

Спасибо
...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38021281
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
kasikПоясните переь немного происходящее...
Так теперь вроде все очевидно... Не совсем понял что еще объяснить?
...
Рейтинг: 0 / 0
Выравнивание SPAN кнопки
    #38021372
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Понял, спасибо за помощь!
...
Рейтинг: 0 / 0
15 сообщений из 15, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выравнивание SPAN кнопки
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]