element verschuift als ik uitzoom

[superky]

Hoi

Graag wil ik hier een klein probleem oplossen en hiervoor wil ik jullie om hulp vragen. Namelijk in het volgende afbeelding te zien:


Met de bijgevoegde css code:

code:

#right_side{
    border: 1px solid blue;
    float:right;
    width: 220px;
    padding: 30px;
    background: #66CCCC;
    position: absolute;
}

Daarin wil ik dus dat het deel "news" aan de andere kant van mijn website staat. Dit was me overigens gelukt. Hier is het resultaat te zien:

Met de bijgevoegde css code:

code:

#right_side{
    top: -280px;
    border: 1px solid blue;
    float:right;
    width: 220px;
    padding: 30px;
    background: #66CCCC;
    position: relative;
}

Maar het probleem hiervan is, is als ik op mijn site ga uitzoomen dan zie ik dat het deel "news" zich verplaatst. En dit wil ik graag niet hebben. Hier kunt u het resultaat zien als ik mijn site uitzoom:


Kan iemand me misschien helpen om dit probleem op te lossen? Graag wacht ik op uw reactie. Alvast bedankt voor uw antwoord.

Mvg,

superky

[Verwijderd]

Maak eens een screenshot van de gewone situatie. Zoom dan uit en maak nogmaals een screenshot. Meet in beide situaties de afstand tot de bovenkant van het scherm. Gaat er dan een belletje rinkelen?

Daarom moet je niet zomaar vaste waarden voor afstanden geven. Je moet bedenken wat je wilt positioneren ten opzichte van wat. Beschrijf dat in CSS en je site doet wat je wilt dat hij doet.

[superky]

Verwijderd schreef op zondag 11 augustus 2013 @ 12:11:
Maak eens een screenshot van de gewone situatie. Zoom dan uit en maak nogmaals een screenshot. Meet in beide situaties de afstand tot de bovenkant van het scherm. Gaat er dan een belletje rinkelen?

Daarom moet je niet zomaar vaste waarden voor afstanden geven. Je moet bedenken wat je wilt positioneren ten opzichte van wat. Beschrijf dat in CSS en je site doet wat je wilt dat hij doet.

De tweede screenshot is de screenshot van de gewone situatie. Maar misschien is het beter als u of iemand anders het aan me laat zien via Teamviewer.

[Foamy]

Verwijderd schreef op zondag 11 augustus 2013 @ 12:11:
Je moet bedenken wat je wilt positioneren ten opzichte van wat. Beschrijf dat in CSS en je site doet wat je wilt dat hij doet.

Dat inderdaad. Kijk eens goed naar je CSS code en denk eens na over hoe je wat nu positioneert. En nog belangrijker: ten opzichte van wat je het positioneert.

[_Thanatos_]

Float: right.

Sja, als je em rechts float en er is geen plek, dan klapt ie naar onder. Zo werken floats nou eenmaal. Maar de combinatie van floats en absolute positioning is meestal niet zo'n goed idee. Je moet een hele goeie reden hebben om dit te doen, en gezien je hier post, heb je die volgens mij niet

Begin eens met al je 3 kolommen links te floaten, waar de linker en rechter een width:25% krijgen, en de middelste een width:50%. Of een andere verhouding die jij wilt. De footer kun je dan gewoon niet floaten en een clear:both geven. Volgens mij ben je er dan.

[R4gnax]

_Thanatos_ schreef op dinsdag 13 augustus 2013 @ 21:03:
Float: right.

Sja, als je em rechts float en er is geen plek, dan klapt ie naar onder. Zo werken floats nou eenmaal. Maar de combinatie van floats en absolute positioning is meestal niet zo'n goed idee. Je moet een hele goeie reden hebben om dit te doen, en gezien je hier post, heb je die volgens mij niet

Begin eens met al je 3 kolommen links te floaten, waar de linker en rechter een width:25% krijgen, en de middelste een width:50%. Of een andere verhouding die jij wilt. De footer kun je dan gewoon niet floaten en een clear:both geven. Volgens mij ben je er dan.

Als je voor column grid layouts anno 2013 nog floats gebruikt dan ben je echt verkeerd bezig. Flexbox mag dan nog in de kinderschoenen staan en praktisch weinig bruikbaar zijn, maar er is ook nog zoiets als inline-block en daar kun je grid layouts al een stuk beter mee opzetten dan met floats...

[_Thanatos_]

Flexbox werkt niet eens goed in IE10. Is dus onbruikbaar voor normale productiesites.

Een grid met inline-block heeft allerlei rare bij-effecten als je in het grid blocklevel elementen gaat plaatsen. Nog meer zo als je dat plaatsen aan de klant (via CMS zelfs) overlaat. Floats zijn wat dat betreft veel betrouwbaarder.

En you know what? Ik heb nog nooit onverklaarbare rariteiten gehad met mijn floatgrid. Als jij er wel last mee hebt, heb je misschien iets gebruikt wat niet zo handig is. Maar float zijn niet per definitie slecht voor een grid.

[ Voor 3% gewijzigd door _Thanatos_ op 15-08-2013 21:00 ]