LINUX.ORG.RU

Скажите справился я с заданием или нет.


1

1

3 задание. http://en.wikiversity.org/wiki/Web_Design/CSS_challenges

Я сделал overflow: auto; что бы контейнер завернул два float. Мне кажется костыль. Есть идеи получше? Вариант 1:

body {
    background: #CBD6FB;
}

#wrap {
    border: 2px solid;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    float: none;
    overflow: auto;
    background: #DED8B9;
}
    

#nav{
    width: 200px;
    margin: 0;
    float: left;
    height: 100%;
}

#content {
    background: #EDE9DB;
    width: 600px;
    margin: 0;
    float: right;

Вариант 2:

body {
    background: #CBD6FB;
    width: 800px;
    margin: 0 auto;
    
}

#wrap {
    border: 2px solid;
    padding: 0;
    float: left;
    background: #DED8B9;
    width: 100%;
}
    

#nav{
    width: 200px;
    margin: 0;
    float: left;
    height: 100%;
    
}

#content {
    background: #EDE9DB;
    width: 600px;
    margin: 0;
    float: right;
}

Правда, если я добавлю padding внутри nav и content все идет к чертям...

Trieforce ()
Ответ на: комментарий от Trieforce

Последний вариант, звершенный и по прямее.

/*divs*/
body {
    background: #CBD6FB;
}

#wrap {
background: #DED8B9;
    border: 2px solid;
    width: 800px;
    margin: 0 auto;
}

#nav{
    background: #DED8B9;
    width: 180px;
    padding: 1em;
    margin: 0;
    float: left;
}

#content {
    background: #EDE9DB;
    padding: 1em;
    margin-left: 210px;
    height: 100%
}
/*text*/
#nav a {
    color: green;
}
#content h1, #content p, #content li {
    text-align: center;
}

#content li {
    list-style: none;
}

.copyright {
    font-style: italic;
    font-size: 70%;
}

Trieforce ()

Да когда же сдохнет этот дебилизм под названием «CSS для вёрстки»...

Miguel ★★★★★ ()
Ответ на: комментарий от Miguel

Да когда же сдохнет этот дебилизм под названием «CSS для вёрстки»...

Налабай на табличках adaptive design, чтобы на всех устройствах сразу, умник.

anonymous ()
Ответ на: комментарий от Miguel

я так и вижу, как тебя бы люто заминусовали на хабрахабре)

cdshines ★★★★ ()
Ответ на: комментарий от anonymous

«На всех устройствах сразу» — это вообще не работает, кроме тривиальных случаев. Под мобильные устройства делают отдельную версию.

Miguel ★★★★★ ()
Ответ на: комментарий от Miguel

Да когда же сдохнет этот дебилизм

а как можно сделать лучше? Я имею в виду вообще, не только с использованием html, css и js. Изобретать отдельный язык позиционирования элементов?

true_admin ★★★★★ ()
Ответ на: комментарий от Miguel

Уже никто не делает мобильных версий, браузеры мобильных устройств просто отображают сайт так же как и в обычном браузере, с прокрутками, возможностью увиличения отдельных частей сайта...

TDrive ★★★★★ ()
Ответ на: комментарий от true_admin

ИМХО в html не хватает тегов которые бы заменили div+css. Например блоков которые выстраиваются горизонтально.

TDrive ★★★★★ ()

про колоночные дизайны можно посмотреть тут и тут. И вообще, у него много интересных заметок. А вот это (вкратце, попробуй вот эту страничку на разных размерах окна) показывай тем, кто говорит, что для мобильников надо отдельную вёрстку! ;)

aol ★★★★★ ()
Ответ на: комментарий от aol

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

Trieforce ()
Ответ на: комментарий от Miguel

«На всех устройствах сразу» — это вообще не работает, кроме тривиальных случаев.

Вы живёте прошлым.

http://en.wikipedia.org/wiki/Responsive_Web_Design

Попробуй менять размер окна: http://css-tricks.com/

Или любой из этих http://www.awwwards.com/50-examples-of-responsive-web-design.html

anonymous ()
Ответ на: комментарий от anonymous

Вы живёте прошлым.

Да, тут мне уже указали. Сейчас телефоны обзавелись экранами достаточного размера, чтобы этим не страдать.

Хотя многие всё ещё делают. Википедия, например.

Попробуй менять размер окна: http://css-tricks.com/

Эм... попробовал. Лучше бы я этого не делал.

Или любой из этих http://www.awwwards.com/50-examples-of-responsive-web-design.html

Ну, вот, взял smashingmagazine.com, смотрю в мозилле на десктопе и в iCab Mobile на айфоне. И уже вижу, что исходники разные.

Miguel ★★★★★ ()
Ответ на: комментарий от TDrive

Например для айпада нужно делать все картинки в 2 раза больше. Css тут не поможет.

Legioner ★★★★★ ()
Ответ на: комментарий от anonymous

Попробуй менять размер окна

Это точно только css? Исчезающие боковые панели, меняющиеся картинки, меняющиеся подписи в верхнем меню...

true_admin ★★★★★ ()
Ответ на: комментарий от true_admin

