Søg
Avatar billede jokkejensen Novice
11. august 2005 - 10:54 Der er 23 kommentarer og
1 løsning

tabel's width, 100% indtil 990px

Jeg vil gerne have en tabel til at være 100% i width, indtil den når 990px...

Altså giver browser vinduet mulighed for mere end 990px skal tabellen stoppe med at udvide sig, ellers skal den være 100%..

Må hellere lige fortælle problem stillingen, hvis der skulle være andre crossbrowser alternativer..

Det drejer sig om et design til 1024x768.. Dette skal laves i 5 spalter..

spalte 1 = 300px
spalte 2 = dynamisk
spalte 3 = 100px
spalte 4 = dynamisk
spalte 5 = 100px

(bare eksempler..)

Det skal så være sådan at brugere der har et browser vindue der tillader det, laver luft mellem de 3 spalter der har fast width. op til max 990px.. Men kommer der en bruger med kun 800x600 skal den klappe de 2 dynamiske felter sammen så det passer til 800x600. Crossbrowser...

Håber I forstår.

/Jacob Jensen
Avatar billede jesper-moeller Nybegynder
11. august 2005 - 11:07 #1
Prøv med CSS feks ala

table.dintable             { width: 100%; max-width: 990px }
Avatar billede jokkejensen Novice
11. august 2005 - 11:11 #2
syntes ikke rigtigt at kunne få max-width til at fungere, har dog kun brugt style="" men det skulle vel være et fedt... forsøger igen..
Avatar billede busschou Praktikant
11. august 2005 - 11:12 #3
ja du kan benytte min og max width
Nu har størrelsen jo ikke noget med crossbrowser at gøre men "cross vindue størrelse" ;o)
Jeg har ikke testet min og max selv, og ved denne side ikke altid er til at stole på
Men jvnf dette dur det ikke i IE
http://www.w3schools.com/css/css_reference.asp#dimension
Avatar billede jokkejensen Novice
11. august 2005 - 11:14 #4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<style type="text/css">
table.minTabel
{
    width: 100%;
    max-width: 990px;
   
}
</style>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table id="minTabel" align="center">
    <tr>
        <td style=" width:400px;background-color:#000000;">
            Cåååntent
        </td>
        <td style="background-color:#999999;">
            &nbsp;
        </td>
        <td style="width: 100px;background-color:#000000;">
            box
        </td>
        <td style="background-color:#999999;">
                &nbsp;
        </td>
        <td style="width:100px;background-color:#000000;">
            box
        </td>
    </tr>
</table>
</body>
</html>
Avatar billede busschou Praktikant
11. august 2005 - 11:15 #5
du skal bruge class="minTabel" når du gør sådan der ;o)
Avatar billede jokkejensen Novice
11. august 2005 - 11:16 #6
busschou, mente nu også bare at løsningen skulle være crossbrowser... og det kan man ikke kalde max-width så :)
Avatar billede busschou Praktikant
11. august 2005 - 11:16 #7
virker det ikke sådan her
.---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table style="width:100%;" align="center">
    <tr>
        <td style="width:400px;background-color:#000000;">
            Cåååntent
        </td>
        <td style="background-color:#999999;">
            &nbsp;
        </td>
        <td style="width: 100px;background-color:#000000;">
            box
        </td>
        <td style="background-color:#999999;">
                &nbsp;
        </td>
        <td style="width:100px;background-color:#000000;">
            box
        </td>
    </tr>
</table>
</body>
</html>
Avatar billede busschou Praktikant
11. august 2005 - 11:17 #8
nå nej sorry!
Den skal jo stoppe ved en hvis størrelse
Avatar billede jokkejensen Novice
11. august 2005 - 11:17 #9
ja, det selvfølgelig.. men I har ret i at det er en FF løsning.. hvad h... gør jeg ved IE..
Avatar billede jokkejensen Novice
11. august 2005 - 11:18 #10
busschou :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<style type="text/css">
table#minTabel
{
    width: 100%;
    max-width: 990px;
   
}
</style>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table id="minTabel" align="center">
    <tr>
        <td style=" width:400px;background-color:#000000;">
            Cåååntent
        </td>
        <td style="background-color:#999999;">
            &nbsp;
        </td>
        <td style="width: 100px;background-color:#000000;">
            box
        </td>
        <td style="background-color:#999999;">
                &nbsp;
        </td>
        <td style="width:100px;background-color:#000000;">
            box
        </td>
    </tr>
</table>
</body>
</html>


Den her virker fint i FF.. men mon så at et lille javascript til IE er løsningen...
Avatar billede busschou Praktikant
11. august 2005 - 11:19 #11
hmm så skal man tjekke på vinduets størrelse hver gang det resizes, måske det er en mulighed
Det ved jeg så bare ikke så meget om desværre ..
Avatar billede saudoo Nybegynder
11. august 2005 - 11:20 #12
hvorfor ikke bare sætte din table til 990px og din td til 100%?
Avatar billede saudoo Nybegynder
11. august 2005 - 11:20 #13
eller nej.. :)

