Помощь начинающему (азы)

[Baravo]

Привет! Недавно начал учиться вёрстке, нужна помощь.

Так, как только начал это дело, начну с самого начала.

 

Оцените и укажите на ошибки, которые присутствуют, пожалуйста.

Собственно сам код:

http://jsfiddle.net/FZetU/1/

Edited April 26, 2014 by Baravo

[npofopr]

А что там смотреть? Вы лучше посмотрите на примеры таких макетов.

Даже генерируемые http://csstemplater.com/

[Baravo]

А что там смотреть? Вы лучше посмотрите на примеры таких макетов.

Даже генерируемые http://csstemplater.com/

Спасибо, но к чему там такой код?

.right-sidebar {

float: left;

width: 250px;

margin -left : -250 px ;

position: relative;

background: #FFACAA;

}

Зачем правый блок равнять слева, потом придавать ему -250, чтобы он вернулся на своё место и т.п.?

 

Это наверное даже хуже, чем у меня 

Edited April 25, 2014 by Baravo

[npofopr]

Это наверное даже хуже, чем у меня

жизнь покажет)

много способов верстки трехколоночных макетов. Гуглятся легко. 

[Baravo]

Как сделать подобное?

Высота блока 50px, ширина 300px;

Если задать отступы для текста padding 30 справа и 10 сверху, то блок станет на 30px шире и 10px выше.

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

Edited April 26, 2014 by Baravo

[npofopr]

Как сделать подобное?

Высота блока 50px, ширина 300px;

Если задать отступы для текста padding 30 справа и 10 сверху, то блок станет на 30px шире и 10px выше.

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

box-sizing:border-box

[Baravo]

Как сделать подобное?

Высота блока 50px, ширина 300px;

Если задать отступы для текста padding 30 справа и 10 сверху, то блок станет на 30px шире и 10px выше.

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

box-sizing:border-box

Применил и background (изображение) пропало.   

Извините, не поставил ;

 

Сейчас проверим.

 

Работает. Спасибо. Все так делают? Просто хочу чтоб вёрстка была правильной...

Edited April 26, 2014 by Baravo

[Galaxy]

box-sizing  ie8+ , если не надо поддерживать ie7, то можно юзать.

[Baravo]

box-sizing  ie8+ , если не надо поддерживать ie7, то можно юзать.

Вообще не нужно. Ну а если будет нужно, чем можно обойти?

Edited April 26, 2014 by Baravo

[Galaxy]

ничем почитайте про это свойство, box-sizing:border-box если и используется то думаю для админки максимум,а так лучше делайте по обычному(box-sizing:content-box)  с паддингами и т.д

[Baravo]

ничем почитайте про это свойство, box-sizing:border-box если и используется то думаю для админки максимум,а так лучше делайте по обычному(box-sizing:content-box)  с паддингами и т.д

А для навигационного меню для сайта можно?   

[Galaxy]

в чем проблема юзать паддинги? Тут проблема в том что считается хорошим тоном что бы сайт не разваливался в старых браузерах , т.е всякие тени , анимации , плавные штуки - дрюки могут не работать, но этим сайтом можно пользоватся , а при border-box , сайт просто распадется)

[npofopr]

ничем почитайте про это свойство

google: box-sizing ie7 

 

 

а при border-box , сайт просто распадется

не говорите ерунды. Поддерживайте тогда еще IE 5 уж. 

 

 

 

А для навигационного меню для сайта можно?

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

Например:

* {    -webkit-box-sizing: border-box;       -moz-box-sizing: border-box;            box-sizing: border-box;} 

Edited April 26, 2014 by npofopr

[Galaxy]

http://htmlbook.ru/css/box-sizing ie8, человек только начал учиться , зачем ему сейчас css фреймворки???  а учиться лучше без border-box, темболее заказов на поддержку ie7 сейчас еще хватает.

[Baravo]

Поставил бы спасибо за помощь, но нет привилегий.

[npofopr]

http://htmlbook.ru/css/box-sizing ie8, человек только начал учиться , зачем ему сейчас css фреймворки???  а учиться лучше без border-box, темболее заказов на поддержку ie7 сейчас еще хватает.

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

Ну да ваше право, делайте как хотите)

[Sensei]

считается хорошим тоном

Что это за выражение такое? Хорошим тоном считается аккуратный отформатированный код с комментариями, где нужно.

А «чтобы сайт не разваливался в старых браузерах» — это задача, которую нужно решить.

 

Пока ТС освоит верстку, все уже забудут, что был такой браузер — ие7.

[Baravo]

Ну вот, ещё одна проблема...

В новости есть картинка, текст и блок с кол-вом просмотров. Когда текста мало, блок с кол-вом просмотров заезжает за картинку. Как сделать, чтобы блок ровнялся ещё и по картинке?

 

http://jsfiddle.net/5A3e9/

 

Если не сложно, помогите. 

Edited April 26, 2014 by Baravo

[Struggle]

Ну вот, ещё одна проблема...

В новости есть картинка, текст и блок с кол-вом просмотров. Когда текста мало, блок с кол-вом просмотров заезжает за картинку. Как сделать, чтобы блок ровнялся ещё и по картинке?

 

http://jsfiddle.net/5A3e9/

 

Если не сложно, помогите. 

Я бы упростил не много и сделал так http://jsfiddle.net/2XU5s/1/

[Sensei]

На «float» — http://jsfiddle.net/Gddjw/

На табличном представлении — http://jsfiddle.net/Gddjw/1/

[Baravo]

Я бы упростил не много и сделал так http://jsfiddle.net/2XU5s/1/

 

Спасибо.

 

На «float» — http://jsfiddle.net/Gddjw/

На табличном представлении — http://jsfiddle.net/Gddjw/1/

 

Спасибо большое. Вы применили для <span> class ="veiws", но в стилях его не задали, значит нахождение его в коде не обязательно?

А в прочем не важно, мне ведь всё равно нужно применить стили для него 

 

Спасибо большое всем кто откликнулся!

Edited April 27, 2014 by Baravo

[Baravo]

Уже наверное всех достал, но моё любопытство не даёт мне покоя.

Ещё раз всем привет!

На этот раз хочу сделать карусель (слайдер) с горизонтальной линией прокрутки. Уже кучу всего перерыл, но получилось сделать только с текстом.

Вот, что получается с блоками - http://jsfiddle.net/N8qTQ/

Хотелось бы сделать только при помощи css и html (т.к. js и jQuery пока совсем не знаю).

или вот с картинками...

http://jsfiddle.net/N8qTQ/1/

Edited April 27, 2014 by Baravo