Kolommen even hoog, maar met anchors

[F.West98]

Hallo,

Ik kom er niet meer uit. Ik heb 2 kolommen die ik met de volgende code even lang heb gemaakt:

Cascading Stylesheet:

.kolom1 {
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    float: left;
}
.kolom2 {
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    float: right;
}

Maar nu heb ik in de linker kolom links staan die verwijzen naar plaatsen in de tekst rechts. Als ik erop klik, kom ik er... Maar, is alle tekst erboven 'verdwenen', en eindigt alles niet meer gelijk... Hoe los ik dit ooit op

Ik heb me wezenloos gegoogled, maar ik kom er niet uit.

[Joolee]

F.West98 schreef op maandag 26 september 2011 @ 21:46:
Hallo,

Ik kom er niet meer uit. Ik heb 2 kolommen die ik met de volgende code even lang heb gemaakt:

Cascading Stylesheet:

.kolom1 {
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    float: left;
}
.kolom2 {
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    float: right;
}

Maar nu heb ik in de linker kolom links staan die verwijzen naar plaatsen in de tekst rechts. Als ik erop klik, kom ik er... Maar, is alle tekst erboven 'verdwenen', en eindigt alles niet meer gelijk... Hoe los ik dit ooit op

Ik heb me wezenloos gegoogled, maar ik kom er niet uit.

Waarom gebruik je in hemelsnaam een negatieve padding van 2000px? Geef eens een online testcase waaraan we kunnen zien wat je probeert te doen, dat gaat een heeel stuk makkelijker voor ons.

[Verwijderd]

Je maakt ze even lang door ze een padding van 2000px te geven? En erna een margin-bottom van -2000px te geven? Waarom dat?
Overigens werkt het met linkjes bij mij wel gewoon, zelfs met je padding en margin...

Same as Joolee, heb je een online testcase?

[F.West98]

Joolee schreef op maandag 26 september 2011 @ 21:56:
[...]

Waarom gebruik je in hemelsnaam een negatieve padding van 2000px? Geef eens een online testcase waaraan we kunnen zien wat je probeert te doen, dat gaat een heeel stuk makkelijker voor ons.

??
Ik heb dit online gevonden.... Op meerdere sites staat het zo uitgelegd, negatieve margin van x en padding van x. Of ik haal die twee doorelkaar in de code, maar het werkt. Ik kan nu geen online testcase geven, ben op mobiel. Ik zal er vanmiddag eentje maken...

[Bosmonster]

Dan neem ik aan dat je er ook een container omheen hebt met overflow:hidden oid?

Zet eens een testcaseje online, bijvoorbeeld op jsfiddle.

[F.West98]

Linkje
Had geen tijd om even goede css te maken erbij, dus even copy paste uit de originele, met twee parentdivs vanwege background en breedte issues.

Maar hier zie je het...
Klik op categorie 2, en de rest is weg

[Verwijderd]

Zoek eens op "faux columns".

[F.West98]

Gaat voor mij helaas niet op. Mijn groenige achtergrond loopt door over hele breedte van het scherm, maar content is maar 1000px breed. Dus eerste div is background en 100%, daarin div met breedte 1000px; background transparant. Dus kan ik moeilijk zo'n pic maken, ook al is ie 1000px breed, in ie8 zijn pic-kleuren anders dan background-kleuren merk ik... Dat is weer lelijk...

[Verwijderd]

Het kost je misschien wel iets meer dan 10 minuten de eerste keer.
Als je dom wilt blijven moet je vooral niet proberen en experimenteren.

[Spinal]

F.West98 schreef op dinsdag 27 september 2011 @ 21:44:
Gaat voor mij helaas niet op. Mijn groenige achtergrond loopt door over hele breedte van het scherm, maar content is maar 1000px breed. Dus eerste div is background en 100%, daarin div met breedte 1000px; background transparant. Dus kan ik moeilijk zo'n pic maken, ook al is ie 1000px breed, in ie8 zijn pic-kleuren anders dan background-kleuren merk ik... Dat is weer lelijk...

Je kunt toch gewoon een achtergrondplaatje maken van 1000px breed en die centreren op je body, met een achtergrondkleur erbij?
Afwijkende kleuren zijn eenvoudig op te lossen, daar is zoveel over geschreven dat dat prima te vinden is.

[Bosmonster]

F.West98 schreef op dinsdag 27 september 2011 @ 21:44:
Gaat voor mij helaas niet op. Mijn groenige achtergrond loopt door over hele breedte van het scherm, maar content is maar 1000px breed. Dus eerste div is background en 100%, daarin div met breedte 1000px; background transparant. Dus kan ik moeilijk zo'n pic maken, ook al is ie 1000px breed, in ie8 zijn pic-kleuren anders dan background-kleuren merk ik... Dat is weer lelijk...

Alles kan in principe, alleen is niet altijd alles even praktisch, maar dat geldt ook voor je huidige oplossing dus.

Als je wat hulp wilt bij een mogelijke oplossing voor de opbouw van je design, post dan wederom iets van een voorbeeld. Je huidige uitleg blijft wat wazig als je het niet voor je hebt

[ Voor 5% gewijzigd door Bosmonster op 28-09-2011 12:49 ]

[F.West98]

ZanderZ schreef op woensdag 28 september 2011 @ 10:58:
[...]

Je kunt toch gewoon een achtergrondplaatje maken van 1000px breed en die centreren op je body, met een achtergrondkleur erbij?
Afwijkende kleuren zijn eenvoudig op te lossen, daar is zoveel over geschreven dat dat prima te vinden is.

Ik heb het met een andere site gehad, als ik bijvoorbeeld #333835 als kleur neem, in foto doe en in browser, werkt het hier mooi (FF6), maar in IE8 en lager zijn de kleuren anders. Ik heb toen geen oplossing gevonden
(Dat was mijn idee ook )

Verwijderd schreef op dinsdag 27 september 2011 @ 21:53:
Het kost je misschien wel iets meer dan 10 minuten de eerste keer.
Als je dom wilt blijven moet je vooral niet proberen en experimenteren.

?
Ik ben al dagen bezig een database werkend te maken, sorry hoor...

Bosmonster schreef op woensdag 28 september 2011 @ 12:49:
[...]


Alles kan in principe, alleen is niet altijd alles even praktisch, maar dat geldt ook voor je huidige oplossing dus.

Als je wat hulp wilt bij een mogelijke oplossing voor de opbouw van je design, post dan wederom iets van een voorbeeld. Je huidige uitleg blijft wat wazig als je het niet voor je hebt

Wat voor voorbeeld is dan nodig? Ik wel best wel een linkje naar echte bestand plaatsen...

[Grandmasg]

Pas het volgende eens aan in je css
Het lost het probleem met de verdwenen tekst ook op alleen weet ik niet of je dit zocht

html{
overflow-y: hidden;
}

.midcontentbox {
width: 100%;
background-color: #3A403B;
overflow: scroll;
}

[ Voor 11% gewijzigd door Grandmasg op 28-09-2011 18:46 ]

[RobIII]

F.West98 schreef op woensdag 28 september 2011 @ 18:20:
[...]

Ik heb het met een andere site gehad, als ik bijvoorbeeld #333835 als kleur neem, in foto doe en in browser, werkt het hier mooi (FF6), maar in IE8 en lager zijn de kleuren anders. Ik heb toen geen oplossing gevonden
(Dat was mijn idee ook )
[...]

10 tegen 1 dat je JPG gebruikt; je weet dat dat lossy is en dat er dus kans is op kleurafwijking? Waarom dat enkel in IE8 en lager zou gaan is me een raadsel, daar geloof ik dan ook weinig van. Heb je een voorbeeld?
(En is 't geen kleurafwijking door JPG dan gebruik je geheid vage "MS proprietary CSS filters" oid)

[ Voor 7% gewijzigd door RobIII op 28-09-2011 19:25 ]

[F.West98]

RobIII schreef op woensdag 28 september 2011 @ 19:24:
[...]

10 tegen 1 dat je JPG gebruikt; je weet dat dat lossy is en dat er dus kans is op kleurafwijking? Waarom dat enkel in IE8 en lager zou gaan is me een raadsel, daar geloof ik dan ook weinig van. Heb je een voorbeeld?
(En is 't geen kleurafwijking door JPG dan gebruik je geheid vage "MS proprietary CSS filters" oid)

ik gebruik png...
ik heb 2 sites, kan ook aan scherm liggen of course.
casastella.nl, verschil tussen boven-rood en overgang-donkerste-rood
paulinewesterman.nl -> dutch, verschil tussen grijs voor overgang, en erin, de lichtste variant, je ziet de randen dan...

Grandmasg schreef op woensdag 28 september 2011 @ 18:45:
Pas het volgende eens aan in je css
Het lost het probleem met de verdwenen tekst ook op alleen weet ik niet of je dit zocht

html{
overflow-y: hidden;
}

.midcontentbox {
width: 100%;
background-color: #3A403B;
overflow: scroll;
}

En dan had ik nog een header die dan weg is, en gaat de balk tot onder zichtbaar door, en eindigt het niet gelijk. Anchor werkt dan weer wel...
Trouwens, als ik de html dan weer wel doe, dan werkt het, maar met dubbele scrollbar...
En het blijft doorlopen... (zie paulinewesterman.nl -> dutch -> publications)

[Tentacle1]

Dergelijke kleurverschillen komen ook vaak voor bij PNG vanwege een gamma correctie (color profile). Als je een PNG in photoshop als 'save for web' opslaat is dit geen probleem, maar als je het met een ander programma opslaat zou je http://entropymine.com/jason/tweakpng/ kunnen gebruiken om 'gAMA' eruit te halen.

[Verwijderd]

Faux columns en transparantie dan. Doe nog eens een poging.

[RobIII]

Tentacle1 schreef op woensdag 28 september 2011 @ 19:34:
Dergelijke kleurverschillen komen ook vaak voor bij PNG vanwege een ... color profile

Die vergat ik tussen de mogelijkheden die ik reeds noemde te vermelden

[ Voor 29% gewijzigd door RobIII op 28-09-2011 20:19 ]

[F.West98]

mooi, en gelukt
bedankt voor de hulp, ik had aan het idee image niet gedacht, en ik kende die tool niet! Nu werkt het allemaal perfect.

Nu CSS even opschonen en even kijken of ik met minder div's toekan, en of ik ditzelfde ook kan op andere comps (dus geen kleurverschil)