Vissa undrar hur man positionerar allting. Header, kommentarrutor etc. Därför tänkte jag berätta om padding och margin som man använder sig utav vid just detta tillfälle :) Allt det jag ska förklara ändrar man i stilmallen.
Man kan säga att padding förstorar bilden. Om du t ex har en side som är 120px och lägger på padding:20px kommer det vara ett mellanrum mellan texten och sidomenyn. Detta är ganska svårt att förklara och därför har jag även knåpat ihop hjälpbilder för att man ska kunna se skillnaden:
Istället för att positionera såhär:
padding: 10px 11px 12px 13px;
…kan man göra sÃ¥här:
padding-top:antal px;
padding-left:antal px;
padding-bottom:antal px;
padding-right:antal px;
DÃ¥ är det lättare att hÃ¥lla koll pÃ¥ vart man ”förstorar omrÃ¥det”. Top = förstora toppen, Left = förstora vänster sida, Bottom = förstora botten & Right = förstora höger sida. Väldigt logiskt :)
Med margin förflyttar man bilden istället. Om jag t ex vill flytta headern mer Ã¥t höger flyttar man den med hjälp av ”margin-left:antal px;”. DÃ¥ kommer headern flyttas antal px frÃ¥n vänster och Ã¥ka in mot höger sida. Här gÃ¥r det att göra samma sak som med padding dvs använda:
margin-top:antal px;
margin-left:antal px;
margin-bottom:antal px;
margin-right:antal px;
..istället för margin:10px 11px 12px 13px;
Om jag t ex vill flytta side mer åt höger skulle jag ändra på margin såhär:
Jag rekommenderar inte att ni använder padding när om ni ska förstora headern. Förstora istället width & (i stilmallen) så att header-bilden är i samma storlek som #header i stilmallen. Då får istället hela header-bilden plats. Om man använder padding i headern kommer det vara en ram runt den.
Padding & margin läses olika i olika webbläsare (i många fall). Jag har upptäckt att IE & Firefox läser padding lika men inte margin. Innan man positionerar något (vilket man helst ska undvika för att det ska se likadant ut i alla webbläsare) bör man dubbelkolla att det ser bra ut överallt dvs att designen visas likadant. I efterhand kan det vara lite krångligt att fixa. Man får t ex lägga in <br /> i kodmallarna där det behövs. Det är en hel vetenskap om just det. Man måste helt enkelt testa vad den andra webbläsaren läser av och inte den andra.
Om man ska flytta sidomenyn mÃ¥ste man tänka pÃ¥ att den inte gÃ¥r utanför ”wrapper” (kod i stilmallen). Wrappern är nämligen den som hÃ¥ller ihop allting. Man skulle kunna jämföra den med en tavelram – den hÃ¥ller ihop hela bilden. Om sidomenyn gÃ¥r utanför wrappern kommer den hamna under inläggs-sidan. DÃ¥ mÃ¥ste du alltsÃ¥ förstora wrappern med nÃ¥gra px för att sidomenyn ska fÃ¥ plats!
OBS! Jag använder Firefox.
11 svar till Fr̴ga: Padding & margin Рpositionering
Ina 02/01/10
Jag tycker verkligen att det är helgrymt att du lägger ner så mycket tid på att förklara och hjälpa andra i kodningstrassel. Stor stjärna ska du ha för det! :)
Men jag tänkte bara säga en liten sak. Ordningen (både i padding och margin) när man skriver t.ex. 10px 11px 12px 13px är inte riktigt så som du skriver i inlägget. Ordningen är top, right, bottom, left. Så 10px top, 11px right, 12px bottom och 13px blir left i detta fallet. Kan vara riktigt skönt att veta att det alltid är den ordningen, så slipper man skriva den långa kodremsan på fyra rader där varje värde får en egen rad. :)
Du kan läsa mer på denna länk (den sidan är förövrigt helt makalöst bra!): http://kaxigt.com/css-referensguide/
Hittade denna sida när jag googlade, som också beskriver skillnaden mellan margin och padding på ett bra sätt: http://fixa-din.blogspot.com/2009/04/padding-och-margin-vad-ar-det.html
En annan liten sak: det är inte padding som läses lika i IE och Firefox, utan det är margin som är lika men padding adderas utanpÃ¥ eller inuti width-värdet pÃ¥ t.ex. div:en beroende pÃ¥ vilken webbläsare man använder. Läs mer om det pÃ¥ ”Egenskaper för padding” pÃ¥ kaxigt-adressen jag skrev högre upp. Den verkliga problematiken beskrivs väldigt bra här: http://kaxigt.com/boxmodelhack-och-starhtmlhack/
Tänkte bara komma med lite tips ;)
Svar från Tescho: Tack för alla tips! Dock har jag aldrig skrivit någon ordning. Kanske var en aning otydlig. Jag har endast förklarat att man kan skriva det på ett annat sätt. Det kan vara svårt för nybörjare att förstå.
Självklart är det olika men jag har bara skrivit så som det är för mig. När det gäller olika webbläsare så får man testa sig fram helt enkelt.
[Svara]
Fanny 25/09/10
Undrar hur man gör för att flytta bilderna mer till vänster, om du går in och kollar på bloggen så ser du att bara får hälften av bilderna plats, Hur kam man fixa det?
Mvh Fanny! =)
[Svara]
Tescho svarar:
21 / 08 - 09 » 11:02:23
Jag hinner tyvärr inte svara på frågor gällande bloggdesign, som du såg när du kommenterade.
[Svara]
Charlotte 20/06/11
om man vill ha headern mer åt höger? jag kan bara få den -20px åt höger :(
[Svara]
Tescho svarar:
21 / 08 - 09 » 11:02:23
Du väljer själv hur mycket till höger du vill positionera din header.
[Svara]