Преглед на урок

Трикове и идеи за по-добър CSS & HTML

Трикове и идеи за по-добър CSS & HTML




Поради непрекъснатите въпроси около CSS... реших да пусна едно уроче тъй като в site-a видях такъв раздел;)... и се надявам да станат серия CSS & HTML. Урочето не е за абсолютно начинаещи, но все пак е за начинаещи.


-> Table&div
Грешна е представата, че таблицата е по-удобна за "layout" или на български казано "изглед"-а на site-a. Таблиците са подходящи за таблична информация, но не и за оформяне на design-a.
Обеснявам защо: По-тромави са, по-трудно се управляват от различните browsers, по-трудно се поддържа объркан от таблици код с безбожно много 'span' и тн.
Много лесно може да се направи с две (или колкото са нужни) div-чета 'layout' и е доста по практично от таблици.
Пример:
Цъкни >>ТУК << за да видиш пример-а
Няма да обяснявам всеки tag или елемент какво правят, защото още в началото споменах, че урока не е за съвсем начинаещи.
Обаче ще дам някои пояснения:
--> float: left; <-- div-a (или елемент-а на който го прилагате) застава от ляво и до него може да се 'залепят' други елементи.
В CSS код-а .. class се декларира така: '.class', a ID така: "#ID"

-> Проблеми с Internet Explorer:

Под Internet Explorer има проблем със смяната на цвета на бордеритe, под Firefox работи.
Internet Explorer има проблем с positions: relative & absolute; Не ги смесвайте, защото се получават разни аномалий.

-> Margins & paddings

Опредено, ако не знаеш кое как се използва.. настъпва безредие...
Обясянавам разликата м/у двете:
Margin: Място (поле, разстояние) което е извън елемента. Например:
<div style="margin-left: 10px"> -- това слага 10px - в ляво разстояние извън самия div, докато
Padding: <div style="padding-left: 10px"> това слага 10px - в ляво разстояние вътре в самия div.

-> Firefox

Все още CSS има някои проблеми с firefox-a... съвет: най-простите решения са най-дорби...
Излишно пространство... и други такива "трикове" -излизат на яве под Firefox
По-малко JavaScript.. повече CSS. ;)

-> Други трикове

Вместо безумни JavaScripts... много по-лесно е да се използва следната техника за "цветно" menu:
>>>ТУК<<<

Пак ще дам само пояснения:
inline - слага елементите от лист-а на един ред....
и чрез CSS можете да променяте а.hover и въобще всички състояния на линка...
Можете вместо да сменяте цветове както е в пример-а.. да слагате картинка... и да правите 'бутони' ( В случая са прости линкове с цвят за background)

Ако урока е бил полезен и ясен поне на някого... мога да пускам още такива:)
Успех:)

Автор : Orchid


Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: Красимир!

Коментари

piter_m

Урокът е страшно полезен и разбираем.
С удоволствие ще прочета и други ако пуснеш!

aftershock

Много добър урок !

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.