Søg
Avatar billede steen_hansen Forsker
18. april 2005 - 22:23 Der er 17 kommentarer og
1 løsning

Bredde på kolonner

Jeg har problemer med flg.:

CSS:
#maintable {
width: 755px;
background-color: #fff;
}
#banner {
width: 755px;
height: 90px;
}
#menucolumn {
width: 160px;
border-right: 1px solid black;
padding: 10px;
}
#maincolumn {
width: 535px;
padding: 20px;
}
.tdcr {
padding: 16px;
border-bottom: 1px solid black;
}


DOKUMENT:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>

<div align="center">
    <table border="0" cellpadding="0" cellspacing="0" id="maintable" class="text11">
        <tr>
            <td colspan="2" align="right" style="padding: 3px 20px 3px 0px;" class="bodybg full">...</td>
        </tr>
        <tr>
            <td align="left" colspan="2" style="border-bottom: 1px solid black; padding: 10px;" class="full headline">...</td>
        </tr>
        <tr>
            <td align="left" valign="top" id="menucolumn">Menu</td>
            <td align="left" valign="top" id="maincolumn">...</td>
        </tr>
        <tr>
            <td colspan="2" style="height: 7px; background-image: url('/images/dropshadow.gif');"></td>
        </tr>
        <tr>
            <td colspan="2">
                <table border="0" cellpadding="0" cellspacing="0" class="full">
                    <tr>
                        <td align="center" class="tdcr">...</td>
                        <td align="center" class="tdcr">...</td>
                        <td align="center" class="tdcr">...</td>
                        <td align="center" class="tdcr">...</td>
                        <td align="center" class="tdcr">...</td>
                        <td align="center" class="tdcr">...</td>
                    </tr>
                    <tr>
                        <td colspan="6" align="center" class="bottom"><a href="#" onfocus="this.blur();" class="copyright"><b>COPYRIGHT © 2003 - <%=year(now)%></b></a></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

</body>

</html>


Når bredden på menuen eller indholdskolonnen endelig er rigtig i én browser, er den forkert i andre. Typisk afviger bredderne fra 7-14px. Hvad er det jeg ikke laver rigtigt?

Jeg har lavet andre tabeller, hvor det hele passer, men uden egentlig at finde ud af, hvad jeg gør rigtigt. Det virker til tider som om, at bredderne ikke bliver rigtige, før der kommer indhold i cellerne, eller før jeg sætter en tabel ind i cellen, som har en bredde på 100%.
Avatar billede rocha_dk Nybegynder
18. april 2005 - 22:30 #1
Fejlen ligger i IE's måde at fortolke width property'en. Den fortolker width som bredden af den boks man laver, og ikke, som w3 standarden for stylesheets skriver, på indholdet af boksen. Der er ingen nem måde at omgå det på. Jeg plejer at neste en række div-bokse og så sætte margin istedet, den er heldigvis ens i alle browsere.
Avatar billede steen_hansen Forsker
18. april 2005 - 22:37 #2
Kan du vise mig hvordan ovenstående skal laves?
Avatar billede steen_hansen Forsker
18. april 2005 - 23:02 #3
Dvs man skal lave et browsertjek, f.eks. v.hj.a. et JavaScript?

IF browser = MSIE Then
    Bredde = xxxpx;
ElseIf browser = FF Then
    Bredde = yyypx;
ElseIf browser = Opera Then
    Bredde = zzzpx;
End If

HJÆLP! :o(
Avatar billede olebole Juniormester
19. april 2005 - 00:19 #4
<ole>

rocha_dk >> Som sagt i et andet spørgsmål, så er det ikke er korrekt, hvad du skriver. IE6 forstår helt fint box-modellen med den anvendte DTD  :)

Steen >> Prøv med col-elementer ... de plejer at være ret effektive:
  <table>
  <col style="width:50px">
  <col style="width:250px">
  <col style="width:75px">
  <tr>
      <td>Søjle 1</td>
      <td>Søjle 2</td>
      <td>Søjle 3</td>
  </tr> 
  </table>

Colspan og rowspan er dog 'talentfulde størrelser', der har det med at kunne bringe ged i selv den bedste kode  :o|

/mvh
</bole>
Avatar billede steen_hansen Forsker
19. april 2005 - 00:33 #5
ole, hvordan får jeg de to kolonner rigtige? Som du kan se, så er der to rækker oven over kolonnerne (håbede du ville kigge ind :)).
Avatar billede steen_hansen Forsker
19. april 2005 - 00:35 #6
... og kan jeg stadig skrive

<td style="border-right: 1px solid black;">Menu</td>

