8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)
  • Q:
    Bijdrager
    chonazz

    Css position probleem

    Beste mensen,

    Ben op m’n wordpress blog aan het knoeien met een css probleempje.
    Nu is het al lang geleden dat ik nog met css en html bezig ben geweest en ik krijg iets niet voor elkaar.
    http://www.dewereldverzamelaar.net

    Het probleem zit in het menu en de social-network icoontjes. Deze zou ik een vaste positie willen meegeven zodat ze niet telkens verschuiven als je het browser scherm groter of kleiner maakt.
    Zoals ze nu staan staan ze eindelijk goed. Als je op “zoek” klikt dan schuift m’n zoekbalk naar benden, alles schuift netjes mee behalve m’n menu en social-network icoontjes.
    Hoe krijg ik dit opgelost?
    Ze hebben nu een position: absolute; , position: fixed helpt ook niet want als je dan scrolt blijven over de content staan.

    Hoop dat iemand me hiermee kan helpen.
    Alvast bedankt,
    Jonas

    Bijdrager
    thvanarkel

    Het zou kunnen liggen aan het feit dat je margins % gebruiken i.p.v. pixels, daardoor verschuiven ze meestal mee..

    Bijdrager
    yoerio

    Beste jonas
    ik heb ff gekeken naar de pagina en had het zelfde probleem (in google chrome) ik ben daar naar het javascript console gegaan en heb gekeken waar het menu volgens de css staat.
    toen zag ik dat het vak waar het menu is ingezet maar het menu zelf niet meeging.
    dit komt omdat die is gemaakt met een position: ABSOLUTE! en dan de top en left aangegeven zoals normaal wordt gedaan. ik weet niet zeker of het werkt (volgens mijn chrome console wel) moet je dit:
    ul#menu-categories.menu {
    left: 180px;
    position: absolute;
    top: 135px;
    } aanpassen naar dit
    ul#menu-categories.menu {
    } (als dit niet werkt zeg dat dan hier dan heb ik nog een andere oplossing)

    INFO BESTAND:
    link: http://www.dewereldverzamelaar.net/wp-content/plugins/wp-minify/min/?f=wp-content/themes/shaken-grid-premium/style.css,wp-content/themes/shaken-grid-premium/js/colorbox/colorbox.css&m=1293893165
    regel: 204 (hier ergens staat deze tekst hierboven)

    Bijdrager
    yoerio

    voor de sociale netwerk iconen ligt het hetzelfde

    Bijdrager
    chonazz

    Het probleem zit inderdaad in de position: abolsute; als ik die weghaal dan gaat schuift alles wel netjes naar beneden als je op “zoek” klikt. Maar dan staat m’n menu en social-icons nog steeds niet juist als je je browser venster vergroot.

    Yoerio, ik snap niet goed wat je bedoeld. Als ik de verandering die jij aangeeft doorvoer, dan gaat alles wat zoeken betreft wel goed, maar dan blijft m’n menu dus niet staan?
    Ben je iets van code vergeten toevoegen in je oplossing? Of bedoel je dat ik
    ul#menu-categories.menu {
    left: 180px;
    position: absolute;
    top: 135px;
    }

    Gewoon moet verwijderen?

    Bijdrager
    yoerio

    volgens mijn javascript console wel maar ik vond het ook al gek je kunt het aanpasen zo:

    position: absolute WEG!
    left aanpassen naar margin-left
    en top aanpassen naar margin-top

    Bijdrager
    chonazz

    Dat heb ik nu gedaan, maar het klopt toch ook niet helemaal.
    M’n css kennis is echt verwaarloosbaar dus ik weet niet waar ik nog allemaal kan gaan zoeken om dit opgelost te krijgen. Maar zoals het er nu uitziet is nog niet echt wat het moet zijn.

    Jonas

    Bijdrager
    chonazz

    Volgens mij heb ik het nu opgelost, enige nadeel is dat als je je browservenster verkleint, je een ontzettend grote ruimte krijgt tussen het menu en de social-icoontjes.

    Dit is de css die ik nu gebruik:

    <br />
    #social-networks {<br />
    margin-right: 20px;<br />
    margin-top: 100px;<br />
    }</p>
    <p>ul#menu-categories.menu{<br />
    margin-top: 130px;<br />
    margin-left: -510px;<br />
    }</p>
    <p>

    De <p> tags staan er natuurlijk niet tussen.
    Moest ik deze nog weg krijgen ben ik helemaal gelukkig.
    Jonas

8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.