CSS - alles goed op mac - bijna goed op PC [mits javascript]

http://klanten.3sign.be/ilibris/ Ik heb overal kadertjes rond geplaats, om te kunnen volgen wat er met welke layers gebeurt. De stylesheet is deze: http://klanten.3sign.be/ilibris/settings/style.css

Het moet er als volgt uit zien (zie verder - en dat doet het ook in mac-browsers safari, mozilla, IE). Het ‘lastige’ zit 'm in de schaalbaarheid van de site. Moest een vaste breedte gewenst zijn, dan was er geen probleem.
De oplossing die ik heb gekozen (plaatsen van verschillende CSS-layers in elkaar) leek mij de meest logische. Misschien is er een betere (consistentere) manier om te bereiken wat ik wil.

Hoe het er op pc uit ziet kan je hier zien: http://www.danvine.com/iecapture/detail/flash/1084967334/klanten.3sign.be/ilibris/index.html
Ik weet niet of ik beter wat verder hacks toepas of, de boel helemaal aanpas. Het moet wel xhtml 1.0 strikt blijven.

Gewenst uitzicht (zie je dus ook in de meeste mac-browsers):
[img:1592c62eec]http://users.3sign.be/macfreak/iLibris_small.jpg[/img:1592c62eec]

[edit] titel aangepast om aan te geven dat het probleem +/- opgelost is, of in alle geval toch een andere kant op gaat [/edit]

Waarom gebruik je eigenlijk layers? Ik gebruik die krengen nooit, juist omdat iedere browser op elk platform er weer een andere interpretatie aangeeft. Ik gebruik doorgaan gewoon een (wellicht bizarre) tabel structuur (geneste tabellen dus). En dan percentages aangeven zodat een en ander kan groeien, en andere cellen juist weer vastzetten.

Zie alhier: http://www.ncsu.nl/

[quote:cc37cd55db="Pink Grapefruit"]Waarom gebruik je eigenlijk layers? Ik gebruik die krengen nooit, juist omdat iedere browser op elk platform er weer een andere interpretatie aangeeft. Ik gebruik doorgaan gewoon een (wellicht bizarre) tabel structuur (geneste tabellen dus). En dan percentages aangeven zodat een en ander kan groeien, en andere cellen juist weer vastzetten.

Zie alhier: http://www.ncsu.nl/[/quote:cc37cd55db]

Welkom in de wereld die XHTML en Webstandards heet :?

Heb je de code van je eigen site wel 's met een kritisch oog bekeken?

[quote:0576b00e75="Syndic"]

Heb je de code van je eigen site wel 's met een kritisch oog bekeken?[/quote:0576b00e75]

Ach ja. Maar waarom ziet een site die zich houdt aan de XHTML standaard, en dan brak uit op verschillende browsers? Trouwens het lijkt me sterk dat het gebruik van tables buiten de standaards valt. Maar goed, ik ben hier niet echt in thuis. Ik ben meer van de achterkant (development, Java, databases) en de hele voorkant wordt hiermee opgebouwd. Werkt uitstekend. Maar goed, zoals gezegd die standaarden zijn idd een beetje aan me voorbij gegaan.

ik zou het idd op 123 goedkrijgen met tabellen. Css heeft nadelen, maar ook erg veel voordelen. Normaal zou het wel cross-browser moeten zijn, waarom dat niet zo is ligt niet zelden aan de browser-maker. Voordelen zijn veel compactere en overzichtelijkere code, toegankelijkheid voor text-browsers, enorm flexible, sneller,....

[quote:34c9cb5731]Ach ja. Maar waarom ziet een site die zich houdt aan de XHTML standaard, en dan brak uit op verschillende browsers?[/quote:34c9cb5731]

Niet als ie structureel goed is opgebouwd en ‘gedebugged’ is…

[quote:34c9cb5731]Trouwens het lijkt me sterk dat het gebruik van tables buiten de standaards valt.[/quote:34c9cb5731]

Is ook niet zo, ze moeten alleen gebruikt worden waar ze voor gemaakt zijn: tubular data weergeven. Dus niet gebruiken voor layout…

[quote:34c9cb5731]Maar goed, zoals gezegd die standaarden zijn idd een beetje aan me voorbij gegaan.[/quote:34c9cb5731]

Meteen aan beginnen joh :wink: Het werkt zóveel fijner als met tabellen…

Ik zou de rode en de gele box alleen een linker en een rechtermarge geven die groot genoeg is om de kolommen links en rechts de ruimte te geven. Scalen gaat dan vanzelf goed op IE5, IE6 en IE5.5 en misschien dat je alleen dan nog voor de groene box een voice-family hack nodig hebt.

[quote:0d8ce9ad28="Syndic"]

Meteen aan beginnen joh :wink: Het werkt zóveel fijner als met tabellen…[/quote:0d8ce9ad28]

Ga ik zeker eens doen. Nooit oud genoeg om te leren. Wel te eigenwijs :wink:

@tennapel

thx, maar het probleem is dat de rode box de volledige grootte moet behouden (of toch in deze opzet) aangezien de menu bovenaan ook tot helemaal rechts moet komen (zit in de rode box).

Ik heb verschillende “opzetten” geprobeerd van boxen (op andere manieren genest), wat ik nu heb ging het beste, maar dus niet op PC.

Het lastige is dat een box met 100% breedte en paddings altijd uitbreekt (en dus scrollbalken geeft), wat ik een beetje vreemd vind, aangezien paddings vanbinnen horen te zitten.

vaste breedte: paarse box, menu rechts
variabel: gele box (text), groene box (‘content’), menu bovenaan

Ik heb ook de indruk dat IE op windows de minimum breedte niet respecteert. Dat denk ik op te lossen door in één van de boxen een onzichtbare gif met die minimumbreedte te plaatsen.

[edit]
ik heb er eens wat meer tekst in geplaats om te zien hoe het boeltje dan reageert. De bedoeling is eigenlijk dat de linkerkolom (paarse kader) opvult. Dan kan ik echte wel een voudig oplossen door de groene kader een achtergrond te geven in de juiste kleur.
[/edit]

Ik zie nog steeds niet in waarom de rode box perse de volle breedte hoeft te hebben. Ik zou de groene relative maken, de paarse via de achtergrond van de groene als 'valse' kolom opmaken, de paarse absoluut positioneren en de rode en de gele box met een margin links en rechts de juiste breedte geven. Dat werkt op ieder browser, zonder box model hacks.

zie : http://www.xs4all.nl/~mosm/testsite/test.html

hey, prima tip! Ik ga het meteen eens goed bekijken en zien of ik het kan toepassen.

hey tennapel, je hebt helemaal gelijk gekregen! Ik heb het aangepast naar jouw voorbeeld, de boel is er stukken eenvoudiger op geworden. http://klanten.3sign.be/ilibris/index.html (heb de kleuren even identiek laten staan voor de liefhebbers).

het resultaat in firefox en safari is zoals gewenst, de pc browsers:
http://www.danvine.com/iecapture/detail/flash/1085422317/klanten.3sign.be/ilibris/index.html
(die foutmelding moeten we gewoon negeren denk ik).

Alleen zettten de oude IE browsers het nog niet gecentreerd, maar dat los ik wel even op door weer een 5% marge toe te voegen links.

[edit]
dat van die marge is geen oplossing. Het is ook niet zo erg dat het niet gecentreerd staat bij sommige browsers. thx tennapel [/edit]

Als je text-align : center op de groene div gebruikt, dan centreert IE5.x de box. Dat moet natuurlijk niet, maar dat gebeurt wel... Als je dan op de andere boxen text-align : left zet, dan klopt het allemaal weer.

er is nog één klein probleem: als er niet genoeg inhoud (tekst) is, dan is de met wit gevulde kader (#container, voorheen met groene kader) niet erg hoog, en vallen de menu's (#quiklinks links en #rightmenu rechts) buiten het 'wit'. Maw, de witte kader houd bij het schalen (in de hoogte) geen rekening met de hoogte van de menu's.

Ik heb geen idee of dit eenvoudig op te lossen is, maar ik dacht eventueel aan een javascript die de hoogte van #container kunstmatig verhoogt als die kleiner is als één van de menu’s.

een float in plaats van een position : absolute gebruiken, maar dan moeten de div's met de menu's wel voor de content div's komen in de HTML file.

heb je tip opgevolg, maar veranderde niet tot ik ook de content (groen) een float: left; meegaf. Spijtig genoeg heeft dit nogal veel complicaties. Zo gaat het centreren verloren in veel browsers, en wil te linkermenu niet meer tot boven komen (paars), wat ook wel enigzins logisch is. Spijtig, alles was eigenlijk OK tot ik ontdekte dat de menu's de boel niet mee vergroten. Dat vind ik een beetje het lastige aan layers: ze schieten alle kanten op, bij soms (minieme) aanpassingen. Een layer die in een andere layer zit blijft daar niet zomaar binnen (dat begrijp ik wel hoor), maar met tabellen weet je dat een cel niet zomaar ergens anders gaat staan.

http://klanten.3sign.be/ilibris/index2.html
http://klanten.3sign.be/ilibris/settings/style2.css

Probleem is dat de meeste browsers de CSS2 optie dat je een div als ware het een tabelcel (layout technisch dan) kan specificeren niet ondersteunen, anders had je dit probleem nooit gehad.

In klant situaties is het aan te raden om wanneer eht echt niet anders kan een eenvoudige tabel voor je structuur te kiezen en dan de rest met CSS (ook de tabel zelf) op te maken.

Zoalng IE6 bestaat zullen we tegen dit probleem aan blijven lopen. Spijtig, maar helaas.

ik heb eens een javascriptje geschreven dat de actuele hoogte van een layer opvangt en deze weergeeft als alert. http://klanten.3sign.be/ilibris/test.html

Wat ik erg vreemd vind is dat de layer van de quikclinks niet eens groot genoeg is om z’n eigen inhoud te bevatten. Het is precies of hij wordt beperkt door z’n omvattende layer (container) dewelke enkel rekening houd met de tekstlayer (content).

Edit:

het komt omdat quicklinks een hoogte van 100% heeft, en zich daarbij (blijft) richten op de hoogte van de omvattende div, nl. container

[edit_2] Ik heb het euvel bedwongen (letterlijk en figuurlijk) met een javascript. Het schijnt goed te werken in safari en firefox, en op het eerste zicht ook op IE (pc). Ik meet eerst de (werkelijke) hoogte op van de twee menu’s (links en rechts), neem de hoogste, en vergelijk die met de hoogte van #container. Daarna vergroot #container indien nodig.
Nu nog wat verder testen (script is nog niet helemaal geoptimaliseerd voor PC-IE dus ik verschiet er van dat het op het eerste zicht goed werkt).
[/edit_2]