Jennys Modemix

Jag fick en fråga idag utav Jennie som undrade hur jag hade gjort boxarna i min meny.
Så nu ska jag försöka och förklara på ett bra o lätt sätt.

Detta tog ett bra tag innan jag fattade hur man skulle göra.
Jag har provat många olika sätt aldrig fått det o fungera utan bilder, tills alldeles nyligen.

MAn kan ju göra detta på många olika sätt. Som exempel göra egna boxar genom Photoshop osv. Jag har valt och använda mig utav koder pga att jag inte är så haj på Photoshop rent allmänt. Trög som man är=)

Prova gör följande, det fungerade för mig.

♥ Först lägger du till denna koden under #side i din stilmall.


#box {
width: 212px;
padding: 10px 10px 10px 10px;
background: #FFFFFF;
border: 1px solid #FF4A7D;
}

♥Ta bort (background: #FFFFFF;) i #side.  I din stilmall.

Den behövs inte där eftersom att det redan finns en background i #box {.

Så det ska se ut så här:


#side {
border:0 solid #D4C8BE;
float:left;
margin-top:-254px;
padding:0 8px;
position:absolute;
width:190px;
}
#box {
background:none repeat scroll 0 0 #FDFBF9;  <-- Background=bakgrunden #FDFBF9 = färgen på BG
border:1px solid #D4C8BE;      <<--- Border = ramen runt  #D4C8BE = färgen på ramen
padding:0 8px;
width:190px;
}



Nu ska du göra själva boxarna/rutorna i ALLA kodmallar.
Kodmalllarna är följande:

Framsidan
Inläggsidan
Kategorisidan
Arkivsidan


Du lägger in koderna för boxarna under #side i kodmallen, kom ihåg det!

Om du inte lägger dom under #side så hamnar dom inte i menyn.

KOD

<div id="box"> INNEHÅLLET SOM DU VILL HA I DIN BOX </div><br />



Du lägger alltså till <div id="box"> där du vill att boxen ska börja, och   </div><br />

där du vill att boxen ska sluta.
Det är bara att upprepa det så får du fler boxar, tills allt i menyn är i olika boxar!

Jag vet inte om ni förstår, så jag ger ett exempel:


♥ Nu ska du börja med kodmall FRAMSIDA

Du lägger in denna koden under <div id="side"> i kodmallen FRAMSIDA för att få boxarna vid menyn.

Lägg in den var som beroende på vad du vill ha dom någonstans.


Först kopierar du det här:
<div id="box">
där du vill att boxen ska börja, och  
</div><br />


<div id="box">HÄR SKRIVER DU OCH LÄGGER IN DET DU SKA HA I DEN FÖRSTA BOXEN</div>

exempel från min egen:

<div id="box">
<font face="verdana" size="1"align="left" "color="#FF4A7D">
<div><b>ANNONSER</b></div>


Om du vill ha en annons i boxen, eller så kan man välja och bara ha text eller både och.

</ul>
</div>



Sen ska du ju få dessa mellanrum för att det ska bli som det heter "uppdelad meny" och det gör du med hjälp av koden <br />.

<br />  = mellanrum alltså enter ett steg ner


Desto fler <br /> desto större mellanrum.


Efter denna boxen så är det bara att göra en ny om du vill ha fler boxar. Antingen lägger du dom under varandra med koden

<br />

som betyder radbrytning/blanksteg eller så lägger du den någon annanstans.
Fritt val=)

Vill ni ha boxar med runda hörn så lägger ni till denna kod under det stället ni vill ska vara runt.


5px står för hur runda hörn ni vill ha

-webkit-border-top-left-radius:5px;        
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;

-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
}


Se exempel:

#side {
border:0 solid #D4C8BE;
float:left;
margin-top:-254px;
padding:0 8px;
position:absolute;
width:190px;
}
#box {
background:none repeat scroll 0 0 #FDFBF9;
border:1px solid #D4C8BE;
padding:0 8px;
width:190px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;  
-webkit-border-bottom-right-radius:5px; 

-khtml-border-radius-topleft:5px; 
-khtml-border-radius-topright:5px;  
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;

-moz-border-radius-topleft:5px; 
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px; 
-moz-border-radius-bottomright:5px; 
}



♥ Om rutorna ser helt konstiga ut nu så kan du gå in på stilmallen och ändra värdet på margin, width och padding i stycket #box så att du får rätt bredd.


TIPS: Att göra dom här boxarna är ganska svårt om man är nybörjare och inte riktigt vet vad koderna betyder.



Behöver ni hjälp så är det bara att fråga i en kommentar! ;)

KOM IHÅG!!!
Det här måste ändras i ALLA kodmallar = Framsida, Inläggsidan, Kategorisidan, Arkivsidan

Annars så är det bara rutor på första sidan, och inte om man går in på arkiv, kategorier eller ett specifikt inlägg!
VIKTIGT!

Jag lärde mig dela upp menyn av Emma!

LYCKA TILL! ! !