Turvenn.no
Webutvikler kurs ASP.NET, C#, CSS mm.

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

Brukernavn: 
Passord:

Registrèr deg Glemt passord?
Logg deg inn




  ASP.net (199)
  ASP 3.0 (111)
  PHP (30)
  HTML (66)
  SQL (89)
  CSS (46)
  XML (7)
  JavaScript (78)
  Diverse kode (13)


  Programmering (22)
  System og drift (15)
  Trafikk og inntekt (11)
  Guider og tips (22)
  Nyttig lesestoff (23)
  Web forum (604)
  Link galleri (566)


  ASP.NET kurs(5)
  CSS kurs (2)
  JQuery kurs (2)


  Øk trafikken (8)
  Facebook App. (4)
  Microsoft CEO (6)


  Server & web
  Internett & epost
  Systemverktøy
  Sikkerhet
  Fildeling
  Lyd & media
  Diverse software


  Domenesalg
  Metagenerator
  Websikre farger
  WebMail


  Bli medlem!
  Siste innlegg
  Gjestebok
  Tips en venn
  Kontakt oss
  Forsiden




Kode Artikler
Linker


Mål internetthastigheten din.


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">
&nbsp;
</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">
&nbsp;
</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">&nbsp;</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 anbefaler:    StackOverflow.com | Experts-Exchange.com | W3schools | ASP.NET | Codeproject | 4Guys
WebRessurs.no er utviklet og drives av SoftMaker
Sett som startside: [ ]. Bokmerk denne siden: [ klikk ]. Sitemap. http://twitter.com/webressurs_no/. Antall brukersesjoner: 12327775.
Copyright WebRessurs.no © 2003 - 2018
Jobbsøk.no - Jobbsøknad, CV, intervju, tips og lenker