Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
maximamus
8 / 0 / 1
Регистрация: 12.01.2010
Сообщений: 142
1

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

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

Как сделать, что бы в зависимоти от размера браузера круги изменяли свой размер и не вылазили по высоте на футер?

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.07.2014, 08:03
Ответы с готовыми решениями:

на чистом css
как написать такое на чистом css. Я знаю о превдоклассе hover. Но только на...

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

Аккордеон на чистом CSS
<div class="ck"> <input type="checkbox" id="ckb"> ...

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

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

9
_Я_
16 / 16 / 13
Регистрация: 10.07.2014
Сообщений: 84
14.07.2014, 11:09 2
А ни как, так как чтобы был круг (на чистом css), тебе нужен сначала квадрат, а потом к этому квадрату добавить
CSS
1
border-radius: 50%;
Цитата Сообщение от maximamus Посмотреть сообщение
что бы в зависимоти от размера браузера круги изменяли свой размер
Конечно можно JS вычислить высоту/ширину экрана, выбрать наименьшее значение (высоты/ширины) экрана и задать это значение высоте и ширине блока.
0
BarbosLV
363 / 401 / 165
Регистрация: 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 / 13
Регистрация: 10.07.2014
Сообщений: 84
14.07.2014, 13:16 4
Цитата Сообщение от BarbosLV Посмотреть сообщение
Ошибаешься
так ведь часть круга не вмещается в видимую область экрана, если ширина/2 больше высоты и поэтому это уже не круг.
0
BarbosLV
363 / 401 / 165
Регистрация: 29.05.2014
Сообщений: 1,494
14.07.2014, 13:24 5
Цитата Сообщение от _Я_ Посмотреть сообщение
и поэтому это уже не круг.
Значит если картинка не вместилась в экран это уже не картинка? Уж лучше бы промолчал.
0
_Я_
16 / 16 / 13
Регистрация: 10.07.2014
Сообщений: 84
14.07.2014, 13:45 6
Цитата Сообщение от maximamus Посмотреть сообщение
круги изменяли свой размер и не вылазили по высоте на футер?
BarbosLV, как то не сложилось
0
BarbosLV
363 / 401 / 165
Регистрация: 29.05.2014
Сообщений: 1,494
14.07.2014, 13:58 7
Лучший ответ Сообщение было отмечено maximamus как решение

Решение

Цитата Сообщение от _Я_ Посмотреть сообщение
как то не сложилось
Что не сложилось? Типо на футер вылазит? А может надо не просто тупо копировать а голову включать? Пример с футером.
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 / 13
Регистрация: 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 / 100
Регистрация: 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

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

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

Accordion меню на чистом CSS
Есть вертикальное меню. http://systema-tv.com/ Как скрыть все подпункты...


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

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

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