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

    probleem met css…

    Ik heb het over http://www.logopedia.be

    Ik wil een banner 160 px x 600 px naast mijn forum plaatsen. Ik heb een sidebar.html aangemaakt en die wordt aangeroepen in overall_footer.html.

    Maar in de css loopt het fout. Want sidebar.html wordt opgeroepen maar hij plaatst het onder mijn forum, net boven de banner. En niet naast het forum zoals het de bedoeling is.

    Is er iemand die mij kan helpen, aub?

    Ik volgde een tutorial en die beval me dit te maken van de page body tag in css.

    #page-body {
    width:85%;
    float:right
    margin: 4px 0;
    clear: both;
    }

    In datzelfde css bestand moest ik dit toevoegen helemaal onderaan:

    .page-sidebar {
    float:left;
    margin-top:4px;
    width:14%;
    }

    Maar zoals op de portal alsook op de forumindex te zien is, het werkt niet.
    Op de portal lijkt alles inderdaad 85% verkleind (WAT IK OOK AL NIET WIL)
    Maar op de index zet hij gewoon de banner net boven de footer?

    Bijdrager
    Wyodor

    die beval me dit te maken van de page body tag in css

    Sinds wanneer wordt je iets bevolen?

    Enniewee, zet je banner in de de tabel onder het links blokje.

    Bijdrager
    martijnG

    Je hebt je plaatje buiten de tabel staan.
    Dit heeft dus niets met CSS positie temaken.

    Bijdrager
    martijnG

    sorrie wyodor, je was me voor.

    Bijdrager
    steene

    Neen de bedoeling is dat de banner buiten de wrap komt te staan. Dus niet op de portal maar op de forumindex. En rechts van het forum. Er niet onder maar ernaast…

    zoals in dit voorbeeld

    Bijdrager
    steene

    het maakt eigenlijk niet uit of die op de portal te zien is of niet. Dat mag vanzelfsprekend ook wel

    Bijdrager
    martijnG

    .page-sidebar {
    position:absolute;
    margin-left: 930px;
    top: 8px;
    }

    dit is wel heel smerig:P

    Bijdrager
    steene

    Hoe bedoel je?
    test ik het even?

    Bijdrager
    martijnG

    is smerig omdat dit een absolute positionering is, heeft niets te maken met floating of what ever.
    Wil je in de toekomst toch layouts maken met floats, lees dan dit: http://www.alistapart.com/articles/css-floats-101/

    Bijdrager
    martijnG

    ik denk dat die top 8px, 12px moet zijn

    Bijdrager
    steene

    MartijnG

    Het helpt allemaal niets…

    Op http://www.logopedia.be blijft het onderaan het forum staan.
    Ik heb ECHT GEEN voorkeur hoor, hoe het ook werkt, als het maar werkt;-)

    Mocht je een beter (sowieso, alles wat werkt IS Beter) voorstel hebben?!

    Bijdrager
    steene

    OOoh nog eens refreshen hielp, dat werkt dus wel…
    Maar nogmaals als je een beter voorstel hebt, graag.

    Ik vroeg me af of jij mij die code eens kan uitleggen?
    IK doe hier maar wat maar ik snap niet hoe margin left kan werken.
    Margin left attribuut. Waar ligt mijn 0 punt voor mijn linker marge dan?
    De top pas ik nog even aan,

    ALVAST bedankt!

    Bijdrager
    martijnG

    hij staat er toch gewoon naast.

    Bijdrager
    steene

    Ik heb nu nog een vraag …:confused:

    De banner wordt steeds opnieuw ingeladen allicht omdat het css bestand OF overall_footer steeds opnieuw worden ingeladen?

    Maar is er een manier om ervoor te zorgen dat de banner niet steeds opnieuw weer geladen wordt.
    Concreet bedoel ik dat de animatie niet steeds weer opnieuw van vooraf aan begint?

    Trouwens,

    ALVAST HEEL erg bedankt MARTIJNG!!!

    Bijdrager
    martijnG

    je page-side bar zit in de wrap en hij begint na de leftpadding.
    dus: ( 2×20 padding ) + ( 900 width wrap ) – ( 20 left-padding ) = 920px.
    dan 10 px visuele space. maakt samen de left-margin: 930 px.

    position: absolute, dan haal je het element uit de “document flow”,
    standaard zonder dat je waarde meegeeft aan position is het “static”

    top: 12px wil zeggen vanaf het begin van je document.

    Bijdrager
    martijnG

    Je zou je content kunnen laden met Ajax, maar lijkt me voor nu een beetje overkill en erg lastig te integreren.

    Bijdrager
    steene

    oh ok… hoe dan ook heel erg bedankt, Martijn met je enge avatar;-)

    Bijdrager
    steene

    Een compleet ander vraagje…

    dit is de code van een footer op een andere site. Ze verdeelt de footer en positioneert de footer.
    Het werkt maar als er gescrolled moet worden op kleinere resolutie schermen bv. dan staat de footer boven de tekst.

    Kan ik er zorgen dat de footer beneden het scherm blijft zoals ze nu staat. Maar toch ook mee scrolt?

    /* Footer part */
    #pageFooter {
    background: url(‘uploads/BizBuzz/images/footerBG.gif’) repeat-x top #99CC66;
    min-height: 70px;
    position:absolute;
    bottom:0;
    width:100%;
    }

    #pageFooterInner {
    width: 960px;
    padding: 10px;
    margin: auto;
    color: #fff;
    }
    #pageFooterInner .infoBlockGroup p, #pageFooterInner .infoBlockGroup h3 {
    color: #fff;
    background: none;
    }

    Bijdrager
    steene

    begin ik beter een nieuw topic? Zodat mijn vraag die los staat van de eerste, gevonden wordt?
    (ivm. de footer)

    Bijdrager
    martijnG

    Je vraag stelling is niet compleet en onduidelijk. in de trend van: Mijn fiets heeft een dynamo en een rode achterlamp, kan ik de koplamp ook aan en uitschakelen. ?

    Bijdrager
    steene

    ah?

    Wel als je naar beneden scrollt.
    Scrollt de tekst weg onder de footer.
    ipv. de footer die meescrollt met de tekst, begrijp je?

    Bijdrager
    martijnG

    Over welke site heb je het nu ? hoe ziet de HTML eruit. Een “footer” div in je document flow scrolled zowieso mee als je hem in je de normale document flow laat.
    Ik raad je aan gewoon CSS te gaan leren. Dat je uit gaat zoeken hoe floats werken, hoe positionering werkt, het verschil tussen inline & block elementen etc…

    Bijdrager
    steene

    beste martijnG,

    Ik leer css… maar dit een bestaande website…
    ik heb die gemaakt met door een thema aan te passen…

    http://www.bart-vanthournout.be

    De footer (bij kleine resolutie) staat voor de tekst…

    De code staat hier al gepost, groeten!

    Bijdrager
    martijnG

    Wil je de footer aan de onderkant van je pagina hebben dan ? Het blijft mij compleet onduidelijk wat je wilt. Ook op lage resolutie krijg ik je footer niet voor de text.

    Om de footer altijd onderaan je pagina kun je misschien dit voorbeeldje gebruikken.

    <!DOCTYPE html>
    <html lang=”nl”>
    <head>
    <meta charset=”utf-8″ />
    <title>footer</title>
    <style type=”text/css”>

    *
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    font: 14px sans-serif;
    }

    /* ————————————– */
    /* stijlen hieronder voor de footer */
    /* ————————————– */

    html, body { height: 100%; }

    #container
    {
    position: relative;
    height: auto !important;
    min-height: 100%;
    margin: 0 auto; /* centreren van de site */
    width: 600px;
    background: #EEE;
    }

    #header { height: 150px; }

    #topMenu
    {
    height: 50px;
    background: BurlyWood;
    }

    #contentWrapper
    {
    overflow: auto; /* zodat hoogte v/d div wel “berekend” wordt */
    padding-bottom: 150px; /* hoogte #footer */
    background: Yellow; /* nu een kleur ter verduidelijking */
    }

    #footer
    {
    /* footer is transparant om te zien wat er gebeurd */
    width: 600px;
    position: relative;
    margin: -150px auto 0 auto; /* -150px negatieve hoogte v/d footer & auto voor centreren */
    height: 150px;
    clear: both;
    background: LightSteelBlue;
    opacity: 0.75;
    }

    </style>
    </head>
    <body>
    <div id=”container”>
    <div id=”header”>#header</div>
    <div id=”topMenu”>#topMenu</div>
    <div id=”contentWrapper”>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div> <!– end contentWrapper –>
    </div><!– end container –>
    <div id=”footer”>#footer</div>
    </body>
    </html>

    Bijdrager
    steene

    Beste MartijnG,

    Ik kreeg de footer perfect op bottom van het scherm. Maar de footer bleef daar ook. Sommige mensen klaagden dat bij het scrollen de footer VOOR de tekst komt… Het is dus de bedoeling dat als je naar beneden scrollt, de footer mee scrollt eigenlijk of zo.

    Persoonlijk kan ik geen screenshot tonen van het probleem want ik ervaar het ook niet, het is de klant die het me vertelde…

    Groeten,
    Stijn

    Bijdrager
    martijnG

    ik zie de footer zowieso niet aan de bottom.

    Niet in safari, firefox, IE7 , IE8, IE9, Opera en ook niet op de iPad.

    Bijdrager
    steene

    oké, dat is idd het geval…
    ik heb de sticky footer code verwijderd.
    De code werkte maar de positionering was absoluut…

    Bijdrager
    martijnG

    Een absoluut gepositioneerd element is relatief gepositioneerd aan de eerste bovenliggende element met een positie als deze niet static is. ( static is de standaard waarde van positie, niet gedeclareerd dus ) Is er geen bovenliggende “ouder” met positie, zal hij naar het block <html> gaan en vandaar zijn positie bepalen.

    Kijk eens naar de code die ik hier neer heb gezet. Deze is “bullit” proof. Er staat uitleg bij.

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

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