Вопросы по CSS (& HTML)

Поделиться105-02-2013 07:39:37

Автор: admin
takes to lead
Зарегистрирован: 29-04-2011
Приглашений: 0
Сообщений: 691
Уважение: +53
Позитив: +163
Провел на форуме:
7 дней 0 часов
Последний визит:
23-03-2013 22:58:04

Все ваши вопросы относительно внешнего вида форума.
Не забываем постить ссылку на проблему!

Поделиться21121-03-2013 12:20:13

Автор: Лилиана
Рыжая ведьма
Зарегистрирован: 18-11-2012
Приглашений: 0
Сообщений: 105
Уважение: +3
Позитив: +5
Пол: Женский
Провел на форуме:
2 дня 14 часов
Последний визит:
11-12-2014 00:25:18

Подскажите, пожалуйста, как можно сделать шапку на всю ширину форума(каким образом). И на фоне была часть шапки.. Если непонятно, покажу схематично))

0

Поделиться21221-03-2013 17:18:10

Автор: Мося
нечисть
Зарегистрирован: 30-10-2011
Приглашений: 0
Сообщений: 1729
Уважение: +433
Позитив: +235
Провел на форуме:
19 дней 8 часов
Последний визит:
26-11-2016 00:27:12

Лилитана
Делать шапку нужной ширины. Если форум 850, то шапку тоже 850.
Если она нужна больше форума, то соответственно шире.
И выставить ширину в коде шапки.

Отредактировано Мося (21-03-2013 17:18:26)

0

Поделиться21321-03-2013 18:11:29

Автор: Лилиана
Рыжая ведьма
Зарегистрирован: 18-11-2012
Приглашений: 0
Сообщений: 105
Уважение: +3
Позитив: +5
Пол: Женский
Провел на форуме:
2 дня 14 часов
Последний визит:
11-12-2014 00:25:18

Мося
Спасибо)
И ещё вопрос: Я сделала форум (верх и низ) с закруглёнными краями. Куда нужно будет поставить верхнюю часть?

0

Поделиться21421-03-2013 21:05:26

Автор: Messalina
diet mtn dew;
Зарегистрирован: 05-03-2013
Приглашений: 0
Сообщений: 45
Уважение: +13
Позитив: +17
Пол: Женский
Провел на форуме:
1 день 1 час
Последний визит:
12-06-2013 18:38:48

добрый день, надеюсь, не ошиблась темой (:
вопрос такой, как сделать всплывающие окошки в таблице, как на этом форуме:

при наведении курсора на имена-фамилии амс? Это скрипт или что-то еще? :3

Отредактировано Messalina (21-03-2013 21:06:16)

0

Поделиться21522-03-2013 05:35:22

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

Messalina

Код:

<p><a href="ссылка на профиль" class="tip_trigger">имя профиля<span class="tip" style="display: none; width: 150px; margin-top: -5px; margin-left: -300px;"><img src="изображение при наведении"><br>текст текст текст текст</span></a></p>

В хтмл-низ:

Код:

<script type="text/javascript">
$(document).ready(function() {


	//Tooltips
	$(".tip_trigger").hover(function(){
    $(this).find('.tip').show(); //Show tooltip
	}, function() {
    $(this).find('.tip').hide(); //Hide tooltip      
	}).mousemove(function(e) {
      var mousex = e.pageX + 20; //Get X coodrinates
      var mousey = e.pageY + 20; //Get Y coordinates
      var tipWidth = $(this).find('.tip').width(); //Find width of tooltip
      var tipHeight = $(this).find('.tip').height(); //Find height of tooltip
     
     //Distance of element from the right edge of viewport
      var tipVisX = $(window).width() - (mousex + tipWidth); 
      var tipVisY = $(window).height() - (mousey + tipHeight);
      
    if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
    	mousex = e.pageX - tipWidth - 20;
    	$(this).find('.tip').css({  top: mousey, left: mousex });
    } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
    	mousey = e.pageY - tipHeight - 20;
    	$(this).find('.tip').css({  top: mousey, left: mousex });
    } else {
    	$(this).find('.tip').css({  top: mousey, left: mousex });
    }
	});
	


});
</script>

+2

Поделиться21622-03-2013 05:39:35

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

Лилитана написал(а):

И ещё вопрос: Я сделала форум (верх и низ) с закруглёнными краями. Куда нужно будет поставить верхнюю часть?

Смотря как вы это сделали. Покажите исходники (можно и под скрытым текстом).

0

Поделиться21722-03-2013 13:17:11

Автор: Messalina
diet mtn dew;
Зарегистрирован: 05-03-2013
Приглашений: 0
Сообщений: 45
Уважение: +13
Позитив: +17
Пол: Женский
Провел на форуме:
1 день 1 час
Последний визит:
12-06-2013 18:38:48