- så menuen og indholdet bliver adskilt af en sort streg?


Og skal den i givet fald fratrækkes de 180px, som der er sat af til bredden på menuen?


Jeg har sat point op :)
Avatar billede olebole Juniormester
19. april 2005 - 06:28 #7
Kikker på det her til formiddag, Steen ... har lige en pige, der skal i skole og sår'n  ;o)
Avatar billede steen_hansen Forsker
19. april 2005 - 06:41 #8
10-4 :o)
Avatar billede olebole Juniormester
19. april 2005 - 09:17 #9
Jeg mener, denne her funker vist meget fint ... i hvert fald i FF, IE6 og Opera under WinXP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style type="text/css">
#maintable {
    width: 755px;
    background-color: #fff;
}
#banner {
    width: 755px;
    height: 90px;
}
#menucolumn {
    width: 160px;
    border-right: 1px solid black;
    padding: 10px;
}
#maincolumn {
    width: 535px;
    padding: 20px;
}
.tdcr {
    padding: 16px;
    border-bottom: 1px solid black;
}
.full {
    margin: 0px auto;
}
</style>
</head>

<body>

<div align="center">
    <table border="0" cellpadding="0" cellspacing="0" id="maintable" class="text11">
        <col style="width:160px">
        <col style="width:535px">
        <tr>
            <td colspan="2" align="right" style="padding: 3px 20px 3px 0px;" class="bodybg full">...</td>
        </tr>
        <tr>
            <td align="left" colspan="2" style="border-bottom: 1px solid black; padding: 10px;" class="full headline">...</td>
        </tr>
        <tr>
            <td align="left" valign="top" id="menucolumn">Menu</td>
            <td align="left" valign="top" id="maincolumn">...</td>
        </tr>
        <tr>
            <td colspan="2" style="height: 7px; background-image: url('/images/dropshadow.gif');"></td>
        </tr>
        <tr>
            <td colspan="2">
                <table border="0" cellpadding="0" cellspacing="0" class="full">
                    <tr>
                        <td align="center" class="tdcr">...</td>
                        <td align="center" class="tdcr">...</td>
                        <td align="center" class="tdcr">...</td>
                        <td align="center" class="tdcr">...</td>
                        <td align="center" class="tdcr">...</td>
                        <td align="center" class="tdcr">...</td>
                    </tr>
                    <tr>
                        <td colspan="6" style="text-align:center" class="bottom"><a href="#" onfocus="this.blur();" class="copyright"><b>COPYRIGHT © 2003 - <%=year(now)%></b></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

</body>

</html>
Avatar billede olebole Juniormester
19. april 2005 - 09:24 #10
Ændringer:

.full {
    margin: 0px auto;
}

- og:

        <col style="width:160px">
        <col style="width:535px">

- og så lige rettelsen til style="text-align:center" i nederste celle (egentlig unødig ... men bare for en ordens skyld)

Men jeg ser lige nu, at tallene ikke går op. Din tabel er 755px bred. Det tal skal være lig summen af de to kollonners bredde - plus evt. side-border og -padding i cellerne. Er det ikke tilfældet, vil der sikkert gå ged i dimensionerne, når der kommer indhold i tabellerne  ;o)
Avatar billede olebole Juniormester
19. april 2005 - 09:27 #11
- og jeg undskylder .... lidt ekstra hovedregning siger mig, du jo har hel fin orden i tallene  :)
Avatar billede steen_hansen Forsker
19. april 2005 - 11:00 #12
Ingen undskylning nødvendig, bredden er bare for at prøve det af, kunne også være sat til 990px eller .... :)

ole, du er jo som sædvanlig styg til det der. Jeg må med skam erkende, at jeg ikke kendte til <col>. Det ser jo ud til at virke perfekt (som sædvanligt). Lægger du lige et svar? :)

rocha_dk, ole får pointene
Avatar billede steen_hansen Forsker
19. april 2005 - 11:09 #13
Kigger ind senere, ole. Vi snakkes! :)
Avatar billede olebole Juniormester
19. april 2005 - 11:25 #14
Gu' gør vi da det!  ;o)
Ja, <col> kan være meget nyttig. Når du får tid, kan du prøve at kikke lidt på den og colgroup-elementet:
    http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4

- ganske interessant godnatlæsning  :)
Avatar billede steen_hansen Forsker
20. april 2005 - 22:51 #15
Hej olebole!

Jeg har haft lidt travlt, derfor den sene reaktion, sorry :)

Jeg kan stadig ikke få tabellen rigtig, kun i MSIE.

Hvordan kan browseren finde ud af, hvad der hører til hvad med

<col style="width:160px">
<col style="width:535px">

