Avatar billede hansdam Nybegynder
05. januar 2006 - 22:30 Der er 4 kommentarer og
2 løsninger

div bredde og overflow hidden

Davs eksperter

mit problem består hovedsaligt i, at det hele virker i firefox, og det virker overhovedet ikke i IE...

kig på koden
--------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       
        <style type="text/css">
            .div1 {
                width: 100%;
                overflow: hidden;
                z-index: 1;
            }
           
            .div2 {
                width: 3000px; /*for søger at undgå at teksten laver et linjeskift*/
                z-index: 2;
            }
        </style>
    </head>

    <body>
   
   
        <table style="width: 100%; vertical-align: top;">
            <tr>
                <td style="vertical-align: top; background-color: green;">
                    <div class="div1"><div class="div2">Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlægæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Inæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1In 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1</div></div>
                </td>
                <td style="width: 15px;">
                    <div style="width: 15px;">&nbsp;</div>
                </td>
                <td style="width: 200px; vertical-align: top; background-color: red;">
                    <div class="div1"><div class="div2">Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlægæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Inæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1In 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1</div></div>
                </td>
                <td style="width: 15px;">
                    <div style="width: 15px;">&nbsp;</div>
                </td>
                <td style="width: 200px; vertical-align: top; background-color: blue;">
                    - <a href="#indlæg1">Indlæg 1</a><br />
                </td>
                <td style="width: 6px;">
                    <div style="width: 6px;">&nbsp;</div>
                </td>
            </tr>
        </table>
   
    </body>
</html>
--------------------------------
kan også ses her: www.hdhp.dk/test.htm
--------------------------------

Som i kan se er der 3 kolonner, hvor 2 af dem (de sidste) har en fast bredde. Den kolonne der er tilbage, har så en variabel bredde, som ændrer sig i forhold til vinduestørrelsen.
Men som i nok kan se, så virker det ikke i IE, men det virker perfekt i firefox...

Nogen der kan hjælpe?
Avatar billede mik789 Nybegynder
06. januar 2006 - 00:07 #1
jeg ville nok gøre noget i denne retning:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body style="margin:0;">
  <div style="margin-top:10px;width:90%;height:20px;float:left;overflow:hidden;background-color:green;">Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlægæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Inæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1In 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1</div>
  <div style="position:absolute; top:10px;right:0;width:436px;height:20px;z-index:10;">
    <div style="width:15px;height:20px;float:left;background-color:white;">&nbsp;</div>
    <div style="width:200px;height:20px;float:left;overflow:hidden;background-color:red;">Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlægæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Inæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1In 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1Indlæg 1</div>
    <div style="width:15px;height:20px;float:left;background-color:white;">&nbsp;</div>
    <div style="width:200px;height:20px;float:left;background-color:blue;">- <a href="#indlæg1" style="color:black;">Indlæg1</a></div>
    <div style="height:20px;float:left;background-color:white;">&nbsp;</div></div>
    </body>
</html>

Du kan se den her: http://dev.e-tidsskrift.dk/hansdam.html
Avatar billede mik789 Nybegynder
06. januar 2006 - 00:10 #2
men du behøver ikke float:left på den første div
Avatar billede hansdam Nybegynder
06. januar 2006 - 00:49 #3
Dav mester, tak for dit svar...

Jeg kunne bruge tankegangen i dit eks, men det duede ikke at der var en fast afstand til toppen...
Jeg har fået det til at virke: http://hdhp.dk/test2.htm

Smid et svar, så får du nogle points :)
Avatar billede mik789 Nybegynder
06. januar 2006 - 08:01 #4
ja sådan kan man også gøre...
du har et " for meget i slutningen af style attributten i den næstsidste div ;-)
Avatar billede mik789 Nybegynder
06. januar 2006 - 08:04 #5
har du testet med tekst i dine bokse (alle de der Indlæg 1Indlæg 1 osv), som kræver overflow:hidden ?
Avatar billede hansdam Nybegynder
06. januar 2006 - 11:02 #6
Yeps jeg har testet og lavet lidt om i det... Working progress... ;)
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