Avatar billede tolderberg Nybegynder
13. juli 2007 - 19:10 Der er 13 kommentarer og
1 løsning

Div floats

Hej derude!

Jeg sidder og leger med opsætning af layers.
Legen foregår her: http://knudsen.2lderlund.dk/
Men jeg kan ikke få den grå div nederst til højre at blive lige så høj som den venstre del af gallery div'en. Den følger ikke med.

Her er stylesheetet:

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-image: url(../layout/mainbg.gif);
    background-repeat: repeat-x;
    background-position: top;
    margin-top:0;
}

p {
    font-family:Tahoma, Verdana;
    font-size:12px;
    padding-left: 4px;
    }
.doegnvagt {
    font-family:Tahoma, Verdana;
    font-size:25px;
    font-weight:bold;
    color:#FFFFFF;
    text-align:center;
    }   

.gallery {   
    font-family:Tahoma, Verdana;
    font-size:9px;
    font-weight:bold;
    color:#666666;
    padding-top: 1px;
    padding-left: 4px;
    text-align:left;
    }   

.hidden {
    display: none;
}

#bgcontainer {
    width:840px;
    margin: auto;
    margin-top: 15px;
    background-image:url(../layout/logolarge.jpg);
    background-repeat:no-repeat;
    background-position:right top;
    z-index: 1;
}

#pagecontainer {
    width:727px;
    float:left;
    border-style:solid;
    border-width: 1px;
    border-color:#8c8c8c;
    z-index: 2;
}

#header {
    height: 85px;
    background-image:url(../layout/logo.gif);
    background-repeat:no-repeat;
    background-position:left bottom;
    margin-bottom: 15px;
    text-align:right;
}

/* Main Navigation */

#main-nav { height: 42px; }
#main-nav {
    background-image:url(../layout/menu_bg.gif);
    background-repeat:repeat-x;
    }

#main-nav dl { margin: 0; padding: 0; }

/* IE5 Mac Hack \*/
#main-nav { padding-left: 11px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */

#main-nav dt { float: left; }

#main-nav dt a {
    display: block;
    height: 0px !important;
    height /**/:42px; /* IE 5/Win hack */
    padding: 42px 0 0 0;
    overflow: hidden;
    background-repeat: no-repeat;
}

#main-nav dt a:hover {
    background-position: 0 -42px;
}

#main-nav dt#home,
#main-nav dt#home a { width: 29px; background-image: url(../images/nav/home.gif); }

#main-nav dt#about,
#main-nav dt#about a { width: 48px; background-image: url(../images/nav/about.gif); }

#sidebar-a {
    background-color:#0079c2;
    filter: Alpha(Opacity=20);
    float: right;
    width: 155px;
    height: 278px;
}

#sidebar-a .padding {
    padding: 0px;
}

#content {
    margin-right: 155px;
    line-height: 18px;
}

#content .padding {
    padding: 0px;
}

    #imagecontainer {
    width: 360px;
    height: 270px;
    float:left;
    margin: 4px;
    }

    #commentcontainer {
    width: 190px;
    height: 248px;
    float:right;
    margin: 4px;
    text-align:left bottom;
    }
   
    #imgnavigation {
    height: 22px;
    width: 50px;
    float:right;
    text-align:right;
    margin-right: 4px;
    }

#divider {
    clear: both;
    background-image:url(../layout/currentgal_bg.jpg);
    background-repeat:repeat-x;
    height: 13px;
}

#sidebar-b {
    background-color:#ebebeb;
    float: right;
    width: 155px;
    height:100%;
    line-height: 18px;
}

#sidebar-b .padding {
    padding: 0px;
}

#gallery {
    margin-right: 155px;
    line-height: 18px;
}

#gallery .padding {
    padding: 0px;
}

    #thumbcontainer {
   
    float:left;
    width: 137;
    height: 103;
    margin-left: 4px;
    margin-top: 4px;
    }

#footer {
    clear: both;
    background:#999999;
    background-image:url(../layout/bottom_bg.jpg);
    background-repeat:repeat-x;
    height: 14px;
    text-align:center;
    font-family:Tahoma, Verdana;
    font-size:10px;
    font-weight:normal;   
    color:#000000;
}

Er der nogen der har et forslag?
Avatar billede jansangill Nybegynder
13. juli 2007 - 20:12 #1
prøv at sætte højde og width  i din sidebar b til det samme som dine thumbs
Avatar billede tolderberg Nybegynder
13. juli 2007 - 20:23 #2
Det kan jeg ikke da antallet af billeder varierer, og gives af en db.
Så den skal ligesom være lidt dynamisk i højden den der...
Det hjælper hverken at sætte height til 100% eller auto:-(

/TB
Avatar billede tolderberg Nybegynder
17. juli 2007 - 19:21 #3
Hej igen,

Adressen er nu:
http://knudsen.2lderlund.dk/dk/dk_gallery.htm

Stylesheetet ligger her:
http://knudsen.2lderlund.dk/css/dk_knudsen.css

For at præcisere er det #sidebar-b som er indlejret i #gallery der er problemet:-)

/TB
Avatar billede mclemens Nybegynder
17. juli 2007 - 19:35 #4
Husk en back-up


Prøv med:

Den nederste gallery css rettet til:
#gallery {padding-right:155px;
background-color:#ebebeb;padding-bottom:
    line-height: 18px;position:relative;
}

Tilføj:
#gallery2 {
background-color:#fff;
}

Ret sidebar-b til:
#sidebar-b {position:absolute;top:5px;right:0;;
    background-color:#ebebeb;
    width: 155px;
    line-height: 18px;
}




og brug html markup:

<div id="gallery"><div id="gallery2">
            <div id="thumbcontainer"><img width="137" height="103" src="../images/gallery/temppic137x103.jpg" alt="temp"/></div>
          <div id="thumbcontainer"><img width="137" height="103" src="../images/gallery/temppic137x103.jpg" alt="temp"/></div>
          <div id="thumbcontainer"><img width="137" height="103" src="../images/gallery/temppic137x103.jpg" alt="temp"/></div>
          <div id="thumbcontainer"><img width="137" height="103" src="../images/gallery/temppic137x103.jpg" alt="temp"/></div>
          <div id="thumbcontainer"><img width="137" height="103" src="../images/gallery/temppic137x103.jpg" alt="temp"/></div>
          <div id="thumbcontainer"><img width="137" height="103" src="../images/gallery/temppic137x103.jpg" alt="temp"/></div>
          <div id="thumbcontainer"><img width="137" height="103" src="../images/gallery/temppic137x103.jpg" alt="temp"/></div>
          <div id="thumbcontainer"><img width="137" height="103" src="../images/gallery/temppic137x103.jpg" alt="temp"/></div>
          <div id="thumbcontainer"><img width="137" height="103" src="../images/gallery/temppic137x103.jpg" alt="temp"/></div>
          <div id="thumbcontainer"><img width="137" height="103" src="../images/gallery/temppic137x103.jpg" alt="temp"/></div>
          <div id="thumbcontainer"><img width="137" height="103" src="../images/gallery/temppic137x103.jpg" alt="temp"/></div>
          <div id="thumbcontainer"><img width="137" height="103" src="../images/gallery/temppic137x103.jpg" alt="temp"/></div>


      <div id="sidebar-b">
        <p>Januar<br/>
        Februar<br/>
        Marts<br/>
        April<br/>
        Maj<br/>
        Juni</p>
      </div>


<div style="overflow: hidden; height: 0pt; clear: both;"> </div>
      </div></div>
Avatar billede mclemens Nybegynder
17. juli 2007 - 19:38 #5
Du kan selvfølgelig også lave det med en tabel istedet så kan baggrunden lettere flugte ned til bunden. Alternativt kan du gøre stort set som ovenstående, men istedt for det ekstra gallery2 element - lave et baggrundsbillede der er 155px bredt indsætte det i #gallery, og så bede om at få det repeatet nedad.
Avatar billede mclemens Nybegynder
17. juli 2007 - 19:38 #6
( og så er det selvfølgelig muligt at scripte højden over også )
Avatar billede tolderberg Nybegynder
17. juli 2007 - 20:11 #7
Hej igen:-)

Det ser rigtigt ud, I Firefox i hvert fald. Men det virker vist ikke i IE:-(

/TB
Avatar billede tolderberg Nybegynder
17. juli 2007 - 20:16 #8
Lige at bemærke,

Jeg har flyttet
<div style="overflow: hidden; height: 0pt; clear: both;"> </div>
      </div></div>
ind i stylesheetet som #gallerykeeper for god ordens skyld.
http://knudsen.2lderlund.dk/css/dk_knudsen.css

Det er tæt på nu:-)
Avatar billede mclemens Nybegynder
17. juli 2007 - 20:53 #9
Hmm, den gallerykeeper skal lige copieres en
gang længere nede og så lige en width på gallery2
og så skal sidebaren også rykkes en tand nedad.


#gallery2 {
background-color:#fff;width:572px;
}


html:


...


      <div class="gallery" id="divider">GALLERI : [GALLERY NAME]</div>
        <div id="gallery"><div id="gallery2">
            <div id="thumbcontainer"><img src="2_files/temppic137x103.jpg" alt="temp" height="103" width="137"></div>
          <div id="thumbcontainer"><img src="2_files/temppic137x103.jpg" alt="temp" height="103" width="137"></div>
          <div id="thumbcontainer"><img src="2_files/temppic137x103.jpg" alt="temp" height="103" width="137"></div>
          <div id="thumbcontainer"><img src="2_files/temppic137x103.jpg" alt="temp" height="103" width="137"></div>
          <div id="thumbcontainer"><img src="2_files/temppic137x103.jpg" alt="temp" height="103" width="137"></div>
          <div id="thumbcontainer"><img src="2_files/temppic137x103.jpg" alt="temp" height="103" width="137"></div>
          <div id="thumbcontainer"><img src="2_files/temppic137x103.jpg" alt="temp" height="103" width="137"></div>
          <div id="thumbcontainer"><img src="2_files/temppic137x103.jpg" alt="temp" height="103" width="137"></div>
          <div id="thumbcontainer"><img src="2_files/temppic137x103.jpg" alt="temp" height="103" width="137"></div>
          <div id="thumbcontainer"><img src="2_files/temppic137x103.jpg" alt="temp" height="103" width="137"></div>
          <div id="thumbcontainer"><img src="2_files/temppic137x103.jpg" alt="temp" height="103" width="137"></div>
          <div id="thumbcontainer"><img src="2_files/temppic137x103.jpg" alt="temp" height="103" width="137"></div>




      <div id="galllerykeeper"> </div>
          </div>


      <div id="sidebar-b">
        <p>Januar<br>
        Februar<br>
        Marts<br>
        April<br>
        Maj<br>
        Juni</p>
      </div>
      <div id="galllerykeeper"> </div>
      </div>
    <div id="footer">copyright © by Knudsen Service 2007- design by 2lderlund.dk</div>
  </div>
</div>

</body></html>
Avatar billede tolderberg Nybegynder
17. juli 2007 - 21:15 #10
hej mclemens!

Det er bare SUPER!
Det virker nu. Og jeg er glad.
Billederne vil blive sat ind dynamisk, så derfor er det ret vigtigt at det nederste der er lidt fleksibelt.
Men må jeg have lov at spørge hvad det var du gjorde? Bare kort.

/TB
Avatar billede tolderberg Nybegynder
17. juli 2007 - 21:17 #11
Post et svar så du kan få nogle Point
Avatar billede mclemens Nybegynder
17. juli 2007 - 21:24 #12
Fremgangsmåden var lidt at lægge både menu og gallery ind i et fælles element med baggrundsfarven på menuen. Så lægge gallery ind i en for sig selv med hvid baggrund (med andre ord en "kunstig bagvedliggende baggrund" til menuen)... og herefter en clearring af floats'ene så gallery fylder hele gallery ... søg evt. på clear floats i en søgemaskine for mere information.

Det sidste i 17/07-2007 20:53:38 er et resultat af manglende standideseret visning.
Umiddelbart hælder jeg til at FF viser det korrekt i 17/07-2007 19:35:55, men at
IE har en lidt skæv håndtering af floats clearing og at det skaber balladen.
(med andre ord, lidt eksperimentering for at lave workaround)
Avatar billede mclemens Nybegynder
17. juli 2007 - 21:54 #13
Og tak for point :o)
Avatar billede tolderberg Nybegynder
17. juli 2007 - 22:00 #14
Det er KLART mig der takker:-)
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