|
|
 | Kan man centrere et img/div lodret?
Fra : Stig Johansen |
Dato : 31-10-09 06:45 |
|
Hej.
Jeg er ved at kigge på nogle forskellige layouts til mit lille hobbyprojekt.
I den forbindelse har jeg forsøgt at lægge nogle frem og tilbageknapper på
'det store billede'.
Hvis man kigger her:
< http://w-o-p-r.dk/gallery/gallery.show.this.asp?GalleryOwner=Stig+Johansen&GalleryName=Samme%5Fbredde%5Fuden%5Fclip&Picturenumber=1>
(se bort fra det visuelle)
Så kan man se, at de store hvide knapper er aligned til toppen.
Det kunne måske være meget rart hvis de i stedet var centreret lodret i
forhold til billedet.
I princippet er det ikke så vigtigt (for mig), for brugere kan selv definere
sine templates, men det kunne være meget rart at vide om det kan lade sig
gøre, ikke mindst for at se om jeg skal have flere parametre med i
databasen.
Der er den særlige udfordring (tror jeg), at de 'store' billeder består af 2
ens div'er med absolut positionering, så jag kan fade in/ud.
--
Med venlig hilsen
Stig Johansen
| |
 Rune Jensen (31-10-2009)
| Kommentar
Fra : Rune Jensen |
Dato : 31-10-09 10:45 |
|
Stig Johansen skrev:
> Så kan man se, at de store hvide knapper er aligned til toppen.
>
> Det kunne måske være meget rart hvis de i stedet var centreret lodret i
> forhold til billedet.
Jeg tror, man så er tvunget til at bruge display: table-cell på i hvert
fald den yderste DIV, og så vertical-align: middle på billederne. Netop
billeder er lidt specielle, måske kan man også bruge display: block, som
IE6 forstår. Der er iøvrigt et lille "problem" med position:absolute, at
DIVerne færstner sig til den samme position, så de vil ikke følge med,
hvis vinduet gøres smallere. ..det kan ikke gøres, så de placeres med
margin-left: auto og margin-right: auto
?
Hvis du vil centrere vertikalt, skal den DIV uden om desuden have en
højde SVJV - det kan den måske få udfra billedet med en height: auto.
Opera har en renderings-/opdateringsbug, så den er endnu sværere at lave
en løsning som ovenstående til, den skal nok laves særskilt. Men de
andre browsere burde man kunne.
Jeg laver en test, så vender jeg tilbage.
MVH
Rune Jensen
| |
Rune Jensen (31-10-2009)
| Kommentar
Fra : Rune Jensen |
Dato : 31-10-09 11:31 |
| | |
 Stig Johansen (31-10-2009)
| Kommentar
Fra : Stig Johansen |
Dato : 31-10-09 19:13 |
| | |
Rune Jensen (31-10-2009)
| Kommentar
Fra : Rune Jensen |
Dato : 31-10-09 12:34 |
|
On 31 Okt., 19:13, Stig Johansen <wopr...@gmaill.com> wrote:
> Rune Jensen wrote:
> > Rune Jensen skrev:
>
> >> Jeg laver en test, så vender jeg tilbage.
>
> > Jeg skal lige ha' noget at spise - her er en foreløbig, en tidligere
> > diskussion om lodret centrering:
>
> Tak - table kunne gøre det:
> < http://w-o-p-r.dk/gallery/gallery.show.this.asp?GalleryOwner=Stig+Joh....>
>
> Så mangler jeg bare at finde en metode til at få den(de) store div centreret
> uden javascript.
Damn - jeg vidste, det ville komme før eller siden ;)
OK, here goes..
Nu kan det godt være, nogle vil sige, at DIVs skal bruges i stedet for
table, men... jeg har selv siddet og nørklet med det, det bli'r sgu
for uoverskueligt. Jeg ville dog _meget gerne_ hvis andre har bedre
løsninger, at de giver besyv med.
Til gengæld, til dit andet problem, når man nu bruger table, så er der
jo nogle indbyggede fordele, i og med, man vel kan sætte table
width=100% og så henholdsvist right-alignee og left-aligne pilene...
selve table skal så ikke positioneres absolut (helst ikke), men man må
kunne gøre det i selve table cellen
Jeg vil godt sige yderligere, jeg HAR forsøgt at lave løsningen til
dit andet spørgsmål også uden table, men Opera har en eller anden
renderingsbug, så der er det hip som hap - indholdet bli'r hvor det
er, og flytter ikke med, selv om vinduets bredde indskrænkes. Lige
meget hvad hulen jeg så gør. Så deeeet...
Nå, bare mine tanker - foreløbig. Som sagt, har andre bedre løsninger,
så ville jeg også gerne vide dem ;)
MVH
Rune Jensen
| |
Stig Johansen (01-11-2009)
| Kommentar
Fra : Stig Johansen |
Dato : 01-11-09 08:28 |
|
Rune Jensen wrote:
> Nu kan det godt være, nogle vil sige, at DIVs skal bruges i stedet for
> table, men... jeg har selv siddet og nørklet med det, det bli'r sgu
> for uoverskueligt. Jeg ville dog _meget gerne_ hvis andre har bedre
> løsninger, at de giver besyv med.
Jeg har fundet en løsning til at centrere imagediv'erne uden brug af table.
Det med at bruge table virkede umiddelbart godt nok, men jeg havde glemt, at
de 2 imagediv'er skulle være absolut positionerede.
Når de ikke er absolut, så virker fading ikke, og da jeg satte dem til
absolut, var de ikke centreret alligevel.
Metoden er ud fra noget som Birger beskrev, noget med width og ikke width.
Umiddelbart virker det ikke rigtig med width, da containeren ikke antager
størrelse efter indholdet, men ved at sætte bredden via Javascript ud fra
imagediv'en, så bliver det (ca) centreret.
Kører man uden javascript, er der ikke samme problem, da der ikke er brug
for absolut positionering.
Nu har er der så bare en(dnu) en udfordring, da IE stripper whitespace ved
udlæsning af properties, men det tror jeg ikke jeg gider at bruge tid på,
da det nok vil kræver større ændringer.
Målsætningen var egentlig at minimere serverbelastningen, så hvis man skal
til at hente tekster ved hvert billede, så er formålet sådan set væk.
Måske skal jeg kigge lidt på en eller anden form for wrap til IE.
--
Med venlig hilsen
Stig Johansen
| |
Rune Jensen (31-10-2009)
| Kommentar
Fra : Rune Jensen |
Dato : 31-10-09 12:41 |
|
On 31 Okt., 19:33, Rune Jensen <runeofdenm...@gmail.com> wrote:
> Til gengæld, til dit andet problem, når man nu bruger table, så er der
> jo nogle indbyggede fordele, i og med, man vel kan sætte table
> width=100% og så henholdsvist right-alignee og left-aligne pilene...
> selve table skal så ikke positioneres absolut (helst ikke), men man må
> kunne gøre det i selve table cellen
Jeg tænkte på (men har ikke testet), om man kunne sætte den midterste
table-cell lig med billedets width, lægge en relativtpositioneret DIV
med de andre absolut positioneret indeni.. det er lidt noget knald
rent kodemæssigt, men teoretisk har det da en lille chance for at
virke.. måske endda også i IE6.
MVH
Rune Jensen
| |
Stig Johansen (31-10-2009)
| Kommentar
Fra : Stig Johansen |
Dato : 31-10-09 19:52 |
|
Rune Jensen wrote:
> On 31 Okt., 19:33, Rune Jensen <runeofdenm...@gmail.com> wrote:
>
>> Til gengæld, til dit andet problem, når man nu bruger table, så er der
>> jo nogle indbyggede fordele, i og med, man vel kan sætte table
>> width=100% og så henholdsvist right-alignee og left-aligne pilene...
>> selve table skal så ikke positioneres absolut (helst ikke), men man må
>> kunne gøre det i selve table cellen
>
> Jeg tænkte på (men har ikke testet), om man kunne sætte den midterste
> table-cell lig med billedets width, lægge en relativtpositioneret DIV
> med de andre absolut positioneret indeni.. det er lidt noget knald
> rent kodemæssigt, men teoretisk har det da en lille chance for at
> virke.. måske endda også i IE6.
Jeg har fundet en løsning mht. bredden at div'en.
Jeg har defineret teksten med white-space:pre, så kan man selv lave
linieskift, så teksten ikke bliver bredere end billedet.
Så det er egentlig kun centrering af hoved div'erne (imagediv1 og
imagediv2).
Det kunne være jeg skulle se om de kan lægges i en table ;)
--
Med venlig hilsen
Stig Johansen
| |
Stig Johansen (31-10-2009)
| Kommentar
Fra : Stig Johansen |
Dato : 31-10-09 20:32 |
|
"Stig Johansen" <wopr.dk@gmaill.com> wrote in message
news:4aec87a9$0$281$14726298@news.sunsite.dk...
> Så det er egentlig kun centrering af hoved div'erne (imagediv1 og
> imagediv2).
>
> Det kunne være jeg skulle se om de kan lægges i en table ;)
Det ku de squ :)
Så skal jeg bare have kigget på oversigterne.
http://w-o-p-r.dk/gallery/
Der har jeg kodet ud fra den med de 6 billeder, og de andre ser ikke så godt
ud.
--
Med venlig hilsen/Best regards
Stig Johansen
| |
|
|