[CSS] Layout resize onjuist.

Pagina: 1
Acties:

  • koekiemonster
  • Registratie: Maart 2001
  • Laatst online: 10-02 11:55

koekiemonster

want a cookie

Topicstarter
Beste,

Ik ben enige tijd bezig geweest om een layout flexibel op te stellen.
Nu lijkt dit aardig te lukken met onderstaande oplossing. De oplossing is bewust zo opgesteld om makkelijk gebruik te kunnen maken van bepaalde Domino specifieke functies.

Helaas blijkt nu bij resize (naar de welbekende 800x600) er iets niet te kloppen. Tot dusver heeft GOT (bestaande topics) en haar zoekfunctie en mijn huidige kennis mij aardig kunnen helpen, maar nu zit ik dus echt vast.

Gezien ik gebruik maak van Lotus Domino wordt de html-tag al gegenereerd, waardoor ik geen doc-type kan aangeven.
Een 'geluk' hierbij is dat IE de browser is waarin het spul naar behoren moet werken. En in 1024x768 en hoger ziet alles er ook redelijk uit, totdat ik ga resizen....

Kan iemand verklaren hoe het komt dat de RHS onder de content wordt verschoven bij een resize?

Ik hoop dat iemand mij uitleg kan geven van mij resize probleem :( .
Omdat de code niet paste heb ik het in 1 losse file ge-upload.

Kortom, wat doe ik fout, of mis ik, waardoor ik geen normale resize kan doen?
De content-div is eigenlijk de enige div die behoort te resizen. De andere mogen wel, maar alleen als het past.

De lokatie van het huidige test-bestand:
http://www.filmwise.nl/test/layout.html

Gezien het feit dat ik zeer snel moet opleveren, zou ik het enorm waarderen als iemand mij kon helpen.
Naast een mogelijke oplossing zou ik graag willen horen waarom het nu mis gaat. Wellicht doe ik iets structureel fout.

[webhero.nl]


  • moozzuzz
  • Registratie: Januari 2005
  • Niet online
Wellicht geklooi met float's etc. Bij zeer sterke resizing, sprint het content blok onder het menu!

Probeer es op te lossen via faux-columns? Bij cssplay vangen ze min-width op met borders van 300+px. mss ook een mogelijkheid om te bekijken?

Weet niet of dit helpt, maar mss kan je uitleggen waarom
lhs, content
- display:inline-block; (ipv display:block;)


rhs:
- margin-left:66%;
- margin-left:3px; (dubbel?)

[ Voor 42% gewijzigd door moozzuzz op 18-08-2006 12:32 . Reden: wat rariteiten ]


  • koekiemonster
  • Registratie: Maart 2001
  • Laatst online: 10-02 11:55

koekiemonster

want a cookie

Topicstarter
Aaahh, dat wat je meldt is inderdaad dubbel door het enorme gekloot om het werkend te krijgen.
bedankt voor je reactie!

Ik ben nu ook aan het kijken naar de faux-oplossing, maar ik heb geen idee waarom bovenstaande niet werkt en daar heb ik flink de balen in.
Ik snap gewoon niet waarom resizen zo raar werkt?

Overigens ben ik wel een voorstander om de opzet ongeveer gelijk te houden. Niet omdat ik er extreem tevreden mee ben, maar omdat ik anders vaste opzetten ga volgen en zodoende nooit normaal leer waarom iets wel, of niet kan.

[ Voor 30% gewijzigd door koekiemonster op 18-08-2006 13:46 ]

[webhero.nl]


  • moozzuzz
  • Registratie: Januari 2005
  • Niet online
het grote probleem is de float en de mix tussen % en px-width's:
- innercontent is 77%
- RHS is 180px

if (180px > dan 33%)
then is er geen plaats meer van rhs en moet die eronder.

Faux-columns: (zonder expert te zijn:)
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<container>
  <top></top>

  <content>
    <innercontent>
    </innercontent>

    <lhs></lhs>

    <rhs></rhs>
  </content>

  <foot></foot>
</container>
innercontent: 100% width, pos relative, padding-left: 250px, padding-right: 190px
rhs, lhs: pos absolute