Avatar billede tolderberg Nybegynder
22. marts 2006 - 10:10 Der er 5 kommentarer

Layers og z-index

Hejsa

Jeg arbejder på en side (www.lonedalsgaard.dk/test/aktuelle_grupper.html) hvor jeg har fået den geniale idé at der skal være et jpg billede nederst på siden. Det har jeg fået placeret, men jeg kan ikke få det til at ligge bag ved teksten. Sig ikke at det da skal være et GIF billede, for det ser latterligt ud.
Er der nogen der kan se hvad der er galt?
Følgende er defineret i eksternt stylesheet:

bg {
    border: 1px solid #666666;
}
p {
    font-family: "MS Sans Serif", Arial;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    line-height: 17px;
}
h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
    color: #FF0000;
}
#master {
    position: relative;
    visibility: visible;
    z-index: auto;
    height: 500px;
    width: 389px;
    top: 10px;
    background-color: #FFFFFF;
    padding-top: 150px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 220px;
}
ul {
    font-family: "MS Sans Serif", Arial;
    font-size: 12px;
    line-height: 20px;
    font-weight: normal;
}

#topmenu {
    background-color: #FFFFFF;
    position: absolute;
    visibility: visible;
    z-index: 2;
    height: 12px;
    width: 406px;
    left: 197px;
    top: 116px;
}
#bodytext {
    position: absolute;
    visibility: visible;
    z-index: 1;
    height: 458px;
    width: 382px;
    left: 197px;
    top: 128px;
    padding-top: 35px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
}
td {
    text-align: left;
    margin: 0px;
}

#kryds {
    position: absolute;
    visibility: visible;
    z-index: 0;
    height: 179px;
    width: 186px;
    left: 448px;
    top: auto;
    bottom: -26px;
}
h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #005C77;
}
a {
    font-family: "MS Sans Serif", Arial;
    font-size: 11px;
    text-align: left;
    color: #005C77;
}



#top {
    position: absolute;
    visibility: visible;
    z-index: 2;
    height: 116px;
    width: 412px;
    left: 197px;
    top: 0px;
}

body {
    background-color: #CCCCCC;
}


#logo {
    background-color: #FFFFFF;
    position: absolute;
    visibility: visible;
    z-index: 2;
    height: 159px;
    width: 197px;
    left: 0px;
    top: 0px;
}
#submenu {
    position: absolute;
    visibility: visible;
    height: 161px;
    width: 176px;
    left: 0px;
    top: 159px;
    background-color: #FFFFFF;
    background-image: url(images/Layout/submenu_bg6.jpg);
    padding-left: 23px;
    padding-top: 41px;
}
h2 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
}
Avatar billede ckh Nybegynder
22. marts 2006 - 10:22 #1
Hvorfor ikke bare definere det som et baggrundsbillede i #master og så sætte det i nederste højre hjørne? (Jeg formoder du vil have det til at ligge bag teksten...)
Avatar billede ckh Nybegynder
22. marts 2006 - 10:26 #2
altså f.eks således (er ikke testet, bare "off the top of the head"):

#master {
    position: relative;
    visibility: visible;
    z-index: auto;
    height: 500px;
    width: 389px;
    top: 10px;
    background: #FFFFFF url(stien/til/krydset) right bottom no-repeat;
    padding-top: 150px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 220px;
}
Avatar billede tolderberg Nybegynder
22. marts 2006 - 11:09 #3
--> ckh

Hejsa. Det lyder som en plan. Spørgsmålet er om man laver siden større så...? Eller kan man med css forskyde baggrundsbilledet udover layerkanten?

/ST
Avatar billede notes2c Nybegynder
26. marts 2006 - 14:08 #4
Problemet med at bruge backgrund er at man ikke kan få billede til at stikke ud over den ramme det befinder sig i.

Har omskrevet siden for at illustrere problemet og slippe af med position: absolute. Husk at rette billede referencerne, og ved at fjerne den grå kant på kryds billede er vi tæt på.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    height: 100%;
}
body {
    background-color: #CCC;
    text-align: center;
}

h1 {
    font: normal bold 10px Verdana, Arial, Helvetica, sans-serif;
    color: #F00;
}
h2 {
    font: normal 10px Geneva, Arial, Helvetica, sans-serif;
}
h3 {
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    color: #005C77;
}
bg {
    border: 1px solid #666666;
}
p {
    font: normal normal 12px/17px "MS Sans Serif", Arial, Helvetica, sans-serif;
}
ul {
    font: normal 12px/20px "MS Sans Serif", Arial, Helvetica, sans-serif;
}
a {
    font: 11px "MS Sans Serif", Arial, Helvetica, sans-serif;
    color: #005C77;
}
#frame {
    background: #FFF url(images/sub_kryds.jpg) no-repeat bottom right;
    margin: 0 auto;
    width: 609px;
}
#master {
    height: 500px;
    height: 100%;
    width: 609px;
    background: transparent url(images/sub_venstretop4.jpg) no-repeat top left;
    margin: 0 auto;
    text-align: left;
}
#main {
    width: 410px;
    float: right;
    margin-top: 46px;
    height: 100%;
}
#logo {
    background-color: #FFF;
    height: 159px;
    width: 197px;
}
#top {
    height: 116px;
    width: 412px;
    float: right;
}
#submenu {
    height: 161px;
    width: 176px;
    background: #FFF url(images/submenu_bg6.jpg) no-repeat top left;
    margin-top: 31px;
    padding-top: 50px;
    padding-left: 22px;
    float: left;
}
#topmenu {
    background-color: #FFFFFF;
    float: right;
}
#bodytext {
    height: 458px;
    width: 382px;
    padding: 35px 10px 10px 20px;
}
</style>
</head>
<body>
<div id="frame">
  <div id="master">
    <div id="top"><img src="index_files/sub_hojretop2.jpg" height="116" width="412" alt="" /></div>
    <div id="topmenu"><a href="http://www.lonedalsgaard.dk/test/index.html" target="_self"><img src="index_files/menu_subs.jpg" border="0" height="12" width="412" alt="" /></a></div>
  <div id="main">
    <h3>Individuel terapi</h3>
    <p>- en mulighed for større glæde i hverdagen. </p>
    <p>Formålet
med terapi er, at du lærer at forstå dig selv og dine livsvilkår bedre,
og at du lærer at vælge og handle anderledes end tidligere. </p>
    <p>Det
er ofte godt at gå i terapi 1 time om ugen. Det kan være svært at vide
på forhånd, hvor lang perioden skal være, idet det afhænger af hvilke
problemer, du arbejder med, og af hvordan du selv bearbejder
problemerne. Du kan til enhver tid stoppe igen. </p>
    <p>Jeg
arbejder under tavshedspligt, så du har blandt andet mulighed for at
vende nogle af de ting, det er for sårbart at tale med venner og
familie om. </p>
    <p>Hvis du vil vide mere om mulighederne for at gå i terapi, er du velkommen til  at kontakte mig. </p>
    <p><a href="http://www.lonedalsgaard.dk/test/aktuelle_grupper.html" target="_top">til toppen </a></p>
    <h3>Terapi i gruppe <a name="art" id="art"></a></h3>
    <p>Terapi
i gruppe arrangeres ad hoc, når der er deltagere nok. Jeg arbejder med
grupper på 5 -10 deltagere. I en gruppe får man mulighed for at tale
med andre, som har oplevelser og erfaringer, der ligner ens egne. Det
giver mulighed for, at man kan støtte hinanden. Formålet kan være at: </p>
    <div>
      <ul>
        <li> få større erkendelse af sine ressourcer og begrænsninger</li>
        <li> lære at tage større ansvar for sig selv </li>
        <li> blive bedre til at leve sammen med andre <br />
          (f.eks. i forhold til ægtefælle, familie, venner og kolleger) </li>
        <li> få større livsglæde og mod til at udfolde sig</li>
      </ul>
    </div>
    <p>
Arbejdsformen er undervisning, refleksion, samtale, øvelser og
eksperimenter. Vi tager ved hver samling udgangspunkt i deltagernes
aktuelle ønsker og behov. Fokus kan være på en enkelt person, på
gruppen eller på dele af gruppen. </p>
    <p>Vil du vide hvilke grupper, der er ved at blive sammensat, er du velkommen til at kontakte mig. </p>
    <p>Arbejdsformen
er undervisning, refleksion, samtale, øvelser og eksperimenter. Vi
tager ved hver samling udgangspunkt i deltagernes aktuelle ønsker og
behov. Fokus kan være på en enkelt person, på gruppen eller på dele af
gruppen. </p>
    <p>Vil du vide hvilke grupper, der er
ved at blive sammensat, er du velkommen til at kontakte mig.
Arbejdsformen er undervisning, refleksion, samtale, øvelser og
eksperimenter. Vi tager ved hver samling udgangspunkt i deltagernes
aktuelle ønsker og behov. Fokus kan være på en enkelt person, på
gruppen eller på dele af gruppen. </p>
    <p>Vil du vide hvilke grupper, der er ved at blive sammensat, er du velkommen til at kontakte mig. </p>
    <p>Arbejdsformen
er undervisning, refleksion, samtale, øvelser og eksperimenter. Vi
tager ved hver samling udgangspunkt i deltagernes aktuelle ønsker og
behov. Fokus kan være på en enkelt person, på gruppen eller på dele af
gruppen. </p>
    <p>Vil du vide hvilke grupper, der er ved at blive sammensat, er du velkommen til at kontakte mig. </p>
    <p> <a href="http://www.lonedalsgaard.dk/test/aktuelle_grupper.html" target="_top">til toppen</a></p>
    </div>
  <div id="submenu">
      <p>
      <a href="http://www.lonedalsgaard.dk/test/www.ht.dk">Individuel terapi </a><br />
        <a href="http://www.lonedalsgaard.dk/test/www.google.de">Terapi i Grupper </a><br />
        <a href="http://www.lonedalsgaard.dk/test/www.simonsays.dk">Individuelle samtaler med ledere </a><br />
        <a href="http://www.lonedalsgaard.dk/test/www.tv.dk">Link4</a><br />
        <a href="http://www.lonedalsgaard.dk/test/www.sol.dk">Link5</a><br />
        <a href="http://www.lonedalsgaard.dk/test/www.simon.dk">Link6</a><br />
        <a href="http://www.lonedalsgaard.dk/test/www.lonedalsgaard.dk">Link7</a><br />
        </p>
    </div>
<div style="clear: both;"></div>


  </div>
  </div>
</body></html>
Avatar billede tolderberg Nybegynder
27. marts 2006 - 09:29 #5
--> notes2c

Hejsa. Det ser spændende ud. Jeg tester lidt senere:-)

på forhånd tak

/Simon
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