Strana 1 z 1

chunks + vlastne CSS...

Napísané: Ut Sep 04, 2012 7:11 pm
od užívateľa Marek Adamec
Caute,

Mam taky mensi problem, chcem zabudovat do webu jQuery Plugin v sucastnosti pouzivam jednoduchsi ktory ma menej udajov v CSS a mohol som ich zabudovat do hlavneho CSS k templatu webu. Ale tento novy nieje korektny ked ho vlozim do hlavneho CSS, lebo pouziva niektore zhodne nazvy napr. pre img,... takze potrebujem nejako do templatu zakomponovat aby tahalo udaje aj z druheho CSS...

hlavne CSS ktore sluzi pre cely web (index.css):

Kód: Vybrať všetko

<link rel="stylesheet" type="text/css" href="templates/andreas/01/index.css" media="screen" title="Navrchol.sk" />
pomocne CSS pre jQuery Plugin (style.css):
neviem ci ho mozem vlozit do templatu tiez ako hlavne CSS, ci sa to nebude byt...

- V template mam vlozeny kod s cestou k javascript.
- V chunku mam vlozeny kod s obsahom stranka.html (<body>...</body>).
- Ale neviem kde mam vlozit cestu k style.css aby bolo vsetko korektne. Do chunku?

Re: chunks + vlastne CSS...

Napísané: So Sep 08, 2012 6:22 pm
od užívateľa _rasel^
Do kódu templatu môžeš vložiť viacero riadkov, ktoré odkazujú na CSS. Do chunku by to mohlo byť vložené vtedy, ak by si nepoužíval odkaz na CSS súbor, alebo CSS štýly priamo v template priamo v hlavičke a chunk by tamplet sprehľadnil. Internetové prehliadače rýchlejšie pracujú s odkazom na súbor.

Kód: Vybrať všetko

<link rel="stylesheet" href="/templates/meno_sablony/body.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/templates/meno_sablony/menu.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/templates/meno_sablony/media.css" type="text/css" media="screen" />
Ukladanie do viacerých súborov sa používa väčšinou vtedy, ak je stránka tvorená jednou centrálnou témov, ale niektoré podstránky sa líšia napr. vzhľadom menu a pod., alebo ak chceš mať prehľad čo CSS súbor obsahuje.

Ak sa používa viacero CSS súborov v ktorých sa vyskytujú štýly CSS na ten isté element, tak vyhráva ten, ktorý je načítaný ako posledný. Napr. v prvom súbore je zadefinovaný vzhľad menu, ale v druhom súbore je zadefinovaný ešte iný štýl napr. po prejdení myškou, tak po úplnom načítaní stránky bude použitý posledný štýl, ktorý zmení vlastnosti toho predchádzajúceho. Ak chceš, aby mal tvoj vzhľad prednosť pred iným, tak stačí jednoducho zmeniť poradie riadkov, ktoré sa odkazujú na CSS súbor.

Re: chunks + vlastne CSS...

Napísané: Ut Sep 11, 2012 12:49 pm
od užívateľa Marek Adamec
Aha takze to nema ziaden vyznam pouzit viac css, resp to nevyriesi moj problem. Ja som myslel ze to funguje ako vnotenie... ze jedno css sluzi ako pre cely vzhlad a druhe css len pre dany chunk so je vnoreny... vid obrazok:

Obrázok

A tieto dve veci som chcel spojit css ktore pouzivam:

Kód: Vybrať všetko

body { 
   margin: 0 auto; 
   padding: 0; 
   font: 76% Verdana, Tahoma, Arial, sans-serif; 
   background: #f4f4f4 url(images/bg.gif) top center repeat-y; 
} 
#googlereklama { 
   position: absolute; 
   top: 15px; 
   left: 880px; 
} 

#paypal { 
   font-size: 12px; 
   line-height: 1.6em;    
} 
#anketatabulka { 
   font-size: 12px;    
} 

