Hej gutter og gutinder
Hovedideen er jeg skal fylde to kolonner (div E og F) med data fra min database. De parvis skal stå overfor hinanden, selvom indholdet ikke fylder lige meget.
- <!DOCTYPE HTML>
- <HTML>
- <HEAD>
- <TITLE>Hjemmeside for og af Roar Pedersen</TITLE>
- <LINK rel=stylesheet type=text/css href="stylesheet/localStyle2.css">
- </HEAD>
-
- <BODY>
-
- <div class="A">
- <div class="B">
- <h1>B</h1>
- </div>
-
- <div class="C">
- <div class="img"><h1>C</h1></div>
- </div>
- </div>
-
- <div class='vBar'></div>
-
- <div class='D'>
- <div class='E'><span class='G'>E: ATP Koncernen</span><span class='H'>2001-01-01 : 2005-01-03</span></div>
- <div class='F'>F: Danmarks største pensions- og sikringsselskab løser opgaver for næsten alle borgere og virksomheder i Danmark. ATP rangerer blandt Europas største pensionsvirksomheder</div>
- </div>
-
- <div class='D'>
- <div class='E'><span class='G'>E: IBM</span><span class='H'>2006-01-02 : 2009-12-31</span></div>
- <div class='F'>F: IBM Danmark ApS er landets førende virksomhed inden for informationsteknologiske produkter, løsninger og serviceydelser. De primære forretningsområder ligger inden for netværksløsninger, systemintegration, service- og konsulentvirksomhed.</div>
- </div>
-
- <div class='D'>
- <div class='E'><span class='G'>E: Tryg</span><span class='H'>2010-01-01 </span></div>
- <div class='F'>F: Tryg er det næststørste skadeforsikringsselskab i Norden. Tryg er et kendt brand hvis historie strækker sig tilbage til 1731.</div>
- </div>
-
- </BODY>
- body {
- background-color: #ffffff;
- font-family:"Times New Roman";
- font-size: 15px;
- }
-
- h1 {
- color: green;
- }
-
- span, div {
- border: solid black 1px;
- }
-
- div.vBar {
- clear: both;
- width: 100%;
- border-top: solid blue 5px;
- }
-
- #vBar {
- border-top: solid blue 5px;
- }
-
-
- div.img {
- float: right;
- }
-
-
- div.D {
- padding: 10px 10px 0px 0px; /* top right bottom left */
- }
-
- div.A, div.D {
- margin: 0 auto;
- clear: both;
- width: 980px;
- border: solid red 1px;
- }
-
- div.B, div.E {
- float: left;
- width: 29%;
- }
-
- div.F {
- padding: 10px 0px 0px 10px; /* top right bottom left */
- }
-
- div.C, div.F {
- float: right;
- width: 69%;
- border-left: solid blue 1px;
- }
-
- span.G {
- float: left;
- width: 40%;
- }
-
- span.H {
- float: right;
- width: 58%;
- }
Og det virker! Der er bare et par detalier, der ikke fungerer - og jeg ved ikke hvorfor? Jeg har sat et par rammer omkring de enkelte div klasser for at illustrere problemstillingen.
Hvorfor er der højde på div.D, når div.A ikke fylder noget (og det er dét, jeg ønsker)?
Hvorfor er div.C smallere end div.F? Burde de ikke have samme brede?
Hvorfor er div.2 ikke inde i div.1, når <div 1><div 2></div></div>. Div.2 opfører sig basalt set som om den var.
Der er et eller andet i min basale forståelse af div, som ikke er helt på plads endnu, men jeg håber I kan hjælpe mig :-)
Indlæg senest redigeret d. 23.04.2013 10:21 af Bruger #17591