Blog - kategória: HTML a CSS

Nedeliteľná medzera v HTML, v Adobe Photoshope a Illustratore

Nedeliteľná medzera v HTML, v Adobe Photoshope a IllustratoreZ Wordu väčšina aktívnych používateľov pozná takzvanú nedeliteľnú, pevnú medzeru (non-breaking space). Možnosť vyrobiť nedeliteľné medzery je užitočná, ak človek chce zabrániť predložkám, spojkám a iným krátkym slovám zostať osihotene na konci riadku.

Niekedy sa aj vo Photoshope a Illustratore vyskytne priestor pre využitie nedeliteľnej medzery. Ako sa k nej však v týchto Adobe produktoch dopracovať? :)

Autor: Justína

Double margin chyba pri floatovaných elementoch a Internet Explorer 6

Double margin chyba pri floatovaných elementoch v Internet Exploreri 6Testovanie pre Internet Explorer 6 je v našich končinách stále nutným zlom.

Jedným zo známych problémov je takzvaný Double margin bug, teda chyba dvojitého okraja. Tento bug spôsobí, že floatovaný element s nastaveným marginom v smere floatu je v IE6-tke zobrazený s marginom dvojnásobným. Táto chyba sa dá ošetriť viacerými spôsobmi; spomeňme dva jednoduché – CSS IE6 hack a predchádzanie bugu nahradením marginu paddingom.

Zabezpečiť, aby sa webstránky zobrazovali správne v IE6  je pri dobrom chápaní fungovania jeho špecifických bugov pomerne jednoduché – treba sa skrátka pri kódovaní vyvarovať špecifických nastavení a štýlovania.

Autor: Justína
Kategórie:   HTML a CSS  Tipy a triky

Maskovanie e-mail adresy pomocou jQuery pluginu ako obrana proti spamu

Maskovanie e-mail adresy pomocou jQuery pluginu ako obrana proti spamuNajlepšia – a asi aj jediná – účinná obrana proti spamu, je nezverejniť nikde svoju e-mailovú adresu.

Pre majiteľov web stránok je to ale väčsinou neprípustné, keďže potrebujú, aby ich návštevníci stránky mohli na ich e-mailovej adrese kontaktovať.

V tomto článku vám ukážem jednoduchý jQuery plugin, pomocou ktorého zamaskujem na stránke e-mailovú adresu pred spambotmi. Najdôležitejším kritériom pre nás zostáva prístupnosť – teda aby aj návštevníci stránky, ktorí nemajú JavaScript, videli e-mailovú adresu správne (Graceful degradation).

Autor: Marek

Webová typografia – veľkosť fontu a riadkovanie

Webová typografia – veľkosť fontu a riadkovanieKvalitná prezentácia textu na webstránke je rovnako dôležitá ako krása grafiky a zmysel textu.

Na dobré usporiadanie textu na webe mnoho slovenských dizajnérov zabúda. Grafik, ktorý vymyslí vizuál stránky, má často o riadkovaní, odstavcoch a zarovnaniach len letmú predstavu a kóder je rád, že sa mu grafikovu predstavu podarí nasekať do CSS.

Pravidlá typografie na webstránke sa odlišujú od typografie v iných médiách. Pozrime sa na niekoľko základných pravidiel formátovania textu v CSS, konkrétne určovanie veľkosti písma, riadkovania a vertikálneho odsadenia.
Autor: Justína

Valídna webová stránka

Valídna webová stránkaDodržiavanie štandardov validity webstránky podľa W3C prinesie užívateľom ľahký prístup na stránku, správne zobrazovanie v prehliadačoch a ďalšie pozitíva.

Spokojný používateľ webstránky je úspechom pre jej majiteľa a prevádzkovateľa, keďže stránka generuje zisk.

Aké sú teda základné výhody valídnej webstránky?

Autor: Matúš
Kategórie:   HTML a CSS  Weby

Print media type a zobrazovanie skratiek a odkazov

pseudoJedna z vecí, čo mám na CSSkách obzvlášť rada, je možnosť špecifikovať výstupné zariadenie a vytvoriť rôzne štýly pre rôzne zobrazovacie médiá.

Zvyčajne štýlujem pre typy médií screen a print. Pozrime sa na štýlovanie webstránky pre tlač, teda na print media type, a na niektoré špecifiká štýlovania skratiek a odkazov v ňom s použitím pseudoelementov :after a :not.

Autor: Justína
Kategórie:   HTML a CSS  Tipy a triky

Ako naštýlovať pekný objekt, ktorý sa vertikálne prispôsobí obsahu

object1Na webstránkach sa zvyčajne vyskytuje množstvo objektov, ktorých obsah je vizuálne odlíšený od okolitých objektov.

Dizajnér pri tvorení grafiky občas narazí na situáciu, keď potrebuje nakresliť pekný objekt, ale nevie presne, akú bude mať na stránke funkciu. Nevie teda, aký bude mať objekt obsah, a teda ani aký dlhý môže byť.

V takom prípade existuje niekoľko spôsobov, ako takýto objekt naštýlovať. Každý spôsob má svoje výhody a nevýhody. Vytvorenie takéhoto objektu sa môže niekomu zdať triviálne, pozrime sa ale pre istotu ako na to. ;]

Autor: Justína

CSS Box Model a jeho nevýhody pri liquid layout

CSS Box ModelBox model v CSS hovorí o tom, ako sú usporiadané jednotlivé atribúty width, height, padding, margin a border tak, aby spolu vytvorili objekt.

Týmito atribútami sú vymedzené obdĺžnikové oblasti stránky (tzv. boxy), ktoré ohraničujú obsah objektu.

Momentálne používaný model sa zdá elegantný a použiteľný, ale má niektoré nepríjemné vedľajšie účinky, ktoré znepríjemňujú webdizajnérovi život.

Povedzme si aké...

Autor: Justína
Kategórie:   HTML a CSS  Tipy a triky