#logopozadie { 
   top: 0px; 
   left: 0px; 
  background: #336699; 
  width: 860px; 
  height: 120px; 
} 


#logopozadiemedzera { 
  top: 120px; 
   left: 0px; 
  background: #fff; 
  width: 860px; 
  height: 2px; 
} 

#nadpis { 
   position: absolute; 
  top: 77px; 
   left: 233px; 

  width: 626px; 
  height: 42px;  
  display: inline; 
  font-family: times new roman, times; 
  font-size: 35px; 
  font-weight: bold; 
  color: #FFF; 
  float: left; 
} 

#google { 
   position: absolute; 
  top: 70px; 
   right: 37px; 
} 

#facebook { 
   position: absolute; 
  top: 95px; 
   right: 5px; 
} 

#vedlaloga { 
  position: absolute; 
   top: 0px; 
   right: 0px; 
} 

#googlebanner { 
  position: absolute; 
   top: 0px; 
   right: 3px; 
} 

#social { 
  position: absolute; 
   top: 10px; 
   right: 10px; 
} 

#bloger { 
   position: absolute; 
   top:  0px; 
   left: 0px; 
} 




ul#odkazy { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  background: #FFF; 
  width: 859px; 
  height: 26px;  
} 
ul#odkazy li { 
  display: inline; 
  font-family: "Arial", Helvetica, sans-serif; 
  font-size: 13px; 
  font-weight: bold; 
  float: left; 
  padding: 5px 10px;  
  margin-right: 2px; 
} 
ul#odkazy li a{ 
  color: #FFF; 
  text-decoration: none; 
} 
ul#odkazy li a img{ 
  border: 0; 
} 
ul#odkazy li a:hover { 
  text-decoration: underline; 
} 
ul#odkazy li.forum { 
  background-color: #336699; 
} 
ul#odkazy li.foto { 
  background-color: #336699; 
} 
ul#odkazy li.rozhovory { 
  background-color: #336699; 
} 
ul#odkazy li.horskyvodcovia { 
  background-color: #336699; 
} 
ul#odkazy li.vysokohorskechaty { 
  background-color: #336699; 
} 
ul#odkazy li.info { 
  background-color: #336699; 
} 
ul#odkazy li.print { 
  padding:0; 
  float: right; 
} 
ul#odkazy li.search { 
  padding:0; 
  float: right; 
} 

#wrap { 
   position: relative; 
  background: #ffffff; 
   color: #303030; 
   margin: 0 auto; 
   width: 860px; 
} 
#header { 
   clear: both; 
   margin: 20px 0 0 0; 
   padding: 0; 
   height: 45px; 
} 
#header h1 { 
   width: 400px; 
   margin: 0 0 10px 0; 
   float: left; 
} 
#header p { 
   width: 500px; 
   float: right; 
   text-align: center; 
   color: #a0a0a0; 
   margin: 0 0 10px 0; 
   font-size: 0.8em; 
   line-height: 1.2em; 
} 
#frontphoto { 
   margin: 0 0 10px 0; 
   border: 0; 
} 
#avmenu { 
   clear: left; 
   float: left; 
   width: 250px; 
   margin: 0 0 10px 0; 
   padding: 0; 
   font-size: 0.9em; 
} 
#avmenu ul { 
   list-style: none; 
   width: 250px; 
   margin: 0 0 20px 0; 
   padding: 0; 
   font-size: 1.1em; 
} 
#avmenu li { 
   margin-bottom: 4px; 
} 
#avmenu li a { 
   font-weight: bold; 
   height: 20px; 
   text-decoration: none; 
   color: #505050; 
   display: block; 
   padding: 6px 0 0 10px; 
   background: #f4f4f4; 
   border-left: 4px solid #cccccc; 
} 
#avmenu li a:hover { 
   background: #eaeaea; 
   color: #286ea0; 
   border-left: 4px solid #286ea0; 
} 
.announce { 
   margin: 10px 0 10px 0; 
   padding: 10px; 
   width: 130px; 
   color: #505050; 
   background-color: #f4f4f4; 
   line-height: 1.3em; 
} 
#extras { 
   float: right; 
   width: 100px; 
   margin: 0 0 10px 0; 
   padding: 0; 
   font-size: 0.9em; 
   line-height: 1.5em; 
} 
#extras p { 
   margin: 0 0 1.5em 0; 
} 
#content { 
   margin: 0 10px 20px 260px; 
   border-left: 1px solid #f0f0f0; 
   border-right: 1px solid #f0f0f0; 
   padding: 0 10px 0 10px; 
   line-height: 1.6em; 
   text-align: left; 
   min-height: 600px; 
} 
#content h2 { 
   font-size: 1.5em; 
   margin: 0 0 0.5em 0; 
} 