apl.de.ap
спасибо *-* будем пробовать))

0

Поделиться21822-03-2013 14:36:53

Автор: moose
I <3 COLOR MATE
Зарегистрирован: 11-02-2012
Приглашений: 0
Сообщений: 650
Уважение: +87
Позитив: +65
Возраст: 25 [1999-04-24]
Провел на форуме:
7 дней 3 часа
Последний визит:
16-01-2020 15:25:42

Как саму надпись "статистика" (НЕ ИКОНКУ) заменить на свою :з

0

Поделиться21922-03-2013 14:50:55

Автор: Lyrium
the party's over
Зарегистрирован: 24-04-2012
Приглашений: 0
Сообщений: 8847
Уважение: +3740
Позитив: +6441
Пол: Женский
Возраст: 33 [1991-05-29]
Провел на форуме:
2 месяца 24 дня
Последний визит:
23-05-2020 16:53:29

moose

Код:

#pun-stats h2 {
background:url() center no-repeat!important;
height: ХХХpx;}

+1

Поделиться22022-03-2013 15:08:39

Автор: moose
I <3 COLOR MATE
Зарегистрирован: 11-02-2012
Приглашений: 0
Сообщений: 650
Уважение: +87
Позитив: +65
Возраст: 25 [1999-04-24]
Провел на форуме:
7 дней 3 часа
Последний визит:
16-01-2020 15:25:42

alptraum
Не получилось
Вставила

Код:

<style>
#pun-stats h2 {
background:url(http://s2.uploads.ru/5MTzw.png) center no-repeat!important;
height: 400px;}</style>

в хтмл-верх
http://zentorutown.mybb.ru/

0

Поделиться22122-03-2013 15:21:40

Автор: Lyrium
the party's over
Зарегистрирован: 24-04-2012
Приглашений: 0
Сообщений: 8847
Уважение: +3740
Позитив: +6441
Пол: Женский
Возраст: 33 [1991-05-29]
Провел на форуме:
2 месяца 24 дня
Последний визит:
23-05-2020 16:53:29

moose написал(а):

в хтмл-верх

через стиль не получилось, или что?
Я просто вижу, что все стоит. Только теперь, т.к. вы поставили через хтмл, вам нужен скрипт скрывающий название категорий

Код:

<style>
#pun-stats h2 span,
.category h2 span {
visibility:hidden!important;
}
</style>

Отредактировано alptraum (22-03-2013 15:22:05)

+2

Поделиться22222-03-2013 15:29:17

Автор: moose
I <3 COLOR MATE
Зарегистрирован: 11-02-2012
Приглашений: 0
Сообщений: 650
Уважение: +87
Позитив: +65
Возраст: 25 [1999-04-24]
Провел на форуме:
7 дней 3 часа
Последний визит:
16-01-2020 15:25:42

alptraum
Всё прекрасно, благодарю за помощь <3

0

Поделиться22322-03-2013 22:24:30

Автор: maasikas
я есмь клевер
Зарегистрирован: 19-03-2012
Приглашений: 0
Сообщений: 94
Уважение: +25
Позитив: +72
Провел на форуме:
5 дней 6 часов
Последний визит:
27-11-2013 00:32:11

apl.de.ap
добрый день, в 215 посту, вы кидали коды.
не могли бы мне помочь с ними?
вот пробник: http://olololololol.rusff.ru/
в таблице, под приветствием есть имя: lara croft, вот там выходит картинка с информацией о амс. проблема вот в чем: когда вылезает картинка с инфо вся таблица начинает скакать, как это можно исправить?

0

Поделиться22422-03-2013 22:31:04

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

maasikas
Лучше сделайте по другому коду)
Делаем красивые всплывающие окошки
С этим проблем вроде как нету)) Вместо текста, вставляете картинку и т.д.)

+1

Поделиться22522-03-2013 22:37:03

Автор: maasikas
я есмь клевер
Зарегистрирован: 19-03-2012
Приглашений: 0
Сообщений: 94
Уважение: +25
Позитив: +72
Провел на форуме:
5 дней 6 часов
Последний визит:
27-11-2013 00:32:11

apl.de.ap
Хорошо, сделаю, только поможете?)
Там столько всего
все эти коды (I, II, III) нужно использовать?
и если у меня уже готовая картинка, сделанная в фш (фон, текст и аватар) куда-то ее уже можно вставить готовую?)

0

Поделиться22622-03-2013 22:43:09

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

maasikas
В конце приведён готовый пример))
Это вставляете в хтмл-верх)

Код:

    <style type="text/css">
    .tooltip {
    	border-bottom: 1px dotted #000000; color: #000000; outline: none;
    	cursor: help; text-decoration: none;
    	position: relative;
    }
    .tooltip span {
    	margin-left: -999em;
    	position: absolute;
    }
    .tooltip:hover span {
    	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
    	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    	font-family: Calibri, Tahoma, Geneva, sans-serif;
    	position: absolute; left: 1em; top: 2em; z-index: 99;
    	margin-left: 0; width: 250px;
    }
    .tooltip:hover img {
    	border: 0; margin: -10px 0 0 -55px;
    	float: left; position: absolute;
    }
    .tooltip:hover em {
    	font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
    	display: block; padding: 0.2em 0 0.6em 0;
    }
    .classic { padding: 0.8em 1em; }
    * html a:hover { background: transparent; }
    .classic {background: #FFFFAA; border: 1px solid #FFAD33; }}
    </style>

Это в таблицу:

Код:

<a class="tooltip" href="#">классическую подсказку<span class="classic"><img src="адрес картинки админа" /><br> текст, если нужен</span></a>,

Чтобы изменить ширину окошка:

.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;

Измените красное на своё)
Чтобы установить фон окошка картинкой:
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }} замените на .classic {background-image: url('адрес фона'); border: 1px solid #FFAD33; }}.
Если нужно установить определенную высоту для всплывающего окошка:

.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px; height: 300px;

Добавьте выделенное зеленым)

+3

Поделиться22722-03-2013 22:54:03

Автор: maasikas
я есмь клевер
Зарегистрирован: 19-03-2012
Приглашений: 0
Сообщений: 94
Уважение: +25
Позитив: +72
Провел на форуме:
5 дней 6 часов
Последний визит:
27-11-2013 00:32:11

apl.de.ap
вот, что значит "классическая подсказка"? вместо этого я должна что-то вставлять?)
и это:
Чтобы изменить ширину окошка: я вставляю в стиль?

0

Поделиться22822-03-2013 22:56:54

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

maasikas написал(а):

вот, что значит "классическая подсказка"? вместо этого я должна что-то вставлять?)

lara croft

maasikas написал(а):

Чтобы изменить ширину окошка: я вставляю в стиль?

<style type="text/css">
.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }}
</style>

+2

Поделиться22922-03-2013 22:59:59

Автор: maasikas
я есмь клевер
Зарегистрирован: 19-03-2012
Приглашений: 0
Сообщений: 94
Уважение: +25
Позитив: +72
Провел на форуме:
5 дней 6 часов
Последний визит:
27-11-2013 00:32:11

apl.de.ap
ага, все поняла
еще есть вопрос, вот на имя наводишь, вылезает инфо, с боку такая желтая штучка, ее убирать нельзя?)

0

Поделиться23022-03-2013 23:02:10

Автор: maasikas
я есмь клевер
Зарегистрирован: 19-03-2012
Приглашений: 0
Сообщений: 94
Уважение: +25
Позитив: +72
Провел на форуме:
5 дней 6 часов
Последний визит:
27-11-2013 00:32:11

maasikas написал(а):

еще есть вопрос, вот на имя наводишь, вылезает инфо, с боку такая желтая штучка, ее убирать нельзя?)

ой, это наверное и есть то, куда надо инфу вставлять, да? xD

0

Поделиться23122-03-2013 23:05:36

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

maasikas написал(а):

еще есть вопрос, вот на имя наводишь, вылезает инфо, с боку такая желтая штучка, ее убирать нельзя?)

.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }}

Попробуйте убрать выделенное красным из хтмл-верха)

+2

Поделиться23222-03-2013 23:11:50

Автор: maasikas
я есмь клевер
Зарегистрирован: 19-03-2012
Приглашений: 0
Сообщений: 94
Уважение: +25
Позитив: +72
Провел на форуме:
5 дней 6 часов
Последний визит:
27-11-2013 00:32:11

apl.de.ap
цены вам нет
вы очень умный человек, спасибо большое за помощь и спасибо за то, что не сердитесь на таких неумех, как я хд))

0

Поделиться23322-03-2013 23:15:01

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

maasikas написал(а):

вы очень умный человек, спасибо большое за помощь и спасибо за то, что не сердитесь на таких неумех, как я хд))

Обращайтесь

0

Поделиться23423-03-2013 00:08:05

Автор: каравай тм
tonight
Зарегистрирован: 25-12-2012
Приглашений: 0
Сообщений: 76
Уважение: +7
Позитив: +21
Пол: Мужской
Провел на форуме:
1 день 21 час
Последний визит:
13-05-2015 22:44:04

здравствуйте. при небольшом разрешении экрана нижняя часть смещается влево
http://savepic.org/3037571.png
как можно центрировать изображение?
форум: http://justm.rolka.su/

0

Поделиться23523-03-2013 00:18:07

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

iLadno
Попробуйте вместо #logobottom использовать #pun_wrap.

0

Поделиться23623-03-2013 00:21:30

Автор: каравай тм
tonight
Зарегистрирован: 25-12-2012
Приглашений: 0
Сообщений: 76
Уважение: +7
Позитив: +21
Пол: Мужской
Провел на форуме:
1 день 21 час
Последний визит:
13-05-2015 22:44:04

apl.de.ap
к pun_wrap привязано другое изображение, листья на заднем фоне шапки =/

0

Поделиться23723-03-2013 01:50:58

Автор: Мося
нечисть
Зарегистрирован: 30-10-2011
Приглашений: 0
Сообщений: 1729
Уважение: +433
Позитив: +235
Провел на форуме:
19 дней 8 часов
Последний визит:
26-11-2016 00:27:12

iLadno
Попробуйте

Это

#logobottom {background: url("https://forumstatic.ru/files/0012/8e/c1/73924.png") no-repeat scroll center top transparent; height: 178px; margin: 0 -56px;}

html-footer .container {border: none; background: transparent;}

html-footer {}

Заменить на это.

#html-footer .container {
background-image: url("https://forumstatic.ru/files/0012/8e/c1/73924.png");
background-color: transparent;
margin-left: -48px;
background-position: 50% 0%;
background-repeat: no-repeat;
width: 1000px;
height: 178px;
margin-bottom: -30px
}

ИЛИ

#pun-about p.container {
background-image: url("https://forumstatic.ru/files/0012/8e/c1/73924.png");
background-color: transparent;
margin-left: -48px;
background-position: 50% 0%;
background-repeat: no-repeat;
width: 1000px;
height: 178px;
margin-bottom: -30px
}

Только картинку лучше сделать в jpg

Отредактировано Мося (23-03-2013 01:57:04)

+1

Поделиться23823-03-2013 14:53:12

Автор: maasikas
я есмь клевер
Зарегистрирован: 19-03-2012
Приглашений: 0
Сообщений: 94
Уважение: +25
Позитив: +72
Провел на форуме:
5 дней 6 часов
Последний визит:
27-11-2013 00:32:11

apl.de.ap
http://olololololol.rusff.ru/
У меня снова вопрос к вам)
Можно сделать так, чтобы информация про администратора, где его картинка была не ниже, а по выше?)

0

Поделиться23923-03-2013 15:06:23

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

maasikas написал(а):

Можно сделать так, чтобы информация про администратора, где его картинка была не ниже, а по выше?)

В каком смысле?) Чтобы при наведении, окошко всплывало не ниже надпись, а над ней?)

0

Поделиться24023-03-2013 15:07:53

Автор: maasikas
я есмь клевер
Зарегистрирован: 19-03-2012
Приглашений: 0
Сообщений: 94
Уважение: +25
Позитив: +72
Провел на форуме:
5 дней 6 часов
Последний визит:
27-11-2013 00:32:11

apl.de.ap написал(а):

В каком смысле?) Чтобы при наведении, окошко всплывало не ниже надпись, а над ней?)

Да, чуть по выше надо бы) А то слишком низко)

0

COLOR MATE

Меню навигации

Пользовательские ссылки

Информация о пользователе

Вопросы по CSS (& HTML)

Сообщений 211 страница 240 из 1000

Поделиться105-02-2013 07:39:37

Поделиться21121-03-2013 12:20:13

Поделиться21221-03-2013 17:18:10

Поделиться21321-03-2013 18:11:29

Поделиться21421-03-2013 21:05:26

Поделиться21522-03-2013 05:35:22

Поделиться21622-03-2013 05:39:35

Поделиться21722-03-2013 13:17:11

Поделиться21822-03-2013 14:36:53

Поделиться21922-03-2013 14:50:55

Поделиться22022-03-2013 15:08:39

Поделиться22122-03-2013 15:21:40

Поделиться22222-03-2013 15:29:17

Поделиться22322-03-2013 22:24:30

Поделиться22422-03-2013 22:31:04

Поделиться22522-03-2013 22:37:03

Поделиться22622-03-2013 22:43:09

Поделиться22722-03-2013 22:54:03

Поделиться22822-03-2013 22:56:54

Поделиться22922-03-2013 22:59:59

Поделиться23022-03-2013 23:02:10

Поделиться23122-03-2013 23:05:36

Поделиться23222-03-2013 23:11:50

Поделиться23322-03-2013 23:15:01

Поделиться23423-03-2013 00:08:05

Поделиться23523-03-2013 00:18:07

Поделиться23623-03-2013 00:21:30

Поделиться23723-03-2013 01:50:58

Поделиться23823-03-2013 14:53:12

Поделиться23923-03-2013 15:06:23

Поделиться24023-03-2013 15:07:53