men hvad med en table i en tabel? :)
Avatar billede jokkejensen Novice
11. august 2005 - 11:22 #14
ík nested.. så vil der være horisontalt scroll når man besøger siden i 800x600 da den yderste jo er 990px..
Avatar billede jesper-moeller Nybegynder
11. august 2005 - 12:03 #15
Nu ved jeg jo ikke helt hvordan og hvorledes din side ser ud og er bygger op, men hvis det er 3 spalter med fast størelse der forskyde fra hinanden ved windowresize kan du gøre dette på feks følgende måde:

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

<html>

    <style type="text/css">
#spalte1        { background-color: #f9f; float: left; width: 400px; height: 200px }
#spalte2      { background-color: #9ff; width: 100px; height: 200px; margin-right: auto; margin-left: auto }
#spalte3        { background-color: #ff9; float: right; width: 100px; height: 200px }
</style>
<!--  margin-right: auto; margin-left: auto -->
    <head>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body>
        <div id="spalte1" align="center">Spalte 1</div>
        <div id="spalte3" align="center">Spalte 3</div>
        <div id="spalte2" align="center">Spalte 2</div>
    </body>

</html>

Håber det kan bruges eller give dig en ide
Avatar billede jesper-moeller Nybegynder
11. august 2005 - 12:06 #16
Ups....venstrehånds arbejde...*G* ....<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
#spalte1        { background-color: #f9f; float: left; width: 400px; height: 200px }
#spalte2      { background-color: #9ff; width: 100px; height: 200px; margin-right: auto; margin-left: auto }
#spalte3        { background-color: #ff9; float: right; width: 100px; height: 200px }
</style>
    </head>

    <body>
        <div id="spalte1" align="center">Spalte 1</div>
        <div id="spalte3" align="center">Spalte 3</div>
        <div id="spalte2" align="center">Spalte 2</div>
    </body>

</html>


Det var vist bedre.....*G*
Avatar billede jesper-moeller Nybegynder
11. august 2005 - 12:07 #17
Den løsning har dog et minus.....ser ikke så godt ud under 600px
Avatar billede jokkejensen Novice
11. august 2005 - 12:09 #18
okay, det var en fin nok løsning..

Men i mellemtiden fandt jeg dette skønne script

http://dean.edwards.name/IE7/intro/

Det får alle andre IE til at virke som IE7, og har derfor fuld CSS2 kompabilitet... like Firefox, så nu behøver jeg kun designe til FF.. SKØØØØNT..

Du får points for din tid :)

Men tak til jer alle
Avatar billede busschou Praktikant
11. august 2005 - 12:12 #19
Det var så lidt :o)
Men hvordan kan du vide at det script for alle andre IE til at virke som IE7 når IE7 endnu ikke er frigivet ;o) hehe
Avatar billede jesper-moeller Nybegynder
11. august 2005 - 12:16 #20
>> jokkejensen
Jamen takker :-)

>> busschou
"Men hvordan kan du vide at det script for alle andre IE til at virke som IE7 når IE7 endnu ikke er frigivet"

Hvor mange point giver et rigtigt svar...*G*
Avatar billede busschou Praktikant
11. august 2005 - 12:43 #21
Ja jeg vil mene at det de har gjort er ikke at sørge for at gamle IE virker som IE7
Men det er et forsøg på at gamle IE virker som man regner med
Der er jo ingen garanti for at IE7 kommer til at virke som man regner med
Det er langt fra normalen hos M$ i al fald ;o)

Anyways er det da smart nok at de har lavet sådan et javascript
Gad vist om nogen kan måle hvad der går tabt i performance ved at have det kørende
Husk at alle dine brugere som ikke har javascript slået til, der virker intet af det
Avatar billede jokkejensen Novice
11. august 2005 - 12:54 #22
nej, det er korrekt,og performance vil selvfølgeligt falde... men ak... det er skruen uden ende :)
Avatar billede jokkejensen Novice
11. august 2005 - 14:16 #23
width:expression(document.body.clientWidth > 967? "967px": "100%" ); <-- endte med at bruge den der i CSS, hvis andre skulle bruge et fix...
Avatar billede olebole Juniormester
11. august 2005 - 19:41 #24
<ole>

Det kan nok ikke blive et værre 'fix'  :)
'CSS-expressions' i IE er noget, selv MS fraråder, da det performer rent ud sagt elendigt. Så dårligt, så det får selv ikke-komplicerede dokumenter til at rive IE på gulvet med åndenød.

I stedet bør man nok tilrette sit design, så det er realiserbart med de tilgængelige teknikker. Der er ingen naturlov, der dikterer, at alt, der kommer fra en designers hånd, skal kunne laves i et HTML-dokument.

Forlanger en AD'er, at hans design-bud prioriteres højere end performance, er der heldigvis en projektleder, der kan erstatte ham/hende med en bedre og mere realistisk  ;o)

/mvh
</bole>
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 16:05 Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
I går 12:15 morf bilede Af knuldefar1942 i Fri debat
07/0822:13 Gemme største værdi Af Lemming@privat.dk i Excel
07/0821:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »