Počitadlo

Statistika

TOPlist
TOPlist

Úpravy v CSS

Před zásahem do CSS se mi osvědčilo zkopírovat celé původní CSS do  Wordu.

V případě, že uděláme nějaký špatný zásah a rozhodíme si stránky, vymažeme poškozené CSS a nahrajeme původní z Wordu.

Změní se jenom  vzhled, ostatní všechno zůstane stejné.

Hodně jsem čerpala tady:  http://www.webtvorba.cz/css/

Tohle prosím nejsou odborné rady, ale pouze moje zkušenosti, třeba budou někomu k užitku.

Všechny tyhle změny jsem dělala na" vzhledu k dopracování".

Na originálním vzhledu je potřeba udělat ještě spoustu dalších úprav, které nejdou popsat univerzálně.

Jde to. ale je to pracnější než udělat celý nový vzhled.

 

Pokud chceme do záhlaví vzhledu vlastní obrázek, musíme ho nejdříve nahrát do CSS přes:  

Editace CSS
Přidat obrázek
Pokud potřebujete ve Vzhledu použít grafiku, nahrajte ji zde (pouze GIF, JPEG nebo PNG):
 
 

 Potom zkopírujeme URL adresu pod obrázkem a vložíme do odkazu: "top.header"-záhlaví

#top .header {margin:0ps;


                       padding:220px 0px 0px 0px;


                       background-image:URL obrázku ;


                       background-repeat: no-repeat; 

                       background-position:center

                       border-bottom:5px double #330099 ;}


 

 

Počet pixelů u "padding" vyjadřuje, jak "vysoký" bude obrázek. /V tomhle případě 220 px./

Jestli se má obrázek opakovat, nebo neopakovat - vyjadřuje tag : background-repeat

Jestli se má opakovat : repeat ,  jestli se nemá opakovat : no-repeat,

opakovat horizontálně : repeat-x

opakovat vertikálně : repeat-y.

 umístění na střed : background-position: center


 

Jestli chceme záhlaví ještě orámovat, přidáme tag : border

V tomhle případě  šířka orámování 5 pixelů, 

jenom spodní část: border-bottom 

"double" - dvojitá

 jednoduchá je  "solid"/  a číslo  nebo název barvy orámování.

 

 

Pozadí na celou stránku vložíme do odkazu: body - tělo stránky

 

body {background-image:URL obrázku; 
            background-repeat: repeat;}

Pozadí se nahraje stejným způsobem jako obrázek do záhlaví.

Pravidla pro opakování obrázku jsou stejná, jako u záhlaví.

 

Pokud chceme orámovat panely   left=levý, right=pravý

vložíme tento tag:

#left .panel {border-right:2px double #330099;
                       border-top:1px solid #330099;
                       border-bottom:2px #330099;}

#right .panel {border-left:2px double blue;
                          border-top:1px solid blue;
                          border-bottom:2px blue; }
 


 

border-right=rámeček vpravo

border-left=rámeček vlevo

border-top=rámeček nahoře

border-bottom=rámeček dole

tloušťku rámečku vyjadřuje počet pixelů, solid=jednoduchá čára, double=dvojitá čára

Stejným způsobem je možné orámovat i     #center .panel {},

ale pak by neměly být orámovány boční panely, bylo by to moc.

 

Barvu můžeme zapsat číslem, nebo názvem barvy.

Skvělá tabulka barev je tady.http://www.webtvorba.cz/css/barvy.html#bezpecne

 

Rámeček můžeme udělat i kolem celé stránky:

#page  {border-left:3px double #330099 ;
               border-right:3px double #330099;
               border-top:3px double #330099;
               border-bottom:3px double blue;}

Postup je stejný jako u rámování panelů


U některých vzhledů je možné je rozšířit na celou obrazovku vložením tohoto tagu do CSS.

Nefunguje to ale u všech.

#page {width: 100% !important;} 

 

 

 

 

 
**