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

Løsning på høydeproblem i CSS

av Øyvind A. Isaksen

I "gamle dager" da det var mest vanlig å benytte tabeller til å lage rammeverket på nettsider var det ingen spesielle utfordringer med tanke på å få kolonner til å følge hverandres høyde. Med CSS og bruken av containere er det mange som sliter med å få en kolonne til å ekspanere / minimere når høyden på kolonnen ved siden av endres. Her viser vi hvordan man ved hjelp av stylesheet kan håndere dette. Om containeren "colA" endres vil "colB" følge etter og visa versa.

<!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>
<title>Variabel høyde i CSS</title>


<style type="text/css">
* {
padding: 0;
margin: 0;
}
#colWrapper {
float: left;
width: 800px;
}
#colA {
float: left;
width: 150px;
min-height: 500px;
height: auto !important;
height: 500px;
background-color: #888;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
#colB {
width: 650px;
float: left;
background-color: #999;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
</style>


</head>
<body>

<div id="colWrapper">
<div id="colA">Meny</div>
<div id="colB">Innhold</div>
</div>

</body>
</html>

Se også:
http://www.ejeliot.com/blog/61
http://matthewjamestaylor.com/blog/perfect-3-column.htm

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