Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Иконка сайта

Добрый день форумчане.
Сделал простенький сайт на Java. Технология JSF. Теперь чисто для красоты хочу сделать иконку для него.
В template.xhtml вставляю код, в котором прописан путь до иконки. А он отображается только на главной странице.
Когда вывожу свой запрос или просматриваю другие страницы там нету иконки. Что не так делаю?
HTML5
1
<link rel="icon" href="resources/css/favicon.ico" type="image/x-icon" />
Ответ: 1. Правильно укажите путь до иконки, возможно через request.contextPath.
2. Очистите кэш браузера.
3. Попробуйте открыть в другом браузере.
Вопрос: Иконки для категорий форума

Доброго времени суток друзья. Хотел спросить. Как я могу сделать каждой категории форума отдельную иконку. Сайт на ucoz.

Ответ:
Скачать с определённого сайта готовые иконки или сделать свои.
Залить в базу сайта.
Вставить ссылку на иконку в скрипт.
Вопрос: Иконка сайта на вкладке

Добрый вечер! Как сделать иконку на вкладку сайта.Поставил с помощью <link rel="icon" href="img/myicon1.png" type="image/png" /> .Иконка поставилась, только он квадратный и все что не рисунок отображается белым цветом.А как делают иконки например круглые,чтоб все остальное было прозрачным.Может кто знает.Спасибо!
Ответ: Спасибо, теперь разобрался.
Вопрос: Иконка для сайта

Как сделать так, чтобы иконка сайта на вкладке отображалась на всех страницах сайта?
Или нужно к каждой странице добавлять ссылку?
Ответ: Может, на другой странице иконка явно прописана. Проверьте.
Вопрос: Как удалить поисковый редирект (перенаправление на другой сайт при переходе из поиска)

Здравствуйте.
Подскажите, как избавиться от поискового редиректа? Посетители переходящие на сайт из поиска перенаправляются на другой сайт. Где, в каком файле искать этот код?
Ответ: В шаблоне компонента поиска или его переопределения в шаблоне сайта, в файле .htaccess, в левых файлах, и ещё кто знает где... Тут нельзя дать точный ответ, а только предполагать можно.
Советую проверить поиском по файлам сайта в том же notepad++ или каком другом, данную ссылку другого сайта, но если сайт был поломан, то это наврядли поможет, обычно такое кодируется.
Вопрос: Как сделать иконку сайта круглой?

Я пытался закруглить картинку через класс в CSS
HTML5
1
<link rel="shortcut icon" href="http://www.cyberforum.ru/images/favicon.ico" type="image/x-icon" class="pot" >
CSS
1
.pot { border-radius: 10px; }
Но безрезультатно.
Подскажите что-то,плиз.
Ответ:
Сообщение от Freeze_Breeze
Что это за названия такие: rel="shortcut icon"
[del] Иконка отображается не на странице сайта.
Вопрос: Получение миниатюры сайта/поста по URL

Как сделать так, чтобы при вводе URL - мы получали миниатюру сайта/поста? Например: в Skype при передачи ссылки - отображается иконка сайта/поста и наша ссылка; ВКонтакте, если даем ссылку на другой сайт - мы тоже получаем ссылку сайта-поста
Ответ: vah-smile,
Простите, я по этим соц сетям не лазец особо, мне трудно понять о чем Вы говорите Да и терминология Ваша, ни фига не понятна Может быть другой кто-нибудь поможет. А рисунок с компа можно наверное вставить тут, через "вставить рисунок"? только на какой-нибудь файловый хостинг надо залить.
А как на клиенте преобразовать текст в картинку я сказал: canvas.
Вопрос: Анимация для сайта

Здравствуйте! Помогите, пожалуйста, как сделать анимацию на сайте? Тоесть, переходишь на сайт (сайт о праздниках), а там сначала куча шаров, и если на них кликнуть, то они разлетаются и появляется главная страница сайта. Помогите кто чем может, прошу...
Ответ: vuchastyi, 3. Javascript

Irina1094,
Если с англ. нет проблем см. Design the Web. From Illustrator to HTML5 Canvas на Lynda.com
Там есть хороший пример со снежинками в canvas. Снежинки ветром раздуваются и меняют размер.
Шары и снежинки отличаются только настройками. Можно задать рандомизацию от часов например.
Скачать примеры можно на торрент трекерах бесплатно.
С gif будет не интересно, каждый раз одна картинка и цвет тот же.
Только css очень крутую не создать.
Там действительно очень хороший урок с хорошими пояснениями и все html приводятся.
Может быть уже есть на русском.
Удачи!
Вопрос: Адаптивная верстка сайта

Ребят помогите я делаю вёрстку сайта, мне нужно сделать адаптивность шаблона.
Я прописал в css
CSS
1
2
3
4
.contener{
    width: 2026px;
    margin: 0 auto;
}
Теперь, при уменьшение страниц, шаблон уменьшается, но мне нужно, чтобы при уменьшение или увеличение все элементы оставались на месте.

Вот скриншот шаблона, при уменьшении
Ответ: mrtoxas,
Код html
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
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <link rel='stylesheet' type='text/css' href='style.css'>
        <title>Шаблон</title>
    </head>
    <body>
    <div class="contener">
        <div class="heder"> <!--Шапка сайта-->
            <div class="clear"></div>
                <div class = "logo_text"><img src = "img/logo.png"><h1>Protecly</h1></div> <!--Логотип и название-->
        <div class="clear"></div>
            <div class = "menu"> <!--Меню сайта-->
                <ul>
                    <li>Product</li>
                    <li>Industries</li>
                    <li>Pricing</li>
                    <li>Features</li>
                </ul>
            </div>
        <div class="clear"></div>
            <div class = "contact">
                <div class = "phone"><img src = "img/phone.png"></div> <!--Иконка телефона-->
                <div class = "phoneText"><p>+1 (888) 675-4998</p> <!--Абзац--></div> 
            </div>
        <div class="clear"></div>
            <div class = "info">
                <h1>Protect Your sensitive <br> <!--Устанавливает перевод строки--> files across cloud services.</h1> <!--Заголовок-->
            </div>
            <div class = "knopka">
                <h1>Try it out for free !</h1> <!--Загаловок-->
            </div>
            <div class = "video">
                <div class = "text"><p>Watch the Video</p><!--Абзац--></div>
                <div class = "videokp"><img src = "img/video.png"></div>
            </div>
        </div>
        <div class="clear"></div>
            <div class = "content"> <!--Контент сайта-->
            <div class = "comp"> <!--Логотипы которые находятся в content-->
                <div class="clear"></div>       
                    <div class = "imgOne"><img src = "img/logo/pin.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgTwo"><img src = "img/logo/design.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgThree"><img src = "img/logo/dis.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgFour"><img src = "img/logo/fresh.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgFive"><img src = "img/logo/new.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgSix"><img src = "img/logo/lout.png"></div> <!--Иконки логотипа-->
            </div>
        <div class = "slide">
        <div class = "textslider"><h1>Lorem ipsum sit Amet Dolor</h1><!--Заголовок--></div>
        <div class = "slde_info">
            <!--Абзац-->
            <p>We’re all about making sure you have a great experience with our software.</p> <!--Заголовок-->
            <br><!--Устанавливает перевод строки-->
            <p>Our real, live customer support team will go out of their way to help you—by phone or by email.</p><!--Заголовок-->
            <br><!--Устанавливает перевод строки-->
            <p>For free. We also have free video tutorials, forums, training webinars, whitepapers,</p><!--Устанавливает перевод строки-->
            <br><!--Устанавливает перевод строки-->
            <p>and a great knowledgebase you can access 24/7.</p><!--Заголовок-->
            </div>
        <div class = "slide_cnopka">
            <div class = "knopka_odin"><img src = "img/slide/1.png"></div>
                <div class="clear"></div>
                <div class = "knopka_dva"><img src = "img/slide/2.png"></div>
            </div>
            <div class = "text_dva">
                <p>Alice Anderson,99designs.com</p><!--Заголовок-->
            </div>
            <br><br><br>
            <hr>
        </div>
        <div class = "content2">
            <div = "zagolovok"><h1 style ="text-align: center;">Protectly protects your sensitive files.</h1><!--Загаловок, находится по середине--></div>
            <div class = "textcontent">
                <p>We protect your sensitive files across all popular cloud services and devices, by encrypting them,</p><!--Это абзац-->
                <br> <!--Устанавливает перевод строки-->
                <p>controlling access to them and providing an audit trail for all changes to your files.</p><!--Эьто абзац-->
            </div>
            <div class = "info_img">
                <div class = "info_img"><p><img src = "img/info_img.png"></p> <!--Абзац--></div> 
            </div>
    <div class="clear"></div>
                <div class = "info_text">
                    <div class = "infotextOne"><h1>Compliant file Sharing</h1> <!--Загаловог--></div>
                    <div class = "infotextTwo"><h1>Endpoint Security</h1> <!--Загаловок--></div>
                    <div class = "infotextThree"><h1>Access Control</h1> <!--Загаловок--></div>
            </div>
        </div>
        <br><br><br><br><br><br><br><br> <!--Устанавливаети перевод строки-->
        </div>
        <div class = "footer"> <!--Низ сайта-->
            <div class="clear"></div>
                <div class ="blog">
                    <div class ="blogOne">
                        <div>Protectly</div> <!--Блочный элемент-->
                        <br> <!--Устанавливает перевод строки-->
                        <div>Getting Started</div>  <!--Блочный элемент-->
                        <div>Enterprise Features</div>  <!--Блочный элемент-->
                        <div>Why Us?</div>  <!--Блочный элемент-->
                        <div>Solution</div>  <!--Блочный элемент-->
                        <div>Pricing</div>  <!--Блочный элемент-->
                    </div>
                <div class="clear"></div>
                    <div class ="blogTwo">
                        <div>About Us</div>  <!--Блочный элемент-->
                        <br> <!--Устанавливает перевод строки-->
                        <div>Our Story</div>  <!--Блочный элемент-->
                        <div>Our Leadership</div>  <!--Блочный элемент-->
                        <div>Our Investors</div>  <!--Блочный элемент-->
                        <div>Jobs</div>  <!--Блочный элемент-->
                    </div>
                <div class="clear"></div>
                    <div class ="blogThree">
                        <div>Support</div> <!--Блочный элемент-->
                        <br> <!--Устанавливает перевод строки-->
                        <div>Help</div>  <!--Блочный элемент-->
                        <div>Privacy Policy</div> <!--Блочный элемент-->
                        <div>Terms of Use</div> <!--Блочный элемент-->
                    </div>
            <div class ="kontakt">
                <div class ="social"><p><img src = "img/social.png"></p></div>          
                <div class ="phoneThree"><img src = "img/phone2.png"><p>+1 (888) 675-4998</p></div>
            </div>  
        <div class="clear"></div>           
            <div class ="mail">
                <div class ="img_mail"><img src = "img/mail.png"></div> <!--Блочный элемент-->
                <div class ="text_mail"><p>info@mail.com</p> <!--Абзац--></div> <!--Блочный элемент-->
            </div>
        <div class="clear"></div>           
            <div class = "text_niz"><p>All rights reserved. Posted by Dospel & GanjaParker 2013</p> <!--Абзац--></div>
            </div>
        </div>
    </div>
    </body>
</html>
Код css
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
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
*{
    margin: 0;
    padding: 0; 
}
 
.clear{clear:both;}
 
.contener{
    width: 2026px;
    margin: 0 auto;
}
 
 
img {
    max-width: 100%;
    height: auto;
}
 
.heder{                                 /*Шапка сайта*/
    width: 100%;
    height: 660px;
    margin-top: -20px;
    padding-top: 20px;  /*Устанавливает значение полей вокруг содержимого элемента.*/
    background: url(img/banner.jpg);  /*Изображение в формате jpg*/
}
 
.logo_text h1{                  /*Текст в логотипе, с заголовком*/
    color: #fff;
    margin-left: 11%;  /*Устанавливает величину отступа от левого края элемента*/
    font-size: 24px;  /*Размер шрифта элемента*/
    margin-top: -49px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.logo_text img{             /*Картинка логотипа*/
    margin-top: 20px;
    margin-left: 140px; /*Устанавливает величину отступа от левого края элемента*/
}
 
.menu{                  /*Меню сайта*/
    float: left;
    margin-left: 30%; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: 40px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
.menu li{                   /*Меню сайта, пишится маркированным спископ*/
    float: left;
    margin-top: -20px;
    margin-right: 40px; /*Устанавливает величину отступа от правого края элемента.*/
    list-style: none;
    color: #fff; /*Цвет*/
    font-size: 25px; /*Размер шрифта элемента*/
}
 
.phone img{             /*Картинка*/
    margin-top: -25px; /*Устанавливает величину отступа от верхнего края элемента.*/
    float: right;   /*Определяет по какой будет выравниваться элемент*/
    margin-right: 40%; /*Устанавливает величину отступа от правого края элемента.*/
}
.phoneText{         /*Текст, который пишется рядом с картинкой. Прописан в классе ".phone img"*/
    float: left; /*Устанавливает величину отступа от левого края элемента*/
    margin-left: 60%; /*Устанавливает величину отступа от левого края элемента.*/
    margin-top: -25px; /*Устанавливает величину отступа от верхнего края элемента.*/
    color: #fff; /*Цвет*/
    font-size: 20px; /*Размер шрифта элемента*/
}
    
.info h1{           /*Пишится текст, ниже меню*/
    margin-left: 220px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: 150px; /*Устанавливает величину отступа от верхнего края элемента.*/
    color: #fff;
}
 
.knopka h1{     /*Кнопка с заголовком, и цветом где прописан текст*/
    color: #fff;
    margin-top: 20px; /*Устанавливает величину отступа от верхнего края элемента.*/
    margin-left: 220px; /*Устанавливает величину отступа от левого края элемента*/
    font-size: 15px; /*Размер шрифта элемента*/
    width: 150px;
    height: 25px;
    background: #1f6ca0;
    padding-left: 20px;  /*Устанавливает значение поля от левого края содержимого элемента.*/
    padding-top: 5px;  /*Устанавливает значение полей вокруг содержимого элемента.*/
}
 
.text{
    margin-left: 462px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -25px; /*Устанавливает величину отступа от верхнего края элемента.*/
    color: #fff;        /*Устанавливает цвет*/
    font-size: 16px; /*Размер шрифта элемента*/
}
 
.videokp{
    margin-left: 430px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -24px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.content{
    width: 56%; 
    margin: 0 auto; 
    background: #efb7c6;
    margin-top: 10px /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
 
 
.comp{                      /*Картинки логотипов*/
    margin-top: 20px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
 
 
.imgOne{                /*Картинка логотипа 1*/
    padding-top: -10px;
}
 
.imgTwo{            /*Картинка логотипа 2*/
    margin-left: 140px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -60px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.imgThree{              /*Картинка логотипа 3*/
    margin-left: 300px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -45px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.imgFour{           /*Картинка логотипа 4*/
    margin-left: 490px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -60px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.imgFive{           /*Картинка логотипа 5*/
    margin-left: 700px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -80px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.imgSix{            /*Картинка логотипа 6*/
    margin-left: 910px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -75px; /*Устанавливает величину отступа от верхнего края элемента.*/
}   
 
.textslider h1 {
    text-align:  center; /*Текст выравнивается по середине*/
    margin-top: 40px; /*Устанавливает величину отступа от верхнего края элемента.*/
    font-size: 20px; /*Размер шрифта элемента*/
}
 
.slde_info p{
    text-align: center; /*Выравнивает текст по центру*/
    margin-top: 10px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.knopka_odin{
    margin-top: -150px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.knopka_dva{
    float: right;
    margin-top: -56px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.text_dva{
    text-align: center; /*Выравнивает текст по центру*/
    margin-top: 140px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.content2 {
    margin-top: 50px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
 
 
.textcontent{
    margin-top: 50px; /*Устанавливает величину отступа от верхнего края элемента.*/
    text-align: center; /*Текст выравнивается по середине*/
}
 
.info_img{
    margin-top: 40px; /*Устанавливает величину отступа от верхнего края элемента.*/
    text-align: center; /*Текст выравнивается по середине*/
}
 
.infotextOne h1{
    margin-left: 15%;  /*Устанавливает величину отступа от левого края элемента.*/
    font-size: 15px; /*Размер шрифта элемента*/
}
 
.infotextTwo h1{
    text-align: center; /*Текст выравнивается по середине*/
    font-size: 15px; /*Размер шрифта элемента*/
    margin-top: -18px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.infotextThree h1{
    margin-left: 75%; /*Устанавливает величину отступа от левого края элемента*/
    font-size: 15px; /*Размер шрифта элемента*/
    margin-top: -18px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
 
.footer{                    /*Низ сайта*/
    padding: 100px;  /*Устанавливает значение полей вокруг содержимого элемента.*/
    background: #3498db; 
    color: #fff; 
     
}
 
.blog{
    margin-top: 0; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.blogOne{
    margin-left: 27%; /*Устанавливает величину отступа от левого края элемента*/
}
 
.blogTwo{
    margin-left: 40%; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -120px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.blogThree{
    margin-left: 52%; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -105px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.social p{
    float: right;
    margin-top: -90px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.phoneThree img{
    float:  right; /*Определяет по какой будет выравниваться элемент*/
    margin-right: 160px;
    margin-top: -20px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.phoneThree p{
    float: right; /*Определяет по какой будет выравниваться элемент*/
    
}
 
.img_mail{
    float: right; /*Определяет по какой будет выравниваться элемент*/
    margin-right: 190px;
}
 
.text_mail{
    float: right; /*Определяет по какой будет выравниваться элемент*/
    margin-left: 90px;
}
 
.text_niz{
    float: right; /*Определяет по какой будет выравниваться элемент*/
    margin-top: 40px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
Вопрос: Мигающие иконки

Привет. Использую на сайте иконки Font Awesome. Проблема в том, что на рабочем сервере в хроме при обновлении страницы иконки "мигают", а вот на локальном нет. Куда смотреть? Попробовал с мозилы - на рабочем и локальном ничего не мигает.
Ответ:
andrey10
На других сайтах в интернете (не локальных) иконки не мигают, только у меня на сервере. Много искал про эту проблему, но ничего не нашел...


Шрифт с иконками имеет определённый размер.

Когда шрифта у клиента пока ещё нет, проходит некоторое время на создание соединения, скачивание файла со шрифтом, затем на загрузку его в память и рендеринг. Мигание происходит из-за этого.

Я не думаю, что «другие сайты» научились каким-то волшебным образом закачивать шрифты на клиента до первого входа пользователя.

Конечно существуют грязные и не очень трюки, чтобы сократить это время до минимума. Либо вообще ничего не показывать пользователю, пока всё не загрузится, либо урезать файл со шрифтом, убирая лишние глифы.

Но нет такого способа сделать, чтобы «не мигало» просто по логике вещей. Если шрифта у пользователя нет, значит на месте иконок будет пусто. Как только шрифт появится у клиента, всё отобразится.

Это примерно, как пожелать, чтобы все картинки отображались СРАЗУ, покажи мне такой сайт, где картинки моментально показываются, как будто они всегда лежали в кеше браузера задолго до возникновения вселенной.