olegvasil
Эксперт
Дата регистрации:
25.03.2013 22:27:59
Сообщений: 106
Добрый день , модератор!Подскажите , вот такую вещь.Я верстаю страницу сайта с psd .Ее размер 1000рх (мерил линейкой в фотошопе )Ради качественной верстки , я определил , что максимум ширину , которую я могу задать чтобы сайт отображался без полосы прокрутки , при разрешении 1021 * 768 - 983px.Как в данном случае мне быть уменьшать до 983px или брать оригинальную ширину шаблона (но будет уже с небольшой полосой прокрутки.Вот изображение шаблона http://www.picshare.ru/view/3323350/.И еще подскажите как сделать необычные переключатели , как изображены на вот этом шаблоны в правом блоке(опростник) http://www.picshare.ru/view/3323350/
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
Доброго Вам времени суток,уважаемый.
1.Опросник пишется не Опростник,а ОпроСНИК. Вас за это поисковики с костями съедят и не выплюнут.Учтите при вёрстке
2.Правилом хорошего тона является резиновая вёрстка.Если вы верстаете не для себя,а для всех,то верстайте блочно и резину.
3.примерно 7 процентов пользователей используют разрешение 1024x768
т.е. чтобы было без скролла,то нужно примерно 990 пикселов.
Это всего 7 процентов.
Что касается ноутбуков,то среднее стандартное разрешение там 1200-1380, так что учтите это тоже.
А тут уж Вам выбирать,на что ориентироваться.
В любом случае,та длинна,которую вы намеряли,вполне приемлема. Возьмите размер в 980 пикселов и верстайте под него.
Если хотите делать качественно,то ориентируйтесь при вёрстке на правила дизайна и эстетичности.
II. В переключателях опросника не увидел ничего необычного. Делаются они банально и просто - тегом
<input type="radio">
olegvasil
Эксперт
Дата регистрации:
25.03.2013 22:27:59
Сообщений: 106
Вы говорите , если делать качественно , Если хотите делать качественно,то ориентируйтесь при вёрстке на правила дизайна .Но ширина дизайна в 1000px, следовательно если добавляется полоса прокрутки справа , то внизу также появляется полоса прокрутки , а это уже минус качественной верстки
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
Например дизайнер,с которым работаю я - всегда дорисовывает или переделывает,если макет не соответствует нужным параметрам.И я говорю ориентироваться на ширину окна браузера.
В любом случае,верстаете вы,а не я и решение принимать вам
olegvasil
Эксперт
Дата регистрации:
25.03.2013 22:27:59
Сообщений: 106
Спасибо, но это же явно дизайнер виноват что сделал ширину шаблона 1000px?
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
Ну,уважающие себя дизайнеры подобным образом не рисуют.
Всегда рассчитывают рисовку так,чтобы тому,кто верстает было проще и удобнее
olegvasil
Эксперт
Дата регистрации:
25.03.2013 22:27:59
Сообщений: 106
Спасибо .А вот нащет радио кнопок <input type = 'radio' name = 'r' /> создаст обычный радио переключатель , а как его стилизовать в тот , который нарисован на дизайне,
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
а что там стилизованного? размер побольше?
А вообще стилизуется примерно так(дабы не писать много кода,просто его скопировал):
<div class="radio">
<input id="male" type="radio" name="gender" value="male">
<label for="male">Male</label>
<input id="female" type="radio" name="gender" value="female">
<label for="female">Female</label>
</div>
В первую очередь, мы меняем иконку курсора на pointer (появляется рука с пальцем), для того чтобы пользователь понимал, что данный элемент кликабилен:
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
Затем спрячем радио кнопку по её атрибуту:
input[type=radio] {
display: none;
}
Заменяем скрытый элемент псевдо классом :before.
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
Такой же стиль мы применим и к чекбоксу. Разница только в том, что для радио кнопки нам нужно сформировать окружность. Добиться подобного эффекта мы можем, воспользовавшись border-radius и задав радиус в половину ширины и высоты элемента.
.radio label:before {
border-radius: 8px;
}
Как-то так
olegvasil
Эксперт
Дата регистрации:
25.03.2013 22:27:59
Сообщений: 106
Ну только я использую XHTML и css не 3 версии a border-radius это css3
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
Вы это не указывали.Подгоняйте под стандарт сами
пример на обычном переходном 4-ке)
Ну тогда я не могу вам помочь. Используйте CSS 3
Это нормально.
Если именно бордер-радиус волнует,то есть же не из третьего,свойство с -webkit и -moz
