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

    Iets heel simpel in css

    http://www.logopedia.be/css/nieuwsbrief.html

    Om een of andere reden werkt het beest echter niet.

    Ik heb een heel basic html pagina’tje gemaakt (3 simpele divjes 1 met top image 1 met bg image 1 px en repeat y en 1 bottom image div)

    Het werkt wel maar…

    de bg image die moet worden gerepeat loopt gewoon verder ook ONDER de bottom image?

    Ik zie allicht iets onnozel over het hoofd?

    de code van zowel de css als de html pagina zijn gewoon via bron weergeven te bezichtigen.

    Bijdrager
    Wyodor

    Zet bij zowel #frame_top als #frame_bottom in de css.

    background-repeat: no-repeat;

    Meer nadenken, minder roepen.

    Bijdrager
    steene

    zo?! dat hielp ! Bedankt…
    Waarom helpt dat precies? Wat is het achterliggende idee daarvan?

    Bijdrager
    Wyodor

    Nou hoe je niet direct 4 keer dezelfde code in je pagina te zetten :

    http://www.logopedia.be/css/nieuwsbrief.html

    <div id="frame_top"></div><br />
    <div id="frame"></div><br />
    <div id="frame_bottom"></div>
    Bijdrager
    steene

    Wyodor? slechte dag gehad?

    Ik vroeg gewoon waarom die no-repeat erbij moest? Je hebt me geholpen, waarvoor dank. Maar ik begrijp niet goed waarom.

    En ik zet 4 keer die code er omdat ik dat frame 4 keer nodig heb:lol:

    Bijdrager
    Wyodor

    Gevoelige mensen hier.

    Bijdrager
    martijnG

    @steene

    in css heb je classes en je hebt id’s

    een id geef je aan met ” # ” deze mag maar 1 keer voorkomen in de pagina.
    een class geef je aan met ” . ” deze mag vaker voorkomen.

    Daarnaast zijn het allemaal divs, dus je hoeft niet elke keer de zelfde properties mee tegeven.
    Doe je het onderstaande, zullen al je div’s 902px breed en gecentreerd staan.
    div {
    width: 902px;
    margin: 0 auto;
    }

    Bijdrager
    martijnG
    Wyodor op 20 april 2011

    Gevoelige mensen hier.

    :-)

    Bijdrager
    steene

    ik ben niet zo gevoelig hoor:-)

    Mag ik nog es wat vragen?

    Ik heb een div class namelijk title in de div frame top geplaatst.
    Alles prima…

    Margin-left werkt prima
    margin-top verplaatst de hele boel.

    Ik wil gewoon mijn title wat beter plaatsen maar alles verplaats zoveel pixel mee van boven de pagina?

    Ah zo dus ik vul dit in in mijn css
    div {
    width: 902px;
    margin: 0 auto;
    }

    En dan geeft ie automatisch alles wat een div is 902 px maar niet alles divs horen 902 px te zijn:-)

    Bijdrager
    steene

    waarschijnlijk heeft dat te maken met absolute en relative positionering?
    Maar wat moet ik dan precies doen om mijn title x aantal pixels van frame top te laten zakken en niet de hele pagina de margin’s te veranderen?

    Bijdrager
    senyo
    steene op 20 april 2011

    En dan geeft ie automatisch alles wat een div is 902 px maar niet alles divs horen 902 px te zijn:-)

    Klopt wel, dat is namelijk precies wat je aangeeft; elke div element is nu 902px breed. Daarom kun je gebruik maken van id’s en classes. Geef de div die 902px moet zijn een id mee, bijvoorbeeld id=”top” dan in je css:

    <br />
    #top{<br />
    	width: 902px;<br />
    	margin: 0 auto;<br />
    }<br />
     

    Ik raad je ook aan om eens op w3schools.com te kijken, hier staan alle html en css elementen goed uitgelegd. Daar kun je nog een hoop leren denk ik.:)

    Bijdrager
    steene

    ik twijfel er niet aan dat ik nog veel moet leren:-)
    Gerwinbosscha,

    Heb je enig idee hoe ik die titel die binnen de div frame_top zit verwerkt kan positioneren (lees 5 pixels van de bovenkant laten zakken?)

    Bijdrager
    senyo

    Niet verkeerd bedoeld hoor, gewoon een tip;)

    Die titel kun je laten zakken door padding te gebruiken, dus zo:

    <br />
    #frame_top{<br />
    	padding-top: 5px;<br />
    }<br />
     

    Misschien moet je de hoogte van dit element dan even verlagen met het aantal px dat je in de padding gebruikt, anders valt de lay-out uit elkaar, maar dat weet ik niet zeker.

    Bijdrager
    steene

    oké doe ik, bedankt hoor!

    Bijdrager
    steene

    Mag ik hier nog eens ‘storen’?

    Hoe bepaal ik de witruimte tussen alle kaders?

    Bijdrager
    martijnG

    @steene, misschien moet je eens een avond of 2 spenderen aan het leren van css. Gewoon lezen en aantekeningetjes maken of hoe jij het makkelijkste leert.

    Bijdrager
    senyo
    steene op 21 april 2011

    Hoe bepaal ik de witruimte tussen alle kaders?

    Dat kun je doen met margin. Maar inderdaad, wat martijnG zegt, even wat tijd uittrekken om je te verdiepen in css kan geen kwaad.

    Bijdrager
    Almerrrrr

    Je hebt het bestand nieuwsbrief genoemd als ik er daardoor vanuit ga dat je dit gaat gebruiken voor een html mail let dan goed op dat veel css eigenschappen in html mails niet of slecht ondersteund worden waardoor je voor website’s en email’s een andere opzet nodig hebt.

    Kijk voor een overzicht van wat wel en niet hier even

    Bijdrager
    martijnG

    hier een voorbeeld hoe het ook kan,
    In dit voorbeeld zijn HTML tags gebruikt die beter bij de content passen.

    h1 belangrijkste header
    h3 minder belangrijke header
    p voor paragraaf
    a in de header ook te gebruiken als home button

    de h1 bevat text zodat zoekmachines en mensen die geen plaatjes downloaden ook weten waar het over gaat.

    wrapper: om alles te centreren, had ook met de body tag gekunt, aangezien deze binnen de html tag valt.
    Dn dan de divjes om de secties te scheiden.

    <!DOCTYPE html>
    <html lang=”nl”>
    <head>
    <meta charset=”utf-8″ />
    <title>Logopedia nieuwsbrief2</title>

    <style type=”text/css” media=”screen”>
    * {
    margin: 0;
    padding: 0;
    }

    html, body
    {
    height: 100%;
    font-family: “Arial”,verdana,Sans-Serif;
    }

    div#wrapper
    {
    width: 902px;
    position: relatvie;
    margin: 0 auto;
    }

    div#wrapper > h1
    {
    background: url(‘http://www.logopedia.be/css/images/logopedia-header.png&#8217;) no-repeat;
    height: 120px;
    width: 902px;
    margin: 20px 0;
    }

    div#wrapper > h1 > a
    {
    background: url(‘http://www.logopedia.be/css/images/logo.png&#8217;) no-repeat;
    display: block;
    height: 114px;
    width: 158px;
    text-indent: -5000px;
    margin: 0 0 0 20px;
    }

    div#wrapper > div {
    background: url(‘http://www.logopedia.be/css/images/frame_bottom.png&#8217;) no-repeat center bottom;
    padding: 0 0 14px 0;
    margin: 0 0 20px 0;
    }

    div#wrapper > div > h3 {
    background: url(‘http://www.logopedia.be/css/images/frame_top.png&#8217;) no-repeat;
    color: #FFF;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    }

    div#wrapper > div > p {
    background: url(‘http://www.logopedia.be/css/images/frame_bg.png&#8217;) repeat-y;
    padding: 5px 20px 0 20px;
    }

    </style>

    </head>
    <body>
    <div id=”wrapper”>
    <h1>
    Logo Pedia
    </h1>

    <div>
    <h3>NIEUWSBRIEF INFO</h3>
    <p>Some text</p>
    </div>

    <div>
    <h3>NIEUWSBRIEF INFO</h3>
    <p>Some text</p>
    </div>

    <div>
    <h3>NIEUWSBRIEF INFO</h3>
    <p>Some text</p>
    </div>
    </div>
    </body>
    </html>

    Bijdrager
    steene

    helemaal waar, dan is er nog dat probleem! ik geef het op.

    Ik ga alles in afbeeldingen zetten en die afbeeldingen gewoon aligneren. En dat versturen als nieuwsbrief…
    toch bedankt voor hulpe

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

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