Blogg

Volkswagen Camper med CSS3

Många som sysslar med XHTML och CSS har troligen märkt utveckligen av CSS3 som ska ersätta CSS2 (förhoppningsvis inom en snar framtid) som är standarden idag.

Några av dom nya egenskaperna som Jag ser fram emot är:

• Kunna använda flera bakgrunder
• Flexiblare hörn avrundningar
• Gradienter
• och mycket mer..

För mer info om CSS3 besök CSS3.info

Nu tillbaka till topic!

Under nattens slösurf kom jag över en blogg som tillhör en rysk(?) kille som gjort en Volkswagen Camper helt i CSS för att demonstrera dom nya möjligheterna med CSS3.

Det verkar som att den bara funkar i Firefox för närvarande. Men surfa in på bloggen och kolla. Eller surfa direkt in och titta på Volkswagen Camper i CSS3. Ett ganska roligt resultat han har lekt fram tycker jag.

Vilka är dom nya egenskaperna du längtar mest till?

Kategori: XHTML-CSS     4 Kommentarer

CSS hover byte: bild och info

   » Demo

Det är ingen nymodighet att se sidor som har denna lösningen på deras portfolio eller galleri. Att när besökaren hovrar med mus pekaren över en bild, så dyker det upp en liten info ruta som döljer själva bilden.

Dom flesta sidor jag har sett använder dock Javascript för att få det att funka, vilket jag tyckte var onödigt så jag prövade att ta fram en variant som bara använder CSS för visa info rutan över bilden.

Teorin bakom koden

Det hela går ut på att man med CSS placerar info rutan som är en länk ovanför bilden, men gör den bara synlig när man hovrar med mus pekaren.

XHTML koden

<div class="image">
  <img src="bilden.jpg" alt="bilden" />
  <a href="#" title="Besök sidan" class="more-info"><span>
     <big>Rubriken</big><br />
     <strong>Inlagd:</strong> 21/02 - 09<br />
     <strong>Skapare:</strong> En person<br />
  </span></a>
</div>

Vi börjar med en div (image) för att hålla allt på plats. Sedan bilden som ska visas när man inte håller musen över bilden. Sist men absolut inte minst kommer länken (more-info), med den info som man vill ska visas när man hovrar med mus pekaren.

» Läs hela inlägget

Kategori: XHTML-CSS     1 Kommentar

Div i XHTML

Elementet div är som standard stil lös och används till att bygga upp och designa en hemsida. När man ger arbetar med div’s använder man sig alltid av CSS för att placera och ge div’en det utseende man vill ha och där efter forma designen. Under 90-talet var det populärt att använda tabeller för att designa hemsidor och visst det funkar, men det var inte menat att tabeller skulle användas till det, utan tabeller ska presentera tabulära data, som siffror etc. Man får även onödigt tungladdad kod om man använder tabeller för att designa sina hemsidor därför är det smartare att jobba med div’s, det är även enklare.

Här är ett vanligt exempel hur div elementet kan användas:

<div class="bla-box">Texten som ligger inuti div’en</div>

Nu har vi gett div’en en class som heter ”stilen” och med hjälp av CSS ska vi nu ge den en fin liten stil.

.bla-box {
    Background-color: #84bcdf;
    Border: 2px solid #5e94b6;
    Margin: 10px;
    Padding: 10px;
}

För att vi anropar Class’en ”bla-box” börjar vi selectorn med en . (punkt). Koden ger oss är en box med himmelsblå bakgrund, mörkare blå linje runt boxen som är 2px tjock. Margin ger oss luft runt om boxen, 10 pixlar på alla fyra sidor i detta fall, och Padding ger oss 10 pixlar luft inuti boxen. Kom ihåg det, margin på utsidan, padding på insidan.

Resultat:

En enkel layout med div’s

Med div’s och CSS kan man utan bekymmer skapa en enkel layout till en hemsida. Layouten vi ska göra består av en header, två kolumner under samt en footer.

Såhär ser html koden ut:

<div id="wrapper">
    <div id="header"><h1>Header</h1></div>
    <div id="sidebar">En meny här kanske</div>
    <div id="main"><strong>Innehåll</strong><p> En massa text</p>
    </div>
    <div id="footer">copyright text etc.</div>
</div>

Nu har vi XHTML koden för en layout, div’en med id wrapper är där för att hålla om dom andra div’arna så dom inte flyter iväg eller hamnar fel. Resten är inte så klurigt, så nu hoppar vi över till CSS koden.

#wrapper { 
    width: 600px;
    margin: 0 auto;
    border: 1px solid #666666;
}

#header {
    width: 600px;
    border-bottom: 1px solid #666666;
}

#sidebar { 
    width: 149px;
    float:left;
    border-right: 1px solid #666666;
    border-bottom: 1px solid #666666;
}

#main { 
    width: 450px;
    float:left;
}

#footer {
    width: 600px;
    clear: both;
    border-top: 1px solid #666666;
}

För att #sidebar och #main ska lägga sig bredvid varandra använder vi oss av Float:left; som gör att div’arna lägger sig åt vänster. Om man har två div’ar med float:left; lägger dom sig bredvid varandra. När man använder sig av float måste man ”clear:a” dom annars kan innehållet som är under div’arna med float hamna fel. Det har vi gjort vi gjort i #footer med clear:both;

För att layouten ska hamna centrerad i webbläsaren avnänder vi margin: 0 auto; i #wrapper. Har lagt till några borders så det ska vara lättare se hur layouten ser ut.

Så ser det ut att skapa en enkel layout, för att piffa upp den är det bara att leka med CSS'en, lägga till lite färg, margin, padding etc. En mer genomgående artikel om hur man gör en design med div's kommer senare i HTMLskolan

Exempel

Enkel layout med Div’s och CSS

Kategori: XHTML-CSS     0 Kommentarer

Formulär

Om man jobbar med dynamiska hemsidor i serverspråk och vill att besökarna ska kunna skriva t.ex. kommentarer använder man sig utav formulär. Men även om man bara jobbar med statiska sidor i XHTML så kan det komma till användning.

Det finns olika formulär typer man kan använda sig utav när man bygger ett kommentar formulär eller liknande.

För att man ska kunna posta formuläret, måste man ha sina fält inom en <form></form> tagg. Som ser ut såhär:

<form method="post" action="sidan_som_tar_emot_formuläret.asp">

</form>

Method – Visar hur vi vill skicka formuläret. Om du använder method="get" skickas formuläret i en s.k. querystring och visas i adressfältet. Medans method="post" skickas dolt.

Action – Där skriver du i vilken sida man ska skicka formuläret till, för att ta hand om det som skickas via ett formulär behöver du använda dig av ett serverspråk som ASP eller PHP.

Vi fortsätter med fälten som ska vara inom <form></form>.

<input type="text" value="Text" name="text" />

Type – Definerar vilket typ av fält det ska vara.

Value – Används om du vill ha en viss text stående i fältet.

Name – Bestämmer namnet på just det fältet.

<input type="password" value="Lösenord" name="text" />

Password genererar ett fält för lösenord.

<input type="submit" name="submit" value="Skicka" />

Detta blir en knapp som du kan skicka formuläret, som det står skicka på.

Om du vill ha ett fält för längre texter använder du dig av <textarea> såhär:

<textarea rows="5" cols="20" name="textarea">Om du vill ha en text i text-arean</textarea>

Cols – bestämmer den synliga bredden på text-arean.

Rows – bestämmer den synliga höjden av rader på text-arean.

Ett helt formulär

Nu när du vet vad ett formulär består av, ska ni nu få se hur ett enkelt formulär ser ut i sin helhet.

<form method="post" action="skicka.asp">
    <p>Namn:<br />
    <input type="text" name="namn" /></p>

    <p>Hemsida:<br />
    <input type="text" value="http://" name="hemsida" /></p>


    <p>Inlägg:<br />
    <textarea name="inlagg" rows="5" cols="20"></textarea></p>

    <p><input type="submit" name="submit" value="Skicka " /></p>
</form>

Styla ditt formulär med CSS

Ett ostylat formulär kan se olika ut beroende vad man har för operativsystem/tema. Så om du vill att det ska likadant ut hos dom flesta och anpassa den till din design på hemsidan är det bara att använda CSS.

Den standard kod jag använder för formulär ser ut såhär:

input, textarea { 
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
padding: 3px;
color: #000000;
font-size: 14px; 
width: 300px;
background-color: #e4e4e4;
border: 1px solid #3fb2ee;
}

Om man vill ge flera element samma stil, anger man flera selectorer och avkiljer dom med ett , (komma) som vi har gjort i koden. Alla våra <input> och <textarea> taggar får samma stil.

Font-family – Vi ger fälten typsnittet Verdana

Padding – Vi ger 3px luft mellan texten och fältens kant.

Color – Ger texten e svart (#000000) färg.

Font-size – Texten blir 14px

Width – Bredden på fälten blir 300px

Background-color – Fältens bakgrundsfärg blir ljusgrå (#e4e4e4)

Border – Kanten på fälten blir 1px bred och solid, i en blå färg (#3fb2ee)

Exempel

Formulär utan css
Fromulär med css
Koden för skicka_formular.asp

Kategori: XHTML-CSS     2 Kommentarer

Bilder

Med bilder kan du ge din hemsida dom grafiska element som behövs och pigga upp din text. För att infoga en bild i ett .html dokument använder man sig utav <img> taggen. Såhär ser taggen ut i action. Då vi kodar i XHTML så stänger vi taggen med ett / (slash).

<img src=”bilden.jpg” alt=”En bild” width=”100” height=”100” />

Src – Där skriver du in sökvägen och bildens namn. I detta fall ligger bildfilen ”bilden.jpg” i samma mapp som .html filen.

Alt – Är en kort beskrivande text om bilden, detta är viktigt för sökmotorer och blinda besökare.

Både src och alt attributen är ett krav att finnas i <img> taggen.

Width / height – Sätter en bestämd storlek på bilden, men det trycker bara ihop bilden. Så om du har en bild med storleken 2000x2000 (pixlar) och sätter width och height på 100 (pixlar) som vi har gjort, så är det samma stora bild, fast hoptryckt vilket resulterar i onödigt långa laddningstider.

I förra avsnittet av html skolan gick vi igenom länkar, och det är ingen ovanlighet att man länkar bilder. För att göra det, skriver man såhär:

<a href=”en_sida.html”><img src=”bilden.jpg” alt=”En bild” /></a>

Som standard får bilder i en länk en ful ram runt sig, vilket inte är så fint. För att få bort den använder vi oss helt enkelt utav CSS.

img { 
    border: none;
}

Med denna kod kommer varje <img> tagg vara utan en border. Men ibland kanske man vill ha en liten vit ram runt bilden så det får en liten old school fotografi känsla, som jag använder på vissa bilder i bloggen.

img .ram { 
    padding:3px; 
    border: 1px solid #e8e8e8;
}

Detta kanske ser lite lurigt ut med två selectorer som det är nu, men det som händer är, att alla <img> taggar med classen ”ram” får den här stilen, så om du har en annan tagg med classen ”ram” så får den inte stilen.

Såhär ser XHTML koden ut

<img class=”ram” src=”bilden.jpg” alt=”En bild” />

Kategori: XHTML-CSS     0 Kommentarer