5. #content & #sidebar

Nästa steg är att hitta och utforma id-t content (som visar innehållet från index.php, page.php, singel.php). På adminsidan under editorn välj Main Index Template  och på rad 5 hittar du id-t content som är inbakad i koden (titta på bilden nedan). Det kan kännas lite förvirrande att se så mycket php-kod men där inbakad hittar du html-koderna också. Det är just därför vi använder Granska komponent verktyget istället för att leta rätt på olika html-taggar i olika php-filer (vi tar dock en titt då och då för att lära känna tema-filerna):

Skärmavbild 2013-05-19 kl. 23.57.12

Nu ska vi hitta samma id med granska komponent och se om det redan finns css för taggen i style.css. Besök din sida och leta rätt på id-t content. Som du ser på bilden nedan (och det är ungefär samma resultat som du får) finns det ingen css.

Skärmavbild 2013-05-19 kl. 23.58.30

Nu måste vi faktiskt planera lite för att kunna beräkna bredd på både id-t content (som visar olika typer av innehåll: inlägg, sidor, kategorier, osv) och sedan även id-t sidebar.

Vi vet att vi har för #page-wrap 960px i bredd + 20px padding (10px på vänster och 10px på höger sidan). Den totala bredden är alltså 980px och där måste både id-t content och id-t sidebar få plats. Jag bestämt mig för att id-t content ska ha 650px i bredden (tänk då att det är inklusive padding, margin och border) och 330px för id-t sidebar (samma gäller även här för padding, margin och border). Skriver följande css i style.css:

#content {
 width: 634px;
 margin-right: 15px;
 border-right: 1px solid #615f7d;
 float: left;
}

Sedan anger vi följande för #sidebar (hitta taggen i style.css med hjälp av granska komponent):

#sidebar {
 width: 300px;
 float: right;
}

Vi har räknar bredden 330px innan men för att få lite extra luft valde jag bara 300px i bredden. Det är ungefär så din sida ska se ut:

Skärmavbild 2013-05-20 kl. 00.02.33

Nu ligger innehållet och sidofältet bredvid varandra men det finns ett problem som har uppstått på grund av att vi använder float. Hitta id-t footer med granska komponent. Om det inte redan finns id-t footer i style.css hitta själv ett lämpligt ställe att skriva in följande:

#footer { clear: both; }

Nu har vi löst problemet och sidan ser bättre ut:

Skärmavbild 2013-05-20 kl. 00.04.09

Sidan börjar ta form. Du ska nu förstå hur du kan hitta olika html-taggar med hjälp av granska komponent och antingen hitta tillhörande css i style.css eller skriva in själv rätt css om det saknas.

Designen är långt ifrån klar. Fortsätt med att förbättra utseendet (rubriker, länkar, osv).

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *