Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
maximamus
8 / 0 / 1
Регистрация: 12.01.2010
Сообщений: 142
#1

Резиновые круги на чистом css - HTML, CSS

14.07.2014, 08:03. Просмотров 613. Ответов 9
Метки нет (Все метки)

Как сделать, что бы в зависимоти от размера браузера круги изменяли свой размер и не вылазили по высоте на футер?
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.07.2014, 08:03
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Резиновые круги на чистом css (HTML, CSS):

Окантовка на чистом CSS - HTML, CSS
Хочу оговорится, необходима поддержка ie8 , возможно ли сделать такую вот цветную оконтовочку по краях?

Спойлер на чистом CSS - HTML, CSS
Помогите решить задачку. Дано: ДВА СПОЙЛЕРА на чистом CSS? расположены горизонтально друг за другом. Вопрос: как сделать,...

Табы на чистом CSS - HTML, CSS
Помогите сделать горизонтальный спойлер(ы), чтоб несколько в горизонт располагались. Но тело самого спойлера (где показывается скрытая...

Слайдер на чистом CSS в таблицах - HTML, CSS
Всем привет. Очень захотелось мне слайдер на чистом css. Примеров таких слайдеров в div'ной верстке полно, а в табличной мне так и не...

Google map на чистом CSS - HTML, CSS
Можно ли реализовать карту на сайте, используя только CSS?

Accordion меню на чистом CSS - HTML, CSS
Первоначально меню выглядит так Распахнуть 1 2 Затем, надо как-то его распахнуть и после нажатия на "Распахнуть",...

9
_Я_
16 / 16 / 11
Регистрация: 10.07.2014
Сообщений: 84
14.07.2014, 11:09 #2
А ни как, так как чтобы был круг (на чистом css), тебе нужен сначала квадрат, а потом к этому квадрату добавить
CSS
1
border-radius: 50%;
Цитата Сообщение от maximamus Посмотреть сообщение
что бы в зависимоти от размера браузера круги изменяли свой размер
Конечно можно JS вычислить высоту/ширину экрана, выбрать наименьшее значение (высоты/ширины) экрана и задать это значение высоте и ширине блока.
0
BarbosLV
363 / 401 / 119
Регистрация: 29.05.2014
Сообщений: 1,494
14.07.2014, 13:04 #3
Цитата Сообщение от _Я_ Посмотреть сообщение
А ни как,
Ошибаешься. Вот пример.
HTML5
1
2
3
4
5
<div id="container">
<div class="telo">
    <div class="krug"></div>
</div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#container {
position:absolute;
margin: 0px auto;
width: 100%;
height: 100%;
}
 
.telo {
  width:100%;
 
}
.krug {
    position: fixed;
    width:50%;
    height:0%;
    border-radius: 50%;
    background-color: red;
    padding-bottom:50%;
 
}
0
_Я_
16 / 16 / 11
Регистрация: 10.07.2014
Сообщений: 84
14.07.2014, 13:16 #4
Цитата Сообщение от BarbosLV Посмотреть сообщение
Ошибаешься
так ведь часть круга не вмещается в видимую область экрана, если ширина/2 больше высоты и поэтому это уже не круг.
0
BarbosLV
363 / 401 / 119
Регистрация: 29.05.2014
Сообщений: 1,494
14.07.2014, 13:24 #5
Цитата Сообщение от _Я_ Посмотреть сообщение
и поэтому это уже не круг.
Значит если картинка не вместилась в экран это уже не картинка? Уж лучше бы промолчал.
0
_Я_
16 / 16 / 11
Регистрация: 10.07.2014
Сообщений: 84
14.07.2014, 13:45 #6
Цитата Сообщение от maximamus Посмотреть сообщение
круги изменяли свой размер и не вылазили по высоте на футер?
BarbosLV, как то не сложилось
0
BarbosLV
363 / 401 / 119
Регистрация: 29.05.2014
Сообщений: 1,494
14.07.2014, 13:58 #7
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Цитата Сообщение от _Я_ Посмотреть сообщение
как то не сложилось
Что не сложилось? Типо на футер вылазит? А может надо не просто тупо копировать а голову включать? Пример с футером.
HTML5
1
2
3
4
5
6
7
8
9
<div class="hider">Шапка</div>
 
<div id="container">
<div class="telo">
    <div class="krug"></div>
</div>
</div>
 
<div class="futer">дно</div>
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
.clr{
    clear:both;
    }
.futer, .hider{
    width:100%;
    height:100px;
    background-color: orange;
    
}
#container {
margin: 0px auto;
width: 100%;
height: 100%;
}
 
.telo {
  width:100%;
 
}
.krug {
    width:50%;
    height:0%;
    border-radius: 50%;
    background-color: red;
    padding-bottom:50%;
 
}
1
_Я_
16 / 16 / 11
Регистрация: 10.07.2014
Сообщений: 84
14.07.2014, 14:20 #8
BarbosLV, ну так совсем другое дело
1
maximamus
8 / 0 / 1
Регистрация: 12.01.2010
Сообщений: 142
14.07.2014, 14:24  [ТС] #9
спасибо всем)))))))
0
Qwertiy
821 / 629 / 75
Регистрация: 20.08.2013
Сообщений: 2,524
14.07.2014, 15:25 #10
Цитата Сообщение от _Я_ Посмотреть сообщение
нужен сначала квадрат
Квадрат делается через margin.
0
14.07.2014, 15:25
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.07.2014, 15:25
Привет! Вот еще темы с ответами:

Выровнять блоки на чистом css - HTML, CSS
У меня такой вопрос, возможно ли реализовать на css отступы от блока 1 до 3 , 2 до 4 такие же как между всеми черными блоками ? То есть...

Accordion меню на чистом CSS - HTML, CSS
Есть вертикальное меню. http://systema-tv.com/ Как скрыть все подпункты (дочерные категории) который связаны с родительскими. К примеру...

Вогнутые углы на чистом CSS - HTML, CSS
Кто знает как сделать вогнутые углы как на картинке на чистом CSS?

Изобразить кубики с цифрами на чистом CSS - HTML, CSS
Подготовить HTML-страницу, которая бы позволила воспроизвести следующую картину, представленную на рисунке. При наведении на любую...


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

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru