9 grid probleem met HTML

[apNia]

Ik zit met het volgende probleem waar ik nu al een tijdje over struikel. Ik heb een table waarin ik een 9 grid/9 slice heb, en een div met text daarin. Het ziet er dan als volgt uit (beetje grof uitgeschetst, maar dat maakt het duidelijk )


Het rode is mijn table indeling, de onderste rand zit zo hoog ivm de gradient. Daar bovenop een div met text (outline, blauwe rand), dit kan uiteraard niet in de middelste <td> want dan houd je veel ruimte onderaan over.

Tot dusver heb ik geprobeerd een wrapper div, met daarin 1) de table 2) de text div. De table doe ik dan op 100% height en laat de height bepalen door de text div. However, hierdoor moeten ze beide absolute gepositioned worden, en met 2 absolute divs kan je de height van de wrapper div niet beinvloeden.

Kortom, wat is de meest gangbare manier om het bovenstaande voorbeeld in HTML voor elkaar te krijgen?

[Room42]

Waarom een table? Waarom een div met de gradient? Daar kun je toch gewoon de juiste CSS voor gebruiker en een achtergrond van maken voor de gradient?

Post eens je code, want ik ben heel benieuwd in welke richting jij zit te denken.

[mithras]

Gewoon een enkel blokelement en progressive enhancement toepassen is geen optie?

HTML:

<p>Lorem ipsum</p>

Cascading Stylesheet:

p {
  border-radius: 1em;

  background: #fff; /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ccc'); /* IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); /* WebKit */
  background: -moz-linear-gradient(top,  #fff,  #ccc); /* Firefox */ 
}

Desnoods met een background-image als je geen gradients wil gebruiken

Sowieso is een table een slecht idee, qua markup is dat niet de semantische implementatie van een paragraaf.

[OkkE]

Eens met wat mithras zegt. Sowieso geen tabellen gebruiken voor zulke opmaak. Ik geloof dat mithras alleen de CSS3 versie is vergeten; alleen de vendor-specific staan er nu.

[Peter]

mithras schreef op dinsdag 19 april 2011 @ 11:24:

Cascading Stylesheet:

p {
  border-radius: 1em;

  background: #fff; /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ccc'); /* IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); /* WebKit */
  background: -moz-linear-gradient(top,  #fff,  #ccc); /* Firefox */ 
}

Desnoods met een background-image als je geen gradients wil gebruiken

Zorg dat je Microsoft en Opera niet buitensluit, en toekomstige versies van WebKit ook niet.

Cascading Stylesheet:

p {
    background: #fff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ccc'); /* IE < 10 */
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); /* Safari 5 */
    background: -webkit-linear-gradient(top, #fff, #ccc); /* Chrome/Safari 6+ */
    background: -moz-linear-gradient(top, #fff, #ccc); /* Firefox */
    background: -ms-linear-gradient(top, #fff, #ccc); /* IE10 */
    background: -o-linear-gradient(top, #fff, #ccc); /* Opera */
    background: linear-gradient(top, #fff, #ccc); /* Future browsers */
}

[mithras]

@Okke & Peter: inderdaad, was even uit de losse pols met een Google query van 1 seconden

Het ging even om het idee om met css het op te bouwen. Sowieso wordt het lastig gezien de gradient van TS begint op ±2/3 van de paragraaf en niet lineair van onder tot boven loopt. Geen idee of css daar in kan voorzien.

[PeetR]

ja dat kan:

Met colorstop of met percentage's

Cascading Stylesheet:

background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(255,255,255)),
    color-stop(0.67, rgb(255,255,255)),
    color-stop(1, rgb(92,91,92))
);
background-image: -moz-linear-gradient(
    center top,
    rgb(255,255,255) 0%,
    rgb(255,255,255) 67%,
    rgb(92,91,92) 100%
);

[crisp]

Peter schreef op dinsdag 19 april 2011 @ 11:41:
[...]
Zorg dat je Microsoft en Opera niet buitensluit, en toekomstige versies van WebKit ook niet.

Ik denk dat dat een afweging is die iedereen voor zichzelf moet maken; wij gebruiken hier en daar ook al CSS3 gradients, maar ik ga daar niet 7 CSS rules aan spenderen. Opera is gewoon te niche, IE10 is nog niet uit en de oude webkit syntax is al deprecated (Chrome ondersteund al de nieuwe syntax). Voor non-supporting browsers gebruik ik dan wel een background-image in dit specifieke geval, maar in andere gevallen hebben dergelijke browsers pech en is het wachten totdat browsers hun vendor-prefix droppen.

[RM-rf]

Los van de HTML-kant.. design-technisch/gebruiksvriendelijk vind ik hier die onderste regel in die afbeelding héél erg aan (en ietwat over misschien) de grens van de prettige leesbaarheid zwabberen...
de letters lijken al een ietwat donkergrijze kleur te hebben en dat overloopje is ook erg donker onderaan...

Bij het toepassen van overlopen ('gradients', voor de mensen die engerlands beter verstaan ) is het erg belangrijk goed mee te wegen of de donkere zijde van deze overlopen nog steeds genoeg contrast tov de tekst overhouden... is dat bv niet het geval kan het slim zijn bewust te kiezen voor een grotere binnenruimte (padding)

[apNia]

Heel erg bedankt voor alle replies!

Even voor de duidelijkheid, ik heb de bovenstaande image gemaakt om m'n probleem te illustreren. De daadwerkelijke image is iets complexer, en mag niet door CSS gegenereerd worden. Dus ik wil m'n rounded corners en gradient echt uit een image laten komen. Ook de leesbaarheid van de text is een heel ander verhaal, in mijn versie is de gradient veel subtieler, ik heb het zoals in de startpost allemaal wat overdreven om m'n punt te illustreren

Reden dat ik voor images wil gaan is dat dit in de toekomst nog veranderd kan worden. Dus images geven me de meeste dyaniek. Stel je voor dat er op elke hoek een Super Mario hoofdje moet komen oid

Maar is het mogelijk, als ik opgeknipte images ga gebruiken?

[OkkE]

Tabellen voor opmaak is anno 2011 echt geen optie meer. Dat deden we in 1990.

Zo'n soort opmaak is ook vele malen makkelijker te bouwen en onderhouden met CSS, waar je overgens ook gewoon images kunt gebruiken. Dus ben erg benieuwd naar hoe je ontwerp er dan wel uit ziet.

Die "meer dynamiek" heb je echt niet door tabellen + images te gebruiken. Wil je er iets aan toevoegen moet je ook je hele image weer slicen. Gebruik van CSS (en waar nodig een image) geeft je de meeste flexibiliteit.

[apNia]

Mijn ervaring is dat met wat dingen, vooral text verticaal in het midden krijgen, CSS nog steeds een hel is. Als je je bewust bent van afmetingen kan je met wat hackjes (want laten we wel wezen, dat is het) je er nog wel een weg omheen werken. Maar in mijn geval kan het alle kanten op. Tables zijn helaas nog steeds handig op bepaalde momenten. Of het hier handig is daargelaten hoor, ik sta open voor opties.

Image slicen is overigens geen probleem OkkE, als het maar geeft wat ik wil. Hoe zie je het door jou genoemde gebeuren met 1 image?

[OkkE]

Als je een screenshot post van hoe je ontwerp er precies uit ziet, kunnen we je iets makkelijker tips geven over hoe het (eventueel) op is te lossen met CSS. Verder hangt het natuurlijk ook af van welke browsers je allemaal perse wil ondersteunen (is het acceptabel dat IE geen ronde hoekjes ziet bijv., of geen gradient).

Jou voorbeeld uit de startpost zou ik waarschijnlijk oplossen met CSS (en een background-image voor de gradient in IE).

Verticaal centreren van tekst is in CSS misschien niet zo simpel als een valign="middle", maar ook zeker wel mogelijk, zelfs zonder hacks in alle browsers met een beetje degelijke CSS ondersteuning.

[apNia]

Mijn uiteindelijke ontwerp scheelt niet veel van wat ik in de startpost heb laten zien (hij is hetzelfde, alleen iets subtieler).

Voor mijn voorbeeld zou misschien CSS volstaan, maar voor scalability's sake wil ik geen CSS gebruiken. Er zit bijvoorbeeld een schaduwrandje onder, wat ook weer niet altijd even goed samengaat met rounded corners. Ik wil niet als een zeikerd klinken, maar nogmaals, de gradient/corners genereren met CSS is geen optie, ik wil met een bitmap danwel sliced bitmaps werken. Dat is echt een must

[OkkE]

Ik zou het zo oplossen: http://azwart.nl/got/got3.html
Eventueel nog met de extra uitbreiding van PeetR, om de gradient pas later te laten beginnen.

Een andere oplossing zou kunnen zijn, met background-images werken. Eén <div> met padding-top en de bovenste ronde hoekjes + schaduw-top als achtergrond. Dan één met de lijn + schaduw links en recht. De laatste met een padding-bottom en de ronde hoekjes + schaduw-bottom.

Als je het echt met tabellen wil oplossen, prima, dan hoop ik dat er iemand anders is die je wil helpen.

[apNia]

Tables zijn geen must verder, als het maar doet wat ik wil (de ruimte tussen 2 elementen met een vaste breedte/hoogte opvullen, zowel verticaal als horizontaal, iets wat nogal problemen gaf dacht ik met divs?)

Probleem bij mijn image is dat bijv de onderste 30 pixels or so de gradient gaan vormen. En al staat er een heel boek in, de onderste 30 blijven de gradient (dus niet van top naar bottom). Om maar een voorbeeld te noemen waarom ik images wil. Bedankt voor je voorbeeld though

[OkkE]

Heb er nog even snel een CSS+images versie bij gezet, zoals ik al kost beschreef in mijn vorige post. Om je een idee te geven en wat op weg te helpen. Het kan stukken netter, maar het idee is duidelijk.

Updated: http://azwart.nl/got/got3.html

[apNia]

Probleem daarbij is weer dat de text niet over de gradient heenloopt, wat wel de bedoeling is. Ook vraag ik me af hoe het dan gaat werken als je in de breedte wilt scalen.

[OkkE]

Tekst kan over de gradient lopen, als je de .bottom <div> iets minder padding geeft.

In de breedte schalen kan ook, maar dan zal je het verticaal uitrekken op de zelfde manier moeten oplossen als wat nu bij horizontaal gebeurd.

Tabellen is misschien, vooral met weinig kennis van CSS, een snelle oplossing; maar het is eigenlijk ook een hele vieze oplossing.

[tecsman]

apNia schreef op dinsdag 19 april 2011 @ 15:23:
maar voor scalability's sake wil ik geen CSS gebruiken.

Leestip: Bulletproof web design, van Dan Cederholm

[phex]

nvm

[ Voor 95% gewijzigd door phex op 20-04-2011 19:08 . Reden: OP's punt is duidelijk ]

[_Thanatos_]

Opera is gewoon te niche

Copy paste de -moz- notatie en vervangen door -o- is dan teveel moeite?! Dat je browsers niet ondersteunt die niet bestaan, prima, maar als je hippe code wilt schrijven, vind ik dat je dat wel netjes moet doen voor browsers die wel bestaan en het ondersteunen. Opera 11.10 doet dat nml. En zó niche is dat niet, gezien de nieuwste Opera Mobile dezelfde layout engine gebruikt, en een veelgebruikte mobiele browser is.

[crisp]

_Thanatos_ schreef op vrijdag 22 april 2011 @ 02:23:
[...]

Copy paste de -moz- notatie en vervangen door -o- is dan teveel moeite?!

Nee, maar de syntax is meestal toch al vrij bloated, en hoe kleiner je CSS files hoe sneller je pagina getoond kan worden.

Dat je browsers niet ondersteunt die niet bestaan, prima, maar als je hippe code wilt schrijven, vind ik dat je dat wel netjes moet doen voor browsers die wel bestaan en het ondersteunen. Opera 11.10 doet dat nml.

Maar blijkbaar is de support nog niet dusdanig dat de vendor-prefix gedropped kan worden...

En zó niche is dat niet, gezien de nieuwste Opera Mobile dezelfde layout engine gebruikt, en een veelgebruikte mobiele browser is.

Maar juist voor mobile moet je terughoudend zijn met dergelijke upsmuck aangezien het de rendering ook verzwaard.

[Bosmonster]

crisp schreef op vrijdag 22 april 2011 @ 02:53:
[...]

Maar juist voor mobile moet je terughoudend zijn met dergelijke upsmuck aangezien het de rendering ook verzwaard.

Zeker aangezien de mobiele Opera's over het algemeen gebruikt worden op oudere mobieltjes. Die wil je geen schaduwen en gradients laten renderen.

Dat Opera z'n eigen vendor-prefix gebruikt is leuk, maar eigenlijk zouden ze verstandig moeten worden en die zo snel mogelijk laten vallen. Ze zijn simpelweg te klein voor developers om daar rekening mee te houden.

Ze kunnen websites er dus snel beter uit laten zien door de prefix rap te droppen.

_Thanatos_ schreef op vrijdag 22 april 2011 @ 02:23:
[...]

Copy paste de -moz- notatie en vervangen door -o- is dan teveel moeite?!

Het supporten van Opera gaat helemaal niet om het feit of het veel moeite is of niet. Op het moment dat je Opera opneemt bij je browser-support in een offerte betekent dit ook dat je deze browser volledig mee moet nemen in je testtraject en dat is het simpelweg niet waard. Het betekent namelijk ook dat je Opera-bugs actief moet gaan oplossen.

Gebruikers van Opera weten over het algemeen wel dat ze een niche-product gebruiken dat zelden officieel ondersteund wordt. Dat is een keuze die je maakt door zo'n 1%-browser te gebruiken.

[ Voor 34% gewijzigd door Bosmonster op 22-04-2011 08:34 ]

[_Thanatos_]

Maar blijkbaar is de support nog niet dusdanig dat de vendor-prefix gedropped kan worden...

Daarin ben je dan nog steeds discriminerend richting Opera, gezien je webkit- en mozilla-notaties wél opneemt. Het droppen van een vendor prefix ligt ook niet zozeer aan de support in de browser, maar aan de status van de spec. Gradients is nog minder "af" dan bijv borders of shadows, maar dat zegt niets over hoe goed de browser is in het renderen.

Het supporten van Opera gaat helemaal niet om het feit of het veel moeite is of niet. Op het moment dat je Opera opneemt bij je browser-support in een offerte betekent dit ook dat je deze browser volledig mee moet nemen in je testtraject en dat is het simpelweg niet waard. Het betekent namelijk ook dat je Opera-bugs actief moet gaan oplossen.

Er zit nog steeds een groot verschil tussen "ondersteunen" en "zie maar of het werkt". In dat laatste geval kan het geen kwaad (behalve een paar extra bytes) om die notatie op te nemen. Daarvoor hoef je geen volledige ondersteuning te bieden. "Als het werkt, leuk voor je, als het niet werkt, dan pak je maar een ondersteunde browser. We doen ons best voor Opera, maar garanderen niets". Ofzo.

[Bosmonster]

"We doen ons best voor Opera, maar garanderen niets". Ofzo.

Dat is niet echt iets waar je een klant een handtekening onder kan laten zetten.

Het is wel ondersteunen of niet ondersteunen, niet een beetje.

Wat dat betreft valt Opera tegenwoordig in dezelfde categorie als IE6 (hoewel die nog meer gebruikers heeft). Als de klant niet expliciet aangeeft dat er ondersteuning voor moet zijn, wordt het compleet genegeerd tijdens ontwikkeling en testen.

[ Voor 35% gewijzigd door Bosmonster op 22-04-2011 10:02 ]

[posttoast]

Bosmonster schreef op vrijdag 22 april 2011 @ 09:59:
[...]


Dat is niet echt iets waar je een klant een handtekening onder kan laten zetten.

Het is wel ondersteunen of niet ondersteunen, niet een beetje.

Er zit nog wel iets tussenin. In mijn offertes ondersteunde ik tot voor kort IE6 slechts "functioneel". Ofwel: de site moet werken (navigeerbaar en leesbaar zijn), maar mag afwijken van het visueel ontwerp. Maar goed, dat is een beetje off-topic

[Bosmonster]

posttoast schreef op vrijdag 22 april 2011 @ 10:02:
[...]

Er zit nog wel iets tussenin. In mijn offertes ondersteunde ik tot voor kort IE6 slechts "functioneel". Ofwel: de site moet werken (navigeerbaar en leesbaar zijn), maar mag afwijken van het visueel ontwerp. Maar goed, dat is een beetje off-topic

Dit vind ik hele lastige dingen, aangezien de definitie van "functioneel" en "afwijken van visueel ontwerp" extreem breed opgevat kan worden en dus onnodige discussie met de klant op kan leveren.

Daarnaast. Ik denk dat 9 van de 10 klanten niet eens weet wat Opera is

Maar goed, dit gaat inderdaad off-topic. Misschien eens tijd voor een officieel browser-support topic. Dat is toch altijd een issue van vandaag en aan continue herevaluatie onderhevig.

[ Voor 12% gewijzigd door Bosmonster op 22-04-2011 10:09 ]