Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Opgelost Klein vraagje i.v.m. positionering

bewerkt do 19 mrt 2015 in Algemeen Posts: 107
https://www.dropbox.com/s/qqvar2g06ee4uzn/prentje.jpg

Een klein vraagje, hoe moet je die layout zien of welke bel moet gaan rinkelen als je zoiets ziet ? (Kan er niet aan doen, bij mij rinkelt de tabtoets).
Getagd:

Reacties

  • PMPosts: 732
    Er rinkelt hier niks ?
    De tekst die je ziet (Lorum ipsum) is gewoon random opvullende tekst.

    If it's not fun, you're not doing it right!
  • bewerkt di 4 mrt 2014
    PMPosts: 415
    Waarom alleen plaatjes hosten ipv een live voorbeeld MET eventueel een plaatje waar het 'juist' op staat?
  • PMPosts: 107
    Ik ben wellicht niet duidelijk. We hebben een slecht kopietje gekregen waarop deze tekst staat en die moeten we zo layouten. Aan de ene kant twee woorden aan de andere kant een aantal regels tekst (de tekst zelf doet er niet toe). Ik weet niet hoe je dit zo gepositioneerd krijgt. Twee div's naast mekaar, in een tabel, hoe krijg ik ze zo uitgelijnd.
    De titel (die hier niet op staat), zet ik in een header. De navigatie in een ul aan de zijkant, en dan is deze lorem ipsum de main content.
  • PMPosts: 107
    P.S. Bedankt voor het kijken. Dit is niet zo belangrijk, morgen bekijken we dit.
  • PMPosts: 732
    simpel voorbeeldje, en responsive:

    html:


    <div class="container">
    <div class="left">
    <p>abracadabra<br>abracadabra</p>
    </div>
    <div class="right">
    <p>Lorum ipsum</p>
    </div>
    </div>

    css


    .container{ margin:0 auto; width:800px; }
    .left, .right { float:left; width:50%; }
    @media (max-width: 480px){
    .container { width: 100%; }
    .right { clear: left;}
    }
    If it's not fun, you're not doing it right!
  • PMPosts: 107
    Jij hebt uiteraard volledig gelijk. Dat zal de oefening op floats zijn die we morgen gaan maken. Bedankt !
  • bewerkt wo 5 mrt 2014
    PMPosts: 415
    imo hoort dit in een tabel

    edit, met de dummy text ga je dit niet eens voor elkaar krijgen met divs en nog minder bij 'variable' text.
  • PMPosts: 107
    "De leraar heeft gezegd" dat het met floats moet en relative of absolute position is niet nodig. Dus ik weet al waaraan ik me moet houden.
  • Nou, dat plaatje is toch echt een table hoor...Als het perse met divs moet (wat me sterk lijkt) dan moet je hoogtes opgeven en meerdere floating divs gebruiken (of gedoe met margin/padding) en je loopt dan vast zodra je een langere text gebruikt of een grotere afbeelding..
  • PMPosts: 107
    Mocht het iemand interesseren, dit is de oplossing van de leraar.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
    <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="nl" lang="nl">
    <head>
    <title>To&ouml;nyn G&aring;rissvenra / Swedish Designer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/screen.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>;
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){
    var beeld = new Array('img/beeld_1.png', 'img/beeld_2.png', 'img/beeld_3.png');
    var i = 0;
    $('span#teller').html((i + 1) + '/' + beeld.length);
    $('#volgende').mousedown(function(event){
    if(i >= beeld.length - 1){
    i = 0;
    }
    else{
    i++;
    }
    $('img#beeld').attr('src', beeld[i]);
    $('span#teller').html((i + 1) + '/' + beeld.length);
    });
    $('#vorige').mousedown(function(event){
    if(i == 0){
    i = beeld.length - 1;
    }
    else{
    i--;
    }
    $('img#beeld').attr('src', beeld[i]);
    $('span#teller').html((i + 1) + '/' + beeld.length);
    });
    $('img#beeld').mousedown(function(event, delta){
    var x = event.pageX - $(this).offset().left;
    if(x >= $(this).attr('width') / 2){
    if(i >= beeld.length - 1){
    i = 0;
    }
    else{
    i++;
    }
    }
    else{
    if(i == 0){
    i = beeld.length - 1;
    }
    else{
    i--;
    }
    }
    $('img#beeld').attr('src', beeld[i]);
    $('span#teller').html((i + 1) + '/' + beeld.length);
    });
    $('img#beeld').mousewheel(function(event, delta){
    if(delta > 0){
    if(i >= beeld.length - 1){
    i = 0;
    }
    else{
    i++;
    }
    }
    else if(delta < 0){
    if(i == 0){
    i = beeld.length - 1;
    }
    else{
    i--;
    }
    }
    $('img#beeld').attr('src', beeld[i]);
    $('span#teller').html((i + 1) + '/' + beeld.length);
    });
    });
    //]]>
    </script>
    </head>
    <body>
    <div id="huls">
    <div id="hoofd">
    <h1><a href="javascript:;">To&ouml;nyn G&aring;rissvenra / Swedish Designer</a></h1>
    </div>
    <div id="navigatie">
    <ul>
    <li>
    Projects
    <ul>
    <li><a href="javascript:;">F&ouml;t&ouml;sv&aring;</a></li>
    <li><a href="javascript:;" class="actief">W&aring;rkksj&aring;p</a></li>
    <li><a href="javascript:;">Webddesjygnd&ouml;rd</a></li>
    </ul>
    </li>
    <li>
    Info
    <ul>
    <li><a href="javascript:;">About</a></li>
    <li><a href="javascript:;">Contact</a></li>
    <li><a href="javascript:;">Links</a></li>
    </ul>
    </li>
    </ul>
    </div>
    <div id="pagina">
    <div class="paginaonderdeel">
    <div class="zijbalk">
    2011 &ndash; present
    </div>
    <div class="inhoud">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu nisi ac urna sodales accumsan vitae eu tortor. Phasellus mattis facilisis turpis, a ultricies nisl varius nec. Nulla leo erat, tristique et viverra quis, vestibulum non quam. Nulla facilisi. Integer adipiscing arcu eu arcu aliquam blandit.
    </div>
    </div>
    <div class="paginaonderdeel">
    <div class="zijbalk">
    <em>&#8470;</em> <span id="teller">0/0</span>
    </div>
    <div class="inhoud">
    <ul class="bladeren">
    <li><a href="javascript:;" id="volgende">Next image</a> <em>&rarr;</em></li>
    <li><a href="javascript:;" id="vorige">Previous image</a> <em>&larr;</em></li>
    </ul>
    <img src="img/beeld_1.png" width="560" height="315" alt="W&aring;rkksj&aring;p" id="beeld" />
    </div>
    </div>
    </div>
    <div id="voet">
    <p>
    To&ouml;nyn G&aring;rissvenra / Swedish Designer &ndash; <a href="javascript:;" type="application/rss+xml">RSS</a>
    </p>
    </div>
    </div>
    </body>
    </html>



    @import 'reset.css';
    @import 'typography.css';

    body{
    background-color: #FAFAFA;
    }
    div#huls{
    width: 860px;
    margin: 2.5em auto;
    padding: 0 2.5em;
    }
    div#hoofd{
    overflow: hidden;
    margin-bottom: 2.5em;
    }
    div#navigatie{
    width: 220px;
    float: left;
    }
    div#navigatie > ul > li{
    margin-bottom: 1.5em;
    }
    div#pagina{
    width: 620px;
    float: right;
    margin-top: 1.5em;
    }
    div.paginaonderdeel{
    padding-bottom: 1.5em;
    overflow: hidden;
    }
    ul.bladeren{
    margin-bottom: 1.5em;
    }
    div.zijbalk{
    width: 60px;
    float: left;
    }
    div.inhoud{
    width: 560px;
    float: left;
    }
    div#voet{
    width: 620px;
    float: right;
    }
Login of Registreer om te reageren.