1. Deze website gebruikt cookies. Door deze website verder te gebruiken, gaat u akkoord met ons gebruik van cookies. Leer Meer.

Het Web ontwikkelaars Topic [deel 3]

Discussie in 'PC, Handheld & Algemeen' gestart door Le Lastpak, 19 mei 2011.

  1. xRichardX

    xRichardX Nieuw Noord

    Berichten:
    1.431
    Leuk Bevonden:
    2
    Ik probeer weer even in html css een site te maken. Heb nu een losse header gemaakt in photoshop, maar ik krijg hem maar niet in mijn site:mad:

    Iemand die weet wat voor code in kan gebruiken? hij moet gewoon gecentreerd bovenin staan.

    Alvast bedankt!:thumbs:
     
  2. [2k]

    [2k] XBW.nl VIP XBW.nl VIP

    Berichten:
    8.968
    Leuk Bevonden:
    207
    *, body { margin: 0 auto; text-align: center; }

    Zo even snel uit m'n hoofd.
     
  3. Willem

    Willem Obi-Willem XBW.nl Bestuur

    Berichten:
    13.173
    Leuk Bevonden:
    686
    Dat heeft geen effect, helaas. Heb van -1 tot -500 geprobeerd en ik zag geen verschil. Iemand anders nog een idee?
     
  4. Willem

    Willem Obi-Willem XBW.nl Bestuur

    Berichten:
    13.173
    Leuk Bevonden:
    686
    Kan iemand me nog met dit probleem helpen? Ik kom er echt niet uit!
     
  5. Ferron

    Ferron Active Member

    Berichten:
    5.446
    Leuk Bevonden:
    38
  6. BeZaX

    BeZaX Plop...

    Berichten:
    701
    Leuk Bevonden:
    0
    PHP:
    <style type="text/css">
        .
    container{width:520px}
        
    img{float:left}
    </
    style>

    <
    div class="container">
        <
    a href="#"><img src="afbeelding1.png" width="200" height="304"></a>
        <
    a href="#"><img src="afbeelding1.png" width="320" height="304"></a>
        <
    a href="#"><img src="afbeelding1.png" width="520" height="371"></a>
        <
    a href="#"><img src="afbeelding1.png" width="520" height="90"></a>
    </
    div>
    Eventueel een clearfix toevoegen indien nodig.
     
    Laatst bewerkt: 7 okt 2011
  7. Gdzr

    Gdzr Hmmm?

    Berichten:
    2.751
    Leuk Bevonden:
    62
    Ik zal het zo zelf is ff maken in mn browser. Kijken of het dan wel werkt of werkend kan krijgen.
     
  8. Ferron

    Ferron Active Member

    Berichten:
    5.446
    Leuk Bevonden:
    38
    Ik snap het probleem niet? 8)
    Willem je hebt een LinkedIn plaatje gepakt waar nog een hele hoop witruimte naast zat en onder, moet je even knippen met photoshop.

    Jij hebt deze:

    [​IMG]

    Als ik hem uitknip blijft dat blauwe gedeelte alleen niet dezelfde kleur..

    //

    Dan staat die wel naast dat plaatje alleen kan ik hem nog steeds niet positioneren 8)

    //oh toch wel, was een haakje vergeten.

    http://www.mediafire.com/?bm7vmbg50ahuzl2

    of

    http://www.mediafire.com/?nfsjc07tqaumr88
     
    Laatst bewerkt: 7 okt 2011
  9. Willem

    Willem Obi-Willem XBW.nl Bestuur

    Berichten:
    13.173
    Leuk Bevonden:
    686
    Ik zal het nog eens uitleggen.

    Ik heb een ontwerp (afbeelding) die in een Welcome Tab op Facebook komt. Dit ontwerp is bevat allerlei teksten die refereren naar pagina's op het internet. Ik wil dat bezoekers van Welcome Tab door op een deel van de afbeelding te klikken, op pagina terechtkomen waar naar gerefereerd wordt.

    Dit dacht ik te kunnen doen door de afbeelding in meerdere delen op te splitsen. Op het moment zijn het vier delen. Het bovenste stuk bestaat uit twee delen, links en rechts. Daaronder is een middenstuk en een onderstuk, elk één afbeelding. Door de delen bij elkaar te zetten, lijkt het één afbeelding.

    De opmaak van de Welcome Tab, met daarin de afbeelding, wordt gedaan in HTML. Ik heb dus in HTML code geschreven dat achter de afbeelding een url hangt.

    Gek genoeg komen de eerste twee afbeeldingen ("links" en "rechts)" onder elkaar te staan. Ik wil ze natuurlijk naast elkaar hebben! Hier heb ik een aantal oplossingen voor gekregen. Sommige werkten, sommigen niet. Bij één van de oplossingen deed zich een ander probleem voor.

    Er ontstonden witte ruimte tussen de verschillende afbeeldingen! Dus de verschillende delen van het ontwerp sloten niet op elkaar aan.

    Hoe kan ik de twee genoemde problemen, oplossen?
     
  10. Ferron

    Ferron Active Member

    Berichten:
    5.446
    Leuk Bevonden:
    38
  11. Willem

    Willem Obi-Willem XBW.nl Bestuur

    Berichten:
    13.173
    Leuk Bevonden:
    686
    Ja, dat! Zo moet het er uitzien, mooi mooi. Ik heb de HTML uit de bron gehaald. Máár.

    In de Welcome Tab staan ze nu weer onder elkaar. Terwijl ik wéét dat maximale breedte 520 px. is, en de plaatjes "links" en "rechts" zijn samen 520 px. breed.

    =(
     
  12. Ferron

    Ferron Active Member

    Berichten:
    5.446
    Leuk Bevonden:
    38
    Heb je ook het CSS bestand gepakt? :9
     
  13. Willem

    Willem Obi-Willem XBW.nl Bestuur

    Berichten:
    13.173
    Leuk Bevonden:
    686
    Nope. Wat moet ik daar mee? :eek:
     
  14. Ferron

    Ferron Active Member

    Berichten:
    5.446
    Leuk Bevonden:
    38
    Een CSS bestand zorgt voor de opmaak van een webpagina. In dit geval dus de positionering. Je moet die even in hetzelfde mapje als het HTML bestand zetten (ook de foto). En dan het html bestand openen.
     
  15. Willem

    Willem Obi-Willem XBW.nl Bestuur

    Berichten:
    13.173
    Leuk Bevonden:
    686
    Ho, wacht...

    De afbeeldingen en de HTML-opmaak staan allemaal als tekst in de app van iFrame. Dat staat dus allemaal gehost op Facebook. Dan kan ik dus niets met het CSS-bestand?
     
  16. Ferron

    Ferron Active Member

    Berichten:
    5.446
    Leuk Bevonden:
    38
    Geen idee, maar ik 'integreer' het wel even in het HTML bestand. :+

    //Hier:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Untitled</title>
    </head>
    <body>
    
    Under construction!
    
    <br>
    
    <style type="text/css">
    img.img2 { margin-left:-4px;}
    img.img3 { margin-top: -9px;}
    img.img4 { margin-bottom: 47px;}
    img.img3, img.img1 {margin-left:-8px;}
    </style>
    
    <a target="_blank" href="http://www.facebook.com/pages/Ambassadeurs-Zeeuws-Vlaanderen-De-Toekomst/209271809114543"><img class="img1" src="http://i53.tinypic.com/jh3ayh.jpg"/></a>
    
    <a target="_blank" href="http://www.uwnieuwetoekomst.nl/ambassadeur"><img class="img2" alt="" src="http://i51.tinypic.com/34xi9hf.jpg"/></a>
    
    <br>
    
    <a target="_blank" href="http://www.uwnieuwetoekomst.nl/ambassadeur"><img class="img3" src="http://i52.tinypic.com/vwzlmd.jpg"/></a>
    
    <a target="_blank" href="http://www.linkedin.com/groups/Ambassadeurs-Zeeuws-Vlaanderen-De-Toekomst-3820513?gid=3820513&trk=hb_side_g"><img class="img4" alt="" src="http://i51.tinypic.com/334rksz.jpg"/></a>
    
    </body>
    </html>
    
     
    Laatst bewerkt: 8 okt 2011
  17. BeZaX

    BeZaX Plop...

    Berichten:
    701
    Leuk Bevonden:
    0
    Gebruik lekker mijn code (bovenaan de pagina). Waarom moeilijk doen met (negatieve) margins? :confused: Negatieve margins werken ook niet correct in oudere IE versies.

    Inline versie (mocht je liever de opmaak willen combineren in de HTML):
    PHP:
    <div style="width:520px"
        <
    a href="#"><img src="afbeelding1.png" width="200" height="304" style="float:left"></a
        <
    a href="#"><img src="afbeelding1.png" width="320" height="304" style="float:left"></a
        <
    a href="#"><img src="afbeelding1.png" width="520" height="371" style="float:left"></a
        <
    a href="#"><img src="afbeelding1.png" width="520" height="90" style="float:left"></a
    </
    div>  
     
    Laatst bewerkt: 8 okt 2011
  18. Willem

    Willem Obi-Willem XBW.nl Bestuur

    Berichten:
    13.173
    Leuk Bevonden:
    686
    Jouw code werkt inderdaad BeZaX! Super bedankt. Ik hou jullie wel op de hoogte als de Page klaar is, kunnen jullie het eindresultaat zien.
     
  19. [2k]

    [2k] XBW.nl VIP XBW.nl VIP

    Berichten:
    8.968
    Leuk Bevonden:
    207
    Maar weer eens een Google Analytics account aangemaakt en op m'n portfolio site gezet. Duurt alleen altijd ff voordat Google gaat scannen en het gebeuren actief wordt.
     
  20. Sloober

    Sloober Active Member

    Berichten:
    2.312
    Leuk Bevonden:
    16

Deel Deze Pagina