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 (565)


  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.


Sideoppsett og layout ved hjelp av CSS (uten tabeller)

av Øyvind A. Isaksen
 
Denne artikkelen viser hvordan du designer en komplett nettside uten bruk av tabeller. Her brukes kun <DIV> tagger og CSS! Eksempelet viser en nettside bestående av en topp, en hovedside og en bunn. Siden vil alltid ha minimum 100% høyde uavhengig av innholdet på den, også om toppen eller bunnens høyde forandres! Ønsker du å komme igang med CSS design på en god måte er dette artikkelen for deg!

---------------------------
HTML dokument
---------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Design med CSS</title>
<link href="Default.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form runat="server" id="mainForm">

<div id="container">
<div id="header">
<h1>CSS design</h1>
<p>Lag dine nettsider uten tabeller!</p>
</div>
<div id="content">
<h2>Layout med CSS</h2>
<p>Lær deg cssdesign i dag: www.webressurs.no</p>
</div>
<div id="footer">
<p>Copyright Øyvind Isaksen - www.webressurs.no</a></p>
</div>
</div>

</form>
</body>
</html>



---------------------------
CSS dokument
---------------------------

html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background-color:Silver;
font-family:Trebuchet MS;
font-size:small;
color:#666;
}

div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:980px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}

div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}

div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}

div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}

div#content p {
text-align:justify;
padding:0 1em;
}

div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}

div#footer p {
padding:1em;
margin:0;
}


Se også vårt CSS kurs:
http://www.webressurs.no/main/artikler/default.asp?catID=26


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: 14499722.
Copyright WebRessurs.no © 2003 - 2018
Jobbsøk.no - Jobbsøknad, CV, intervju, tips og lenker