Я вот тоже думал, что css это, ну если не просто, то очевидно.(

Trieforce ()

А вообще, старайся максимально избегать флоатов

spiritkhl ()
Ответ на: комментарий от Legioner

Это проблемы отсталых ОСей, не умеющих рендерить относительно размеров экрана, а не по количеству пикселей.

TDrive ★★★★★ ()
Ответ на: комментарий от Miguel

Табличкой. Просто и примитивно.

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

Reaper ★★ ()
Ответ на: комментарий от Reaper

приводит к перемешиванию оформления и содержимого.

Ты так говоришь, как будто это плохо.

Miguel ★★★★★ ()
Ответ на: комментарий от true_admin

Это точно только css? Исчезающие боковые панели, меняющиеся картинки, меняющиеся подписи в верхнем меню...

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

anonymous ()
Ответ на: комментарий от spiritkhl

А почему? Опыт у меня нулевой, но в основных лайаутах везде флоаты... Вроде.

Trieforce ()
Ответ на: комментарий от TDrive

Оси все умеют, но пользователи хотят видеть сочные детализированные изображения, использующие экран по максимуму.

Legioner ★★★★★ ()
Ответ на: комментарий от anonymous

media queries

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

true_admin ★★★★★ ()
Ответ на: комментарий от xpahos

Что это?

Вот вводные. Если я открываю сайт на десктопе с 1024x768, мне надо отдавать сайт с картинками 400x400. Если я открываю сайт на айпаде с 1920x1080, мне надо отдавать сайт с картинками 800x800, сзуммированными в два раза меньше. Ну или можно сверствать весь сайт специально для айпада, но обычно никто так не делает, считают что 1 пиксель вебовский равен двум физическим пикселям и ладно. Шрифты сглаживаются как надо, только картинки надо в два раза большего разрешения показывать. Как это сделать не отдавая разные версии сайта в зависимости от UA? Можно отдавать десктопу сайт с большими картинками, но это не очень хороший вариант.

Legioner ★★★★★ ()
Ответ на: комментарий от Legioner

JavaScript. Есть десятки решений для этого. Вплоть до определения, какие картинки отдавать в зависимости от скорости подключения.

drakmail ★★★★ ()
Ответ на: комментарий от Legioner

Наверху уже писали про всякие media queries. Это для background-image, для всего остального можно сделать плавающую ширину, которая позволит тебе не заморачиваться с отдачей разных изображений.

Посмотри bootstrap чтоли. Там уже все есть и отлично работает в браузерах.

xpahos ★★★★★ ()
Ответ на: комментарий от xpahos

Ну, через min-device-pixel-ratio для <img /> адрес изображения задавать несколько проблематично. А так да, min-device-pixel-ratio для всего остального можно использовать.

drakmail ★★★★ ()
Ответ на: комментарий от drakmail

ну это как бы невозможно для img. Просто min-width: 100% и большое разрешение. Картинка уже сама подстроится под ипад/десктоп.

Это все тестить еще забавно на Air, Pro и iPad 2/3. После Air на Pro все кажется таким замыленным. А iPad в портретном режиме как-то странно масштабирует шрифты, хотя media query для это есть.

xpahos ★★★★★ ()
Ответ на: комментарий от xpahos

Ну, через css невозможно, с использованием js возможно. У меня даже где-то валялась подборка статей про различные способы.

drakmail ★★★★ ()
Ответ на: комментарий от Reaper

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

ну чтобы не перемешивалось содержимое и оформление — самый лучший способ это использовать — «ajax-crawling» от Google. в сочитании с шаблонизатором на стороне клиента (javascript).

user_id_68054 ★★★★★ ()
Ответ на: комментарий от TDrive

ИМХО в html не хватает тегов которые бы заменили div+css. Например блоков которые выстраиваются горизонтально.

вроде как display: inline-block вполне себе выстраивается горизонтально.

AndreyKl ★★★★★ ()
Ответ на: комментарий от TDrive

гм, ну div + css конечно.. но фактически это даже не хак, а «так задумано»... ну тут конечно взгляды могут быть разные.. может просто религия есть такая «див + css - это плохо», я ж не в курсе.. я думал вопрос в костыльности и многословности, но это явно не про inline-block по-моему....

AndreyKl ★★★★★ ()
Ответ на: комментарий от AndreyKl

Просто в верстке div+css используется практически везде, было бы логично сделать отдельный тег для этого. К тому же css это стили, они не должны участвовать в расположение блоков на сайте.

TDrive ★★★★★ ()
Ответ на: комментарий от Trieforce

Они ничего не выстраивают, чисто семантические теги.

TDrive насколько я понимаю предлагает что-то вроде виждетов компоновки из десктопных графических тулкитов. Интересная мысль по-моему.

Kalashnikov ★★★ ()
Ответ на: комментарий от Kalashnikov

насколько я понимаю предлагает что-то вроде виждетов компоновки из десктопных графических тулкитов. Интересная мысль по-моему.

А с учетом возрастающего количества разных приложений с веб интерфейсом, очень актуальная мысль.

TDrive ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.