Avatar billede Slettet bruger
24. maj 2006 - 12:11 Der er 21 kommentarer og
1 løsning

2 div'er - samme størrelse uanset indhold

Jeg har denne side:
http://test.tkdc.dk/

Hvordan får jeg de stiplede linier i kanten af menuen til at følge længden af indholdet?
Avatar billede tdafoobar Nybegynder
24. maj 2006 - 12:14 #1
hvilke stiplede linjer ? (Firefox her)
Avatar billede tdafoobar Nybegynder
24. maj 2006 - 12:14 #2
Og hvis de skal være samme størrelse skal du bruge javascript, ved at roenving engang har skrevet et script til formålet.
Avatar billede Slettet bruger
24. maj 2006 - 12:49 #3
Hmmm... er ikke nået så langt som til at teste i Firefox endnu, men kan godt se det ser helt vanvittigt ud.

Har altid troet at hvis siden kunne validere via W3C.org, at så var man godt på vej i forhold til at siden kunne ses i flere browsere, selvfølgelig stadigvæk med skønhedsfejl.

---

Ved at det også er muligt at lave det jeg gerne vil, vil tabeller, men tror nu også det kan laves i css uden alt for mange sværdslag.

Venter på mere indput.
Avatar billede Slettet bruger
24. maj 2006 - 13:29 #4
Kan man ikke bruge height: 100% Til det?
Avatar billede mclemens Nybegynder
24. maj 2006 - 13:44 #5
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>$title</title>
 
   
     
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body{margin:0px;padding:0px;}

body {
        background: #fff;
        color: #000;
}

#content {
        position:relative;
        width:700px;
        margin:0px auto;
        border: 1px solid #000;
        background: #6D7587;
        color: #fff;
    margin-top: 15px;
}
   


#menu {
        width: 137px;
    float: left;
        border-right: 1px dashed #93A1AA;
        border-left: 1px dashed #93A1AA;
    padding: 12px 0px 0px 7px;
    margin-left: 10px;
}

#indhold {
    float: right;
        width: 470px;
    margin-top: 10px;
    margin-right: 20px;
}



.menutekst a{
    text-decoration: none;     
    font: bold 10px Verdana, Arial, Helvetica, sans-serif;
        color: #ffffff;
    line-height: 14px;
}


.menutekst a:hover{
    text-decoration: underline;
}

.broedtekst {
    font: 10px Verdana, Arial, Helvetica, sans-serif;
}

.clearit{font-size:0px;height:0px;line-height:0px;clear:both;}
</style>

</head><body>

      <div id="content">
        <div id="menu" class="menutekst">
          <a href="http://test.tkdc.dk/sider/test.php">Menupunkt1</a><br>
          <a href="http://test.tkdc.dk/sider/test.php">Menupunkt2</a><br>
          <a href="http://test.tkdc.dk/sider/test.php">Menupunkt3</a><br>
          <a href="http://test.tkdc.dk/sider/test.php">Menupunkt4</a><br>
          <a href="http://test.tkdc.dk/sider/test.php">Menupunkt5</a><br>
          <a href="http://test.tkdc.dk/sider/test.php">Menupunkt6</a><br>
        </div>

        <div id="indhold">
          <span class="broedtekst">
            His<br>His<br>His<br>His<br>His<br>His<br>His<br>His<br>His<br>His<br>His<br>His<br>
            <br>
          </span>
        </div>

<div class="clearit">&nbsp;</div>

      </div>
    </body></html>
Avatar billede tdafoobar Nybegynder
24. maj 2006 - 13:46 #6
[Har altid troet at hvis siden kunne validere via W3C.org, at så var man godt på vej i forhold til at siden kunne ses i flere browsere, selvfølgelig stadigvæk med skønhedsfejl.]

Genneral misforståelse, w3c fortæller dig bare syntaxfejl. Den nemmest måde er simpelhen at kode det i Firefox først, optimere til IE bagefter, og rette fejl i Opera til sidst.
Avatar billede Slettet bruger
24. maj 2006 - 13:49 #7
mclemens...> ehm, det virker ikke?
Hvis jeg kopiere dit forslag over i en htm-fil og åbner den i IE eller Firefox, er fejlen stadigvæk den jeg har pointeret i spørgsmålet.
Avatar billede mclemens Nybegynder
24. maj 2006 - 13:53 #8
åh joh, hjalp kun på ff ... baggrund og stiplede linjer...
- tror der skal en js-aligner for at slå alignment igennem
når det nok ikke inden jeg skal ud af døren om lidt :D
Avatar billede mclemens Nybegynder
24. maj 2006 - 13:54 #9
åh joh, hjalp kun på ff ... (Edit: gjorde så baggrund og stiplede linjer... blev synlig i ff ... dog ikke 100% her heller...)
Avatar billede mclemens Nybegynder
24. maj 2006 - 13:58 #10
sådan?

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

<script type="text/javascript">
window.onload=function(){aligndiv();}

function aligndiv(){
d1=document.getElementById("menu");
d1y=d1.offsetHeight;
d2=document.getElementById("indhold");
d2y=d2.offsetHeight;
d1.style.height=(d1y>d2y)?d1y+"px":d2y+"px";
d2.style.height=(d1y>d2y)?d1y+"px":d2y+"px";
}

</script>
   
     
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body{margin:0px;padding:0px;}

body {
        background: #fff;
        color: #000;
}

#content {
        position:relative;
        width:700px;
        margin:0px auto;
        border: 1px solid #000;
        background: #6D7587;
        color: #fff;
    margin-top: 15px;
}
   


#menu {
        width: 137px;
    float: left;
        border-right: 1px dashed #93A1AA;
        border-left: 1px dashed #93A1AA;
    padding: 12px 0px 0px 7px;
    margin-left: 10px;
}

#indhold {
    float: right;
        width: 470px;
    margin-top: 10px;
    margin-right: 20px;
}



.menutekst a{
    text-decoration: none;     
    font: bold 10px Verdana, Arial, Helvetica, sans-serif;
        color: #ffffff;
    line-height: 14px;
}


.menutekst a:hover{
    text-decoration: underline;
}

.broedtekst {
    font: 10px Verdana, Arial, Helvetica, sans-serif;
}

.clearit{font-size:0px;height:0px;line-height:0px;clear:both;}
</style>

</head><body>

      <div id="content">
        <div id="menu" class="menutekst">
          <a href="http://test.tkdc.dk/sider/test.php">Menupunkt1</a><br>
          <a href="http://test.tkdc.dk/sider/test.php">Menupunkt2</a><br>
          <a href="http://test.tkdc.dk/sider/test.php">Menupunkt3</a><br>
          <a href="http://test.tkdc.dk/sider/test.php">Menupunkt4</a><br>
          <a href="http://test.tkdc.dk/sider/test.php">Menupunkt5</a><br>
          <a href="http://test.tkdc.dk/sider/test.php">Menupunkt6</a><br>
        </div>

        <div id="indhold">
          <span class="broedtekst">
            His<br>His<br>His<br>His<br>His<br>His<br>His<br>His<br>His<br>His<br>His<br>His<br>
            <br>
          </span>
        </div>

<div class="clearit">&nbsp;</div>

      </div>
    </body></html>
Avatar billede Slettet bruger
24. maj 2006 - 14:23 #11
mclemens...> Det virker som det skal nu. Dog har jeg stadigvæk lidt problemer med Firefox.

Har du tid til at hjælpe, jeg smider 30 ekstra point i.

Som du kan se, har jeg lavet en del mere på siden.
Avatar billede mclemens Nybegynder
24. maj 2006 - 17:55 #12
ok, kigger på den...
Avatar billede mclemens Nybegynder
24. maj 2006 - 18:23 #13
uhm, tyder på at IE er buggy her ... FF viser siden korrekt - IE accepterer åbenbart ikke en left floating med margin på ... den fordobler menuen's left margin ... kommer lige med 2 løsningsforslag... om et lille stykke tid...
Avatar billede mclemens Nybegynder
24. maj 2006 - 18:29 #14
ikke ideel...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
    <head>
      <title>$title</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

      <link href="css/main_layout.css" rel="stylesheet" type="text/css">
      <link href="css/main_style.css" rel="stylesheet" type="text/css">

      <script type="text/javascript">
        window.onload=function(){aligndiv();}

        function aligndiv()
          {
            d1=document.getElementById("menu");
            d1y=d1.offsetHeight;
            d2=document.getElementById("indhold");
            d2y=d2.offsetHeight;
            d1.style.height=(d1y>d2y)?d1y+"px":d2y+"px";
            d2.style.height=(d1y>d2y)?d1y+"px":d2y+"px";
          }
      </script>

    </head>

    <body>

      <div id="content">

        <div id="top_billede">
        </div>

        <div id="top_box">

          <div id="top_box_billede">
          </div>

          <div id="top_box_nyhed">
          </div>
        </div>

<div id="menuout">
        <div id="menu" class="menutekst">
          <a href="/sider/test.php">Hjem</a><br>

          <a href="/sider/test.php">Hvem er vi?</a><br>
          <a href="/sider/test.php">Hvor bor vi?</a><br>
          <a href="/sider/test.php">Arrangementer</a><br>
          <a href="/sider/test.php">Golfklub Alanya</a><br>
          <a href="/sider/test.php">Kontakt</a><br>
        </div>
</div>

<div id="indholdout">
        <div id="indhold">
          <span class="broedtekst">
            Mange danskere har k&oslash;bt lejlighed eller villa i Alanya og omegn i de seneste
            &aring;r. Flere og flere danskere opholder sig derfor her i en kortere eller l&aelig;ngere
            periode, eller er m&aring;ske ligefrem flyttet hertil permanent.<br>
            <br>
            Derfor er der behov for et m&oslash;dested for danskere med tilknytning til Alanya
            og omegn. Der er ligeledes behov for et sted hvor man kan koordinere og afholde
            f&aelig;lles dansk / tyrkiske aktiviteter.<br>

            <br>
            I DanClub kan danskere m&oslash;des og f&aring; en sludder om l&oslash;st og fast,
            eller m&aring;ske f&aring; hj&aelig;lp til at l&oslash;se nogle af de mange problemer,
            der kan opst&aring; n&aring;r man befinder sig i et fremmet land.<br>

            <br>
            Det er ogs&aring; et sted hvor man kan m&oslash;des og have det sjovt og hyggeligt
            omkring nogle f&aelig;lles aktiviteter.<br>
            <br>
            I klubben findes der et hyggeligt klublokale, en dejlig restaurant, swimmingpool
            og andre indend&oslash;rs og udend&oslash;rs faciliteter, som kan benyttes af
            medlemmerne.<br>
            <br>

            Kort sagt, i DanClub er der mulighed for at m&oslash;de andre danskere over en
            en kop kaffe, en drink eller et m&aring;ltid mad, og m&aring;ske deltage i nogle
            af de aktiviteter der l&oslash;bende bliver arrangeret.<br>
            <br>
            Velkommen i DanClub.<br>
            <br>
            ---<br>

            Mange danskere har k&oslash;bt lejlighed eller villa i Alanya og omegn i de seneste
            &aring;r. Flere og flere danskere opholder sig derfor her i en kortere eller l&aelig;ngere
            periode, eller er m&aring;ske ligefrem flyttet hertil permanent.<br>
            <br>
            Derfor er der behov for et m&oslash;dested for danskere med tilknytning til Alanya
            og omegn. Der er ligeledes behov for et sted hvor man kan koordinere og afholde
            f&aelig;lles dansk / tyrkiske aktiviteter.<br>
            <br>
            I DanClub kan danskere m&oslash;des og f&aring; en sludder om l&oslash;st og fast,
            eller m&aring;ske f&aring; hj&aelig;lp til at l&oslash;se nogle af de mange problemer,
            der kan opst&aring; n&aring;r man befinder sig i et fremmet land.<br>

            <br>
            Det er ogs&aring; et sted hvor man kan m&oslash;des og have det sjovt og hyggeligt
            omkring nogle f&aelig;lles aktiviteter.<br>
            <br>
            I klubben findes der et hyggeligt klublokale, en dejlig restaurant, swimmingpool
            og andre indend&oslash;rs og udend&oslash;rs faciliteter, som kan benyttes af
            medlemmerne.<br>
            <br>

            Kort sagt, i DanClub er der mulighed for at m&oslash;de andre danskere over en
            en kop kaffe, en drink eller et m&aring;ltid mad, og m&aring;ske deltage i nogle
            af de aktiviteter der l&oslash;bende bliver arrangeret.<br>
            <br>
            Velkommen i DanClub.<br>
            <br>

          </span>

        </div>
</div>

        <div class="clearit">
        </div>

      </div>

      <div id="bottom">
      </div>

    </body>

  </html>
Avatar billede Slettet bruger
24. maj 2006 - 18:30 #15
Her hos mig vises siden i IE som jeg gerne vil have, hvorimod FF viser siden forkert.
Avatar billede mclemens Nybegynder
24. maj 2006 - 18:30 #16
main_layout.css nedenunder (main_style.css samme som p.t.)


html,body {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        background-color: #ffffff;
        color: #000000;
}

#content {
        position:relative;
        width:700px;
        margin-left:auto;
        margin-right: auto;
        background-color: #6D7587;
        color: #ffffff;
        border-left: 1px solid #000000;
        border-right: 1px solid #000000;
    margin-top: 15px;
}

#top_billede {
        position: relative;
        overflow: hidden;
        width: 700px;
        height: 86px;
        background-color: #93A1AA;
        color: #ffffff;
        background-image: url(../grafik/top_billede.jpg);
    background-repeat: no-repeat;
}

#top_box {
        position: relative;
        overflow: hidden;
        width: 700px;
        height: 128px;
        background-color: #93A1AA;
        color: #ffffff;
}

#top_box_billede {
        position: relative;
        overflow: hidden;
    float: left;
        width: 487px;
        height: 126px;
    background-image: url(../grafik/top_box_billede.jpg);
}

#top_box_nyhed {
        position: relative;
        overflow: hidden;
    float: right;
        width: 212px;
        height: 126px;
        background-color: #6D7587;
        color: #ffffff;
}





#menuout{width:154px;float:left;}
#menu {
        position: relative;
        width: 137px;
    float: right;
        background-color: inherit;
        color: #ffffff;
        border-right: 1px dashed #93A1AA;
        border-left: 1px dashed #93A1AA;
    padding: 12px 0px 0px 7px;
}




#indholdout{width:490px;float:right}
#indhold {
        position: relative;
        overflow: hidden;
    float: left;
        width: 470px;
        background-color: inherit;
        color: #ffffff;
    margin-top: 10px;
}




.clearit {
    font-size: 0px;
        height: 0px;
    line-height: 0px;
    clear: both;
}

#bottom {
        position: relative;
        overflow: hidden;
        width: 700px;
    height: 15px;
        background-color: #ffffff;
        color: #000000;
        margin-left:auto;
        margin-right: auto;
}
Avatar billede mclemens Nybegynder
24. maj 2006 - 18:31 #17
kfisker, det var ff der buggede ved indholdets størrelse
og ie buggede ved afstanden fra menu til venstre spalte...
Avatar billede mclemens Nybegynder
24. maj 2006 - 18:34 #18
kigger lige på en anden model der matcher IE's visning istedet...
Avatar billede mclemens Nybegynder
24. maj 2006 - 18:38 #19
koden ovenstående html og css med denne css rettelse giver den visning der er i ie p.t. #indholdout{width:510px;float:right} <- Bemærk der er lavet 20 px mere i afstand til højre side da IE i det eksempel vi kiggede på doblede margin afstanden p.g.a. en float vs. margin bug åbenbart ...
Avatar billede mclemens Nybegynder
24. maj 2006 - 18:53 #20
eller prøv det du havde fra starten af og
ret blot disse to css afsnit... måske :P

#menu {
position:absolute;
left:10px;
        width: 137px;
        background-color: inherit;
        color: #ffffff;
        border-right: 1px dashed #93A1AA;
        border-left: 1px dashed #93A1AA;
    padding: 12px 0px 0px 7px;
}

#indhold {
margin-left: 170px;
        width: 470px;
        background-color: inherit;
        color: #ffffff;
    padding-top: 10px;
}
Avatar billede Slettet bruger
24. maj 2006 - 20:14 #21
Dit sidste forslag med:
padding: 10px 0px 0px 0px;
under #indhold

...fik det til at se ens ud i både IE og firefox.
60 fortjente point på vej.

Tusind tak for hjælpen.
Avatar billede mclemens Nybegynder
24. maj 2006 - 20:15 #22
- det var så lidt :)
og tak for point :)
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