#content img { 
   /*padding: 1px;*/ 
   display: inline; 
   background: #cccccc; 
   /*border: 4px solid #f0f0f0;*/ 
} 
h3 { 
   font-size: 1.3em; 
   margin: 0 0 10px 0; 
} 
a { 
   text-decoration: none; 
   color: #286ea0; 
} 
a:hover { 
   text-decoration: underline; 
   color: #286ea0; 
} 
a img { 
   border: 0; 
} 
#footer { 
   clear: both; 
   margin: 0 auto; 
   padding: 1px 0 5px 0; 
   /*padding: 10px 0 20px 0;*/ 
   /*border-top: 4px solid #f0f0f0;*/ 
   width: 860px; 
   text-align: center; 
   color: #808080; 
   font-size: 0.9em; 
} 
#footer a { 
   color: #808080; 
   text-decoration: none; 
} 
#footer a:hover { 
  color: #336699; 
   text-decoration: none; 
} 
.left { 
   margin: 10px 10px 5px 0; 
   float: left; 
} 
.right { 
   margin: 10px 0 5px 10px; 
   float: right; 
} 
.textright { 
   text-align: right; 
} 
.center { 
   text-align: center; 
} 
.small { 
   font-size: 0.8em; 
} 
.bold { 
   font-weight: bold; 
} 
.hide { 
   display: none; 
} 

/* Prezentacia 
---------------------------------- */ 



/* Akcie a podujatia 
---------------------------------- */ 

#vrchna-lista { font-family: Verdana; padding:2px 0;  width:570px; /*610*/ background:#cccccc/*336699*/; } 
#jFlowSlide{ background:#f2f2f2; font-family: Verdana; } 
#myController { font-family: Verdana; padding:2px 0;  width:570px; /*610*/ background:#cccccc; } 
#myController span.jFlowSelected { background:#f2f2f2; margin-right:0px; color:#000000; } /*43A0D5*/ 

.slide-wrapper { padding: 5px; } 
.slide-thumbnail { width:300px; float:left; } 
.slide-thumbnail img {max-width:300px; } 
.slide-details { width:250px; float:right; margin-left:10px;} 
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; } 
.slide-details .description { margin-top:10px; } 

.jFlowControl, .jFlowPrev, .jFlowNext { color:#000000; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; } 
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #f2f2f2; color:#000000; }
a css pre prezentaciu, pre dany chunk:

Kód: Vybrať všetko

@CHARSET "UTF-8"; 

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, p, form, fieldset, table, th, td, input, textarea, a { 
   margin: 0; 
   padding: 0; 
   font: 14px/1.2em Arial, serif; 
   color: #000; /*6a6a6a*/ 
} 

body { 
} 

a { 
   text-decoration: none; 
   color: blue; 
} 
a img { 
   border: none; 
} 
hr { 
   display: block; 
   width: 570px; /*880*/ 
   margin: 0 auto; 
   height: 1px; 
   border: none; 
   border-top: 1px dotted #cacaca; 
} 

#page { 
   width: 980px; 
   margin: 0 auto; 
} 

/* Easy JQ Slider */ 

#slider { 
   position: relative; 
   width: 570px; /*880*/ 
   height: 262px; 
   overflow: hidden; 
   margin: 60px 50px 40px 50px; 
} 
#slider #controls a { 
   margin: 0 5px; 
   display: block; 
   width: 19px; 
   height: 16px; 
   float: left; 
   background: url(../images/slider-control.png); 
} 
#slider #controls a.active { 
   background-position: 0 -16px; 
} 
#slider #controls { 
   position: absolute; 
   z-index: 9998; 
   bottom: 0; 
   display: block; 
   margin-left: -40px; 
} 
#slider h2 {  /* nadpis */ 
   text-decoration: none; 
   color: #336699; 
   font: 22px/2em Georgia, serif; 
   margin-bottom: 10px; 
} 
#slider li { 
   list-style: none; 
   display: block; 
   height: 262px; 
   overflow: hidden; 
} 
#slider li > a { 
   display: block; 
   float: left; 
   width: 50%; 
} 
#slider li > img.left-image-slider { 
   height: 220px;  /*vyska*/  /*220 po vyrieseni medzery upravit velkost....*/ 
   width: 330px;   /*dlzka*/ /*pridane mnou*/ 
} 
#slider li > div { 
   float: right; 
   width: 40%; /*48 percentualna velkost textu voci celemu rozmeru*/ 
   margin-right: 1%; /*lavy okraj textu*/ 
} 
#slider li > div p { /* text, obsah clanku */ 
   font: 12px/1.5em Arial, serif; 
   line-height: 1.8em; 
} 

/* CSS3 Button - tlacitko citaj dalej....*/ 

.coolbtn { 
    background: #336699; /*FF9E01 - zakladny podklad */ 
   padding: 6px 10px 6px 10px; 
   color: #fff; 
   border: none; 
   margin: 15px 10px 15px 0; 
   font-size: 14px; 
} 
.coolbtn:hover { 
    background: #cccccc; /*FFBB4D - podklad po nabehnuti mysi */ 
   color: #000; 
} 
.coolbtn:active  { 
    background: #cccccc; 
} 

/* Common CSS styles */ 

.clear { 
   display: block; 
   height: 0; 
   line-height: 0; 
   font-size: 0; 
   clear: both; 
} 

/* Extra Styles */ 

.createdby { 
    text-align: center; 
   margin-top: 50px; 
   font-weight: bold; 
} 
.createdby a{ 
   font-weight: bold; 
   text-decoration: underline; 
}

Re: chunks + vlastne CSS...

Napísané: Ut Sep 11, 2012 7:18 pm
od užívateľa _rasel^
CSS vo viacerých súboroch si internetový prehliadač načíta za sebou ako keby to bol jeden veľký súbor, rozhoduje v prvom rade poradie súborov a poradie CSS príkazov. Vnorenie a pravidlá uplatňovania CSS sa robí pomocou selektorov, viac v dokumente na W3.org. Odhaliť z kódu v čom je problém je nad ľudské možnosti + potreboval by som k tomu aj HTML kód (neoddeliteľná časť), aby som to mohol otestovať v debugeri.

Ak chceš zistiť čom je problém, tak v Mozilla Firefox klikneš na webe na prvok pravým tl. myši a vyberieš možnosť 'Preskúmať prvok' a v pravo dole ešte zaklikneš 'Štýl'. V pravom okne potom uvidíš ako CSS interpretoval internetový prehliadač - tie CSS, ktoré sú preškrtnuté boli odignorované kvôli tomu, že bol použitý iný štýl umiestnený za ním, alebo kvôli pravidlám selektorov, ktoré niekedy nie sú na prvý pohľad odhaliteľné. Po kliknutí na '3D zobrazenie' uvidíš graficku reprezentáciu v akom poradí boli na seba štýli od <body> na seba naskladené (otáčanie webu sa robí myškou) - vizuálne veľmi podarené a prehľadné. Podobné debug možnosti má Google Chrome (tiež po kliknutí pravého tl. myši s voľbou 'Preskúmať prvok'), resp. rozšírenie FireBug do Mozilla Firefox.