Avatar billede amews_aj Nybegynder
19. juni 2005 - 23:13 Der er 19 kommentarer og
1 løsning

Tabel ovenpå div?

Jeg er ved at lave nyt design

www.pc-help.dk/forside.php

Men som i kan se går teksten ind over boksene med nyheder, hvordan undgår jeg det, koden er (forkortet) således:

<table align="center" border="0px" width="750px" cellspacing="0px" cellpadding="0px">
  <tr>
    <td style="height: 15px; background-image: url('http://www.pc-help.dk/pagelook/indhold_top.gif');">
    </td>
  </tr>
  <tr class="vertical">
    <td style="height: 550px; background-image: url('http://www.pc-help.dk/pagelook/indhold_midt.jpg');">
      <table border="0px" width="170px" align="right" cellspacing="0px" cellpadding="0px">
        <tr>
          <td>
            <table border="0px" width="174px" cellspacing="0px" cellpadding="0px">
              <tr>
                <td style="background-image: url('http://www.pc-help.dk/pagelook/nyheder.gif'); height: 180px;">
                </td>
              </tr>
              <tr>
                <td style="height: 53px; background-image: url('http://www.pc-help.dk/pagelook/banner.gif');">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    <div style="width:735px;overflow:hidden;">

///// TEKSTEN HER

    </div>
    </td>
  </tr>
  <tr>
    <td style="height: 26px; background-image: url('http://www.pc-help.dk/pagelook/indhold_bund.gif');"></td>
  </tr>
</table>
</body>
</html>
Avatar billede roenving Novice
20. juni 2005 - 01:16 #1
Du skal nok bruge en float:right; til din nyheds-ting i stedet !-)

<div id="minDiv" style="width:200px;">
  <div style="width:50px;float:right;background-color:red;">en kort tekst</div>
  <div style="background:blue;">
  Her er en tekst, somer adskilligt længere, men alligevel holder sig udenfor den div, som er defineret forud !-)</div>

En div-tekst</div>

PS. Det kræver nok, at du bruger en korrekt doctype inklusive dtd-link, f.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede amews_aj Nybegynder
20. juni 2005 - 18:02 #2
Jeg har et doctype inde, kan du ikke sætte det ind i koden, kan ikke helt se hvordan det skal være!
Avatar billede amews_aj Nybegynder
20. juni 2005 - 18:16 #3
Ok, jeg fik den sat ind, men nu opstod et nyt problem så!!

den lange række med aaaaa  (kunne være et lang link) skal forvinde bag boksene og ikke rykke sig ned under dem!
Avatar billede roenving Novice
20. juni 2005 - 18:17 #4
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Pc-Help - Just Ask!</title>
</head>
<body>

<div style="width:750px;margin:0 auto;height:15px;background:url(http://www.pc-help.dk/pagelook/indhold_top.gif);"></div

<div id="minDiv" style="width:750px;margin:0 auto;height:550px;background-image: url(http://www.pc-help.dk/pagelook/indhold_midt.jpg);">
  <div style="width:174px;float:right;height:223px;">
    <div style="background-image: url(http://www.pc-help.dk/pagelook/nyheder.gif); height: 180px;"></div>
    <div style="height: 53px; background-image: url(http://www.pc-help.dk/pagelook/banner.gif);"></div>
  </div>
  <div style="background:blue;">
  Her er en tekst, somer adskilligt længere, men alligevel holder sig udenfor den div, som er defineret forud !-)</div>

</div>

<div style="height: 26px; background-image: url(http://www.pc-help.dk/pagelook/indhold_bund.gif);"></div>

</body>
</html>
Avatar billede amews_aj Nybegynder
20. juni 2005 - 18:21 #5
Ok, jeg fik den sat ind, men nu opstod et nyt problem så!!

1. den lange række med aaaaa  (kunne være et lang link) skal forvinde bag boksene og ikke rykke sig ned under dem!

2. Hvordan får jeg "tekst" op at stå for oven i stedet for midt i?
Avatar billede roenving Novice
20. juni 2005 - 18:25 #6
1. Du kan ikke både have teksten til at gå udenom og bagved i særlige tilfælde, skær den i stykker !-)

2. Fjerner alle dine overflødige tabeller, som jeg har illustreret det !-)
Avatar billede amews_aj Nybegynder
20. juni 2005 - 18:27 #7
ok det ser lidt dumt ud :P
Avatar billede amews_aj Nybegynder
20. juni 2005 - 18:34 #8
Vil du lave siden om til divs?

Hvis du får hele koden, jeg er ikke god til at arbejde i div
Avatar billede amews_aj Nybegynder
20. juni 2005 - 18:37 #9
Her er min kode som den er nu, vil du foretrække at lave om til divs? KAn du hjælpe mig lidt?

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

<html>
<head>

    <title>Pc-Help - Just Ask!</title>

    <link rel="stylesheet" type="text/css" href="http://www.pc-help.dk/style.css">
    <link rel="SHORTCUT ICON" href="http://pc-help.dk/favicon.ico">

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="description" content="Pc-Help hjælper dig med din hjemmeside og din computer">
    <meta name="keywords" content="pc-help, pchelp, help, hjælp, hjemmeside, pc, community, forum, mail, anders">
    <meta name="title" content="Pc-Help - Just Ask!">
    <meta name="language" content="dan">
    <META NAME="Robots" CONTENT="ALL">
    <META NAME="Revisit-after" CONTENT="20">
    <META NAME="Author" CONTENT="Anders Jensen">
    <META NAME="Copyright" CONTENT="Pc-Help.dk, 2005 - All rights reserved.">
    <META NAME="DC.Creator" CONTENT="Anders Jensen">
    <META NAME="DC.Rights" CONTENT="Pc-Help.dk, 2005 - All rights reserved.">
    <META NAME="DC.Identifier" CONTENT="http://www.pc-help.dk">
    <META NAME="DC.Publisher" CONTENT="Anders Jensen">
   
    <script language="javascript" type="text/javascript">
        function statuslinjetekst() {
        window.status="Pc-Help.dk - Just Ask!";
        return true;
        }
    </script>

</head>

<body onload="statuslinjetekst();">

<table align="center" border="0px" width="750px" cellspacing="0px" cellpadding="0px">
  <tr>
    <td style="background-image: url('http://www.pc-help.dk/pagelook/login_top.gif'); height: 45px;">
    </td>
  </tr>
  <tr>
    <td style="height: 168px; background-image: url('http://www.pc-help.dk/pagelook/logo.gif');">
    </td>
  </tr>
  <tr>
    <td style="height: 40px; background-image: url('http://www.pc-help.dk/pagelook/menu.gif');">
    </td>
  </tr>
</table>
<br>
<table align="center" border="0px" width="750px" cellspacing="0px" cellpadding="0px">
  <tr>
    <td style="height: 15px; background-image: url('http://www.pc-help.dk/pagelook/indhold_top.gif');">
    </td>
  </tr>
  <tr>
    <td style="height: 550px; background-image: url('http://www.pc-help.dk/pagelook/indhold_midt.jpg');">
   
    <div style="width:750px;overflow:hidden;">
   
    <div style="width:170px;float:right;">
          <table border="0px" width="170px" align="right" cellspacing="0px" cellpadding="0px">
        <tr class="vertical">
          <td>
            <table border="0px" width="174px" cellspacing="0px" cellpadding="0px">
              <tr>
                <td valign="top" style="background-image: url('http://www.pc-help.dk/pagelook/nyheder.gif'); height: 180px;"><p><font>hejhej<br>tekst</font></p>
                </td>
              </tr>
              <tr>
                <td style="height: 53px; background-image: url('http://www.pc-help.dk/pagelook/banner.gif');">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>

Tekst her

    </div>
    </td>
  </tr>
  <tr>
    <td style="height: 26px; background-image: url('http://www.pc-help.dk/pagelook/indhold_bund.gif');"></td>
  </tr>
</table>
</body>
</html>
Avatar billede amews_aj Nybegynder
20. juni 2005 - 18:42 #10
Nej ved du hvad, jeg vil et andet tidspunkt begynde på at arbejde i divs, lære det selv, smid et svar, du har løst det jeg bad om fra starten! :D
Avatar billede roenving Novice
20. juni 2005 - 18:59 #11
Efter div-transformeringen ender det med kun 22 linjer for hele body-tagget:

<body onload="statuslinjetekst();">
<div style="border:0;width:750px;margin:0 auto;">
  <div style="background-image: url('http://www.pc-help.dk/pagelook/login_top.gif'); height: 45px;"></div>
  <div style="height: 168px; background-image: url('http://www.pc-help.dk/pagelook/logo.gif');"></div>
  <div style="height: 40px; background-image: url('http://www.pc-help.dk/pagelook/menu.gif');"></div>
<br>
  <div style="height:15px;background:url(http://www.pc-help.dk/pagelook/indhold_top.gif);"></div>

  <div id="minDiv" style="height:550px;background-image: url(http://www.pc-help.dk/pagelook/indhold_midt.jpg);">
    <div style="width:174px;float:right;height:223px;">
      <div style="background-image: url(http://www.pc-help.dk/pagelook/nyheder.gif); height: 180px;"></div>
      <div style="height: 53px; background-image: url(http://www.pc-help.dk/pagelook/banner.gif);"></div>
    </div>
    <div style="background:blue;">
  Her er en tekst, som er adskilligt længere, men alligevel holder sig udenfor den div, som er defineret forud !-)</div>

</div>

<div style="height: 26px; background-image: url(http://www.pc-help.dk/pagelook/indhold_bund.gif);"></div>
</div>

</body>
Avatar billede amews_aj Nybegynder
20. juni 2005 - 20:08 #12
ikke helt godt, diven udvider sig, og det er ikke centreret, den øverste div ved indholdet er for høj, kan du hjælpe?
Avatar billede roenving Novice
20. juni 2005 - 20:20 #13
Den kunne jeg ikke se umiddelbart, men der må være noget i din css-fil, som gør at IE ikke fortolker det korrekt, for med en fuldt kvalificeret doctype skulle der ikke være nogle problemer !-)

For at sikre en korrekt visning skal du i stylesheetet også tilføje:

html,body{height:100%;margin:0px;border:0px;padding:0px;}

-- og så skal du tilføje en overflow:hidden|show|auto; alt efter om du ikke vil have scrollbar, altid have den eller automatisk have den sat på elementet, hvis indholdet er for stort !o]
Avatar billede amews_aj Nybegynder
20. juni 2005 - 20:47 #14
jeg vil slet ikke have scrollbar i mine divs
Avatar billede amews_aj Nybegynder
20. juni 2005 - 20:49 #15
har prøvet at fjerne stylesheet det virker ik!
Avatar billede amews_aj Nybegynder
20. juni 2005 - 21:21 #16
Jeg går tilbage til tabeller igen, jeg må øve mig lidt i divs til fremtiden!

Smid et svar!
Avatar billede amews_aj Nybegynder
21. juni 2005 - 00:06 #17
smider du et svar?
Avatar billede roenving Novice
21. juni 2005 - 10:00 #18
Oki, igår tog jeg mig ikke tid til at teste det ved at indsætte din tekst i min kode, men det fungerer perfekt, men jeg fik underlige resultater i første omgang, som blev rettet op, da jeg fjernede et p- og et font-tag, samt omhyggeligt indsatte nødvendige lukketags, så således skulle det gerne fungere i de mest gængse browsere (95% + !-)

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

<html>
<head>

    <title>Pc-Help - Just Ask!</title>

    <link rel="stylesheet" type="text/css" href="http://www.pc-help.dk/style.css">
    <link rel="SHORTCUT ICON" href="http://pc-help.dk/favicon.ico">

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="description" content="Pc-Help hjælper dig med din hjemmeside og din computer">
    <meta name="keywords" content="pc-help, pchelp, help, hjælp, hjemmeside, pc, community, forum, mail, anders">
    <meta name="title" content="Pc-Help - Just Ask!">
    <meta name="language" content="dan">
    <META NAME="Robots" CONTENT="ALL">
    <META NAME="Revisit-after" CONTENT="20">
    <META NAME="Author" CONTENT="Anders Jensen">
    <META NAME="Copyright" CONTENT="Pc-Help.dk, 2005 - All rights reserved.">
    <META NAME="DC.Creator" CONTENT="Anders Jensen">
    <META NAME="DC.Rights" CONTENT="Pc-Help.dk, 2005 - All rights reserved.">
    <META NAME="DC.Identifier" CONTENT="http://www.pc-help.dk">
    <META NAME="DC.Publisher" CONTENT="Anders Jensen">
   
    <script language="javascript" type="text/javascript">
        function statuslinjetekst() {
        window.status="Pc-Help.dk - Just Ask!";
        return true;
        }
    </script>

</head>

<body onload="statuslinjetekst();">
<div style="border:0;width:750px;margin:0 auto;">
  <div style="background-image: url('http://www.pc-help.dk/pagelook/login_top.gif'); height: 45px;"></div>
  <div style="height: 168px; background-image: url('http://www.pc-help.dk/pagelook/logo.gif');"></div>
  <div style="height: 40px; background-image: url('http://www.pc-help.dk/pagelook/menu.gif');"></div>
<br>
  <div style="height:15px;background:url(http://www.pc-help.dk/pagelook/indhold_top.gif);"></div>

  <div id="minDiv" style="height:550px;background-image: url(http://www.pc-help.dk/pagelook/indhold_midt.jpg);">
    <div style="width:174px;float:right;height:223px;">
      <div style="background-image: url(http://www.pc-help.dk/pagelook/nyheder.gif); height: 180px;"></div>
      <div style="height: 53px; background-image: url(http://www.pc-help.dk/pagelook/banner.gif);"></div>
    </div>
    <div style="background:blue;">
Hej hej wsgja sdkgj ksd hgkjsf gjsdhf gjsdhf gkjfd kjjg shk gkshg jsdfh jkgs jdhgsk fdjhgkjf hgj sjf dhkgjsf dhgkjsf jsd kjsfkgsghsd hgkjsf kgjsfdh jsfd jsf kgjsf gjsf gjs <br><br>
Slut !<br><br><br><br><br>
asfasfjahsgfja sjf agsjf gajsf gajshf jashgfjhagsfhs fa faf ahg fj jfah fjgfsjshjshg fg jhfgjsajhgsjshfjahfjshfjjhjhgjashfdfsa df sdf hdsfh h fg hf hdf hfgh fdh df hdf hdfh df hdf hfd h
fd hfgdgh ffg hdf hdf hfgh gh fgh f  f  hg f gh fgh fgh fgh fgh fgh fgh fghgh fgh gh fghfg hf gh fgh fg hfg hghasfasfjahsgfja sjf agsjf gajsf gajshf jashgfjhagsfhs fa faf ahg fj jfah fjgfsjshjshg fg jhfgjsajhgsjshfjahfjshfjjhjhgjashfdfsa df sdf hdsfh h fg hf hdf hfgh fdh df hdf hdfh df hdf hfd h
fd hfgdgh ffg hdf hdf hfgh gh fgh f  f  hg f gh fgh fgh fgh fgh fgh fgh fghgh fgh gh fghfg hf gh fgh fg hfg hgh fgh fgh fgh asfasfjahsgfja sjf agsjf gajsf gajshf jashgfjhagsfhs fa faf ahg fj jfah fjgfsjshjshg fg jhfgjsajhgsjshfjahfjshfjjhjhgjashfdfsa df sdf hdsfh h fg hf hdf hfgh fdh df hdf hdfh df hdf hfd hfd hfgdgh ffg hdf hdf hfgh gh fgh f  f  fd hfgdgh ffg hdf hdf hfgh gh fgh f  f</div>

  </div>

  <div style="height: 26px; background-image: url(http://www.pc-help.dk/pagelook/indhold_bund.gif);"></div>
</div>

</body>
</html>

-- els velbekomme '-)
Avatar billede amews_aj Nybegynder
21. juni 2005 - 11:06 #19
Stadig lidt problemer ved indhold øverst, den bliver for høj, men tak for din hjælp! HAr det også sådan lidt, at man ikke skal have alt for meget man ikke selv kan finde ud af på sin side, så jeg vil læse lidt om divs, og bruge det senere hen, men tak for det med boksene!

Her er dine point!
Avatar billede roenving Novice
21. juni 2005 - 11:08 #20
-- jamen da, mange tak for dem !-)
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