Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

i-frame uitlijnen in het midden, horizontaal en verticaal

None
12 antwoorden
  • Hallo,

    Zoals de titel al zegt wil ik ene i-frame in het midden uitlijnen zowel horizontaal als verticaal.
    Iemand enig idee hoe ik dat moet doen?
    Moet ik het i-frame dan gewoon in een tabel zetten ofzo?

    Alvast bedankt voor het antwoord.
  • Als ik hem in een tabel zet lukt het alleen om hem links en rechts uitgelijnd te hebben (even veel ruimte).
    Onder en boven lukt echter niet :(
  • 1: geen frame gebruiken
    2: geen tabel gebruiken

    Zet de boel in een div, en geef die een een uitlijning met css:
    [code:1:ac67dc61c7]text-align: center;
    vertical-align: middle;
    [/code:1:ac67dc61c7]

    [size=9:ac67dc61c7]PS: Keukenpraat? (als je niet weet wat ik bedoel, dan is dat antwoord genoeg)[/size:ac67dc61c7]
  • Met div's heb ik nog nooit gewerkt, zegt me dus idd niks :(
  • http://www.duikfreak.nl/test/index.html

    Zo ver ben ik nu (met frames)
    Achtergrond word nog anders hoor.
    No worries :D
  • Het makkelijkst centreren gaat met een tabel die je een vaste breedte geeft en horizontaal in het midden zet met CSS: 'margin: 0 auto'. In die tabel heb je één cel, waarin je alles verticaal centreert met valign="middle". De andere manier om verticaal te centreren is een aantal divs met allerlei CSS, wat wellicht iets beter is, maar ach..
    In ieder geval zul je verder alle layout met CSS moeten regelen.

    Mag ik vragen hoe je erbij komt om frames te gebruiken? Waar heb je die kennis vandaan?
  • Een div is een division, je geeft er dus een bepaald stuk op je pagina mee aan. Bijvoorbeeld
    [code:1:47004a730f]<div id="container">van alles en nog wat</div>[/code:1:47004a730f]
    Door de id container die ik hier heb meegegeven kun je o.a. diezelfde id in de stylesheet laten terugkomen en de stijl-eigenschappen ermee bepalen:

    [code:1:47004a730f]#container {
    margin: 50% 50% 50% 50%;
    }
    [/code:1:47004a730f]
  • [quote:5fb6de2fcf="Ger"]Een div is een division, je geeft er dus een bepaald stuk op je pagina mee aan. Bijvoorbeeld
    [code:1:5fb6de2fcf]<div id="container">van alles en nog wat</div>[/code:1:5fb6de2fcf]
    Door de id container die ik hier heb meegegeven kun je o.a. diezelfde id in de stylesheet laten terugkomen en de stijl-eigenschappen ermee bepalen:

    [code:1:5fb6de2fcf]#container {
    margin: 50% 50% 50% 50%;
    }
    [/code:1:5fb6de2fcf][/quote:5fb6de2fcf]

    Het eerste deel moet ik tussen de body tags zetten.
    Maar het 2e deel waar moet dan?
    In css?
    Dan moet ik die weer definieren in html toch?
    Zoals ik al aangaf ben maar leek :P
  • Ik denk niet echt dat die oplossing werkt. Dit is een alles behalve ideale oplossing:[code:1:f49a9c9dc7]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>centreren</title>
    <style type="text/css">
    html, body {padding:0; margin:0;}
    #container {
    position: absolute;
    top: 50%; left: 50%;
    margin-top: -200px;
    margin-left: -300px;
    background-color: red;
    width: 600px; height:400px;}
    </style>
    </head>
    <body>

    <div id="container">
    <p>Deze div is horizontaal en verticaal gecentreerd.</p>
    </div>

    </body>
    </html>[/code:1:f49a9c9dc7]Het is niet een optimaal voorbeeld omdat als het browser venster kleiner is dan de grote van de div het deel met de negatieve margin niet meer te zien is ook niet door te scrollen.
  • Nee die is niet in het midden gecentreerd.
    Ja in jou resolutie misschien maar hij moet in elke resolutie in het midden gecentreerd zijn.
    Ik heb het venster in de goede grote gezet (1020 bij 760) en dan is het dus pet :(
  • Ik ging even aan mezelf twijfelen… had ik niet hoeven doen, het werkt toch echt (en je kan de maat van de div zelf aanpassen, dan moet je natuurlijk ook de negatieve margin aanpassen, die is de helft van de hoogte of de breedte). Ik heb het gechecked in Firefox, opera, IE6 en IE7. Ik heb het zelfs even voor je online gezet:

    http://www.millar.nl/blabla.html

    [code:1:756675bbc9]<style type="text/css">
    #container {
    position: absolute;
    top: 50%; left: 50%;
    width: "X"; height: "Y";
    margin-top: -"½·Y";
    margin-left: -"½·X";
    background-color: red;
    }
    </style> [/code:1:756675bbc9]Waarbij X en Y zelf in te vullen waarden zijn (en niet de eenheid vergeten).
  • Aha zit hem daar de kneep :D
    Het werkt idd nu wel :D
    Helemaal goed!
    Mijn dank is groot.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.