Hur stilmallen och kodmallen hänger ihop
Här kommer ett väldigt bra designtips enligt mig haha ;) Stilmallen och kodmallen hänger ju ihop och jag tänkte visa hur nu. T.ex. kodavsnittet #side i stilmallen har en kod i kodmallen också. Den börjar med <div id="side"> och slutar med </div>. Emellan där finns själva innehållet. Detta är rätt komplicerat så det gäller att man har lite kunskaper om bloggdesign o.s.v. när man gör detta! Enjoy!
1. Själva koden du använder:
Kodmall:
<div id="ditt namn"> INNEHÅLLET HÄR </div>
Stilmall:
#Ditt namn (måste vara samma namn som i kodmallskoden) {
INNEHÅLLET HÄR
}
2. Innehållet kan vara vad som helst. Du kanske till exempel vill göra en till meny på andra sidan. Då kanske namnet blir "Side2". Då kan du ju kopiera din "Side" kod som redan finns i stilmallen och sätta dit där innehållet ska vara. I kodmallen sen så lägger du in det som ska vara i den andra menyn helt enkelt. Kanske en bild, då skriver du bildkoden som vanligt och så kan du skriva en text o.s.v. Lägg sedan hela koden precis innan <div id="side"> till exempel.
3. Om du nu vill göra en till meny måste du ju kunna placera den där du vill. Då använder du denna koden i kodmallen:
<div style="position:absolute; width:903px; x-index:0; left: 100px; top:350px;">DET DU VILL POSITIONERA HÄR</div>
Där du ska sätta in det du vill positionera sätter du helt enkelt in själva <div id="ditt namn"> koden. Så här kan det se ut i kodmallen:
Som ni ser har jag skrivit <ul> innan menyns innehåll och </ul> efter menyns innehåll för att det ska bli en box.
Så här kan det då se ut i stilmallen:
Det spelar ingen roll vart man sätter denna koden, men till exempel längst ner.
4. Det här med en till meny var ju bara ett exempel. Du kan ju göra massa andra saker, till exempel om du har din meny uppdelad i boxar kanske du vill ha skugga runt boxarna. Då kan du använda denna koden då du lägger in skuggkoden i stilmallen och innehållet i din box i kodmallen.
Väldigt komplicerat att förstå, men om man testar sig fram så kanske det lossnar till slut! Var inte rädd för att ställa frågor nu, för detta är komplicerat!
1. Själva koden du använder:
Kodmall:
<div id="ditt namn"> INNEHÅLLET HÄR </div>
Stilmall:
#Ditt namn (måste vara samma namn som i kodmallskoden) {
INNEHÅLLET HÄR
}
2. Innehållet kan vara vad som helst. Du kanske till exempel vill göra en till meny på andra sidan. Då kanske namnet blir "Side2". Då kan du ju kopiera din "Side" kod som redan finns i stilmallen och sätta dit där innehållet ska vara. I kodmallen sen så lägger du in det som ska vara i den andra menyn helt enkelt. Kanske en bild, då skriver du bildkoden som vanligt och så kan du skriva en text o.s.v. Lägg sedan hela koden precis innan <div id="side"> till exempel.
3. Om du nu vill göra en till meny måste du ju kunna placera den där du vill. Då använder du denna koden i kodmallen:
<div style="position:absolute; width:903px; x-index:0; left: 100px; top:350px;">DET DU VILL POSITIONERA HÄR</div>
Där du ska sätta in det du vill positionera sätter du helt enkelt in själva <div id="ditt namn"> koden. Så här kan det se ut i kodmallen:
Som ni ser har jag skrivit <ul> innan menyns innehåll och </ul> efter menyns innehåll för att det ska bli en box.
Så här kan det då se ut i stilmallen:
Det spelar ingen roll vart man sätter denna koden, men till exempel längst ner.
4. Det här med en till meny var ju bara ett exempel. Du kan ju göra massa andra saker, till exempel om du har din meny uppdelad i boxar kanske du vill ha skugga runt boxarna. Då kan du använda denna koden då du lägger in skuggkoden i stilmallen och innehållet i din box i kodmallen.
Väldigt komplicerat att förstå, men om man testar sig fram så kanske det lossnar till slut! Var inte rädd för att ställa frågor nu, för detta är komplicerat!
Kommentarer
Trackback
