Søg
Avatar billede ulfhedne Nybegynder
26. februar 2004 - 20:42 Der er 43 kommentarer og
5 løsninger

Flere baggrundsfarver uden brug af billeder

Er det muligt at have flere baggrundsfarver på en side udelukkende med brug af CSS? F.eks halvt af hver?
Avatar billede boris Mester
26. februar 2004 - 20:54 #1
Hvis siden har absolutte mål, kan du bruge et eller flere billeder som baggrund
Avatar billede ulfhedne Nybegynder
26. februar 2004 - 21:11 #2
Det skulle være uden billeder.
Avatar billede boris Mester
26. februar 2004 - 21:20 #3
Beklager, det stod der jo også i overskriften...
Avatar billede boris Mester
26. februar 2004 - 21:27 #4
Mit umiddelbare bud er, at du kan sætte baggrundsfarverne i <div> felter med position:absolute. På den måde kan du opdele skærmen ilige så mange områder som du vil med forskellig baggrundsfarve.
Til gengæld bliver du så også nødt til at lægge forgrundstingene ind med position:absolute
Avatar billede ulfhedne Nybegynder
26. februar 2004 - 21:35 #5
Ja, men mit problem er at jeg gerne vil have height 100% på min side og det kan Mozilla ikke rigtig finde ud af. Den gør det kun til bunden af skærm og hvis der så er noget ekstra tekst i div'en ovenpå så følger den bagerste ikke med.
Avatar billede boris Mester
26. februar 2004 - 21:44 #6
Evt kan du lave en ensartet baggrund som vises til den ene procent som ikke bruger IE, mod at du viser det perfekt for de 99 %?
Avatar billede boris Mester
26. februar 2004 - 21:46 #7
Der er selvfølgelig også den mulighed, at du opererer med flere forskellige sidehøjder afhængig af skærmstørrelsen, så du i virkeligheden har flere forskellige sider at vise frem, men besværligt er det da.
Avatar billede skovenborg Nybegynder
26. februar 2004 - 22:25 #8
den bedste mulighed jeg kender for at løse height problemmet i mozilla er at lave et lille trick IE ikke kan finde ud af.
Fx hvis du har denne her div med højden 100%:
<body>
<div id="stordiv">INDHOLD</div>
</body>
så vil dit stylesheet nok se sådan ud:
#stordiv {
    height:100%;
    width:600px;
    background-color:#f00;
    border:1px solid #000;
}
så tilføjer du bare det her lige efter:
BODY > #stordiv {
    height:auto;
    min-height:100%;
}

Det kræver at #stordiv er en direkte child af BODY - altså at den ikke ligger inde i et andet element. Men det kan nemt løses med at udskifte BODY med det element #stordiv ligger indeni.
Avatar billede ulfhedne Nybegynder
27. februar 2004 - 10:37 #9
boris >> det skulle gerne være udelukkende i CSS og fungere i alle browsere.
skovenborg >> mit problem er følgende - skal se om jeg kan stille det nogenlunde op:

Farve 1|Farve 2|Farve 3            |Farve 4
20x10px|30x10px|150x10px            |100%x10px
_______|_______|____________________|_______ . . .
Farve 5|Farve 6|Farve 7            |Farve 8
20x100%|30x100%|150x100%            |100%x100%
      |      |                    |
      |      |                    |
      |      |                    |
      .      .                    .
      .      .                    .   
      .      .                    .

Farverne 1-4 er en topbar og tegnene | og _ skal illustrere en farve også - altså en adskillelse. Farverne 5-8 skal fylde hele siden - altså 100% i height.

Jeg kan egentlig godt få det til at se nogenlunde ud, men lige så snart teksten i farve 7 området går ud over siden i bunden så følger divsne med farverne 5, 6 og 8 ikke med. Farve 8 har jeg dog sat til baggrundsfarven, så det går an.

Farverne 5, 6 og 7 har jeg lavet i en container. Dvs farve 5 udgør en border på 20px og borderen i højre side (med tegnet |) er så en 1px border. Farverne 6 og 7 er så henholdsvis to div elementer med float venstre og højre.

Jeg giver gerne max point til den som kan komme med en brugbar løsning i CSS.
Avatar billede ulfhedne Nybegynder
27. februar 2004 - 10:37 #10
Ja, Murphy havde så lige en finger med i spillet mht. til opstillingen. :o)
Avatar billede sbm Nybegynder
27. februar 2004 - 13:34 #11
Hvis dit eneste problem er m.h.t. højden af BODY i Mozilla, kan du omgå det med noget i denne stil:

html {  margin : 0px;
    height : 100%;
    width  : 100%;
}
body {    margin : 0px;
    height : 100%;
    width  : 100%;
}

Dette vil gøre at body også i Mozilla kører helt ned til bunden af dit vindue, og ikke nøjes med at smyge rundt om indholdet, som muligvis kun når halvvejs ned.
Avatar billede sbm Nybegynder
27. februar 2004 - 13:35 #12
Doh! width er selvfølgelig overflødig:

html {
    margin : 0px;
    height : 100%;
}
body {
    margin : 0px;
    height : 100%;
}
Avatar billede sbm Nybegynder
27. februar 2004 - 14:04 #13
Grrrr.... Følgende eksempel fungerer i Mozilla, Netscape 7 og Opera, men MSIE skal til en forandring være stædig... :-/

-------------------------------------------------------

<html>
<head>
<style type="text/css">
html {
    margin : 0px;
    height : 100%;
}
body {
    margin : 0px;
    height : 100%;
}
#baggrund {
    position: absolute;
    right    : 0px;
    top    : 0px;
    width    : 100%;
    height    : 100%;
}
#indhold {
    position: absolute;
    right    : 0px;
    top    : 0px;
    width    : 100%;
    height    : 100%;
}
</style>
</head>
<body>
<div id="baggrund">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
        <td width="20px" height="10px" bgcolor="#0000ff"></td>
        <td width="30px" height="10px" bgcolor="#00ffff"></td>
        <td width="150px" height="10px" bgcolor="#ff00ff"></td>
        <td height="10px" bgcolor="#00ff00"></td>
    </tr>
    <tr>
        <td bgcolor="#ff0000">&nbsp;</td>
        <td bgcolor="#ffff00">&nbsp;</td>
        <td bgcolor="#aaaaaa">&nbsp;</td>
        <td bgcolor="#ffffff">&nbsp;</td>
    </tr>
</div>
<div id="indhold">
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
</div>

</body>
</html>
Avatar billede sbm Nybegynder
27. februar 2004 - 14:32 #14
Så prøver vi sgu således istedet. Jeg kan få den til at fungere i Netscape 7, Mozilla, Opera og MSIE.


<html>
<head>
<style type="text/css">
html {
    margin : 0px;
    height : 100%;
}
body {
    margin : 0px;
    height : 100%;
}
#indhold {
    position: absolute;
    left    : 0px;
    top    : 0px;
    width    : 100%;
    height    : 100%;
}
#baggrund1 {
    position: absolute;
    left    : 0px;
    top    : 0px;
    width    : 100%;
    height    : 100%;
    background-color : #ffffff;
}
#baggrund2 {
    position: absolute;
    left    : 20px;
    top    : 0px;
    width    : 100%;
    height    : 100%;
    background-color : #777777;
}
#baggrund3 {
    position: absolute;
    left    : 50px;
    top    : 0px;
    width    : 100%;
    height    : 100%;
    background-color : #00ff00;
}
#baggrund4 {
    position: absolute;
    left    : 200px;
    top    : 0px;
    width    : 100%;
    height    : 100%;
    background-color : #00ffff;
}
#baggrund5 {
    position: absolute;
    left    : 0px;
    top    : 10px;
    width    : 100%;
    height    : 100%;
    background-color : #0000ff;
}
#baggrund6 {
    position: absolute;
    left    : 20px;
    top    : 10px;
    width    : 100%;
    height    : 100%;
    background-color : #aaaaaa;
}
#baggrund7 {
    position: absolute;
    left    : 50px;
    top    : 10px;
    width    : 100%;
    height    : 100%;
    background-color : #ff0000;
}
#baggrund8 {
    position: absolute;
    left    : 200px;
    top    : 10px;
    width    : 100%;
    height    : 100%;
    background-color : #ffff00;
}
</style>
</head>
<body>
<div id="baggrund1"></div>
<div id="baggrund2"></div>
<div id="baggrund3"></div>
<div id="baggrund4"></div>
<div id="baggrund5"></div>
<div id="baggrund6"></div>
<div id="baggrund7"></div>
<div id="baggrund8"></div>

<div id="indhold">
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
</div>

</body>
</html>
Avatar billede sbm Nybegynder
27. februar 2004 - 14:32 #15
...og som svar. :-)
Avatar billede sbm Nybegynder
27. februar 2004 - 14:34 #16
...hov. Opdager lige en uhensigtsmæssighed. Dokumentet får nu både horisontal og vertikal scrollbar....

Det kigger jeg lige på.
Avatar billede sbm Nybegynder
27. februar 2004 - 14:39 #17
...hmmm og hvis indholdet fylder mere end en enkelt side, stopper baggrundsfarven...

Jeg kigger videre på det engang i aften, hvis ikke en anden er kommet mig i forkøbet med en løsning.
Avatar billede ulfhedne Nybegynder
27. februar 2004 - 14:40 #18
Ja, det er ligesom også der jeg er gået fast. :o(
Avatar billede ulfhedne Nybegynder
27. februar 2004 - 14:49 #19
Har lige ændret til 200 point.
Avatar billede hermandsen Juniormester
27. februar 2004 - 14:49 #20
http://hermandsen.homepage.dk/exp/farver.html
Avatar billede hermandsen Juniormester
27. februar 2004 - 14:53 #21
Ups, der skulle lige tilføjes

body {
  padding: 0px;
  margin: 0px;
}

Det er gjort nu!!

Testet i Opera, IE 6 SP1 og Mozilla Firefox 0.8!
Avatar billede hermandsen Juniormester
27. februar 2004 - 14:54 #22
>>sbm
http://www.eksperten.dk/artikler/104
Tables er noget fy til design!! ;)
Avatar billede sbm Nybegynder
27. februar 2004 - 14:58 #23
hermandsen >> Det er jo kun baggrundsfarve for hulen da!

hermandsen >> To </body> tags er slet ikke korrekt HTML :-)

Har du i øvrigt testet hvordan den opfører sig hvis du fylder så meget brødtekst ind, at det fylder mere end en enkelt side?

Jeg er nødt til at løbe. Jeg er på igen i aften.
Avatar billede hermandsen Juniormester
27. februar 2004 - 15:01 #24
Hehe... Så godt de to body-tags... Det var en kikser!! ;)
Det ene skulle være en </div>, og det er rettet nu!!

Gik spørgsmålet ikke ud på at opdele siden med flere farver, ligesom jeg har gjort det der!?
Det var i hvert fald hvad jeg kunne konkludere ud fra kommentaren 27/02-2004 10:37:00!
Avatar billede skovenborg Nybegynder
27. februar 2004 - 15:20 #25
hermandsen >> Virker din ikke lidt mærkelig når der skal indhold i (har prøvet den i mozilla).

ulfhedne >> Jeg ved ikke om det hjælper så meget men prøv at se denne er artikel:
http://www.moronicbajebus.com/playground/cssplay/twocolumns/
Som du kan se er der to rækker, som ser ud til at følge hinanden. Tricket her var at lave et baggrundsbillede som var gentaget verticalt (repeat-y). På den måde får man følelsen af at rækkerne følger hinanden uden at bøvle med divs og tabeller.
Avatar billede hermandsen Juniormester
27. februar 2004 - 15:39 #26
Height kan vel sættes til auto, og så min-height til 100%.

Mener bare ikke at IE understøtter min-height (surprise)!
Avatar billede skovenborg Nybegynder
27. februar 2004 - 15:46 #27
hermandsen >> Prøv det trick jeg viste i starten med:
#divid {
  height:100%;
}
BODY > #divid {
  height:auto;
  min-height:100%;
}
Så vil IE kun tolke den med height:100% mens mozilla går videre og laver height om til auto og sætter min-height til 100%.
min-height i IE virker (i følge dem selv) kun på tabeller (mener det er cellerne du kan udstyre med min-height.
Avatar billede sbm Nybegynder
27. februar 2004 - 16:07 #28
Skovenborg >> Jeg er 99% sikker på at det ikke løser noget. Problemet er at få sat den korrekte højde på de forskellige DIV tags, og når de sættes til 100% følger de desværre ikke BODY height, men WINDOW height. :-(  Når der skal lægges to lag oven på hinanden, hvor den ene så naturligvis er baggrund, kommer vi ikke udenom nogle <div> eller <span> tags.

ulfhedge >> Problemet kan - så vidt jeg kan se - kun løses med grafik eller alternativt med javascript, som så kan bruges til at sætte elementernes højde.
Avatar billede skovenborg Nybegynder
27. februar 2004 - 16:14 #29
sbm >> Jo du har ret i at der skal være nogle divs. Men problemmet med teksten der går ud over et div-element kan netop løses med det ovenstående trick.

Linket viste jeg som et eksempel på hvordan det kan løses - teknikken er jo at droppe baggrundsfarverne og i stedet lave et baggrundsbillede med fx
20px rød - 30px blå og 150px grøn
og derefter sætte baggrundsfarven til på en holder til fx gul. På den måde kan du i din css skrive:
background:url("baggrund.jpg") #ff0 repeat-x left;
Avatar billede hermandsen Juniormester
27. februar 2004 - 16:16 #30
Eller:
Indbyg fire ekstra divs som alle har sat height til 100% og som ligger bag de fire indhold-divs. De fire der er indhold sættes bare til height: auto, og er indholdet så ikke langt nok, vil de bagved liggende udfylde resten... :)
Avatar billede sbm Nybegynder
27. februar 2004 - 16:17 #31
Ja, men manden har specifikt ønsket at få det lavet uden grafik. Med grafik er problemet "a piece of cake".

Højden er heller ikke noget problem m.h.t. tekst der fylder DIV tagget. Det er det ANDET div tag der er problemet > altså det med baggrundsfarverne. Det rummer ikke noget tekst.
Avatar billede sbm Nybegynder
27. februar 2004 - 16:19 #32
hermandsen >> Kom venligst med et konkret eksempel. Hvis du mener det jeg tror du mener, så hjælper det ikke. De klasker sammen til minimal højde.
Avatar billede boris Mester
27. februar 2004 - 16:28 #33
Dette opfylder ganske vist ikke kravet om at det skal være ren css, men det ser umiddelbart ud til at fungere (bare 3 <div> for at gøre det enkelt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>tæsd</title>
    <script>
    function maja()
    {
    hoejde = document.getElementById("div2").scrollHeight;
    document.getElementById("div1").style.height=hoejde;
    }
    </script>
</head>

<body onload="maja();">
<div style="position:absolute;top:0px;left:0px;width:500px;height:300px;background-color:red;" id="divtop">
Toptekst
</div>
<div style="position:absolute;top:300px;left:0px;width:300px;height:100;background-color:gold;" id="div1">

</div>
<div style="position:absolute;top:300px;left:0px;width:300px;height=200;" id="div2">
Synonym: Animalsex, sodomi Både mænd og kvinder kan tænde på sex med dyr. Modsat mange andre lande er dyresex ikke direkte ulovligt i Danmark, men man skal holde sig indenfor Dyreværnsloven. Det er svært at sige præcis, hvad der får folk til at dyrke sex med dyr. Men et eksempel kunne være en mand, der har svært ved at få sex på andre måder, der en dag falder for fristelsen til fx at være sammen med en gris. Eller en kvinde, der synes det er dejligt, at blive slikket af en hund. Uddrag af Dyreværnsloven kapitel 1:
Synonym: Animalsex, sodomi Både mænd og kvinder kan tænde på sex med dyr. Modsat mange andre lande er dyresex ikke direkte ulovligt i Danmark, men man skal holde sig indenfor Dyreværnsloven. Det er svært at sige præcis, hvad der får folk til at dyrke sex med dyr. Men et eksempel kunne være en mand, der har svært ved at få sex på andre måder, der en dag falder for fristelsen til fx at være sammen med en gris. Eller en kvinde, der synes det er dejligt, at blive slikket af en hund. Uddrag af Dyreværnsloven kapitel 1:
Synonym: Animalsex, sodomi Både mænd og kvinder kan tænde på sex med dyr. Modsat mange andre lande er dyresex ikke direkte ulovligt i Danmark, men man skal holde sig indenfor Dyreværnsloven. Det er svært at sige præcis, hvad der får folk til at dyrke sex med dyr. Men et eksempel kunne være en mand, der har svært ved at få sex på andre måder, der en dag falder for fristelsen til fx at være sammen med en gris. Eller en kvinde, der synes det er dejligt, at blive slikket af en hund. Uddrag af Dyreværnsloven kapitel 1:
Synonym: Animalsex, sodomi Både mænd og kvinder kan tænde på sex med dyr. Modsat mange andre lande er dyresex ikke direkte ulovligt i Danmark, men man skal holde sig indenfor Dyreværnsloven. Det er svært at sige præcis, hvad der får folk til at dyrke sex med dyr. Men et eksempel kunne være en mand, der har svært ved at få sex på andre måder, der en dag falder for fristelsen til fx at være sammen med en gris. Eller en kvinde, der synes det er dejligt, at blive slikket af en hund. Uddrag af Dyreværnsloven kapitel 1:
Synonym: Animalsex, sodomi Både mænd og kvinder kan tænde på sex med dyr. Modsat mange andre lande er dyresex ikke direkte ulovligt i Danmark, men man skal holde sig indenfor Dyreværnsloven. Det er svært at sige præcis, hvad der får folk til at dyrke sex med dyr. Men et eksempel kunne være en mand, der har svært ved at få sex på andre måder, der en dag falder for fristelsen til fx at være sammen med en gris. Eller en kvinde, der synes det er dejligt, at blive slikket af en hund. Uddrag af Dyreværnsloven kapitel 1:

</div>

</body>
</html>
Avatar billede skovenborg Nybegynder
27. februar 2004 - 16:37 #34
sbm >> Hmm, jeg må have overset det med grafikken - for ellers ville det som du siger være ganske enkelt. Der skal dog næsten ingen grafik til for at de kan laves - i eksemplet i den artikel jeg linkede til bruger han et 1px højt billede til det.
Avatar billede ulfhedne Nybegynder
27. februar 2004 - 19:35 #35
hermandsen >> tak for forsøget, men der skal også indhold i, så det går ikke rigtig.
skovenborg >> ja, jeg har set noget ligende, men igen det er med billeder.
sbm >> ja, indtil videre er det vist kun med javascript og billeder det kan lade sig gøre - måske CSS 3 løser det.
boris >> jeg synes ikke det er 100% i højden når teksten er mindre en siden?
Avatar billede sbm Nybegynder
27. februar 2004 - 19:46 #36
Hvis det er acceptabelt med javascript, er jeg ret sikke jeg kan strikke en tilfredsstillende løsning sammen...
Avatar billede boris Mester
27. februar 2004 - 19:57 #37
ulfhedne>> Du har desværre ganske ret.
Avatar billede ulfhedne Nybegynder
27. februar 2004 - 20:16 #38
sbm >> du må gerne give det et skud!
Avatar billede sbm Nybegynder
28. februar 2004 - 00:43 #39
Så lykkedes det vist.

Det blev med den lidt "grimme" baggrund opbygget af et table, men jeg kunne ikke få den helt til at makke ret ene og alene med layers. Men baggrunden ser ens ud i både IE, Mozilla og Opera, og baggrunden går helt ned til bunden af siden uanset hvor meget indhold du smider i.

Indholdet lægger du naturligvis ind imellem <div id="indhold"> og </div>

Hvis du har nogen spørgsmål, må du endelig sige til. :-)

/sbm

--------------------------------------------------------------

<html>
<head>
<script language="JavaScript1.2">
function setBackgroundHeight() {
    if (document.body.clientHeight<document.body.scrollHeight) {
        document.getElementById("baggrund").style.height = document.body.scrollHeight;
        document.getElementById("backgroundtable").style.height = document.body.scrollHeight;
    }
}
</script>
<style type="text/css">
html {
    margin : 0px;
}
body {
    margin : 0px;
}
#indhold {
    position: absolute;
    left    : 0px;
    top    : 0px;
    width    : 100%;
    height    : 100%;
}
#baggrund {
    position: absolute;
    left : 0px;
    top : 0px;
    width : 100%;
    height : 100%;
    background-color : #ffffff;
}
</style>
</head>
<body onload="setBackgroundHeight();">
<div id="baggrund">
<table id="backgroundtable" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
        <td width="20px" height="10px" bgcolor="#333333"></td>
        <td width="30px" height="10px" bgcolor="#555555"></td>
        <td width="150px" height="10px" bgcolor="#888888"></td>
        <td height="10px" bgcolor="#cccccc"></td>
    </tr>
    <tr>
        <td bgcolor="#444444">&nbsp;</td>
        <td bgcolor="#666666">&nbsp;</td>
        <td bgcolor="#aaaaaa">&nbsp;</td>
        <td bgcolor="#eeeeee">&nbsp;</td>
    </tr>
</table>
</div>

</div>
<div id="indhold">
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....<br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing.... <br />
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
Testing testing testing....
</div>
</body>
</html>
Avatar billede sbm Nybegynder
28. februar 2004 - 00:45 #40
Jeg har lidt travlt denne weekend, så hvis jeg ikke svarer med det samme, er det nok fordi jeg ikke lige er hjemme. :-)
Avatar billede skovenborg Nybegynder
28. februar 2004 - 01:02 #41
du må undskylde hvis jeg træder i det med billeder for meget - men jeg kan ikke lige se hvorfor du ikke vil bruge billeder når det er den letteste løsning?
Avatar billede boris Mester
28. februar 2004 - 09:21 #42
Jeg synes da netop det er spændende at holde fast i at det skal løses uden billeder.
Skulle det laves med billeder, var der knap så meget udfordring i spørgsmålet, og vel også knap så mange point, antager jeg.
Avatar billede boris Mester
28. februar 2004 - 09:22 #43
Men jeg er da ogå nysgerrig omkring een ting: et spørgsmål til spørgeren: Hvorfor?
Avatar billede ulfhedne Nybegynder
28. februar 2004 - 09:30 #44
skovenborg >> efter jeg har droppet tables er jeg nærmest blevet besat af, at det hele skal laves i CSS. :o)

Det er nemt når man tester at man hurtigt kan ændre tingene uden at bl.a. skulle have flere billeder klar til en evt. baggrund-ændring. Det har også lidt med principper at gøre - billeder sløver siden (ja måske ikke 1kb biller, men det er også mere princippet). Desuden er udfordringen også at få det hele til at spille i de mest benyttede browsere.

Og javascript er jeg egentlig heller ikke så meget for - man har jo hørt om rygter om at folk kan finde på at slå det fra, så jeg skulle helst have styr på alt selv.

Alting skal ikke være nemt i mine øjne. :o)
Avatar billede ulfhedne Nybegynder
02. marts 2004 - 14:32 #45
boris og skovenborg >> læg et svar, så får I alle lidt point for forsøget.
Avatar billede boris Mester
02. marts 2004 - 15:19 #46
ulfhedne >>Det er nogle gode principper du har, og en interessant problemstilling.
Der er uhyggeligt mange hjemmesider, som er store og tunge af alle de småting man skal downloade. Men det behøver ikke være sådan. Yderpunkter er f.eks. www.enhedslisten.dk med en del små billeder i toppen, men alligevel hurtig, og i den anden ende www.viborgamt.dk, som det tager 100 år at hente hjem.
Avatar billede skovenborg Nybegynder
02. marts 2004 - 16:26 #47
hmm, okay værsgo' men jeg synes du skal give sbm de fleste ;-)
Avatar billede boris Mester
02. marts 2004 - 16:30 #48
Enig :-}
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 20:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
26/0813:28 Findes der en brugsanvisning til : "ONKYO Stereo Casette - Tape Deck - R1" Af Ikke-ekspert i Musik & videoafspillere
24/0820:07 Libra Office 26.2.5.2 - Er sort - Kan an ændre til lysere baggrund ? (Windows 11) Af Ikke-ekspert i Office & Kontorpakker
24/0811:24 Hvor kan jeg finde hjælp til at flytte fra min gamle Samsung Flip4 til min nye Samsung Galaxy S24 Af vbr i Apps til Android
White papers
Flere white papers »