Achtergrondplaatje in content met tekst verschil FF met IE en Chrome

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.414
Goedemiddag allen,
Bij een website die ik heb gemaakt zit ik met een, ik verwacht, niet zo'n ingewikkeld probleem maar ik weet niet hoe ik het moet oplossen.
Het lijkt op de fauxcolumn kwestie maar toch ietsjes anders.
Genoeg om de hete brei heen gepraat: http://albuswebdesign.nl/helpmij/ voorpagina content plaatje ziet er bij IE en Chrome goed uit maar bij FF niet. Als de tekst meer of minder wordt wordt het plaatje korter of langer, ook bij IE en Chrome. Misschien moet ik een height gaan instellen van hoogte plaatje bijv. 550px maar is dat de juiste oplossing?
Bedankt!
 
Laatst bewerkt:
Ja, het zijn twee faux-columns die in elkaar gekokerd moeten komen te zitten.
Wat je kan doen:
  • De background weghalen uit de #content_front.
  • De #container de takken-background geven.
  • De #wrapper de sidebar-oranje background geven, met een {overflow:hidden} om de hele (gefloate) sidebar te omvatten.

Hiermee lopen de takken nu onder de #content_front door, ook als die kort is. Bij langer worden ervan gaan de takken zich herhalen.
De oranje sidebar-bg wordt er gewoon overheen geplakt in het #wrapper-laagje erboven. De rechterkant van de #wrapper is daarmee transparant, en daar komen de takken er doorheen schijnen.
Code: 
#content_front {
     ...
/*  background-image: url("../images/content_background.png"); <== schrappen */
}

#container {
     background: url(http://albuswebdesign.nl/helpmij/images/content_background.png) 100% 80px; /* takken onder de logo-strook beginnen */
}

#wrapper {
     background: url(http://albuswebdesign.nl/helpmij/images/content-bg.png) repeat-y; /* oranje voor sidebar */
     overflow:hidden;
}

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ah, nu snap ik wat je bedoeld. Aan die tip heb ik wel wat maar volgens mij toch niet in mijn voorbeeld. Heb even een ander plaatje erin gezet want dan wordt de vraag helderder. Het wordt uiteindelijk een WordPress site en de klant gaat de voorpagina (met die voeten) zelf aanpassen dus de tekst is dan wel langer dan wel korter. Ik denk dat, gezien het soort plaatje, ik wel een height moet gebruiken.
 
Ja-ha, stiekem via het bg-img een heel ander type layout ingevoerd! :p
Daarmee komen de ook problemen heel anders te liggen.

Dat wordt met mijn suggesties:

In geval 1 wordt het content-gedeelte maar net zo hoog als de sidebar, en komt ruimte te kort om de cirkel van de bg-afbeelding vol te maken.
In geval 2 komt de cirkel er wel compleet op, maar gaat het mis met de tekst en wordt de content-bg daaronder herhaald (van boven af).
In geval 3 gaat het goed met de tekst (d.w.z. als de bezoeker de lettergrootte niet geschaald heeft!), maar is de bg onderop weer incompleet.

Om daar om heen te zeilen zal inderdaad iets met de hoogte gedaan moeten worden. Niet van het bg-img (in css2.1 is de hoogte van een bg-img niet aan te passen; en css3 wordt nog niet door alle nu in gebruik zijnde browsers ondersteund), maar van de content-div.
Dat kan bv. worden:
Code: 
#content_front {
	background-image: none;
	padding: 150px 37px 0 40px;
	min-height: 555px; 
}
Met als resultaten:



Geval 1a: gaat goed.
Geval 2a niet: tekst loopt van de cirkel af, weer herhaling.
Geval 3a: gaat goed.

Van de herhaling kan je af komen door de onderkant van de afbeelding naar de witte achtergrondkleur te laten verlopen, en dan een no-repeat in te schakelen:



Maar (1) als je niet tevoren weet dat de content binnen de perken van de cirkel blijft, zit je nog steeds vast. :confused:
Een manier om dan te ontsnappen is dan om de transparantie van de cirkel uit de afbeelding te halen, en te gaan inbouwen in de content-div.
  • Een "rechthoekige cirkel" zou in dit verband wel zo makkelijk op te maken zijn! :d
Andere mogelijkheid: de content-div op een vaste hoogte houden, en lange tekst met een inwendige scrollbar laten bedienen.

Maar (2) als er ook nog een variabele hoogte van de sidebar moet zijn, komt alles weer anders te liggen...
Dus het is maar welke kant je precies op wilt.

Oftewel: ik denk dat het verstandig is om eerst een compleet "Pakket van Eisen" te maken (bv. in de geest van zoiets), en dan te kijken of dat realiseerbaar is: gegeven de omstandigheid dat je niet alle instellingen van de bezoeker in de hand hebt.

Er zou ook uit kunnen komen dat een eenvoudiger ontwerp wel zo praktisch is, vooral als de klant zelf tekst-aanpassingen moet kunnen maken en niet tegelijkertijd de html of css moet hoeven aan te passen.
  • Of eventueel: een eenvoudig ontwerp als basis en default-style, plus een riedel javascript om een complexe opmaak te realiseren en in de touwen te houden.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Fijn hoor CSShunter, nu kom ik eruit. De damns-nw-1a.htm vind ik het beste, want ik kan de gebruiker makkelijk zeggen dat bij teveel tekst het niet meer in de cirkel van het plaatje past. Zo'n wit gradient (damns-nw-4.htm) onthoudt ik want kan ik de toekomst ook een optie bij andere websites worden. Een goed idee. Ik zal bij w3schools kijken wat nu het verschil tussen heigth en min-height is want dat zie ik niet helemaal.
Maar dank je wel voor de hulp! :thumb:
 
bij w3schools kijken wat nu het verschil tussen height en min-height is
Klik om te vergroten...
W3schools geeft daar niet echt een uitleg over, zie ik; alleen de definitie. Ik doe een poging. :)

Het verschil is eigenlijk precies wat het zegt: een height is een vastgepinde hoogte, een min-height is een minimale hoogte > d.w.z. als de inhoud binnen een container-div met een min-height hoger is dan de min-height, dan rekt die omvattende container automatisch mee in hoogte. Inclusief de background van die container.

En dat wil ook zeggen: als de minimale hoogte binnenin niet bereikt wordt, maakt het geen verschil of er een height of een min-height is opgegeven. Dan is de height al voldoende om de inhoud er in te laten passen.


  • Oftewel: bij test damns-nw-1a.htm, met gegarandeerd weinig inhoud, maakt het niet uit.
  • Maar bij test damns-nw-4.htm maakt het wel uit. Daar rekt de inhoud dankzij de min-height z'n container #content_front naar behoefte uit.
  • Zou je daar een vaste height in zetten, dan wordt de inhoud domweg afgekapt waar die height ophoudt: zie deze damns-nw-5.htm.

Zou je zo'n container-met-vaste-hoogte een {overflow: visible;} meegeven (hier lukt dat niet omdat een niveau hoger, op de #wrapper, een {overflow: hidden;} zit), dan wordt de overbloezende inhoud buiten de container wel zichtbaar, maar dan zonder de background van de container (met de background van een niveau hoger). En dat is meestal niet de bedoeling.
  • Zie deze (met weggehaalde overflow:hidden op de #wrapper): damns-nw-5a.htm.

Conclusie:
Je gebruikt een min-height als je tevoren niet kunt weten hoe hoog de inhoud van een element gaat worden, en er wel een minimale hoogte nodig is voor de background o.i.d. - Dat werkt bv. als je dezelfde structuur op verschillende pagina's toepast: bij de ene pagina is er veel, bij een andere weinig inhoud.


  • Alternatief is om wel een vaste hoogte aan te houden, maar een {overflow: auto;} op de container te zetten. Dan krijgt het binnenwerk zo nodig een verticale scrollbar en kan alle inhoud toch gelezen worden.
    Meestal is echter zo'n binnenwerkse scrollbar erg onhandig en gebruikersonvriendelijk, zeker als er ook nog een gewone rechter-scrollbar is.
    Zie deze: damns-nw-6.htm.

Hebben we nu alle mogelijkheden gehad? ;)

Met vriendelijke groet,
CSShunter
 
Hebben we nu alle mogelijkheden gehad? ;)
Klik om te vergroten...
Om zelf maar antwoord te geven: nee! :rolleyes:

De damns-nw-1a.htm vind ik het beste, want ik kan de gebruiker makkelijk zeggen dat bij teveel tekst het niet meer in de cirkel van het plaatje past.
Klik om te vergroten...
Ja, op zich wel, want dan wordt de damns-nw-3a.htm (met dezelfde html/css) het uiterste, en dat lijkt goed te gaan.

Maar! Er is nog geen rekening mee gehouden dat een bezoeker het prettig vindt of nodig heeft om een groter letterformaat te hebben. Bv. in Internet Explorer en Firefox kan dat zonder meteen op alles tegelijk te hoeven inzoomen.
Resultaat van dezelfde damns-nw-3a.htm op verschillende lettergroottes:

damn-lettergrootte.png

Ai! Loopt de inhoud toch nog uit de cirkel! :shocked:
Betekent:
  • ofwel toch een min-height gaan toepassen (met verloop in het background-img),
  • ofwel voor de veiligheid toch een inwendige scrollbar met overflow:auto er in zetten,
  • ofwel het maximum aantal lettertekens uitvogelen (inclusief alle spaties en lege regels!) waarbij het op "Extra Groot" in IE nog net goed gaat; daarmee is bij een normale lettergrootte het onderste deel van de cirkel altijd ongevuld.

Extra complicatie: de vaste <br> regeluiteinden (om cirkelvormige teksten te maken) kunnen behoorlijk gaan opspelen als de lettergrootte opgeschaald wordt. Dan kunnen er regels met één woord gaan ontstaan...
Escapes?
  • Geen cirkelvormig binnenwerk gebruiken, maar een rechthoek (met bv. afgeronde hoeken).
  • De cirkel uit het background-img halen (dat full-color maken), en een cirkel met semi-transparantie in een laag in de html opnemen; met wat handige css zou deze dan (hopelijk) als voorgrond-image meeschalend met het letterformaat gemaakt kunnen worden (wordt wel redelijk ingewikkeld; vergelijk deze).

Iets anders kan ik zo gauw niet bedenken.

Gegroet!
CSShunter
_________
PS: Met css3 kan je wel (voor de browsers die dat ondersteunen) met een border-radius mooie cirkeltjes van een container maken, maar de inhoud voegt zich helaas niet naar de randen (Try it yourself):

css3-border-radius.png
 
Laatst bewerkt:
Ten eerste, fijn dat je je vraag zelf beantwoord :) Ik zou het lastig gevonden worden.
Ik ben trouwens weer sprakeloos CSShunter! Je kan het goed uitleggen en voor mij al bijna te uitgebreid (maar wel er fijn!! :love:). Rekening houdend met tekst groter/kleiner helemaal niet gedaan. Die border-radius ken ik trouwens, inderdaad heel mooi. Curvelicious kende ik niet, interessant! Jeetje, wat weet ik nog weinig :o
Het is me nu in ieder geval duidelijk dat ik ook nog meer moet testen voortaan, ik weet nu beter wat min-height verschil met height is (want inderdaad met w3schools vond ik het nog wat onduidelijk).

Ja, idee om met overflow:auto te werken (dus dan komt bij min-height er een scroll-bar bij, bij meer tekst).
Volgens mij kan ik deze vraag wel sluiten want hij is meer dan genoeg beantwoord! Top. :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan