Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.94/35: Рейтинг темы: голосов - 35, средняя оценка - 4.94
10 / 10 / 5
Регистрация: 30.12.2010
Сообщений: 379
1

CSS, сделал размер текста в зависимости от размера окна браузера. Почему-то не работает.

29.01.2012, 00:15. Показов 6401. Ответов 10
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Здравствуйте, вот адрес страницы.
Вот код страницы:
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

<!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" lang="en">
      <head>
        <title>Конкурс Спасатель - профессия отважных</title>
        
        <script language=JavaScript>
         if (screen.width < '810') {document.write ('<LINK href="http://vsevolod-s10.narod.ru/konkurs/1.css" rel="stylesheet" type="text/css" media="all">');}
         if (screen.width > '810' && screen.width < '1054') {document.write ('<LINK href="http://vsevolod-s10.narod.ru/konkurs/2.css" rel="stylesheet" type="text/css" media="all">');}
         if (screen.width > '1054' && screen.width < '1300') {document.write ('<LINK href="http://vsevolod-s10.narod.ru/konkurs/3.css" rel="stylesheet" type="text/css" media="all">');}
         if (screen.width > '1300' && screen.width < '1370') {document.write ('<LINK href="http://vsevolod-s10.narod.ru/konkurs/4.css" rel="stylesheet" type="text/css" media="all">');}
         if (screen.width > '1370') {document.write ('<LINK href="http://vsevolod-s10.narod.ru/konkurs/5.css" rel="stylesheet" type="text/css" media="all">');}
        </script>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
      </head>
      <body>      
            
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_1.jpg" style="position:absolute; left:16.5%; top:0px; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:7%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:14%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:21%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:28%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:35%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:42%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:49%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:56%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:63%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:70%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:77%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:84%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:91%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:98%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:105%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:112%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:119%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:126%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:133%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:140%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:147%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:154%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:161%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:168%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:175%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:182%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:189%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:196%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:203%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:210%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:217%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:224%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:231%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:238%; width:65%; height:8%;">
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:245%; width:65%; height:8%;">
        
        <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_3.jpg" style="position:absolute; left:16.5%; top:252%; width:65%; height:8%;">
            
            
        <IMG SRC="http://vsevolod-s10.narod2.ru/konkurs/Detalnaya_kartinka.jpg" style="position:absolute; left:23%; top:30%; width:36%; height:50%;">
  
        <b>Спасатель - профессия отважных</b>
 
            
            
            
<!--#include virtual="/.narodsys/direct.html"-->
 
<i style="background:url(//www.tns-counter.ru/V13a****yandex_ru/ru/CP1251/tmsec=narod_total/0)"></i>
 
<!--#include virtual="/.narodsys/metrika_counter.html"-->
</body>
    </html>
Вот коды css файлов (и 1, 2, 3, 4 и 5 - одинаковые):
CSS
1
2
3
4
5
6
7
8
9

b{font-size: 70px;}
 
.block {
position: absolute;  
left: 22%;
top: 10%;
width:15%;
height:15%;
}
При загрузке сайта при любом разрешении, текст должен быть 70 px. Но почему-то не работает! Скажите пожалуйста, почему?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 29.01.2012, 00:15
Ответы с готовыми решениями:

Как менять высоту(height) в зависимости от размера окна браузера клиента ?
Народ помогите плз! есть: -------------------------------------- &lt;p id=&quot;txt &lt;/p&gt; &lt;input...

Отцентрировать картинку по вертикали, так чтобы она изменяла размер в зависимости от окна браузера
Задание: Нужно отцентрировать изображение по центру страницы по вертикали и по горизонтали. А так...

Как сделать чтобы при изменении размера окна браузера, изменялся размер картинки
Ребят , как сделать так, чтобы при изменении размера окна браузера, изменялся размер картинки? В...

Как автоматически изменять размер текста в spinner в зависимости от размера экрана?
Здравствуйте. В программе использую две темы светлую и темную: &lt;style name=&quot;BlackTheme&quot; ...

10
589 / 96 / 6
Регистрация: 24.01.2009
Сообщений: 379
29.01.2012, 00:20 2
Вот ваш файл со стилями, там лишний нулик:
CSS
1
2
3
4
5
6
7
8
9

b{font-size: 700px;}
 
.block {
position: absolute;  
left: 22%;
top: 10%;
width:15%;
height:15%;
}
Файл vsevolod-s10.narod.ru/konkurs/3.css
1
Йошь-мыслитель
126 / 120 / 26
Регистрация: 22.02.2009
Сообщений: 706
Записей в блоге: 5
29.01.2012, 00:27 3
Цитата Сообщение от Илья01 Посмотреть сообщение
При загрузке сайта при любом разрешении, текст должен быть 70 px.
Не понял А на кой ляд тогда кучу файлов стилей придумывать? Что-то индусское по-моему получается. Только вот не пойму что
1
10 / 10 / 5
Регистрация: 30.12.2010
Сообщений: 379
29.01.2012, 16:42  [ТС] 4
Dimazzzzzz, я знаю о лишнем нолике, я просто тестировал с 700px. Но не с 70, не с 700 px НЕ работает!
Xander Bass, это только ПОКА я разбираюсь, а когда разберусь, то сделаю такое: для маленьких окон - маленький шрифт.
Но все равно спасибо за ответы.
ТЕМА К СОЖАЛЕНИЮ НЕ ЗАКРЫТА

Добавлено через 25 минут
Извините, проявил не внимательность, ошибка в 4.css, место ":" СТОЯЛО "=".
0
html + css = камасутра
75 / 57 / 5
Регистрация: 31.01.2012
Сообщений: 536
Записей в блоге: 6
31.01.2012, 01:41 5
Цитата Сообщение от Илья01 Посмотреть сообщение
lod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:154%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:161%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:168%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:175%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:182%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:189%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:196%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:203%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:210%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:217%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:224%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:231%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:238%; width:65%; height:8%;">
* * * * <IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_2.jpg" style="position:absolute; left:16.5%; top:245%; width:65%; height:8%;">
<IMG SRC="http://vsevolod-s10.narod.ru/konkurs/img_3.jpg" style="position:absolute; left:16.5%; top:252%; width:65%; height:8%;">
<IMG SRC="http://vsevolod-s10.narod2.ru/konkurs/Detalnaya_kartinka.jpg" style="position:absolute; left:23%; top:30%; width:36%; height:50%;">
<b>Спасатель - профессия отважных</b>
<!--#include virtual="/.narodsys/direct.html"-->
<i style="background:url(//www.tns-counter.ru/V13a****yandex_ru/ru/CP1251/tmsec=narod_total/0)"></i>
<!--#include virtual="/.narodsys/metrika_counter.html"-->
</body>
* * * * </html>
<html>
<head>
<style type="text/css">
.text {font-size:70000000000000000000000000000000000000000000000000px;}
</style>
</head>
<body>
<div class="text">
ПОЖАЛУЙСТА УДАРЬТЕ ЕГО ПАЛКОЙ!!!
</div>
</body>
</html>
1
conformist
31.01.2012, 01:47
  #6

Не по теме:

HTML5
1
2
3

<div class="text">
ПОЖАЛУЙСТА УДАРЬТЕ ЕГО ПАЛКОЙ!!!
</div>
человек вообще то доброе дело делает, просто запутался, со всеми бывает

1
html + css = камасутра
75 / 57 / 5
Регистрация: 31.01.2012
Сообщений: 536
Записей в блоге: 6
31.01.2012, 02:01 7
Цитата Сообщение от conformist Посмотреть сообщение

Не по теме:


человек вообще то доброе дело делает, просто запутался, со всеми бывает

я просто не понимаю мышление этого человека. зачем ему столько раз выводить одну и туже фотку -"http://vsevolod-s10.narod.ru/konkurs/img_2.jpg"

есть же простые стили в css которые позволяют выводить одну и туже фотку допустим перед каким то текстом , зачем себе усложнять жизнь?
0
O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681
31.01.2012, 02:05 8

Не по теме:

скрытый смысл, понятный лишь ему...



Добавлено через 1 минуту

Не по теме:

а возможно у него есть котэ, который случайно зажал ctrl+D в notepad++ и ему понравилось получившейся результат

2
html + css = камасутра
75 / 57 / 5
Регистрация: 31.01.2012
Сообщений: 536
Записей в блоге: 6
31.01.2012, 02:06 9
Цитата Сообщение от conformist Посмотреть сообщение

Не по теме:

скрытый смысл, понятный лишь ему...



Добавлено через 1 минуту

Не по теме:

а возможно у него есть котэ, который случайно зажал ctrl+D в notepad++ и ему понравилось получившейся результат


ahahahа вы меня просто убили )))) Зачет вам.!
0
589 / 96 / 6
Регистрация: 24.01.2009
Сообщений: 379
31.01.2012, 04:14 10
Илья01, вот вам ссылка для кроссбраузерной обработки события DOMContentLoaded. Это вам нужно для запуска функции корректировки шрифта для всех элементов.

Далее, изучив вышеприведенную информацию, вам нужно запустить по этому событию следующий код:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12

if (document.body) { //Проверяем наличие элемента body
    var vBody = document.documentElement;
    if (vBody.vStyle == undefined) { //Проверяем пользовательское свойство 
        var fSize = 0;
        //Проверяем размер экрана и изменяем переменную fSize, в которой будет размер будущего шрифта
        var vStyle = document.createElement ('STYLE'); //Создаем элемент типа "Стиль"
        vStyle.innerHTML = '* {font-size: ' + fSize + 'px;}'; 
        vBody.insertBefore (vStyle, vBody.firstChild); //Вставляем созданный элемент в DOM документа
        vBody.appendChild (vStyle); //Те же ... стили, только сзади
        vBody.vStyle = true; //Изменяем флаг, чтобы больше не создавать этот элемент
    }
}
1
10 / 10 / 5
Регистрация: 30.12.2010
Сообщений: 379
31.01.2012, 16:02  [ТС] 11
Спасибо всем! Палочкой меня - это лишнее, а за советы огромное спасибо!
0
31.01.2012, 16:02
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 31.01.2012, 16:02
Помогаю со студенческими работами здесь

Как сделать изображение на сайте "фиксированым" и что бы оно не уезжало в зависимости от размера окна браузера
Как сделать изображение на сайте &quot;фиксированым&quot; и что бы оно не уезжало в зависимости от размера...


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

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru