CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede morten_soegaard Nybegynder
05. oktober 2005 - 18:02 Der er 36 kommentarer og
1 løsning

CSS og JavaScript til bestemelse af højde

Hej

Som overskriften siger ønsker jeg at bestemme højden udfra hvordan clietens opløsning og højde på browser vinduet.

Jeg har som mange andre problemet med at min højde skal være 100% i browser vinduet. Hvis jeg skriver det i css ændre den de øverste cellerns højde hvis man ser det i IE men i Firefox virker det.

Jeg har så ladet mig høre, at jeg skal gå efter en Script løsning som går ind og måler højden på "vinduet" og det resterende der skal til for at det er 100% lægges til i den rigtige celle.

Sitet kan ses på www.miniklub-mv.dk/nytsite

Html'en ser sådan ud og det er i cellen td_ffyld hvor det resterende skal lægges til:

<!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>Miniklub Midt-Vest</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>

<body>
    <table id="table_main" align="center" cellspacing="0" cellpadding="0">
        <tr>
            <td id="td_vside" rowspan="4">&nbsp;</td>
            <td colspan="3" id="td_banner">&nbsp;</td>
            <td id="td_hside" rowspan="4">&nbsp;</td>
        </tr>
        <tr>
            <td id="td_tmenu"></td>
            <td id="td_tfyld"></td>
            <td id="td_tnyhed">&nbsp;</td>
        </tr>
        <tr>
            <td id="td_fmenu"></td>
            <td id="td_ffyld"></td>
            <td id="td_fnyhed" valign="top"></td>
        </tr>
        <tr>
            <td id="td_bmenu">&nbsp;</td>
            <td id="td_bfyld">&nbsp;</td>
            <td id="td_bnyhed">&nbsp;</td>
        </tr>
    </table>

</body>
</html>


Håber i kan hjælpe mig med, hvad jeg skal gøre.


Morten
Avatar billede spindoktoren Nybegynder
05. oktober 2005 - 19:42 #1
Trin et: Brug div elements :) http://html.dk/artikler/00043/
Arj.. jeg tror problemet er, at du ikke laver #td_banner høj nok, derved udfyldes den oevrskydende plads med baggrundsfarven, hvis browseren er "for stor".. Du kan altid lave billedet for stort, og "forkorte" det i css, men det er måske en smule sølle.. En anden og nok bedre metode, er at sætte backgroun:#FAE704 url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/vb.jpg) top left no-repeat;
Så har du sat den til øverste venstre hjørne, så den ekstra plads ikke kommer ovenover, og erstattet det hvisde stykke med en nogenlunde habil baggrundsfarve.. Husk også lige at sætte højden til 113 i stedet ;)
Avatar billede spindoktoren Nybegynder
05. oktober 2005 - 19:44 #2
... For at være über striks, er <font> udgået... brug <span> i stedet :)
Avatar billede morten_soegaard Nybegynder
05. oktober 2005 - 22:31 #3
Jamen det tror jeg da er noget jeg vil arbejde med, at lave det om til div elements. Er det "nemt" nok at lave siden 100% i højden så?
Avatar billede morten_soegaard Nybegynder
05. oktober 2005 - 22:44 #4
Kunne du evt. kommet med et forslag til hvor mange og hvilke felter jeg skal dele det ind i ?
Avatar billede roenving Novice
05. oktober 2005 - 23:01 #5
Hrm, det ser nærmest ud til, at du skal bruge den slags metode, som f.eks. findes her: http://www.eksperten.dk/spm/497362 eller http://www.uniteit.dk/spm/19 ...
Avatar billede spindoktoren Nybegynder
09. oktober 2005 - 17:51 #6
Undskylder den lange ventetid...
Jeg ville foreslå at du delte det op, så du har:
<div id="container">
<div id="venstreskaktern"></div>
  <div id="main">
    <div id="logo"></div>
    <div id="fyld"></div>
    <div id="venstre_menu"></div>
    <div id="text"></div>
    <div id="højre_menu"></div>
  </div>
  <div id="højreskaktern">
</div>

Hvis du kan følge mig :) Fordelen med dette er at samtlige elementer kommer til at lægge sig op ad hinanden, så du ikke får nogle uønskede mellemrum...
Avatar billede morten_soegaard Nybegynder
10. oktober 2005 - 16:19 #7
Lidt kan jeg :)

Container og main er det bare nogle overordnede div's, hvad skal de justerer?
Avatar billede morten_soegaard Nybegynder
10. oktober 2005 - 17:34 #8
Jeg har været ved at lave css'en til det....

Det jeg er kommet frem til ser sådan her ud, jeg kan ikke få overflow til at virke... Den viser ikke alle stregerne...

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>mk-mv</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body, html {
height: 100%;
margin:0px;
}

#container {

   
}
#venstreskaktern {
    position:absolute;
    left:50%;
    top:0px;
    width:44px;
    height:10px;
    margin-left:-390px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/vb.jpg);
    background-repeat: repeat-y;
   
   

}
#main {

}
#logo {
    position:absolute;
    left:50%;
    top:0px;
    width:692px;
    height:113px;
    margin-left:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/banner_top.jpg);
    background-repeat: no-repeat;
   
}
#fyld {
    position:absolute;
    left:50%;
    top:113px;
    width:692px;
    height:28px;
    margin-left:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/thele.jpg);
    background-repeat: no-repeat;
    border-bottom: 1px solid #000000;
    overflow:hidden;
   
}
#venstre_menu {
    position:absolute;
    left:50%;
    top:141px;
    width:116px;
    margin-left:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/fmenu.jpg);
    background-repeat: repeat-y;
    border-right: 1px solid #000000;
   
}
#text {
    position:absolute;
    left:50%;
    top:141px;
    width:460px;
    margin-left:-230px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/ffyld.jpg);
    background-repeat: repeat-y;
   

}
#højre_menu {
    position:absolute;
    right:50%;
    top:141px;
    width:116px;
    margin-right:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/fmenu.jpg);
    background-repeat: repeat-y;
    border-left: 1px solid #000000;
   
}
#højreskaktern {
    position:absolute;
    right:50%;
    top:0px;
    width:44px;
    height:10px;
    margin-right:-390px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/hb.jpg);
    background-repeat: repeat-y;
   

}
</style>

</head>

<body>

<div id="container">
<div id="venstreskaktern"></div>
  <div id="main">
    <div id="logo"></div>
    <div id="fyld"></div>
    <div id="venstre_menu"></div>
    <div id="text"></div>
    <div id="højre_menu"></div>
  </div>
  <div id="højreskaktern">
</div>

</body>
</html>
Avatar billede morten_soegaard Nybegynder
10. oktober 2005 - 22:49 #9
Jeg er kommet lidt længere...

Jeg har nu næsten fået højden 100%, nu skal jeg bare ha gjort sådan at det øverste ikke er gennemsigtigt. Og at jeg som sagt kan se de streger jeg har lavet, er det ikke noget med overflow?


<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>mk-mv</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body, html {
height: 100%;
margin:0px;
}

#container {

}
#venstreskaktern {
    position:absolute;
    left:50%;
    top:0px;
    width:44px;
    margin-left:-390px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/vb.jpg);
    background-repeat: repeat-y;
    background-color: transparent;
    border-right: 1px solid #000000;
    height: 100%;
}
#main {

}
#logo {
    position:absolute;
    left:50%;
    top:0px;
    width:692px;
    height:113px;
    margin-left:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/banner_top.jpg);
    background-repeat: no-repeat;
    background-color: transparent;
}
#fyld {
    position:absolute;
    left:50%;
    top:113px;
    width:692px;
    height:28px;
    margin-left:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/thele.jpg);
    background-repeat: no-repeat;
    border-bottom: 1px solid #000000;
   
   
}
#venstre_menu {
    position:absolute;
    left:50%;
    top:141px;
    width:116px;
    margin-left:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/fmenu.jpg);
    background-repeat: repeat-y;
    border-right: 1px solid #000000;
    background-color: transparent;
    height: 100%;
    margin-top:-141px;
}
#text {
    position:absolute;
    left:50%;
    top:141px;
    width:460px;
    margin-left:-230px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/ffyld.jpg);
    background-repeat: repeat-y;
    background-color: transparent;
    height: 100%;
    margin-top:-141px;
}
#højre_menu {
    position:absolute;
    right:50%;
    top:141px;
    width:116px;
    margin-right:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/fmenu.jpg);
    background-repeat: repeat-y;
    border-left: 1px solid #000000;
    background-color: transparent;
    height:100%;
    margin-top:-141px;
   
}
#højreskaktern {
    position:absolute;
    right:50%;
    top:0px;
    width:44px;
    height: 100%;
    margin-right:-390px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/hb.jpg);
    background-repeat: repeat-y;
    background-color: transparent;
    border-left: 1px solid #000000;
}
</style>

</head>

<body>

<div id="container">
<div id="venstreskaktern"></div>
  <div id="main">
    <div id="logo"></div>
    <div id="fyld"></div>
    <div id="venstre_menu"></div>
    <div id="text"></div>
    <div id="højre_menu"></div>
  </div>
  <div id="højreskaktern">
</div>

</body>
</html>
Avatar billede spindoktoren Nybegynder
10. oktober 2005 - 23:22 #10
Ahh.. super smart.. Sad og bøvlede med det før, med denne løsning er langt smartere..
Her kommer div virkelig til sin ret. For nu kan du jo bare lave et nyt element hvor logoet og fyldet er, og "overskrive" baggrunden, så du får noget i retningen af:
...
#text {
    position:absolute;
    left:50%;
    top:141px;
    width:460px;
    margin-left:-230px;
}
...
#content {
    position:absolute;
    left:50%;
    width:692px;
    margin-left:-368px;
}

#logo {
    position:absolute;
    width:692px;
    height:113px;
    margin-left:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/banner_top.jpg);
    background-repeat: no-repeat;
}
#fyld {
    position:absolute;
    top:113px;
    width:692px;
    height:28px;
    margin-left:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/thele.jpg);
    background-repeat: no-repeat;
    border-bottom: 1px solid #000000;
}
</style>
...
<div id="container">
<div id="venstreskaktern"></div>
  <div id="main">
    <div id="venstre_menu"></div>
    <div id="text"><h1>Hepla</h1><p>Lorem ipsum dolor sit amet</p></div>
    <div id="højre_menu"></div>
  </div>
  <div id="højreskaktern">
    <div id="content">
        <div id="logo"></div>
        <div id="fyld"></div>
    </div>
</div>
...
Avatar billede morten_soegaard Nybegynder
11. oktober 2005 - 07:27 #11
Der kan man bare se :) Men jeg kan ikke rigtig få det du skrev til at virke..

Kan jeg få dig til at sammensætte det med det jeg havde før?
Avatar billede spindoktoren Nybegynder
11. oktober 2005 - 13:25 #12
Joda.. Jeg får det til noget i retningen af dette her.. Du skal måske lige sætte padding-top:141px ved højre og venstre menu... Men her er hvad jeg har fusket mig frem til:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>mk-mv</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body, html {
height: 100%;
margin:0px;
}

#container {

}
#venstreskaktern {
    position:absolute;
    left:50%;
    top:0px;
    width:44px;
    margin-left:-390px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/vb.jpg);
    background-repeat: repeat-y;
    background-color: transparent;
    border-right: 1px solid #000000;
    height: 100%;
}
#main {

}
#venstre_menu {
    position:absolute;
    left:50%;
    top:141px;
    width:116px;
    margin-left:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/fmenu.jpg);
    background-repeat: repeat-y;
    border-right: 1px solid #000000;
    background-color: transparent;
    height: 100%;
    margin-top:-141px;
}
#text {
    position:absolute;
    left:50%;
    top:141px;
    width:460px;
    margin-left:-230px;
}
#højre_menu {
    position:absolute;
    right:50%;
    top:141px;
    width:116px;
    margin-right:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/fmenu.jpg);
    background-repeat: repeat-y;
    border-left: 1px solid #000000;
    background-color: transparent;
    height:100%;
    margin-top:-141px;
 
}
#højreskaktern {
    position:absolute;
    right:50%;
    top:0px;
    width:44px;
    height: 100%;
    margin-right:-390px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/hb.jpg);
    background-repeat: repeat-y;
    background-color: transparent;
    border-left: 1px solid #000000;
}
#content {
    position:absolute;
    left:50%;
    width:692px;
    margin-left:-368px;
}

#logo {
    position:absolute;
    width:692px;
    height:113px;
    margin-left:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/banner_top.jpg);
    background-repeat: no-repeat;
}
#fyld {
    position:absolute;
    top:113px;
    width:692px;
    height:28px;
    margin-left:-346px;
    background-image: url(http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/thele.jpg);
    background-repeat: no-repeat;
    border-bottom: 1px solid #000000;
}
</style>

</head>

<body>

<div id="container">
<div id="venstreskaktern"></div>
  <div id="main">
    <div id="venstre_menu"></div>
    <div id="text"><h1>Hepla</h1><p>Lorem ipsum dolor sit amet</p></div>
    <div id="højre_menu"></div>
  </div>
  <div id="højreskaktern">
    <div id="content">
        <div id="logo"></div>
        <div id="fyld"></div>
    </div>
</div>

</body>
</html>
Avatar billede morten_soegaard Nybegynder
11. oktober 2005 - 15:42 #13
Det er fandeme godt... Nu virker det jo.

Men lige en lille ting til sidst. Til højre fra skakternene i venstre side, kan man ikke se den lodrette streg, tror den bliver overdækket af noget andet?
Avatar billede spindoktoren Nybegynder
11. oktober 2005 - 15:52 #14
Ja rigtigt nok.. Men hvis du sætter #venstre_menu's margin-left til at være en mindre, kommer menuen til at skride ud over #fyld's lodrette linie...
Måske skulle du overveje at gøre baggrundsbilledet til #fyld en px større :)
ja.. Div er smart - når man kan finde ud af at bruge det vel at mærke.. :)
Avatar billede morten_soegaard Nybegynder
12. oktober 2005 - 07:27 #15
Ja men hvis du prøver at opdaterer browseren kan man ligesom fornemme, at stregen er der og at den bare bliver dækket pga. noget andet?!
Avatar billede spindoktoren Nybegynder
12. oktober 2005 - 15:53 #16
Det er fordi du har sat #venstre_menu for langt til venstre, så den bliver overlappet af #venstreskaktern... Prøv at sætte:
#venstre_menu {
  margin-left:-345px;
}
Avatar billede morten_soegaard Nybegynder
12. oktober 2005 - 16:07 #17
Det dur heller ikke for så rykker den hele menuen til højre.

Men det virker ellers rigtig godt nu. Se selv www.miniklub-mv.dk/nytsite
Avatar billede morten_soegaard Nybegynder
12. oktober 2005 - 16:13 #18
Eller når jeg lige kommer til at se efter virker det vist ikke helt som det skal :)

Vi du ser på højden når der er noget indhold på siden så følger stregerne ikke med...
Avatar billede morten_soegaard Nybegynder
12. oktober 2005 - 16:22 #19
Der er vist også noget galt med bredderne... Hvis man ser på højre skaktern, går de vist ind over højre menu?
Avatar billede spindoktoren Nybegynder
12. oktober 2005 - 18:12 #20
Ja ok det er lige en biting.. Hvad nu hvis man tager et screenshot af det hele, og smider hele siden ind som baggrund, der gentages lodret, på #content?.. Så kan du bare smide logoet osv ind over?... Håber ikke det lbiver for bøvlet.. Du må undskylde at jeg formentlig ikke er det største orakel inden for CSS ;)...
Kan ikke se om der er noget galt med højre menu?.. hverken i firefox eller IE..
Avatar billede olebole Juniormester
12. oktober 2005 - 19:28 #21
<ole>

Hvis man lærer om webkodning på html.dk, spænder man godt nok også ben for sig selv!  :)

Det er godt nok mere end vanskeligt at finde gode tutorials om HTML, CSS, DOM og JS - men til gengæld kan man være sikker på, ikke at finde dem væsentligt dårligere end html.dk. End ikke w3cschools.com - som jo også er fyldt med fejl, udeladelser og misforståelser - er dårligere.

Prøv at checke roenvings links (05/10-2005 23:01:28). De er nok tæt på det bedste bud, du kan finde til en løsning  ;o)

/mvh
</bole>
Avatar billede morten_soegaard Nybegynder
12. oktober 2005 - 22:34 #22
Det kunne man jo selvfølgelig... Dvs. at jeg laver sådan set en div som baggrund hvor skakternene + menu + fyld + menu + skakternene er i et billede?
Avatar billede spindoktoren Nybegynder
12. oktober 2005 - 22:45 #23
Man skal ikke kimse af HTML.dk :) Det er faktisk en glimrende vejledning, men nok mest til nybegyndere... - Og det gode ved html er, at man næsten altid opdager fejlene hvis der skulle være nogen...

lige præcis morten... Mit forslag ville være at sætte ind på #content, og så lave en div inde i #content, der bare har de 44px mindre i margin-left og margin-right, og indeholder alle de andre divs, bare uden baggrund...... Selvfølgelig med undtagelse af logoet od #fyld...
Avatar billede olebole Juniormester
13. oktober 2005 - 00:29 #24
Jeg kimser skam ikke af noget, men siger tingene, som de er  :)
html.dk's artikler og tutorials er fyldt med fejl - og rigtig mange af de spørgsmål, der oprettes i (D)HTML- og JavaScript-kategorierne har deres udspring i de fejl.

Et glimrende eksempel er deres XHTML-tutorial. Efter at have læst den er man langt fra i stand til at lave et fungerende XHTML-dokument. I stedet laver man et dårligt HTML-dokument, fyldt med fejl.
Det må vel siges at ligge langt fra formålet med en tutorial ... så langt fra, som muligt  :)

Ikke mindst, når man skriver tutorials for begyndere, er det ekstremt vigtigt, de ikke er fyldt med fejl. De kan jo ikke selv gennemskue, hvad der er rigtigt og forkert - som en kompetent koder kan
Avatar billede morten_soegaard Nybegynder
13. oktober 2005 - 07:39 #25
Kunne jeg egentlig ikke også gøre det ret simpelt. Blot ved at sætte venstre og højremenu margin-top til 0px og så lave en ny div som indeholder menuernes indhold?
Avatar billede spindoktoren Nybegynder
13. oktober 2005 - 14:42 #26
Må indrømme jeg ikke lige har læst om xhtml... Men du har ret i, at det er godt de er fejlfri, men jeg syntes stadig jeg har lært meget af dem.. Learning by doing når man gør noget forkert er heller ikke uden værdi :)
lige præcis det jeg mente :).. det kommer til at være noget i retningen af dette:

<div id="container">
<!-- evt. <div id="wrapper"> hvor margin left og right = 44px -->
  <div id="logo"></div>
  <div id="fyld"></div>
  <div id="main>
    <div id="venstre_menu"></div>
    <div id="text"></div>
    <div id="højre_menu"></div>
  </div>
<!-- </div> -->
</div>
Avatar billede morten_soegaard Nybegynder
13. oktober 2005 - 15:48 #27
Ja, men burde det ikke kunne lade sig gøre ved at lave venstre og højre menu + tekst oprådet ligesom skatflagene altså starter fra toppen og hele vejen ned. Har forsøgt lidt men roder vist lidt rundt i det. Men går det ind og forhindre når man bruger padding-top så?
Avatar billede spindoktoren Nybegynder
14. oktober 2005 - 11:57 #28
Altså jeg er ikke helt sikker på hvad du mener, men mit forslag var, at du satt en baggrund af venstreskaktern + venstremenu + tekst + højremenu + højreskaktern til at være baggrund for hele siden(#container) og sætte logoet(#logo), fyldet(#fyld), teksten og menuerne (#main - #venstre- og #højremenu + #text) ind oven på #container. Så har du en baggrund i #container, der kører hele vejen ned, og altid følger #main's højde.
så....:
#container {
  width:(bredden af hele_sidens_baggrund.jpg)
  bagground: url(..../hele_sidens_baggrund.jpg) top left repeat-y;
}
mens #wrapper { margin-left:bredden af skaktern t.v.; margin-right:bredden af skaktern t.h.;
Avatar billede morten_soegaard Nybegynder
18. oktober 2005 - 07:24 #29
Okay. Tror ikke helt jeg forstår princippet med #wrapper

Jeg har ikke givet op. Har bare ikke haft meget tid de sidste par dage.
Avatar billede spindoktoren Nybegynder
18. oktober 2005 - 13:38 #30
God ånd! :) - Skal nok prøve at forklare mig ordentligt...
Mit princip er, at du har den yderste div: #container med hele baggrunden (skaktern, menu osv.) som baggrund for _hele_ siden.. Inde i #container har du så #wrapper, der indeholder logoet, fyldet og main (med menuer og tekst). Grunden til, at #wrapper har margin-left og margin-right sat til 44px, er at de tidl. baggrunde for venstre- og højre_skakter, havde en bredde på 44px. Og #wrapper indeholder jo "indholdet", og det skal helst ikke flyde ud i skakternene... SÅ hvis jeg prøver at tegne det :)

  _____________________
|  *| #wrapper  |*    |
|  *|  Logo    |*    |
|  *|___fyld____|*    |
|  *|  menu+  |*    |
|  *|  tekst  |*    |
|___*|_/wrapper__|*____|

Så du yderst har #container, der indeholder hele siden, med en centreret baggrund. (* betyder skaktern :-) ).. Men inden i #container er #wrapper, med margin left og right sat til 44 px for at undgå at logoet, fyldt, menuerne og teksten skrives over skakternene(*)... :) Håber du er med nu ..
Avatar billede spindoktoren Nybegynder
18. oktober 2005 - 13:40 #31
Ok.. tegningen blev ikke lige som jeg havde forventet.. men de yderste kanter er #container, og de inderste er #wrapper
Avatar billede morten_soegaard Nybegynder
19. oktober 2005 - 16:34 #32
Hmm... Det bliver sku lidt rodet rundt det jeg er kommet frem til. Kan jeg få dig til at komme med oplæget? Alle mine menuer er flyttet rundt over det hele nu.

baggrundsfilen ligger på http://www.miniklub-mv.dk/nytsite/gfx/baggrunde/baggrundhele.jpg
Avatar billede morten_soegaard Nybegynder
19. oktober 2005 - 17:16 #33
Jeg tror måske jeg er ved at have den!
Avatar billede morten_soegaard Nybegynder
19. oktober 2005 - 17:28 #34
Nu har jeg den! Næsten!?!?!! Nu passer det med at de har samme højde i bunden. MEN, nu slutter det bare hvis indholdet bliver større end 100%
Avatar billede spindoktoren Nybegynder
20. oktober 2005 - 02:06 #35
Se.. Hele pointen med at lave en "global" baggrund, er netop at #text bliver positioned som relative, så baggrunden følger med højden. Hvis den, som nu, er sat til position:absolute; bliver det et uafhængigt element; dvs. et element der fx ikke har noget at gøre med dets parents baggrund... Jeg har prøvet at omskrive din css så alle elementerne bliver relative...:

html {
  height:100.1%;
}

body {
font-family: trebuchet ms;
font-size: 12px;
text-align:center;
}

#container {
    margin-top:-8px;
    width:780px;
    height:100%;
    background-image: url(http://www.miniklub-mv.dk/gfx/baggrunde/baggrundhele.jpg);
    background-repeat:repeat-y;
}

#wrapper {
  margin:0 44px;
}

#logo {
    width:692px;
    height:113px;
    background-image: url(http://www.miniklub-mv.dk/gfx/baggrunde/banner_top.jpg);
    background-repeat: no-repeat;

}

#fyld {
    width:692px;
    height:28px;
    background-image: url(http://www.miniklub-mv.dk/gfx/baggrunde/thele.jpg);
    background-repeat: no-repeat;
    border-bottom: 1px solid #000000;
}

#main {
}

#venstre_menu {
    float:left;
    width:116px;
}

#text {
    width:460px;
    margin:auto 116px;
}

#hoejre_menu {
    float:right;
    width:116px;
}

#arrangement {
    width:692px;
    height:28px;
}

.. Det er måske ikke så grundigt, men jeg er sikker på du kan tage over herfra :)...
Nå jo btw.. Du må ikke navngive et div element med de danske bogstaver æøå. Så kan css ikke identificere det .. Held og lykke med. Håber ikke jeg har forvirret dig for meget
Avatar billede morten_soegaard Nybegynder
27. oktober 2005 - 18:07 #36
Okay, har prøvet dit eksempel men det ser lidt underligt ud.

Hvad hvis man laver samme baggrund i et nyt div og lader dens højde være bestemt af indholdet i text, så flytter den vel baggrunden med ned?
Avatar billede morten_soegaard Nybegynder
02. januar 2007 - 22:39 #37
LUKKER
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 JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript 4 24/06/202422:50 26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript 6 04/06/202416:23 05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript 4 21/05/202417:19 22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript 2 05/05/202415:37 05/05/202416:25
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 18:09 Kan ikke fildele fra PC til PC Af gertLundberg i LAN/WAN
I går 17:33 Facebook kopier en tråd Af clausito i Sociale medier
I går 09:49 Indtogs sejlads : OL i Paris : Hvornår kom Danmark ? Af Ikke-ekspert i Fri debat
I går 03:28 Inkasso som privat? Af lekor adams i Fri debat
26/0723:51 Frossen cursor Af goglov i PC
White papers
Flere white papers »


Premium
Teaser billede
Nordjyske MapsPeople ruster op til opkøb af konkurrenter: "Vi vil vinde det her kapløb"
Læs mere »
Microsoft tager til genmæle: Vores licenspraksis skaber ikke unfair konkurrence
Færre unge studerende på landets it-uddannelser: "Vi afviser dem der, hvor de har lyst til at læse"
Overblik: Sådan forløb årets største databrud - mindst 165 organisationer ramt
Se alle »
Computerworld
Teaser billede
Elon Musk dropper CrowdStrike efter kæmpe nedbrud
Læs mere »
Med SearchGPT har verden fået en spritny søgemaskine: Kan den true Googles dominans?
Apples spritnye app til kodeord kommer til iOS 18: Sådan virker den
Apples folde-iPhone tager form: Her er planerne
Se alle »
CIO
Teaser billede
Så mange Microsoft-enheder blev ramt af gigantisk Crowdstrike-koks
Læs mere »
Telenor skrotter ældre it-system: Nyt system er en hyldevare
Derfor står Danske Bank foran en kæmpe AWS-transformation: Ellers skulle vi bygge en ny infrastruktur for at følge med
Microsoft kaster milliardbeløb efter nye tiltag til partnerprogrammet: Partnerne kan nu tjene endnu flere penge
Se alle »
Job & Karriere
Teaser billede
Efter 12 år er NNIT's hovedkvarter i Søborg nu ryddet og tomt - alle arbejder hjemme: "Det er med et vist vemod"
Læs mere »
Dansk top-profil trækker sig fra Microsoft: Skal være direktør i TDC Erhverv
KMD-direktør forlader selskabet: Det skal hun nu
IBM Danmark skifter ud i sin øverste ledelse - her er den nye direktion
Se alle »
White paper
Teaser billede
Sådan gør du: Elektronisk dokumentudveksling i praksis
Læs mere »
Vejen væk fra WAN: Sådan skifter du til en moderne infrastruktur
Få mere ud af din cloudinfrastruktur og gør op med de konstant stigende omkostninger
Det behøver ikke at gøre ondt: Sådan gør du livet lettere for kunder med multicloud
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »