WebRessurs.no - Webprogrammering og ressurs innen ASP, ASP.NET, PHP, SQL, HTML, CSS, Javascript, XML, C#, VB, Flash mm.

KODE EKSEMPLER

ASP.net (199)

ASP 3.0 (111)

PHP (30)

HTML (66)

SQL (89)

CSS (46)

XML (7)

JavaScript (78)

Diverse kode (13)

ARTIKLER / RESSURSER

Programmering (22)

System og drift (15)

Trafikk og inntekt (11)

Guider og tips (22)

Nyttig lesestoff (23)

Web forum (604)

Link galleri (565)

KURS / TUTORIALS

ASP.NET kurs(5)

CSS kurs (2)

JQuery kurs (2)

FILM / MEDIA

Øk trafikken (8)

Facebook App. (4)

Microsoft CEO (6)

GRATIS SOFTWARE

Server & web

Internett & epost

Systemverktøy

Sikkerhet

Fildeling

Lyd & media

Diverse software

TJENESTER

Domenesalg

Metagenerator

Websikre farger

WebMail

ANNET

Bli medlem!

Siste innlegg

Gjestebok

Tips en venn

Kontakt oss

Forsiden

INTERNETT HASTIGHET

Tabell-løst design - layout ved hjelp av CSS / Stylesheet!

av Øyvind A. Isaksen

Denne artikkelen viser med flere eksempler hvordan du sette opp layout på en webside ved hjelp av CSS i stedet for tabeller. Dette er en metode som tas mer og mer i bruk, både fordi websiden rendres hurtigere og fordi det gir en bedre kompabilitet med tanke på feks mobile enheter. Det henvises også til andre eksempler innenfor samme tema!

--------------------------------------------------------------------
Eksempel 1: Skjema med overskrift, 2*3 felter under og bunntekst
--------------------------------------------------------------------

<div style="text-align:center;margin-top:15">Midtstillt overskrift</div>
<div style="padding:10px 10px 10px 10px">

<div style="padding-bottom:20">Tekst under overskrift</div>

<div style="float:left;width:120px;">Felt oppe venstre</div>
<div>Felt oppe høyre</div>
<div style="padding:2px 2px 2px 2px"></div>

<div style="float:left;width:120px;">Felt midten venstre</div>
<div>Felt midten høyre</div>
<div style="padding:2px 2px 2px 2px"></div>

<div style="float:left;width:120px;">Felt nede venstre</div>
<div style="position:relative; left:-5px;top:3px;">Felt nede høyre</div>
<div style="clear:none;height:20px"></div>

<div style="position:relative;left:120px;">Felt bunnen</div>

</div>

--------------------------------------------------------------------
Eksempel 2: 3 bilder ved siden av hverandre, tekst under hvert bilde
--------------------------------------------------------------------

PS: Float gjør at om det listes ut flere bilder enn det er plass til i bredden, så vil det automatisk "brekke" slik at det kommer under hverandre!

-CSS-:

div.float {
float: left;
}

div.float p {
text-align: center;
}

-HTML-:

<div class="float">
<img src="image1.gif" width="100" height="100"
alt="image 1" /><br />
<p>caption 1</p>
</div>

<div class="float">
<img src="image2.gif" width="100" height="100"
alt="image 2" /><br />
<p>caption 2</p>
</div>

<div class="float">
<img src="image3.gif" width="100" height="100"
alt="image 3" /><br />
<p>caption 3</p>
</div>

--------------------------------------------------------------------
Eksempel 3: Gruppere bilder med bakgrunnsfarge og border
--------------------------------------------------------------------
OBS: Må bruke en spacer etter container for å få korrekt visning av containeren som skal ligge rundt bildene.

-CSS-:

div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}

<div class="container">
<div class="spacer">
 
</div>

-HTML-:

<div class="float">
<img src="image1.gif" width="100" height="100"
alt="image 1" /><br />
<p>caption 1</p>
</div>

<div class="float">
<img src="image2.gif" width="100" height="100"
alt="image 2" /><br />
<p>caption 2</p>
</div>

<div class="float">
<img src="image3.gif" width="100" height="100"
alt="image 3" /><br />
<p>caption 3</p>
</div>

<div class="spacer">
 
</div>

</div>

--------------------------------------------------------------------
Eksempel 4: Form med 4 labels til venstre, 4 text-felter til høyre
--------------------------------------------------------------------

OBS: Trikset er å lage en DIV som fungerer som en table row. Deretter lager vi 2 SPANs; en for labels (float left) og en for form elementer (float right).

-CSS:-

div.row {
clear: both;
padding-top: 10px;
}

div.row span.label {
float: left;
width: 100px;
text-align: right;
}

div.row span.formw {
float: right;
width: 335px;
text-align: left;
}

-HTML:-

<div style="width: 350px; background-color: #cc9; border: 1px dotted #333; padding: 5px; margin: 0px auto";>
<form>

<div class="row">
<span class="label">Navn:</span>
<span class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Web:</span>
<span class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Epost:</span>
<span class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Kommentar:</span>
<span class="formw"><textarea cols="25" rows="8">SoftMaker LTD</textarea></span>
</div>

<div class="spacer"> </div>

</form>
</div>

--------------------------------------------------------------------
Flere eksempler:
--------------------------------------------------------------------

http://www.alistapart.com/articles/practicalcss
http://www.bluerobot.com/web/layouts/
http://www.sitepoint.com/article/websites-tables-parts-1-2

WebRessurs.no er utviklet og drives av SoftMaker
Sett som startside: [ ]. Bokmerk denne siden: [ klikk ]. Sitemap. http://twitter.com/webressurs_no/. Antall brukersesjoner: 14721932.
Copyright WebRessurs.no © 2003 - 2018