Søg
Avatar billede shaagerup Nybegynder
18. juli 2003 - 03:32 Der er 16 kommentarer og
2 løsninger

Skrot tabellerne - Ja, men hvordan?

Hejsa!

Jeg sidder med det problem, at jeg meget gerne vil skrotte tabellerne til layout og istedet bruge CSS, men kan ikke få det til at fungere med positioner, størrelser osv. på disse bokse. (jeg har en testboks i CSS her: http://www.gawis.dk/corners.html)

Det handler om siden www.gawis.dk. Er der nogen der vil prøve at lave en kode med CSS - uden brug af tabeller - der kommer så tæt på den originale opsætning som muligt?
Avatar billede roenving Novice
18. juli 2003 - 03:46 #1
Svaret på spørgsmålet på siden er: sæt overflow på:

    div.innercontent {
      width: 100%;
      height: 200px;
      overflow:auto;
    }
Avatar billede roenving Novice
18. juli 2003 - 04:06 #2
En skitse til starten på det:

<html>
<head>
<STYLE TYPE="text/css">
.main{
width:100%;
text-align:center;
border:1px solid #f00;
}
.content{
width:750px;
left:-375px;
border:1px solid #7f0;
}
.row1{
position:relative;
width=350px;
left:15px;
border:1px dotted #70f;
float:left;
}
.row2{
position:relative;
width=350px;
left:5px;
border:1px dotted #70f;
}
</STYLE>
</head>
<body>
    <div class="main">
        <div class="content">
            <div class="row1">
           
            </div>
            <div class="row2">
           
            </div>
        </div>
    </div>
</body>
</html>

-- jeg har ikke forholdt mig til de lodrette positioneringer, men bare bestræbt mig på at give dig ideen om hvordan du kan på lagt layoutet på plads vandret !-)
Avatar billede n!nja Nybegynder
18. juli 2003 - 08:36 #3
http://www.html.dk/artikler/00043/
Avatar billede shaagerup Nybegynder
18. juli 2003 - 12:41 #4
roenving: Tak for dit eksempel - testede det i IE, og det virkede - men.. i Mozilla Firebird gjorde det ikke :-(..

http://www.gawis.dk/rod/ie-eksempel.png
http://www.gawis.dk/rod/firebird-eksempel.png

Hvad kan jeg så gøre?
Avatar billede roenving Novice
18. juli 2003 - 14:03 #5
Jeg har også lige haft den igennem mozilla 1.5 -- noget rod, men jeg har ikke nået at checke ud hvorfor det er noget rod ...
Avatar billede je79ayps Novice
18. juli 2003 - 21:41 #6
Prøv at indsætte dette:

  box-sizing: border-box;
  -moz-box-sizing: border-box;
Avatar billede nielle Nybegynder
18. juli 2003 - 21:50 #7
Med på en lytter.
Avatar billede roenving Novice
19. juli 2003 - 01:10 #8
>>nielle

-- med på en lytter kan du komme bare ved at trykke på Udfør (Alt-U), når bare der er sat kryds til venstre i E-mail ...
Avatar billede shaagerup Nybegynder
19. juli 2003 - 04:41 #9
je79ayps: Satte de to linjer ind i alle delene (main, content, row1 og row2), men ligemeget hjalp det. Det ser stadig tosset ud i Mozilla...

Umiddelbart ser det sådan ud for mig: text-align bruges i IE både til at flytte tekst og bokse (f.eks. ind på mindten). I Mozilla er det kun teksten, som selve "text-align" jo også udtrykker. Findes der måder at centrere "objekter"?
Avatar billede roenving Novice
19. juli 2003 - 04:55 #10
-- kiggede på det på samme måde shaagerup, og har ikke umiddelbart fundet en forklaring/løsning ...

-- egentlig virker det skørt, at der ikke findes en align, når der findes en vertical-align ...
Avatar billede shaagerup Nybegynder
19. juli 2003 - 05:19 #11
Nu har jeg kigget videre, og er nu kommet lidt tættere på en løsning..

Det viste sig at man i Mozilla kan skrive {margin-left: auto; margin-right: auto;} eller bare {margin: auto;} for at få noget centreret. Denne funktion er bare ikke understøttet af IE, som man kan "snyde" ved hjælp af text-align'en.

Nu har jeg bare det problem med "spalterne" inderst inde - row1 og row2. I det nedenstående eksempel har jeg gjort hvad jeg kunne for at det så ens ud i både Mozilla og IE. Men kan man justere bredden på dem, uden at de bare automatisk "kollapser" over til venstre side? Hvorfor skulle jeg lave en width:100% til row2, for at det kom til at se ordentligt ud?

---

<html>
<head>
<STYLE TYPE="text/css">
.main{
width:100%;
border:1px solid #f00;
margin: auto;
text-align:center;
}
.content{
width:750px;
border:1px solid #7f0;
margin: auto;
}
.row1{
width:50%;
border:1px dotted #70f;
float:left;
}
.row2{
width:100%;
border:1px dotted #70f;
}
</STYLE>
</head>
<body>
    <div class="main">&nbsp;
        <div class="content">&nbsp;
            <div class="row1">row1</div>
            <div class="row2">row2</div>&nbsp;
        </div>&nbsp;
    </div>
</body>
</html>
Avatar billede roenving Novice
19. juli 2003 - 05:27 #12
Ja, jeg måtte også lige prøve, men mozillas composer tillader åbenbart ikke at man angiver en dtd, så jeg er ikke sikker på hvad der sker ...
Avatar billede pixeldude Nybegynder
19. juli 2003 - 10:38 #13
Shaagerup:> Sådan her kan du få dit indhold centreret.  Du kan jo så placere dit indhold i content, så vil det altid være centreret.

<html>
<head>
<STYLE TYPE="text/css">
body {
  height: 100%;
}

#content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 250px;
  margin-top: -125px;
  margin-left: -125px;
  border: 1px solid #000000;
}
</STYLE>
</head>
<body>
  <div id="content"></div> 
</body>
</html>
Avatar billede roenving Novice
19. juli 2003 - 14:36 #14
>>pixeldude

Hvilket præcis var den ide, jeg propagerede 18/07-2003 04:06:43 -- forøvrigt efter inspiration fra dig ...
Avatar billede je79ayps Novice
21. juli 2003 - 21:48 #15
Jeg ved ikke om jeg er kommet lidt længere, men prøv nedenstående - det ser bedre ud i mozilla, men jeg ved ikke hvor elementerne main og centent ikke følger med i højden - det går de i IE, men måske der andre der kan svare på det.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<STYLE TYPE="text/css">
#main{
width:100%;
text-align:center;
border:1px solid #f00;
margin: auto;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 100%;
}
#content{
width:750px;
left:-375px;
border:1px solid #7f0;
margin: auto;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 748px;
}
.row1{
position:relative;
width=350px;
left:15px;
border:1px dotted #70f;
float:left;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 348px;
}
.row2{
position:relative;
width=350px;
float:right;
right: 15px;
border:1px dotted #70f;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 348px;
}
</STYLE>
</head>
<body>
    <div id="main">
        <div id="content">
            <div class="row1">
            Test1
            </div>
            <div class="row2">
            Test2
            </div>
        </div>
    </div>
</body>
</html>
Avatar billede schaefner Juniormester
21. juli 2003 - 23:53 #16
En beta-version, så den er ikke helt færdig: http://disneyzone.dk/gawis.html

mvh. Jesper Sørensen
Avatar billede olebole Juniormester
31. juli 2003 - 13:11 #17
<ole>

Hvorfor ønsker du at skrotte tabeller? Tabeller er stadig det bedste element at bruge til at organisere sideindhold i en lang række tilfælde ... herunder den side, du henviser til.
Hvorfor ønsker du at bruge divs i stedet? Hvis det er fordi, du gerne vil bruge CSS, kan du jo blot bruge det med tabeller. Koden bliver ikke et hak bedre af at indeholde divs i stedet for tabeller.

/mvh
</bole>
Avatar billede shaagerup Nybegynder
07. januar 2005 - 14:19 #18
Tak for svarene - det er efterhånden lang tid siden - men var egentlig mest tilfreds med Schaefners svar .. Ønsker han point, kan han sige til. Nu giver jeg mig selv 150, som Schaefner skulle have haft, og pixeldude får 50.
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 15:34 Installer alarmlyd på Samsung Galaxy XCover 7 Pro Af ErikHg i Mobiltelefoner
08/0913:06 Kan ikke starte min pc Af Malm i PC
07/0919:20 DVD program Af dcedata1977 i Andet software
07/0916:09 Bitdefender brokker sig Af FinnRasmussen i Andet sikkerhed
06/0921:00 Libre Office Impress Af Frank i Andre styresystemer
White papers
Flere white papers »