X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Кнопки "мне нравится"
Seo-top
Seo-top
Topic Starter сообщение 8.5.2013, 22:07; Ответить: Seo-top
Сообщение #1


Участник
***

Группа: User
Сообщений: 218
Регистрация: 31.7.2010
Из: Казань
Поблагодарили: 47 раз
Репутация:   12  


Всем привет. Необходимо поставить четыре кнопки, в кадой строке две кнопки.
При использование такой конструкции:
<div class="mcont2">
<table>
<tr>
<td>кнопка Однокл и майла</td>
<td>кнопка ВК и Фейсбука</td>
</tr>
</table>
</div>

Получается так:

Надеждла только на вас mellow.gif

Сообщение отредактировал Seo-top - 8.5.2013, 22:08


--------------------
Самый полезный компьютерный форум для всех пользователей глобального интернета.
Проводим конкурс на форуме - самый активный пользователь месяца $!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Морфин
Морфин
сообщение 8.5.2013, 22:57; Ответить: Морфин
Сообщение #2


Участник
***

Группа: User
Сообщений: 117
Регистрация: 19.11.2010
Из: Хартланд
Поблагодарили: 31 раз
Репутация:   6  


С таблицами надо проверить ширину самой таблицы в стилях и элемента div.
По идее правильно:
Развернуть/Свернуть
<table width="300" border="1" align="center" >
     <tr>
     <td>Первая</td>
     <td>Вторая</td>
     </tr>
     <tr>
     <td>Третья</td>
     <td>Четвертая</td>
    </tr>
   </table>

Если же дивами делать, то тоже просто:
Развернуть/Свернуть

<div id="social_buttons">
<ul>
<li>код кнопки 1</li>
<li>код кнопки 2</li>
<li>код кнопки 3</li>
<li>код кнопки 4</li>
</ul>
</div><!--social_buttons-->
  
  
<style>
#social_buttons ul {
    width: 404px;
    height: auto;
}

#social_buttons ul li {
    list-style-type: none;
    width: 200px;
        height: auto;
    float: left;
    border: 1px solid #000000;
}
</style>

В #social_buttons ul укажете нужную ширину блока с кнопками (в сумме должна быть ширина двух кнопок).
В ul li ширина 200 для примера кнопки.
Бордер в ul li для наглядности, можете убрать тоже.

Сообщение отредактировал Морфин - 8.5.2013, 22:59


Поблагодарили: (3)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Seo-top
Seo-top
Topic Starter сообщение 8.5.2013, 23:08; Ответить: Seo-top
Сообщение #3


Участник
***

Группа: User
Сообщений: 218
Регистрация: 31.7.2010
Из: Казань
Поблагодарили: 47 раз
Репутация:   12  


Спасибо. С первым вариантов получилось так:

Буду пробовать второй вариант.


--------------------
Самый полезный компьютерный форум для всех пользователей глобального интернета.
Проводим конкурс на форуме - самый активный пользователь месяца $!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Makssss07
Makssss07
сообщение 9.5.2013, 16:00; Ответить: Makssss07
Сообщение #4


Завсегдатай
*****

Группа: Active User
Сообщений: 863
Регистрация: 17.5.2010
Из: Питер
Поблагодарили: 263 раза
Репутация:   53  


(Seo-top @ 8.5.2013, 23:08) *
Спасибо. С первым вариантов получилось так:

так бордер то уберите...


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Seo-top
Seo-top
Topic Starter сообщение 11.5.2013, 15:31; Ответить: Seo-top
Сообщение #5


Участник
***

Группа: User
Сообщений: 218
Регистрация: 31.7.2010
Из: Казань
Поблагодарили: 47 раз
Репутация:   12  


(Makssss07 @ 9.5.2013, 15:00) *
так бордер то уберите...

Выпирает же. Сделал так:

С пустотой смирился.


--------------------
Самый полезный компьютерный форум для всех пользователей глобального интернета.
Проводим конкурс на форуме - самый активный пользователь месяца $!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Морфин
Морфин
сообщение 11.5.2013, 19:02; Ответить: Морфин
Сообщение #6


Участник
***

Группа: User
Сообщений: 117
Регистрация: 19.11.2010
Из: Хартланд
Поблагодарили: 31 раз
Репутация:   6  


Seo-top,
если вам всё же хочется в виде таблицы сделать, то я накидал вариант, при котором получится так:
[attachment=18593:table.png]

Кажется, в такой последовательности смотрится наиболее гармонично.
А код и стиль будут следущими:
Развернуть/Свернуть
<table id="social">
<tr>
<td class="first"><img src="mail.png"/></td>
<td class="second"><img src="ww.png"/></td>
</tr>
<tr>
<td class="first"><img src="fb.png"/></td>
<td class="second"><img src="vk.png"/></td>
</tr>
</table>  
  
<style>
#social {
    width: 242px;
    height: auto;
    border: none;
}

.first {
    width: 110px;
    height: auto;
}

.second {
    width: 132px;
    height: auto;
}
</style>

Соответственно там, где <img src="mail.png"/> - заменяете кодом мэйла и т.д.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Новости mail.ru появятся в "рекомендациях" Вконтакте?
19 eduarddis 2744 Вчера, 20:37
автор: galikfor
Открытая тема (нет новых ответов) Какой движок форума вам больше нравится?
Пожалуйста, не пройдите мимо, очень нужно
8 landis 598 Вчера, 20:07
автор: KsaAZaks
Открытая тема (нет новых ответов) Имеет ли смысл такое "присоединение сайтов"?
перенести все статьи на свой сайт, а с прежнего поставить 301 редирект
9 coremission 1071 11.12.2017, 16:32
автор: One_on_One
Открытая тема (нет новых ответов) Переводчик по тематике "Арбитраж трафика, партнерки и т.п." на постоянную основу
1 kuprum 348 9.12.2017, 17:02
автор: pishu-text
Открытая тема (нет новых ответов) Куплю "вечные URL" с ваших сайтов с тематикой - Пластиковые Окна!
0 regem 440 5.12.2017, 3:47
автор: regem


 



RSS Текстовая версия Сейчас: 13.12.2017, 9:18
Дизайн