html - Left - middle - right - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #8516 @ 16.03.06 21:04

Hvordan laver jeg en left side og midt plus en right side!

Altså ligsom her på udvikleren.dk, der skal bruges css, og html... Og har selv forsøgt men det lykkedes desvære ikke

i kan se min css og html kode"

Kode

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Sjoveren.dk</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>

<body>
<div class="top"><img src="dddddd.png" width="400" height="200">
</div>

<div class="left"></div>

<div class="middle">
		<div align="center">Sponsor</div>
		<a href="http://www.partner-ads.com/dk/klikbanner.php?partnerid=3889&bannerid=2122" target="_blank">Lej Danmarks billigste DVD film. Prøv og i 10 dage kr. 0,- Lej op til 4 film om dagen.</a> <br>
</div>
</body>
</html>

css

Kode

/* CSS Document */

body {
margin:0px;
font-family:Verdana;
font-size:11px;
}

.top {
margin:0 auto;
width:100%;
height:200px;
background-color:#FFFFFF;
}

.left {
width:150px;
height:100%;
border-right:1px solid gray;
position:absolute;
top:200px;
}

.middle {
margin: 0px 150px 0px 150px;
}

Indlæg senest redigeret d. 16.03.2006 21:05 af Bruger #8516

10 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #3275 @ 16.03.06 21:40

1.736

Du skal kigge på css-koden float. Den kan sættes til left og right alt efter hvordan den skal positioneres.

http://www.w3schools.com/css/pr_class_float.asp

Bruger #4907 @ 17.03.06 00:37

Et godt "3-kolonne layout" er temmelig svært at lave med CSS i dag, men der findes dog forskellige måder at gøre det på. Se fx http://www.alistapart.com/articles/holygrail/ og http://css-discuss.incutio.com/?page=ThreeColumnLayouts - og snup så i samme åndedrat David Barons lille minder omkring float-property'en: http://dbaron.org/log/2005-12#e20051228a

Derudover bør du tage et kig på http://hsivonen.iki.fi/doctype/ - og finde dig en ordentlig doctype; den du bruger nu, sender de fleste browsere i "quirksmode", hvor de ofte fortolker CSS forskelligt fra standarden. Og hvorfor nogensinde bruge transitional til en ny side du laver? Hvis du anvender ting der går på tværs at strict, vil det være bedre du ændrer dine metoder, fremfor at forfalde til transitional i stedet...

Indlæg senest redigeret d. 17.03.2006 00:51 af Bruger #4907

Bruger #6559 @ 20.03.06 20:25

843

Det er da ikke så svært... Det kunne laves sådan:
Index.html

Kode


<html>
 <head>
  <title>Test</test>
  <link rel="stylesheet" href="layout.css" type="text/css">
 </head>

 <body>
 
  <div id="main">
   <div id="top">Top</div>
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="middle">Middle</div>
  </div>
 
 </body>
</html>

layout.css

Kode

body {
 margin: 0px, 0px, 0px, 0px;
#main {
 width: 100%;
 }

#top {
 width: 100%;
 height: 150px;
 }

#left {
 width: 150px;
 float: left;
 height: 400px;
 }

#right {
 width: 150px;
 float: right;
 height: 400px;
 }

#middle {
 width: 100%;
 }

Har ikke tjekket det, men tror det virker

Bruger #8516 @ 16.03.06 21:59

108

er det så defor jeg får et lidt sjovt resultat på e-playcity.dk

hmm kan du ikk li prøve at lave et eks. til mig

Bruger #8516 @ 23.03.06 18:27

108

hmm..

Da den gamle udvikleren var her! hentede jeg den del af hans css kode, som jeg skulle for at dele sitet op, men jeg kan ikk finde ud af hvordan den er fremstillet nu! det jeg ved er bare der stod

.middle {
margin: 0 200 0 210;
}

mere ved jeg ikk, heller ikk om opsætningen, det kan jeg desvære ikke huske

så håber nogle kan hjælpe ?

Bruger #4907 @ 23.03.06 20:23

Jeg gætter på
.middle { margin: 0 200 0 210; }
kun virker som du gerne vil have det til, i IE -- når den er i quirksmode. Der mangler en enhedsbetegnelse for de hhv. 200 og 210, prøv at tilføje px lige efter hver af dem (0 behøver man ikke tilføje en sådan til, da 0 er 0 uanset om det er px, em, % osv.).
Ved du forresten overhovedet hvad den kode gør? margin er en shorthand for margin-top, margin-right, margin-bottom og margin-left - i den rækkefølge. Du kan evt. google på det for mere info.

Bruger #8516 @ 23.03.06 23:13

108

Har selv løst problemmet!

Bruger #6559 @ 24.03.06 08:07

843

Du kunne også have kigget på min kode, til en lille hjælp.

Bruger #4907 @ 24.03.06 15:13

@Martin: Din kode er fejlfyldt, og hverken HTML- eller CSS-filen ville validere. Derudover har du en del overflødig kode i CSS-filen, og endelig kan man diskutere hvorvidt det virker... I forhold til den ene artikel jeg linkede til, vil jeg mene dit eksempel er ubrugeligt.

Bruger #6559 @ 28.03.06 08:03

843

@Martin: Din kode er fejlfyldt, og hverken HTML- eller CSS-filen ville validere. Derudover har du en del overflødig kode i CSS-filen, og endelig kan man diskutere hvorvidt det virker... I forhold til den ene artikel jeg linkede til, vil jeg mene dit eksempel er ubrugeligt.

Det var en hurtig indskydelse.... Jeg sidder heller ikke med det program jeg bruger, da jeg lavede det.

Left - middle - right

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler