css probleem, 3 kolommen moeten altijd even hoog zijn

[Verwijderd]

Ik ben bezig met een opzet voor een website, met een 3 kolommen layout. Nu is het de bedoeling dat alle 3 de kolommen altijd even lang zijn, afhankelijk vanaf hoe lang de middelste kolom is. De linker en rechter moeten mee gaan in de hoogte dus. Dit is wat ik tot nu toe heb in mijn css. Het gaat dus om de div #main_left en #main_right. Wat doe ik fout? Ik heb al een background ingesteld die zich zelf repeat binnen de #main+wrapper div.
Oja fluid divs vind ik niet mooi... Dus als het kan een oplossing zonder dat.
(Zoals je ziet wil ik binnen deze divs nog andere divs onderverdelen maar dat is nu niet van belang..)


css..

Cascading Stylesheet:

body
{
    background-image: url(../images/layout/main/main_background.jpg);
    background-repeat: repeat;
    font-family: Verdana, Arial, Sans-Serif;
    margin: 0px auto;
    text-align: center;
}
DIV
{
    text-align: left;
}
#main_bottom
{
    clear: both;
    background-color:Orange;
    height: 100px;
}
#main_content
{
    background-color: Olive;
    width: 790px;
}
#main_left
{
    float: left;
    width: 100px;
}
#main_left_bottom
{
    background-image: url(../images/layout/main/main_left_bottom.jpg);
    background-repeat: no-repeat;
    height: 206px; 
    vertical-align: bottom;
    width: 100px;
}
#main_left_gradient
{ 
    height: 100%; 
    width: 100px;
}
#main_left_top
{
    background-image: url(../images/layout/main/main_left_top.jpg);
    background-repeat: no-repeat;
    height: 417px;
    vertical-align: top;
    width: 100px;
}
#main_menu
{
    float: left;
    height: 100px;
    width: 790px;
}
#main_middle
{
    float: left;
    height: 100%;
    width: 790px;   
}
#main_right
{
    background-color: Yellow;
    float: right;
    height: 100%;
    width: 100px;
}
#main_top
{
    background-image: url(../images/layout/main/main_top.jpg);
    background-repeat: no-repeat;
    height: 118px;    
}
#main_wrapper
{
    background-image: url(../images/layout/main/main_back.jpg);
    background-repeat: repeat;
    height: 100%;
    overflow: hidden;
    padding-bottom: 0px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0px;
    width: 990px;
}

[frickY]

Zoek eens naar "faux columns"

[Verwijderd]

Dat heb ik gedaan, ik heb in de #main_wrapper een background ingesteld die zicht zelf repeat, maar de kolommen sizen niet mee. Zie ik hier iets over het hoofd?

Cascading Stylesheet:

#main_wrapper
{
background-image: url(../images/layout/main/main_back.jpg);
[b]background-repeat: repeat-y;[/b]
height: 100%;
overflow: hidden;
padding-bottom: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 0px;
width: 990px;
}

[ Voor 48% gewijzigd door Verwijderd op 03-04-2006 20:08 ]

[JHS]

Ik denk dat "overflow: hidden;" voorkomt dat dat gebeurt. Waarom staat die ertussen .

En persoonlijk zou ik het op prijs stellen als je [code=css][/code] tags om je code heen zou zetten .

[Verwijderd]

JHS schreef op maandag 03 april 2006 @ 19:57:
Ik denk dat "overflow: hidden;" voorkomt dat dat gebeurt. Waarom staat die ertussen .

En persoonlijk zou ik het op prijs stellen als je [code=css][/code] tags om je code heen zou zetten .

Het staat nu tussen de daarvoor bestemde quotes.

Het weglaten van overflow: hidden lijkt niet uit te maken..

[Scheeve]

xhtml 1.0 en CSS met height: 100% werkt niet echt toch?

[Verwijderd]

Scheeve schreef op maandag 03 april 2006 @ 20:27:
xhtml 1.0 en CSS met height: 100% werkt niet echt toch?

? Dat zou best kunnen maar kan je dan vertellen wat ik moet aanpassen?

[Scheeve]

Hangt er puur vanaf hoe jij je site wilt hebben, een screenshot lijkt me wel handig. Ik heb dit op een heel andere manier opgelost dan ik eigenlijk dacht te doen.

[Verwijderd]

Zo dus

screenshot

[ Voor 68% gewijzigd door Verwijderd op 04-04-2006 13:04 ]

[Scheeve]

Kijk aan, nu wil ik alleen nog weten wat er gebeurd wanneer de middelste kolom langer wordt, waarmee worden de rechter en de linker kolom opgevuld?

// edit: ik neem aan met patroon helemaal onderaan de middelste kolom ?

[ Voor 21% gewijzigd door Scheeve op 03-04-2006 20:45 ]

[Verwijderd]

Scheeve schreef op maandag 03 april 2006 @ 20:42:
Kijk aan, nu wil ik alleen nog weten wat er gebeurd wanneer de middelste kolom langer wordt, waarmee worden de rechter en de linker kolom opgevuld?

Zoals je ziet zijn het eigenlijk zes kolommen. Om even een misverstand uit de weg te ruimen. Het gaat nu om de buitenste 2 kolommen (de zeegroene) en de content kolom (welke ook weer 3 kolommen bevat).

De rechter en linker kolom bestaan beide weer uit 3 delen. Een bovenkant, een midden en onderkant. De bovenkant en onderkant zijn ook background images (main_left_top en main:left_bottom). De middelste is een gradient image die een height van 100% heeft. Deze wordt dus altijd opgerekt zodat het past.

Een voorbeeld waar ik het idee van af heb gekken: http://www.mtv.nl
Alleen daar zijn het deels tables dus ik moet wat herschrijven.

Is dit voldoende informatie?

[Scheeve]

je kunt de height van kolommen faken door het in de achtergrond van de div container te verwerken

[Verwijderd]

Scheeve schreef op maandag 03 april 2006 @ 20:54:
je kunt de height van kolommen faken door het in de achtergrond van de div container te verwerken

Hoe bedoel je dat precies? Ik dacht het zo te proberen background-repeat: repeat-y Volgens mij ben ik er bijna.... hoop ik

[ Voor 7% gewijzigd door Verwijderd op 03-04-2006 20:57 ]

[Scheeve]

Verwijderd schreef op maandag 03 april 2006 @ 20:56:
[...]


Hoe bedoel je dat precies? Ik dacht het zo te proberen background-repeat: repeat-y

Jah, je "faked" de hoogtes van de kolommen door een achtergrond te maken in de DIV layer die alle kolommen bijeen houdt. Zo lijkt het net of de kolommen doorlopen nadat ze eigenlijk op zijn gehouden. Maar ik weet niet precies of dit is wat je wilt. Het is meer een omzeiling van het probleem.

[Verwijderd]

Scheeve schreef op maandag 03 april 2006 @ 20:59:
[...]


Jah, je "faked" de hoogtes van de kolommen door een achtergrond te maken in de DIV layer die alle kolommen bijeen houdt. Zo lijkt het net of de kolommen doorlopen nadat ze eigenlijk op zijn gehouden. Maar ik weet niet precies of dit is wat je wilt. Het is meer een omzeiling van het probleem.

Wat jij nu beschrijft is toch wat ik nu heb?

[Scheeve]

Ik geef alleen een mogelijkheid om jouw probleem op te lossen, heb nog niet de tijd gehad om mij in de code te verdiepen. Maar volgens mij doe je iets helemaal verkeerd als ik zo snel de link volg die jij hebt genoemd. Het ziet er in IE en in FF al verschillend uit. Geen goed teken

[Verwijderd]

Scheeve schreef op maandag 03 april 2006 @ 21:03:
Ik geef alleen een mogelijkheid om jouw probleem op te lossen, heb nog niet de tijd gehad om mij in de code te verdiepen. Maar volgens mij doe je iets helemaal verkeerd als ik zo snel de link volg die jij hebt genoemd. Het ziet er in IE en in FF al verschillend uit. Geen goed teken

Nouja, dat hoeft natuurlijk niet.

[Verwijderd]

Scheeve schreef op maandag 03 april 2006 @ 21:03:
Ik geef alleen een mogelijkheid om jouw probleem op te lossen, heb nog niet de tijd gehad om mij in de code te verdiepen. Maar volgens mij doe je iets helemaal verkeerd als ik zo snel de link volg die jij hebt genoemd. Het ziet er in IE en in FF al verschillend uit. Geen goed teken

Dankjwel, maar ik kom er dus nog steeds niet uit.... De buitenste kolom sizen nog steeds niet mee.

[Verwijderd]

Kan iemand zeggen of ik de faux columns methode correct heb toegepast. Of doe ik wat verkeerd? Zo ja, wat doe ik verkeerd?

[BtM909]

Verwijderd schreef op dinsdag 04 april 2006 @ 09:33:
Kan iemand zeggen of ik de faux columns methode correct heb toegepast. Of doe ik wat verkeerd? Zo ja, wat doe ik verkeerd?

Zo werkt dit forum dus niet... Iets meer zelf-inzet is wel degelijk gewenst

Probeer zelf met het artikel aan de hand om te kijken waar de verschillen zitten en mocht je er dan niet uitkomen, dan kunnen we met je meekijken (met relevante code). Simpelweg wachten tot je "gerecht klaar is bij de Chinees" is toch even andere koek

[Verwijderd]

BtM909 schreef op dinsdag 04 april 2006 @ 11:19:
[...]

Zo werkt dit forum dus niet... Iets meer zelf-inzet is wel degelijk gewenst

Probeer zelf met het artikel aan de hand om te kijken waar de verschillen zitten en mocht je er dan niet uitkomen, dan kunnen we met je meekijken (met relevante code). Simpelweg wachten tot je "gerecht klaar is bij de Chinees" is toch even andere koek

In de openingspost heb ik netjes het probleem uitgezet. Ik heb aangegeven wat ik tot nu toe heb gedaan en ik heb de bron hier geplaatst daarvan.
Ook heb ik vermeld dat ik een background heb ingesteld achter de kolommen die zich verticaal herhaalt. Dus daaraan had je kunnen zien dat ik artikelen over faux columns had gelezen.
Dit zijn precies de punten die je noemt aan wat ik moet voldoen om een vraag te kunnen stellen.
Dat er mensen reacties plaatsen waar ik niet veel aan heb is de de reden dat ik deze post plaatste "Kan iemand zeggen of ik de faux columns methode correct heb toegepast. Of doe ik wat verkeerd? Zo ja, wat doe ik verkeerd?".
Eigenlijk is het dus een verwijzining naar de eerste post, waar ik aangaf dat ik de kolommen al had aangezet volgens die methode. Immers, de reacties daarna leverde voor mij geen nieuwe informatie op.

p.s.
Mag ik jou vragen wat jij in dit geval onder relevant code verstaat? De css waar ik het over heb en die ik heb bijgevoegd lijkt me toch vrij relevant. Of begrijp ik dat verkeerd?

Ik wacht niet zomaar, ik onderneem zelf genoeg actie om er achter te komen wat ik fout doe. Ik vind het knap dat jij aan de hand van een post kan zeggen wat ik daarna heb lopen wachten. Heb je me zien wachten? Nee... Schrijf dan ook niet van die belachelijke onwaarheden over mij.

[Rowanov]

Wat BtM909 aangeeft is dat we in dit topic weinig terugzien van wat je nou zelf geprobeerd hebt. Als je eerst eens de artikelen leest over faux-collumns dan weet je wat het is. Voor de rest lijkt het me gewoon een geval van het niet helemaal onder controle hebben van de css, getuige de verschillen in IE en FF. Meestal gaan mensen als volgt te werk als ze tegen een probleem aanlopen; ze maken een gereduceerde testcase. Dat is een pagina waar alle overodige code uitligt. Het kan zo zijn dat je even vanaf voor af aan de pagina moet opbouwen en per css regel die je toevoegt de pagina op nieuw in de browser te bekijken. Zo leer je waar de fout zit en kan je ons precies uitleggen wat je probleem is en beter nog, je kan het laten zien. Voor zulke problemen als dit heb je het forum niet nodig als je het gewoon vanaf het begin slimmer aanpakt.

[Verwijderd]

Rowanov schreef op dinsdag 04 april 2006 @ 13:10:
Wat BtM909 aangeeft is dat we in dit topic weinig terugzien van wat je nou zelf geprobeerd hebt. Als je eerst eens de artikelen leest over faux-collumns dan weet je wat het is.

Als je de eerste post leest, dan kun je zien dat ik dat wel heb gedaan. Ik heb de hele css geplaatst en heb aangegeven op welk probleem ik vastloop. Tot nu toe heb ik daar nog geen enkele reactie op gehad waar ik wat aan had.

[Rowanov]

Dat is vrij weinig gereduceerd; je gaat mij niet wijsmaken dat dat alle relevante code is. Bouw het dus eens vanaf het begin op en kijk waar het fout gaat. Het is geen helpdesk hier, maar je hebt al wel een hoop nuttige tips gehad om het zelf te leren oplossen.

Het kan aan mij liggen, maar ik heb je nog niets zien proberen of nieuwe voorbeelden zien posten.

[ Voor 17% gewijzigd door Rowanov op 04-04-2006 13:23 ]

[Verwijderd]

Rowanov schreef op dinsdag 04 april 2006 @ 13:21:
Dat is vrij weinig gereduceerd; je gaat mij niet wijsmaken dat dat alle relevante code is. Bouw het dus eens vanaf het begin op en kijk waar het fout gaat. Het is geen helpdesk hier, maar je hebt al wel een hoop nuttige tips gehad om het zelf te leren oplossen.

Het kan aan mij liggen, maar ik heb je nog niets zien proberen of nieuwe voorbeelden zien posten.

Omdat ik sinds mijn beginpost niet verder ben gekomen. Dat was de reden dat ik hier een bericht heb geplaats. Ik had van alles zelg geprobeerd en heb toen besloten het hier te posten. Sinds die post gisteren ben ik nog niet verder gekomen.

[Rowanov]

Dan is nu misschien het moment om te proberen wat ik aangaf Daar leer je zelf het meest van.

Bij deze layout is het misschien wel zo dat je wat extra elementen (div's of iets in die geest) nodig hebt om de achtergrond zo te krijgen. Voor zover ik het kon zien, want ik kan je voorbeeld niet meer terugvinden (niet weg-editten en zo), wilde je een layout met:

• bovenaan en plaatje
• middenstuk met 1 kleur
• onderaan een gradient plaatje

Met extra elementen bedoelde ik 2 geneste containers; nu kun je als eerste container gewoon de body gebruiken en daar een achtergrond kleur voor het middenstuk en het plaatje voor bovenaan als achtergrodn in zetten. De buitenste container div in de body gebruik je dan voor het plaatje onderaan. Je hebt dan nog 1 div nodig als container om de content te centreren.

Edit: ik probeer wel een voorbeeld te bakken, heb toch niets te doen

Edit 2: ik geloof dat deze pagina het globale idee van wat je wil bereiken weergeeft? Nu is dit niet de schoonste css en html, maar misschien een schop zetje in de goede richting.

[ Voor 21% gewijzigd door Rowanov op 04-04-2006 14:24 ]

[Verwijderd]

Sorry voor het weghalen http://home.quicknet.nl/q...n/NF-site/NF_homepage.jpg

De linkerkolom is een div genaamd left.

Deze left bevat een left_top met een background image, een left_bottom met een background image en daarussen een div_gradient met daarin een afbeeldingen op 100%. Oftwel wanneer de content langer wordt zal de gradient iamge oprekken naar 100%..

Het gaat me niet zozeer om het gradient verhaal maar meer om het oprekken zelf waar ik niet uitkom. Dat gradient komt daarna wel wel.

Bedankt voor je link, ik ga er thuis mee aan de slag.

In de css zie ik het volgende

Cascading Stylesheet:

#content-wrapper {
    width: 700px;
    margin: 0 auto; /* centreer de content-wrapper, deel 2 */
    text-align: left; /* zet de tekst weer links */
    background: url('repeat.gif') repeat-y center;
    overflow: auto; /* clear de floats */
}

Zelf had ik de verticaal herhalende background al ingevoegd. Wat zorgt er in dit stukje css nou voor dat de kolommen hier wel even lang worden gemaakt?

[ Voor 28% gewijzigd door Verwijderd op 04-04-2006 16:14 ]

[Rowanov]

Volgens mij heb je een puntje gemist. De feitelijke kolommen worden niet langer gemaakt; dit effect wordt genept doordat de content-wrapper een achtergrond heeft (bekijk de afzonderlijke plaatjes eens) die de hele container doorloopt. Het even lang maken van de kolommen wordt niet ondersteund in de huidige css versie. Ik raad je aan de de webdeveloper toolbar te installeren (firefox IE) en vervolgens met de outline functie de divs eens te bekijken. Dan zie je de eigenlijke afmetingen van de divs en wordt het vast wel duidelijk.

Edit: Even ter verduidelijking, heb je het nu over het blauwe achtergrond gedeelte wat dus als het ware naast je gehele content staat? Ik zie in je design namelijk geen moeilijkheden voor de drie kolommen.

[ Voor 15% gewijzigd door Rowanov op 04-04-2006 16:48 ]

[guanche]

Ik denk dat dit wel kan exact is wat je zoekt.. Ik ben het nog bezig met uitdokteren, maar een hoop van de css kan er uit.

Succes er mee

http://www.redmelon.net/tstme/3cols2/

[Rowanov]

Daar heb ik een paar problemen mee:

• De maker geeft zelf toe een hack te gebruiken; die hack gaat niet meer werken in IE 7
• De css code geeft float en position aan hetzelfde element
• Hij doet enge dingen met negatieve marges

Faux collumns daarentegen werkt altijd en maakt geen gebruik van hacks.

[ Voor 10% gewijzigd door Rowanov op 04-04-2006 18:04 ]

[Scheeve]

Jah, met het oog op de toekomst kun je het best gebruik maken van faux collumns. Probeer geen gebruik te maken van hacks.

[Verwijderd]

Rowanov schreef op dinsdag 04 april 2006 @ 16:41:
Volgens mij heb je een puntje gemist. De feitelijke kolommen worden niet langer gemaakt; dit effect wordt genept doordat de content-wrapper een achtergrond heeft (bekijk de afzonderlijke plaatjes eens) die de hele container doorloopt. Het even lang maken van de kolommen wordt niet ondersteund in de huidige css versie. Ik raad je aan de de webdeveloper toolbar te installeren (firefox IE) en vervolgens met de outline functie de divs eens te bekijken. Dan zie je de eigenlijke afmetingen van de divs en wordt het vast wel duidelijk.

Edit: Even ter verduidelijking, heb je het nu over het blauwe achtergrond gedeelte wat dus als het ware naast je gehele content staat? Ik zie in je design namelijk geen moeilijkheden voor de drie kolommen.

Ik heb het inderdaad over het blauwe gedeelte wat om de content heen staat. Wanneer de content langer wordt, dan moeten de buitenste 2 kolommen mee sizen.
Voor welke 3 kolommen zie jij geen problemen? De middelste 3? Of de 2 blauwe plus content gerekend als 1 kolom?

[Rowanov]

De 3 kolommen die je content vormen (de middelste) zie ik geen probleem, het blauwe gedeelte ook niet als je je achtergrond netjes sliced. In feite staat dit verwerkt in mijn voorbeeld; er is ook nog geen css property beschikbaar om de achtergrond te schalen. Kijk ajb nog eens goed naar mijn voorbeeld; in plaats van de twee gradients neem je het bovenste en onderste deel van je achtergrond uit je design; in plaats van wit als achtergrond kleur neem je de kleur blauw die er tussenin ligt bij het design.

Ik weet niet meer hoe ik het verder uit kan leggen, alles wat je nodig hebt staat nu zo ongeveer wel vermeld. Succes er mee

Edit: mocht je er echt niet uitkomen kan je natuurlijk altijd nog je design aanpassen en iets minder gradients in je achtergrond stoppen, dat maakt het fabriceren van de layout wat makkelijker

[ Voor 15% gewijzigd door Rowanov op 04-04-2006 22:57 ]

[Verwijderd]

[quote]Rowanov schreef op dinsdag 04 april 2006 @ 22:48:
in plaats van wit als achtergrond kleur neem je de kleur blauw die er tussenin ligt bij het design.
quote]

Ok bedankt. Wat jij beschrijf is volgens mij bijna wat ik wil denk ik.
Inderdaad, ik was er achter gekomen dat ik een achtergrond niet kan oprekken of slizen zoals jij het noemt.
Ik had de linker/rechter kant beide in 3 delen geknipt. Een left_top, left_gradient, left_bottom. right_top, right_gradient, right_bottom.

1 vraag, hoe bedoel je dat met die achtergrond? Het blauw is juist een verlopende kleur (gradient) daarom kan ik niet niet zomaar 1 kleur er tussen zetten

[Rowanov]

Ik denk dat ik zie wat je bedoelt; jij ziet de pagina als bestaand uit 5 kolommen. Dit klopt niet; denk eens in lagen. De achtergrond is een geheel; waar je de volgende laaf overheen legt. Je achtergrond hoef je dan niet te splitsen in left_top etc. Ook dit kun je in mijn voorbeeld terugvinden (als je even de achtergrond plaatjes los bekijkt). De enige oplossing die ik voor jou zie is om de achtergrond gewoon in zijn geheel zo aan te passen dat je geen gradient meer in het middenstuk hebt. Ik kan geen andere manier bedenken om dat gedeelte schaalbaar te krijgen.

[ Voor 7% gewijzigd door Rowanov op 05-04-2006 12:25 ]

[Verwijderd]

Rowanov schreef op woensdag 05 april 2006 @ 12:24:
Ik denk dat ik zie wat je bedoelt; jij ziet de pagina als bestaand uit 5 kolommen. Dit klopt niet; denk eens in lagen. De achtergrond is een geheel; waar je de volgende laaf overheen legt. Je achtergrond hoef je dan niet te splitsen in left_top etc. Ook dit kun je in mijn voorbeeld terugvinden (als je even de achtergrond plaatjes los bekijkt). De enige oplossing die ik voor jou zie is om de achtergrond gewoon in zijn geheel zo aan te passen dat je geen gradient meer in het middenstuk hebt. Ik kan geen andere manier bedenken om dat gedeelte schaalbaar te krijgen.

Je hebt gelijk wanneer je zegt dat het 5 kolommen zijn. Echter, op dit moment zijn het gewoon 3 kolommen, want de middelste kolom die als content holder gaat dienen heeft nog geen content.
Vanavond wil ik even het volgende proberen:
1. Ik haal de div main_left weg, deze bevat nu de hier onder genoemde div's
2. Waardoor main_left_top, main_left_bottom overblijven met background en main_left_gradient zonder background
3, main_left moet naar links floaten en naar de top allignen
4. main_left_bottom moet ook naar links floaten maar naar de borrom allignen tegen de main_bottom aan (kan dat?)
5. tussen bovengenoemde div's moet de main_left_gradient komen met een height van 100% zodat deze tegen de onderkant van main_left_top komt en tegen de bovenkant van main_left_bottom
6,vervolgens plaats ik een gradient image met een heiht van 100%, zodat deze zo groot als de div zelf wordt.

In hoeverre is dit mogelijk/onmogelijk?
Let op! Ik laat hier nu nog de 3 binnenste kolommen leeg.

http://www.mtv.nl

Dit is wat ik wil berijken, kijk maar naar de verschillde pagina;s daar die een verschillende height hebben. Helaas gebruik mtv.nl tables

[ Voor 5% gewijzigd door Verwijderd op 05-04-2006 14:17 ]

[Rowanov]

Je begrijpt het verschil tussen een table layout en een css layout niet; er zijn helemaal geen main_left_top divs etc. Kijk nog eens goed naar mijn voorbeeldje. Ter illustratie nog even een bewegend plaatje:



Als het nu niet duidelijk is, dan weet ik het ook niet meer.

[Verwijderd]

Misschien moet ik maar 1 table maken met 3 kolommen, voor de 2 blauwe en de content. Daarbinnen alleen met divs werken?

Wat vinden jullie van een dergelijke oplossing? Het table gebruik zo beperkt mogelijk houden maar wel het gewenste resultaat behalen? Want dat is dus volgens mij de enige manier om te bereiken wat ik wil

[ Voor 12% gewijzigd door Verwijderd op 06-04-2006 00:15 ]

[BtM909]

Kijk nog eens goed naar 't voorbeeld van Rowanov

[Verwijderd]

BtM909 schreef op donderdag 06 april 2006 @ 10:53:
Kijk nog eens goed naar 't voorbeeld van Rowanov

Dat voorbeeld heb ik heel goed bekeken. Maar lees de post van hem eens goed...
Hij geeft toch aan dat hij geen manier kan bedenken om het gradient gedeelte schaalbaar te krijgen. En ik wil eigenlijk wel gebruik maken van gradient.

Overigens:
Het volgende idee schiet me nu te binnen. Ik knip de linkerbalk in 3 delen zoals ik al deed. Maar nu wordt het middelste deel 1px hoog. De delen die nu left_top en left_bottom heten hou ik dan over. Maar het stuk daar tussen kan ik nu als repeating background instellen. Volgens mij behoud ik het gradient effect op die manier en kan het middelste stuk gewoon meesizen.
Het idee hierachter is dat bij een afbeelding die 1 px hoog is, er geen verschil in kleur is wat bij een gradient effect het geval is. Dus die kan dan herhaald worden.


Goed idee?

[ Voor 11% gewijzigd door Verwijderd op 06-04-2006 12:28 ]

[Rowanov]

Dat is in principe exact hetzelfde als ik je al een aantal posts duidelijk probeer te maken Alleen is er geen linker, middelste en rechterbalk; dat is 1 plaatje. In mijn voorbeeld zie je een top, een bottom en een kleur er tussen.

[Verwijderd]

Volgens mij heb ik het door..

Een collega's wijst me er net op dat ik voor een gradient background ook misschien javascript kan gebruiken?

[BtM909]

Probeer het dan ook eerst uit ipv alles wat je collega zegt hier over te typen met een vraagteken erachter....

[Rowanov]

Verwijderd schreef op donderdag 06 april 2006 @ 13:48:
Volgens mij heb ik het door..

Een collega's wijst me er net op dat ik voor een gradient background ook misschien javascript kan gebruiken?

Ja tuurlijk; je kan ook css in een xml verwerken, het met javascript parsen en dan de stijlregels toepassen. Of het handig is een tweede.

Het lijkt vanaf dit punt handig als je je site voor de overige 99%, afgezien van de achtergrond die niet lukt, in elkaar zet en dan hier post en aangeeft wat er niet lukte aan de bovenstaande methode.

[Verwijderd]

Het is me inmiddels gelukt! http://212.127.198.67/nofuture\

Is dit zoals jij het bedoelde?

Ik moet alleen nog ff kijken naar waarom in Firexfox:
- de content div geen blauwe rand heeft aan de boven en onderkant;
- de content uit de blauwe gradient rand loopt;

De afbeeldingen zijn nog niet juist maar dat moet ik nog aan passen.

Een vraagje nog de achtergrond is nu verdeel in 2 delen, namelijk een bottom en een top. Het niet zichtbare gedeelte is welliswaar wit om het bestand kleiner te maken maar ze zijn nog wat groot voor mijn gevoel. Kan ik hier nog wat aan doen, verbeteren?

En nu moet ik proberen 3 kolommen in de content te maken die ook even lang lijken... Iets wat nog iets lastiger is als de vorige....

[ Voor 15% gewijzigd door Verwijderd op 07-04-2006 15:44 ]

[Rowanov]

Verwijderd schreef op vrijdag 07 april 2006 @ 15:26:
Het is me inmiddels gelukt! http://212.127.198.67/nofuture\

Is dit zoals jij het bedoelde?

Waarschijnlijk kan je nog wel een beetje inbinden op het aantal divs; ook is het me een onduidelijk waarom een hidden input in een div moet. Verder ben je een heel stuk op de goede weg!

Ik moet alleen nog ff kijken naar waarom in Firexfox:
- de content div geen blauwe rand heeft aan de boven en onderkant;
- de content uit de blauwe gradient rand loopt;

Hij laat bij mij in firefox de site compleet anders zien dan in IE. Als ik een website maak ga ik altijd uit van firefox en pas het daarna aan aan IE. Dit omdat firefox in meer gevallen "gelijk" heeft dan IE (dit gaat niet altijd op). Ook hier gaat het stap voor stap toepassen van de css op, zodat je de verschillen voor de browsers voor jezelf zichtbaar maakt.

Dan vraag ik me ook af waarom je xhtml gebruikt. Is het een weloverwogen keuze en zo ja, wat zijn je argumenten daarvoor? Het lijkt me hier logischer om gewoon html 4.01 transitional te gebruiken. IE kan niets met xhtml die als xhtml geserveerd wordt, dus met het juiste mime type.

Een vraagje nog de achtergrond is nu verdeel in 2 delen, namelijk een bottom en een top. Het niet zichtbare gedeelte is welliswaar wit om het bestand kleiner te maken maar ze zijn nog wat groot voor mijn gevoel. Kan ik hier nog wat aan doen, verbeteren?

Je kan ze met photoshop bijvoorbeeld met de "save for web" functie zo klein mogelijk maken. Ook kan je kijken of je met gif of niet transparante png een beter effect bereikt dan met jpg. Je kan plaatjes ook een compressie geven met irfanview; dit is heel goed ergens op het net in een tutorial; terug te vinden.

En nu moet ik proberen 3 kolommen in de content te maken die ook even lang lijken... Iets wat nog iets lastiger is als de vorige....

Kijk naar mijn eerste voorbeeld, daar heb ik het al laten zien. Dat is gewoon een kwestie van een achtergrond plaatje in je content-container (of hoe dat ding mag heten), om zo het effect te bereiken.

[Verwijderd]

Rowanov schreef op vrijdag 07 april 2006 @ 16:13:

Waarschijnlijk kan je nog wel een beetje inbinden op het aantal divs; ook is het me een onduidelijk waarom een hidden input in een div moet. Verder ben je een heel stuk op de goede weg!

Ik had een aantal divs bij wijze van test erop gezet. Alles wat overbodig is, is weer weg.

Rowanov schreef op vrijdag 07 april 2006 @ 16:13:

Hij laat bij mij in firefox de site compleet anders zien dan in IE. Als ik een website maak ga ik altijd uit van firefox en pas het daarna aan aan IE. Dit omdat firefox in meer gevallen "gelijk" heeft dan IE (dit gaat niet altijd op). Ook hier gaat het stap voor stap toepassen van de css op, zodat je de verschillen voor de browsers voor jezelf zichtbaar maakt.

Dan vraag ik me ook af waarom je xhtml gebruikt. Is het een weloverwogen keuze en zo ja, wat zijn je argumenten daarvoor? Het lijkt me hier logischer om gewoon html 4.01 transitional te gebruiken. IE kan niets met xhtml die als xhtml geserveerd wordt, dus met het juiste mime type.

Ik heb nu een opzet en ga weer wat bijschaven zodat het inderdaad eerst werkt in Firefox. Ik heb eigenlijk niet zelf overwogen om een keuze te maken tussen html 4.01 of xhtml. Ik ben bezig met een site is asp.net 2.0. xhtml staat standaard aan. Ik weet ook niet of het effect heeft op de rest van mn dynamische gedeeltes als ik het wijzig, dus controls enzo.

[ Voor 42% gewijzigd door Verwijderd op 07-04-2006 19:24 ]

[Verwijderd]

Ik ben nu bezig om het 1 en het ander te verbeter met behulp van transparente backgrounds... Het gaat goed tot nu toe..:) Ik post het resultaat wel als het af is.

[Verwijderd]

Rowanov schreef op vrijdag 07 april 2006 @ 16:13:
[...]


Waarschijnlijk kan je nog wel een beetje inbinden op het aantal divs; ook is het me een onduidelijk waarom een hidden input in een div moet. Verder ben je een heel stuk op de goede weg!


[...]


Hij laat bij mij in firefox de site compleet anders zien dan in IE. Als ik een website maak ga ik altijd uit van firefox en pas het daarna aan aan IE. Dit omdat firefox in meer gevallen "gelijk" heeft dan IE (dit gaat niet altijd op). Ook hier gaat het stap voor stap toepassen van de css op, zodat je de verschillen voor de browsers voor jezelf zichtbaar maakt.

Dan vraag ik me ook af waarom je xhtml gebruikt. Is het een weloverwogen keuze en zo ja, wat zijn je argumenten daarvoor? Het lijkt me hier logischer om gewoon html 4.01 transitional te gebruiken. IE kan niets met xhtml die als xhtml geserveerd wordt, dus met het juiste mime type.


[...]


Je kan ze met photoshop bijvoorbeeld met de "save for web" functie zo klein mogelijk maken. Ook kan je kijken of je met gif of niet transparante png een beter effect bereikt dan met jpg. Je kan plaatjes ook een compressie geven met irfanview; dit is heel goed ergens op het net in een tutorial; terug te vinden.


[...]


Kijk naar mijn eerste voorbeeld, daar heb ik het al laten zien. Dat is gewoon een kwestie van een achtergrond plaatje in je content-container (of hoe dat ding mag heten), om zo het effect te bereiken.

Hey Rowanov neem eens een kijkje, ik heb wat kunnen verbeteren. Ben nog ff bezig met de juiste afbeeldingen zodat alles netjes aansluit maar het werkt super nu!!! De gradient is nu een achtergrond van 1 pixel breed die zich herhaalt en de stralen zijn achtergronden met transparantie.

[Rowanov]

Hij werkt idd prima in internet explorer, maar nog niet helemaal in firefox. Ik weet niet of het de bedoeling is dat hij het in firefox ook gaat doen, maar anders moet je daar ook even naar kijken Bovenal en dikke pluim want je lost het zelf op en het gaat zeker in de goede richting! Ik neem aan dat je nu zelf ook meer begrijpt waar je mee bezig bent door het zelf te proberen?

[Verwijderd]

Rowanov schreef op zondag 09 april 2006 @ 13:36:
Hij werkt idd prima in internet explorer, maar nog niet helemaal in firefox. Ik weet niet of het de bedoeling is dat hij het in firefox ook gaat doen, maar anders moet je daar ook even naar kijken Bovenal en dikke pluim want je lost het zelf op en het gaat zeker in de goede richting! Ik neem aan dat je nu zelf ook meer begrijpt waar je mee bezig bent door het zelf te proberen?

Ik heb het zelf in Firefox bekeken en daar wordt hij wel goed getoond. Ik gebruik versie 1.5.0.1, wat gaat er bij jou niet goed als je hem opent in Firefox?

Het is inderdaad belangrijk om het te blijven proberen en te proberen en te proberen.

[Rowanov]

Hij doet het nu ook goed; ik keek naar een ge-cachete versie.