Søg
Avatar billede xcover Nybegynder
01. maj 2008 - 11:48 Der er 7 kommentarer og
1 løsning

Overflow div med auto width i tabel

Hejsa,

Jeg er stødt på et problem ;)
Jeg har en tabel som daner rammen for min hjemmeside, i midten er en tabel celle som bare tilpasser sig browserens størrelse.

Men hvordan laver jeg en DIV der ind i ?

Problemet er i bund og grund at jeg gerne vil have en DIV med overflow:hidden - Sådan at KÆMPE billeder på siden aldrig vil kunne ødelægge designet...

Jeg har prøvet som i kan se herunder, men det virker kun optimalt hvis jeg angiver width:100px på min DIV - jeg ville jo gerne kunne sætte width:auto - men det dur ikke rigtigt...

Hjælp til hvordan jeg løser problemmet ;)
På forhånd takker...

-------- KODE ----------

<table border="1" width="100%" id="table1">
    <tr>
        <td colspan="3">top</td>
    </tr>
    <tr>
        <td width="150">left</td>
        <td>
       
        <div style="width:100px;overflow:hidden;">
            wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
            <table border="1" width="100%" cellspacing="0" cellpadding="0" bordercolor="#000000"><tr><td>&nbsp;</td></tr></table>
            <img src="http://www.cutting.lmsblogs.dk/wp-content/uploads/2007/06/natur-014.jpg">
        </div>
       
        </td>
        <td width="150">right</td>
    </tr>
</table>
Avatar billede w13 Novice
01. maj 2008 - 11:51 #1
Width:auto?
Hvad med Width:100%?
(Og mener du ikke height?)
Avatar billede xcover Nybegynder
01. maj 2008 - 12:04 #2
Når jeg sætter Width:auto eller Width:100% - så sker der det at mine tabel celler på hver side (width="150") de bliver MEGET mindre end 150 pixel...

Og height er jeg helt ligeglad med... det drejer sig kun om bredden.

Altså: En hjemmeside med en tabel på 100% som ALDRIG skal kunne se forkert ud unset om man smider et billede på 40000x50000 pixel ind. Jeg er blevet rigtig glad for at bruge overflow:hidden på divs - og den virker perfekt når den altså bare kender breden i PX istedet for %...
Avatar billede w13 Novice
01. maj 2008 - 12:19 #3
Hmmm. Nej, den kan jeg umiddelbart kun løse med java script:
      <td id="tden">
        <div id="diven" style="width:100px;overflow:hidden;">
            wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
            <table border="1" width="100%" cellspacing="0" cellpadding="0" bordercolor="#000000"><tr><td>&nbsp;</td></tr></table>
            <img src="http://www.cutting.lmsblogs.dk/wp-content/uploads/2007/06/natur-014.jpg">
            <script type="text/javascript">
            document.getElementById("diven").style.width=document.getElementById("tden").offsetWidth+"px";
            </script>
        </div>
      </td>
Avatar billede xcover Nybegynder
01. maj 2008 - 12:27 #4
-> w13
Ja det ser da rigtig godt ud... God idé.

Tabellen ser i hvertfaldet helt rigtig ud nu - men hvor ses indholdet ikke ?

<table border="1" width="100%" id="table1">
    <tr>
        <td colspan="3">top</td>
    </tr>
    <tr>
        <td width="150">left</td>
          <td id="tden">
            <div id="diven" style="width:100%;overflow:hidden;">
                wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
                <table border="1" width="100%" cellspacing="0" cellpadding="0" bordercolor="#000000"><tr><td>&nbsp;</td></tr></table>
                <img src="http://www.cutting.lmsblogs.dk/wp-content/uploads/2007/06/natur-014.jpg">
                <script type="text/javascript">
                document.getElementById("diven").style.width=document.getElementById("tden").offsetWidth+"px";
                </script>
            </div>
          </td>
        <td width="150">right</td>
    </tr>
</table>
Avatar billede xcover Nybegynder
01. maj 2008 - 12:29 #5
Jeg tester lige om Exp.dk også benytter sig af overflow:
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
Avatar billede roenving Novice
01. maj 2008 - 14:43 #6
Jepz, det er den teknik, der bruges her på siden !-)
Avatar billede xcover Nybegynder
01. maj 2008 - 15:53 #7
-> Roenving ;);)
Har du et bud på mit problem ?
Jeg kan da umuligt være det eneste som gerne vil have en side på 100% og samtidlig benytte overflow ;)
Avatar billede xcover Nybegynder
21. februar 2009 - 11:27 #8
Det kan bare ikke lade sig gøre med 100% brede og overflow åbenbart :)
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 09:50 Mobilpay svindel Af nu_igen i Andre onlineløsninger
22/0120:51 Knap til ipad Af FinnLauridsen i Excel
21/0113:53 Icloud mail via Outlook Af lbc i E-mail programmer
21/0108:32 USB NØGLE gratis Af nu_igen i Andet hardware
20/0121:11 Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP
White papers
Flere white papers »