Auteur Topic: css plaatsings probleem  (gelezen 2382 keer)

0 leden en 1 gast bekijken dit topic.

thomas112nl

  • DigitalPlace Lid
  • *
  • Berichten: 2
  • Karma: 0
    • Bekijk profiel
css plaatsings probleem
« Gepost op: juni 12, 2013, 03:31:14 pm »
  • [+1]0
  • [-1]0
  • hallo,
    ik heb hulp nodig mijn countdowntimer blijft aan mijn geld invoer balk plakken en hij plaatst hem niet precies waar in em wil kan iemand me daar bij helpen?

    [attachment=1:hitd32ts]Schermafbeelding 2013-06-12 om 15.17.17.png[/attachment:hitd32ts] [attachment=0:hitd32ts]voor vorum.jpg[/attachment:hitd32ts]

    Dit is het stukje code waar het omgaat:
    <div class="container">     
    <div class="well">
      <img src="../screen-shot-2012-02-10-at-16-34-50.png" width="346" height="247" />
           <div class="pull-right">
                <form action="" method="get" name="bied">
           <input name="bied2" type="text" value="0,00$" />
             <br />
             <input class="btn btn-primary" name="Bied" type="button" value="Bied" />
           </form>
             </div>
             <div class="pull-right">
           <iframe src="http://free.timeanddate.com/countdown/i3o6th6f/n1295/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cac666/cpc000/pct/tcfff/fs100/szw576/szh243/tatloopende%20veiling/tac666/tptTime%20since%20Event%20started%20in/tpc000/mat112%2C50/mac666/mpc000/iso2013-06-13T00:00:00" frameborder="0" width="268" height="122"></iframe>
           </div>

    dit is de helecode
    <!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=UTF-8" />
    <meta name="viewport" content="width-devise-width, initial-scale-1.0" />
    <title>lerenbootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/bootstrap-responsive.css" />
        <link href='http://fonts.googleapis.com/css?family=Chela+One' rel='stylesheet' type='text/css'>
        <style type="text/css">
    #centreren {position:relative;
    float:left;
    width:156px;
    height:68px;
    }

    h1 {font-family:Arial, Helvetica, sans-serif;
    font-size:30px;
    font-weight:bold;
    color:#666;
    text-shadow: 0 1xp 0 #666;
    }
    p {font-family:"Times New Roman", Times, serif;
    font-size:12px;
    font-weight:normal;
    color:#000;}
    h2 {
    font-family: 'Chela One', cursive;}
    #apDiv1 {
    position: absolute;
    width: 448px;
    height: 38px;
    z-index: 1;
    left: 224px;
    top: 106px;
    }
        #apDiv2 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 1;
    }
        #apDiv3 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 1;
    }
        #apDiv4 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 1;
    }

        </style>
    </head>

    <body>
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="../../html home ecoline website/scc  bootstrap extra.html"><h1>veilingracers</h1></a>
        <ul class="nav pull-right">
          <li><a href="scc  home page extra.html"><h1>huis</h1></a></li>
          <li class="active"><a href="../../html home ecoline website/html 2 veiling site-1.html"><h1>veilingen</h1></a></li>
          <li><a href="amnesty site.html"><h1>goede doel</h1></a></li>  
       
        </ul>
        <p>&nbsp;</p>
      </div>
    </div>

    <div class="well container">
    <h1>lopende veiling zorg ervoor dat je niet te laat bent.<h1>


    </div>


    <div class="container">    
    <div class="well">
      <img src="../screen-shot-2012-02-10-at-16-34-50.png" width="346" height="247" />
           <div class="pull-right">
                <form action="" method="get" name="bied">
           <input name="bied2" type="text" value="0,00$" />
             <br />
             <input class="btn btn-primary" name="Bied" type="button" value="Bied" />
           </form>
             </div>
             <div class="pull-right">
           <iframe src="http://free.timeanddate.com/countdown/i3o6th6f/n1295/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cac666/cpc000/pct/tcfff/fs100/szw576/szh243/tatloopende%20veiling/tac666/tptTime%20since%20Event%20started%20in/tpc000/mat112%2C50/mac666/mpc000/iso2013-06-13T00:00:00" frameborder="0" width="268" height="122"></iframe>
           </div>

    </div>
    </div>
     
    </div>
    </div>




    <div class="container">    
    <div class="well">
      <img src="../Beestenboel_ecoline_2012.JPG" width="346" height="247" />
      <div class="pull-right">
           <div id="space" style="width:2px; height:90px;"></div>
           <form action="" method="get" name="bied">
           <input name="bied2" type="text" value="0,00$" />
             <br />
             <input class="btn btn-primary" name="Bied" type="button" value="Bied" />
           </form>
      </div>
    </div>
    </div>

    <div class="container">    
    <div class="well">
      <img src="../baadster.jpg" width="346" height="247" />
      <div class="pull-right">
           <div id="space" style="width:2px; height:190px;"></div>
           <form action="" method="get" name="bied">
           <input name="bied2" type="text" value="0,00$" />
             <br />
             <input class="btn btn-primary" name="Bied" type="button" value="Bied" />
           </form>
      </div>
    </div>
    </div>

    <div class="well">
             <p><a href="https://twitter.com/Thomas112nl" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @Thomas112nl</a>
               <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
      </p>
           
    <iframe src= "http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fjon ginnop&amp%3Bsend=false&amp%3Blayout=standard&amp%3Bwidth=450&amp%3Bshow_faces =true&amp%3Bfont&amp%3Bcolorscheme=dark&amp%3Baction=like&amp%3Bheight=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:80px;" allowTransparency="true">
    </iframe>
           
    <div class="pul pull-right">
           
         <ul><form class="form-search pull-right">
      <input type="text" class="input-medium search-query">
      <button type="submit" class="btn">Search</button>
    </form></ul>

    </div>

    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    </body>
    </html>

    dank jullie wel
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »

    gertmenkel

    • Actief DigitalPlace Lid
    • **
    • Berichten: 1125
    • Karma: 131
      • Bekijk profiel
    Re: css plaatsings probleem
    « Reactie #1 Gepost op: juni 12, 2013, 06:08:36 pm »
  • [+1]0
  • [-1]0
  • [offtopic:1ms7n8va]Ehm, [icode:1ms7n8va]Loopende veiling[/icode:1ms7n8va]? Heb je niet een letter te veel daar?[/offtopic:1ms7n8va]
    Ik zie in ieder geval dat je op regel 94 en 95 twee [icode:1ms7n8va]</div>[/icode:1ms7n8va]'s te veel hebt. Ik vond je HTML wat onduidelijk, dus ik heb wat opgeschoond. Dit is de HTML die ik ervan heb gemaakt:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width-devise-width, initial-scale-1.0" />
    <title>lerenbootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/bootstrap-responsive.css" />
    <link href='http://fonts.googleapis.com/css?family=Chela+One' rel='stylesheet' type='text/css'>
    <style type="text/css">
    #centreren {position:relative;
    float:left;
    width:156px;
    height:68px;
    }

    h1 {font-family:Arial, Helvetica, sans-serif;
    font-size:30px;
    font-weight:bold;
    color:#666;
    text-shadow: 0 1xp 0 #666;
    }
    p {font-family:"Times New Roman", Times, serif;
    font-size:12px;
    font-weight:normal;
    color:#000;}
    h2 {
    font-family: 'Chela One', cursive;}
    #apDiv1 {
    position: absolute;
    width: 448px;
    height: 38px;
    z-index: 1;
    left: 224px;
    top: 106px;
    }
    #apDiv2 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 1;
    }
    #apDiv3 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 1;
    }
    #apDiv4 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 1;
    }

    </style>
    </head>

    <body>
    <div class="navbar">
    <div class="navbar-inner">
    <a class="brand" href="../../html home ecoline website/scc  bootstrap extra.html">
    <h1>veilingracers</h1>
    </a>
    <ul class="nav pull-right">
    <li>
    <a href="scc  home page extra.html">
    <h1>huis</h1>
    </a>
    </li>
    <li class="active">
    <a href="../../html home ecoline website/html 2 veiling site-1.html">
    <h1>veilingen</h1>
    </a>
    </li>
    <li>
    <a href="amnesty site.html">
    <h1>goede doel</h1>
    </a>
    </li>
    </ul>
    <p>&nbsp;</p>
    </div>
    </div>

    <div class="well container">
    <h1>lopende veiling zorg ervoor dat je niet te laat bent.<h1>
    </div>


    <div class="container">    
    <div class="well">
    <img src="../screen-shot-2012-02-10-at-16-34-50.png" width="346" height="247" />
    <div class="pull-right">
    <form action="" method="get" name="bied">
    <input name="bied2" type="text" value="0,00$" />
    <br />
    <input class="btn btn-primary" name="Bied" type="button" value="Bied" />
    </form>
    </div>
    <div class="pull-right">
    <iframe src="http://free.timeanddate.com/countdown/i3o6th6f/n1295/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cac666/cpc000/pct/tcfff/fs100/szw576/szh243/tatloopende%20veiling/tac666/tptTime%20since%20Event%20started%20in/tpc000/mat112%2C50/mac666/mpc000/iso2013-06-13T00:00:00" frameborder="0" width="268" height="122"></iframe>
    </div>
    </div>
    </div>

    <div class="well">
    <p><a href="https://twitter.com/Thomas112nl" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @Thomas112nl</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </p>
     
    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fjonginnop&amp%3Bsend=false&amp%3Blayout=standard&amp%3Bwidth=450&amp%3Bshow_faces   =true&amp%3Bfont&amp%3Bcolorscheme=dark&amp%3Baction=like&amp%3Bheight=80"    scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:80px;" allowTransparency="true">
    </iframe>
     
    <div class="pul pull-right">
    <ul>
    <form class="form-search pull-right">
    <input type="text" class="input-medium search-query">
    <button type="submit" class="btn">Search</button>
    </form>
    </ul>
    </div>

    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    </body>
    </html>
    Daarbij werkt je huidige code redelijk op chrome maar dan ook ALLEEN op chrome. Firefox, IE en Opera doen iets verkeerd met de stijl.

    Zie zipje voor screenshots van verschillende browsers op Windows 7 x64: [attachment=0:1ms7n8va]Screenshots.zip[/attachment:1ms7n8va]Het probleem hiermee kan liggen aan dat ik de plaatjes voor de pagina niet heb, nu ik eraan denk.


    Zo te zien heeft je probleem ermee te maken dat beide [icode:1ms7n8va]div[/icode:1ms7n8va]'s de [icode:1ms7n8va]float: right[/icode:1ms7n8va] krijgen. Dan gaan ze tegen elkaar hangen.
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »
    ThePirateBay AFK
    Bekijk de vrije en gratis documentaire!

    thomas112nl

    • DigitalPlace Lid
    • *
    • Berichten: 2
    • Karma: 0
      • Bekijk profiel
    Re: css plaatsings probleem
    « Reactie #2 Gepost op: juni 12, 2013, 10:17:54 pm »
  • [+1]0
  • [-1]0
  • tnx jah ik ben nog beetje nieuw net half jaar aan het leren
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2675
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    Re: css plaatsings probleem
    « Reactie #3 Gepost op: juni 13, 2013, 09:47:06 am »
  • [+1]0
  • [-1]0
  • Citaat van: "gertmenkel"
    Zo te zien heeft je probleem ermee te maken dat beide [icode:6p4mznp9]div[/icode:6p4mznp9]'s de [icode:6p4mznp9]float: right[/icode:6p4mznp9] krijgen. Dan gaan ze tegen elkaar hangen.

    Is het dan niet een idee, als er een [icode:6p4mznp9]margin:10px;[/icode:6p4mznp9] op gooit, in de CSS?
    Dan zitten ze 20px van elkaar af.

    Of je doet je bied  block op [icode:6p4mznp9]pull-right[/icode:6p4mznp9] en de iframe, zet in in het midden d.m.v positioning, of de iframe in een div gooien met een vaste breedte  ([icode:6p4mznp9]width:[/icode:6p4mznp9]) en dan [icode:6p4mznp9]margin:0 auto;[/icode:6p4mznp9]
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »