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

Eksempel på nettside uten bruk av tabeller (kun CSS)

av Øyvind A. Isaksen

Dette er et eksempel på hvordan du kan lage en nettside uten bruk av tabeller. Nettsiden er 760px bred og består av en topp, venstre meny, innholdsdel, høyre kolonne samt en bunn.

-----------------------------
Index.html
-----------------------------

<!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">
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<title>WebRessurs.no | MinSide</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="header">
<h1>MinSide</h1>
</div>
<div id="main-holder">
<div id="main">
<asp:ContentPlaceHolder runat="server" ID="Main"></asp:ContentPlaceHolder>
</div>
<div id="leftcolumn">
<ul>
<li>Menypunkt 1</li>
<li>Menypunkt 2</li>
<li>Menypunkt 3</li>
<li>Menypunkt 4</li>
<li>Menypunkt 5</li>
</ul>
</div>
</div>
<div id="rightcolumn">
<h2>Nyheter</h2>
<p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet.</p>
<p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet.</p>
</div>
<div id="footer">
WebRessurs.no 2008
</div>
</div>
</form>
</body>
</html>

-----------------------------
Style.CSS
-----------------------------

body
{
margin: 0;
padding: 0;
width: 760px;
width: 100%;
text-align:center;
background-color: #B0B0B0;
}

#container
{
width: 760px;
border:1px solid #000000;
background-color: #FFFFFF;
margin: 0 auto;
margin-top:20px;
text-align:left;
}

#header
{
width: 760px;
height:75px;
float: left;
background-color: #4F4F4F;
color: #FFFFFF;
}

#header H1
{
padding: 10px 0 0 20px;
}

#leftcolumn
{
width: 150px;
padding:20px 0 0 0;
float: left;
background-color:#E3E3E3;
}

#leftcolumn li
{
margin: 0 0 0 -20px;
}

#main-holder
{
width: 600px;
float: left;
}

#main
{
width: 440px;
height: 400px;
float: right;
}

#rightcolumn
{
width: 140px;
float: right;
padding: 20px 10px 0 10px;
background-color: #E3E3E3;
}

#footer
{
width: 760px;
height:20px;
float: left;
background-color: #4F4F4F;
color: #FFFFFF;
text-align:center;
}

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