Der mangler ikke noget id el.lign?
Avatar billede olebole Juniormester
20. april 2005 - 22:55 #16
Kan du ikke prøve at uppe et eksempel - for jeg kan ikke selv eftergøre fejlen ... eller i hvert fald ikke få øje på den  :)

Er det noget, du ikke vil have frem her, kan du evt. sende mig en URL på:
  olebole [krøllet elefant-snabel] gmail [prik] com
Avatar billede steen_hansen Forsker
20. april 2005 - 23:08 #17
Ok, du får så hele dokumentet. include-filerne indeholder ikke noget, som påvirker tabellen. CSS følger lige om lidt.

<!-- #include virtual="/includes/data.asp" -->
<!-- #include virtual="/includes/_functions.asp" -->

<html>

<head>
<!-- #include virtual="/includes/header.asp" -->
</head>

<body onload="funClock();">

<div align="center">
    <table border="0" cellpadding="0" cellspacing="0" id="maintable" class="text11">
    <col style="width: 180px;">
    <col style="width: 535px;">
        <tr>
            <td colspan="2" align="right" style="padding: 3px 20px 3px 0px;" class="bodybg full">
                <table border="0" cellpadding="0" cellspacing="0" class="text11white">
                    <tr>
                        <td>Uge <%=DatePart("ww",date(),2,2)%></td>
                        <td style="width: 30px;">&nbsp;</td>
                        <td class="CapitolLetter"><%=WeekdayName(Weekday(date))%></td>
                        <td style="width: 30px;">&nbsp;</td>
                        <td><%=Replace(date(),"-",".")%></td>
                        <td>&nbsp;</td>
                        <td><span id="uret"></span></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="left" colspan="2" style="border-bottom: 1px solid black; padding: 10px;" class="full headline">....</td>
        </tr>
        <tr>
            <td align="left" valign="top" id="menucolumn">Menu</td>
            <td align="left" valign="top" id="maincolumn">....</td>
        </tr>
        <tr>
            <td colspan="2" style="height: 7px; background-image: url('/images/dropshadow.gif');"></td>
        </tr>
        <tr>
            <td colspan="2">
                <table border="0" cellpadding="0" cellspacing="0" class="full">
                    <tr>
                        <td align="center" class="tdcr"><a href="#" onfocus="this.blur();" class="copyright" title="...."><b>....</b></a></td>
                        <td align="center" class="tdcr"><a href="#" onfocus="this.blur();" class="copyright" title="...."><b>....</b></a></td>
                        <td align="center" class="tdcr"><a href="#" onfocus="this.blur();" class="copyright" title="...."><b>....</b></a></td>
                        <td align="center" class="tdcr"><a href="#" onfocus="this.blur();" class="copyright" title="...."><b>....</b></a></td>
                        <td align="center" class="tdcr"><a href="#" onfocus="this.blur();" class="copyright" title="...."><b>....</b></a></td>
                        <td align="center" class="tdcr"><a href="#" onfocus="this.blur();" class="copyright" title="...."><b>....</b></a></td>
                    </tr>
                    <tr>
                        <td colspan="6" align="center" class="bottom"><a href="#" onfocus="this.blur();" class="copyright"><b>COPYRIGHT © .... 2003 - <%=year(now)%></b></a></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

</body>

</html>
Avatar billede steen_hansen Forsker
20. april 2005 - 23:13 #18
Mit CSS:

body {
background-color: #396da5;
margin: 0px; padding: 0px;
}
.bodybg {
background-color: #396da5;
}
#maintable {
width: 755px;
background-color: #fff;
}
#banner {
width: 755px;
height: 90px;
}
#menucolumn {
width: 160px;
border-right: 1px solid black;
padding: 10px;
}
#maincolumn {
width: 535px;
padding: 20px;
}
.full {
width: 100%;
margin: 0px auto;
}
.text11 {
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
font-family: verdana, helvetica, tahoma, arial;
line-height: 18px;
}
.text11white {
color: white;
font-style: normal;
font-weight: normal;
font-size: 11px;
font-family: verdana, helvetica, tahoma, arial;
line-height: 18px;
}
.headline {
color: black;
font-style: normal;
font-weight: bold;
font-size: 22px;
font-family: verdana, helvetica, tahoma, arial;
line-height: 38px;
}
.paper {
background-color: #fff;
}
.tdcr {
padding: 16px;
border-bottom: 1px solid black;
}

Håber du kan se noget i det :)
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 går 19:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
10/0821:30 Blokeret på Snapchat? Af LineP i Chat & Messaging
09/0816:05 Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
White papers
Flere white papers »