1. #1
    Microwaver's Avatar
    Registered
    12/04/06
    Location
    Geel
    Posts
    109
    iTrader
    0
    Mentioned
    0 Post(s)

    HTML/CSS: Achtegrond afbeelding.

    Ik had (weeral) eens een vraag.
    Ik was hier een beetje bezig met een mail lay-out.

    En daar heb'k een header, middengedeelte en een footer.

    • In de header staat een achtegrondafbeelding waarom men de titel altijd kan veranderen,
    • In de footer staat een gewone afbeelding met verschillende imagemaps.
    • In het middengedeelte (laten we het center noemen) sis er een veld met een achtergrond afbeelding.



    Nu was mijn vraag. Hoe kan ik er voor zorgen, hoe lang en hoog de tekst in het midden ook word. Hoe kan ik deze afbeelding NET boven de footer laten blijven (ok. niet al te correct nederlands).
    en als ik de lengte van het middengedeelte aanpas. veranderden de image maps dan niet van plaats? ik dacht van niet. maar ben niet 100% zeker.



    Gegroet
    MicroWaver

    www.microwaver.be, to be online before 2009
    no votes  

  2. #2
    omfg's Avatar
    Registered
    16/08/04
    Location
    9000
    Posts
    1,224
    iTrader
    4 (100%)
    Mentioned
    0 Post(s)
    ik begrijp niet echt helemaal wat je bedoelt, maar als je je achtergrondafbeelding in je 'center' div (ik veronderstel dat je divs gebruikt?) gewoon een background-position: bottom; meegeeft zou deze onderaan moeten blijven en dus vlak boven je footer komen...
    mss kan je ons een link geven dat we kunnen zien hoe je het wil?

    grtz
    There are two rules for success: 1. Never tell everything you know...
    no votes  

  3. #3
    Microwaver's Avatar
    Registered
    12/04/06
    Location
    Geel
    Posts
    109
    iTrader
    0
    Mentioned
    0 Post(s)
    Ok. ik ga er morgen of vanavond nog een beetje aan werken en zal'k zeker tegen vrijdag iets posten dat deze, eigenlijk toch vrij onduidelijke vraag, een beetje onderbouwd.

    AL bedankt voor je uitleg.
    MicroWaver

    www.microwaver.be, to be online before 2009
    no votes  

  4. #4
    Microwaver's Avatar
    Registered
    12/04/06
    Location
    Geel
    Posts
    109
    iTrader
    0
    Mentioned
    0 Post(s)
    Ok ik heb nu iets maar zit nog altijd met een vraagje.

    het ziet eruit zoals het moet. maar in het middne lukt het enkel als'k genoeg tekst in het vakje zet.

    Als de tekst nie kleiner is dan de Fc dan krijg'k de volledige afbeelding nog niet te zien

    hoe los ik dit op?


    Ook iet er iets mis met die header. daar wordt de div breder naarmate ik padding toevoeg, dit kan toch ook niet de bedoeling zijn?
    wat als ik nu rond dat geheel een border wil zetten?

    http://users.telenet.be/DeTrekBeiren.../untitled.html

    de html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    <link href="css.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="center">
    <div id="header"><h1>[slogan]</h1></div>
    <div id="middle">
      <h1>[Titel]</h1>
      <p>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel leo sit amet dui nonummy malesuada. Pellentesque eros. Proin ac dui a sapien tincidunt fermentum. Maecenas porttitor velit eu mauris. Cras urna nisi, vulputate in, porta id, porttitor ac, dolor. Duis venenatis diam congue tortor tempor iaculis. Nam vehicula tincidunt pede. Phasellus commodo, ante sed bibendum hendrerit, ante diam venenatis turpis, ut auctor nunc urna eu ipsum. Nam massa nunc, pellentesque ut, rutrum sed, vulputate et, metus. Vivamus eget arcu ut libero sodales fringilla. Vestibulum nonummy. Suspendisse pulvinar quam sit amet justo."</p>
    
    <p>"Mauris elementum. Nulla non mi quis arcu laoreet vulputate. Nulla porta consectetuer magna. Sed pulvinar faucibus libero. Sed risus nisi, posuere ut, feugiat non, mattis id, orci. Donec porttitor, diam id vulputate lobortis, est mauris faucibus justo, non lacinia odio metus id ipsum. Donec viverra suscipit justo. Mauris tortor odio, placerat vel, tempor in, molestie non, velit. Nullam vitae felis quis enim semper aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam mollis quam non lectus. Vivamus imperdiet, justo et ultricies porttitor, tortor nisl viverra velit, aliquam cursus eros eros eu enim."</p>
    
    <p>"Aenean pede nibh, tincidunt nec, tristique vel, molestie ac, sapien. Donec pretium, erat in imperdiet lobortis, pede sapien sollicitudin elit, id rutrum elit enim a nulla. Praesent ornare, tortor quis mollis blandit, purus metus aliquam erat, dignissim dapibus mauris lectus ut lectus. Donec purus. Quisque adipiscing metus sit amet arcu. Donec ante. Duis vulputate mi a diam scelerisque auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras id magna quis lorem scelerisque egestas. Praesent eget risus. In hac habitasse platea dictumst. Nam non ipsum euismod velit sagittis mollis. Mauris eu odio."</p>
    
    </div>
    <div id="footer"><img src="images/footer.gif" alt="footer" border="0" usemap="#Map" />
    <map name="Map" id="Map"><area shape="rect" coords="309,66,577,88" href="mailto:patrick.temmerman@famca.be" />
    <area shape="rect" coords="621,129,757,158" href="http://www.famca.be" />
    <area shape="rect" coords="10,8,150,156" href="http://www.famca.be" />
    </map></div>
    
    </div>
    </body>
    </html>
    De CSS
    Code:
    body {
    text-align:center;
    }
    
    #center{
    width:760px;
    margin-left:auto;
    margin-right:auto;
    }
    
    #header {
    float:left;
    background-image:url(images/header.gif);
    background-repeat:no-repeat;
    width:760px;
    height:148px;
    text-align:justify;
    padding-left:175px;
    padding-right:-175px;
    
    }
    #header h1 {
    font-family:"Courier New", Courier, monospace;
    font-size:36px;
    font-weight:bold;
    color:#006633;
    padding-top:45px;
    }
    
    #middle {
    background-image:url(images/center.jpg);
    background-position:bottom;
    background-repeat:no-repeat;
    text-align:justify;
    padding-left:25px;
    padding-right:25px;
    }
    #middle h1 {
    font-family:"Courier New", Courier, monospace;
    font-size:18px;
    font-weight:bold;
    color:#006633;
    }
    #middle p {
    font-family:"Courier New", Courier, monospace;
    font-size:12px;
    font-weight:bold;
    color:#006633;
    
    }
    
    #footer {
    margin:0px;
    padding:0px;
    }
    MicroWaver

    www.microwaver.be, to be online before 2009
    no votes  

  5. #5

    Registered
    19/09/05
    Posts
    1,911
    iTrader
    0
    Mentioned
    0 Post(s)
    werken div's niet zoals tabellen?

    als ik van dit een tabel zou maken, dan zou het middenstuk (tr td) zich gewoon uitrekken

    hoe meer content
    hoe langer

    hoe minder content
    hoe korter


    weet niet of dit bij divs ook zo is


    ps : waarom zo een hoooooge footer
    het is bijna geen footer meer te noemen
    no votes  

  6. #6
    Microwaver's Avatar
    Registered
    12/04/06
    Location
    Geel
    Posts
    109
    iTrader
    0
    Mentioned
    0 Post(s)
    Is nodig hé. kan er ook niet aan doen.


    Het probleem is nu eigenlijk grotendeels opgelost qua lay out.
    Maar in godsnaam! het werkt gewoon niet in emails.

    Heeft iemand eigenlijk een idee hoe je een Email HTML kunt aanmaken (zoals die standaarden in outlook?)

    dit zou me een hele stap vooruit kunnen zetten !


    Groeten
    MicroWaver

    www.microwaver.be, to be online before 2009
    no votes  

  7. #7
    omfg's Avatar
    Registered
    16/08/04
    Location
    9000
    Posts
    1,224
    iTrader
    4 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by Microwaver View Post
    This quote is hidden because you are ignoring this member. Show
    Ok ik heb nu iets maar zit nog altijd met een vraagje.

    het ziet eruit zoals het moet. maar in het middne lukt het enkel als'k genoeg tekst in het vakje zet.

    Als de tekst nie kleiner is dan de Fc dan krijg'k de volledige afbeelding nog niet te zien

    hoe los ik dit op?
    min-height kan je gebruiken, maar dat werkt niet in alle browsers.. verder kan ik niet direct een oplossing bedenken
    Quote Originally Posted by Microwaver View Post
    This quote is hidden because you are ignoring this member. Show
    Ook iet er iets mis met die header. daar wordt de div breder naarmate ik padding toevoeg, dit kan toch ook niet de bedoeling zijn?
    wat als ik nu rond dat geheel een border wil zetten?
    je zichtbare breedte is
    width + border + padding + margin,
    dus als je een padding van 5 pixels wil toevoegen zal je je width met 10 pixels moeten verminderen (linker en rechter padding), idem met border.

    grtz
    There are two rules for success: 1. Never tell everything you know...
    no votes  

  8. #8
    Microwaver's Avatar
    Registered
    12/04/06
    Location
    Geel
    Posts
    109
    iTrader
    0
    Mentioned
    0 Post(s)
    Raar dat dan niet gebeurd bij de rest, daar zit ook een hoop padding in
    MicroWaver

    www.microwaver.be, to be online before 2009
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in