Avatar billede tipsen Nybegynder
11. februar 2002 - 22:38 Der er 8 kommentarer og
1 løsning

CSS i stedet for tabeller

Jeg er i færd med at oversætte mit website til at benytte css i stedet for tabeller til styring af layout. I den forbindelse mangler jeg en funktionalitet som efterligner den jeg får af følgende tabelkode:

<table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="100">1999</td>
    <td>blabla</td>
  </tr>
  <tr>
    <td width="100">2000-2001</td>
    <td>blabla</td>
  </tr>
</table>

I denne tabel vil teksten i 2. kolonne altid stå pænt over hinanden. Hvis jeg vil have samme effekt fra style-sheets, hvordan kombinerer jeg så div, span, margin, indent osv!?

Det skal kunne fungere for indholdet af denne tabel og jeg vil også gerne have en løsning som fungerer generelt og ikke kun i IE (En sådan løsning har jeg allerede lavet vha. "width", men det fungerer bl.a. ikke i NN)

/Tommy
Avatar billede hono Nybegynder
11. februar 2002 - 22:45 #1
Du kan kontrollere præcist hvor et element skal placeres med 2d-positionering.

Eks.:

<span style="position:absolute;left:30;top:15;">Tekst der er placeret 30 ox fra venstre side, og 15px fra toppen</span>

Jeg prøver lige at finde et link, til et sted hvor du kan læse mere om det.

Hono
Avatar billede hono Nybegynder
11. februar 2002 - 22:46 #2
Avatar billede tipsen Nybegynder
11. februar 2002 - 23:14 #3
hono: Jeg bruger det i forbindelse med display:block, display:none og lige så snart jeg blander noget med absolut positionering ind bliver det fuldstændig fucked up.... :-( - Jeg tror ikke det er en mulighed...
/Tipsen
Avatar billede hono Nybegynder
12. februar 2002 - 16:51 #4
hvad hvis du istedet bruger relativ positionering?
Avatar billede tipsen Nybegynder
13. februar 2002 - 00:57 #5
det er måske en mulighed, men hvordan får jeg så fortalt, at to tekststykker på samme linie skal starte hhv. 20 px og 120 px fra venstre kant?
Avatar billede tipsen Nybegynder
13. februar 2002 - 13:52 #6
Det må vel være mulighed med to stykker tekst på samme linie, hvor det ene stykke tekst starter eks. 20 pixels relativt til venstre kant og næste stykke tekst starter eks 120 pixels relativt til venstre kant!?
/Tipsen
Avatar billede tipsen Nybegynder
13. februar 2002 - 15:34 #7
Jeg har følgende html-stump, som benytter css:
<h2>Uddannelse</h2>
<div class='CV-header'>
<span class='CV-headerperiod'>1990-1993</span>
<span class='CV-headertitle' onclick='toggleDesc("0101");'>Højere Handelseksamen, Bornholms Erhvervsskole</span>
</div>
<span class='CV-item' style='display:block;' name='divBeskrivelseKort' id='Desc0101Short'></span>
<span class='CV-item' style='display:none;' name='divBeskrivelseLang' id='Desc0101Long'>Den almindelige højere handelseksamen med højt niveau i engelsk....</span>
<div class='CV-header'>
<span class='CV-headerperiod'>1980-1990</span>
<span class='CV-headertitle' onclick='toggleDesc("0102");'>Udvidet Afgangsprøve, Åvangsskolen, Rønne</span>
</div>
<span class='CV-item' style='display:block;' name='divBeskrivelseKort' id='Desc0102Short'></span>
<span class='CV-item' style='display:none;' name='divBeskrivelseLang' id='Desc0102Long'>10. klasse blablabla</span>
<span style='cursor:pointer;' onclick='toggleDesc("0101");toggleDesc("0102");';'>Se alle punkter!</span>

og her er stylesheetet:

.CV-header {
    background-color : #33cc33;
    color : #003300;
    font-weight : bold;
    margin-left : 20px;
    margin-right : 20px;
}

span.CV-headerperiod {
    width : 90px;
}

span.CV-headertitle {
    cursor: pointer;
}

span.CV-item {
    margin-left : 114px;
    margin-right : 20px;
}

Det fungerer fint i IE, men NN har åbenbart problemer med "width" elementet - det må kunne lade sig gøre at løse dette...

/Tipsen
Avatar billede tipsen Nybegynder
16. februar 2002 - 17:39 #8
Der er åbenbart ikke nogen der har det forkromede svar... - så jeg lukker bare spørgsmålet...
Avatar billede tipsen Nybegynder
24. februar 2002 - 01:12 #9
Har måttet lave høkerløsningen med et vist antal "&nbsp;" så tingene står pænt også i NN - det kan bare ikke passe det er nødvendigt...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester