Bloggdesign - 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, eller efter #side i mitt fall.

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!

Postat av: eemeiix

  hur tar man bokeh bilder med en systemkamera?

  DATUM: 2012-01-03 / TID: 04:46:14
  URL: http://eemeiix.blogg.se/
Postat av: Moa

  asså om jag vill ha t.ex. skugga skriver jag bara skugga där då eller är det något speciellt jag ska skriva?

  DATUM: 2012-01-03 / TID: 11:36:24
  URL: http://erusa.blogg.se/
Postat av: Moa

  sv: hehe men vart hittar jag skugg koder o sånt då? ;o

  DATUM: 2012-01-03 / TID: 11:53:18
  URL: http://erusa.blogg.se/
Postat av: Moa

  men asså vrt kan man hitta andra roliga koder? hittar du dem på någon hemsida elr är du bara sjukt smart och kommer på dem? ;))

  DATUM: 2012-01-03 / TID: 12:28:28
  URL: http://erusa.blogg.se/
Postat av: Anna

  Kan du inte visa vart man lägger in headern? (A)

  DATUM: 2012-01-03 / TID: 18:52:44
  URL: http://lifebyannaa.blogg.se/

KOMMENTERA HÄR:


Namn:
Spara uppgifter?

E-postadress: (publiceras ej)


Hemsida/Bloggadress:


Kommentar:

Trackback