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

geschikte layout voor webontwerp

Hoe zou ik onderstaande layout in de pdf's het beste kunnen verwerken in een template? Is een projectje van een studente. Ik zit zelf te denken aan een 2columns responsive maar zit een beetje met de grote bloem rechts in de maag die overal moet terugkomen. Ik dacht eerst de pentagons van de navigatie in een header te zetten en de subnavigatie van 2D en 3D in een linkerkolom...of kan ik het beter anders aanpakken?

Reacties

  • Die bloem kun je gewoon als background-image in de body zetten, heb je daar nooit geen omkijken meer naar (behalve dat het verschillende bloemen zijn).
    De rest kun je plempen waar je wilt i.m.h.o.
  • Sluit me aan bij vinTage
    Dekjam website techniek
    http://www.dekjam.nl
    KvK: 57623503
  • bewerkt vr 15 jan 2016
    PMPosts: 879
    ja die bloem heb ik ook al als achtergrond in de body gezet met no-reply en right. Maar waar ik nu teganaan loop is die navigatie:
    dat zijn 4 hexagons aan mekaar waarbij de current blauw omlijnd is en de andere paars
    Zij heeft de anchors ook als images in de hexagons maa r ik wil daar html van maken. Hoe kan ik nu het beste omgaan met die hexagons in de navigatie?
    Bijv: classe about, als ie current is de blauwe pentagon inladen als achtergrond en voor de andere die met paarse border? Dus alle pentagons losknippen of alles aan mekaar laten zitten en met de anchors erin gaan schuiven met position? Wat is wijsheid?
    about.png
    429 x 168 - 12K
    portfolio.png
    425 x 165 - 12K
    projecten.png
    420 x 164 - 12K
    contact.png
    421 x 164 - 12K
  • bewerkt vr 15 jan 2016
    PMPosts: 415
    Gewoon een sprite met maar twee van die dingen, een paarse en een lichtblauwe.

    Echter wel een probleempje (zie de rode borders) je hebt overlap.

    <style>
    *{margin:0;padding:0}
    header{margin-left:30px;}
    .hexagon {
    background: url('hexagons.png') no-repeat -210px 0;
    width: 125px;
    height: 112px;
    display:inline-block;
    border:solid 1px red;
    margin-left:-30px
    }
    .hexagon:nth-child(odd){padding-top:55px}
    .active {
    background: url('hexagons.png') no-repeat 0 0;
    }
    .hexagon:hover{
    background: url('hexagons.png') no-repeat 0 0;
    }
    </style>

    <header>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon active"></div>
    <div class="hexagon"></div>
    </header>

    Voor de sprite heb ik gewoon jou afbeelding hierboven (about.png) gepakt en de tweede en het laatste hexagon ding eruit gegumd.
    nuet
  • PMPosts: 879
    oke ik ga daar ook eens mee aan de slag met die sprite maar wat ik nu ff niet goed snap is dat in mijn voorbeeld het achtergrond image als anchor gezien wordt. Waarschijnlijk doe ik iets stoms verkeerd maar dit is wat ik heb:

    <body>

    <div id="container">

    <!-- header -->
    <header id="header">
    <h1 id="title">Responsive Layout</h1>
    </header>


    <!-- Navigation -->


    <!-- Sidebar -->
    <aside id="sidebar">
    <h3>This is the Sidebar</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. </p>
    </aside>
    <section id="content">

    <div id="navprojecten">

    <a class="about" href="about.html">About me</a>
    <a class="portfolio" href="portfolio.html">Portfolio</a>
    <a class="projecten" href="projecten.html">Projecten</a>
    <a class="contact" href="contact.html">Contact</a>

    </div>


    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



    </section>



    <!-- Navigation -->
    <footer id="footer" class="clearfix">
    Copyright &copy Andor Nagy 2015
    </footer>

    </div>

    </body>

    En dit is de css:


    .clearfix {
    display: block;
    clear: both;
    }

    body {
    margin: 0;
    padding: 0;
    font-size:18px;
    line-height: 32px;
    color: #333;
    word-wrap:break-word !important;
    font-family: 'Open Sans', sans-serif;
    }

    a {

    color: #000
    }

    a:hover {

    color: #000;
    }


    #container{
    margin: 0 auto;
    max-width: 1200px;
    }

    header {
    width: 94%;
    padding: 3%;
    background-color: #FF5722;
    }

    header #title {
    font-size: 50px;
    color: #fff;
    }



    /* Navigation
    --------------------------------------------- */

    nav {
    width: 100%;
    background-color: #fcfcfc;

    min-height: 200px;
    min-height: 200px;
    }



    #navabout {
    width: auto;
    height: 170px;
    background: transparent url("../images/about.png") no-repeat;
    }
    #navportfolio {
    width: auto;
    height: 170px;
    background: transparent url("../images/portfolio.png") no-repeat;
    }
    #navprojecten {
    width: auto;
    height: 170px;
    background: transparent url("../images/projecten.png") no-repeat;
    }
    #navcontact {
    width: auto;
    height: 170px;
    background: transparent url("../images/contact.png") no-repeat;
    }

    a.about, a.portfolio, a.projecten, a.contact {
    text-decoration: none;
    z-index: 99;
    }

    a.about {

    position: absolute;
    padding: 40px 0 0 26px;
    }
    a.portfolio {
    position: absolute;
    padding: 96px 0 0 134px;
    }
    a.projecten {
    position: absolute;
    padding: 40px 0 0 236px;
    }
    a.contact {
    position: absolute;
    padding: 96px 0 0 340px;
    }

    /* Content
    --------------------------------------------- */
    aside {
    float: left;
    padding: 3%;
    width: 24%;
    background-color: #fcfcfc;
    }
    #content {
    min-height: 700px;
    float: left;
    padding: 3%;
    width: 64%;
    background: #fcfcfc url("../images/bodybg.png") no-repeat right;
    }


    footer{
    width: 94%;
    padding: 3%;
    background-color: #FF5722;
    border-top: 5px solid #E64A19;
    color: #fff;
    text-align: center;
    }

    In de verschillende pagina's wordt iedere keer een ander achtergrond image ingeladen maar de anchors pakken allemaal contact.html. Ik snap dat niet, de anchors verwijzen toch allemaal naar hun eigen pagina?

    http://webprofis.nl/test/linda/about.html
  • bewerkt vr 15 jan 2016
    PMPosts: 415
    Simpel, je werkt met absolute en een koeigrote padding.

    a.contact {
    position: absolute;
    padding: 96px 0 0 340px; /*haal deze maar eens weg*/

    Je zou dat in orde moeten krijgen door geen padding te gebruiken, maar gewoon left:**px en width/height/top
    nuet
  • bewerkt vr 15 jan 2016
    PMPosts: 879
    idd , werkt nu perfect. Beetje dom van mij om dat zo te doen @-)
  • Waarom maak je er niet gewoon een php van, dan hoef je niet elke keer ALLES aan te passen :p
  • bewerkt vr 15 jan 2016
    PMPosts: 879
    vinTage schreef:: Waarom maak je er niet gewoon een php van, dan hoef je niet elke keer ALLES aan te passen
    Yep, dacht ik ook al aan. Maar weet nog niet hoe ze de site moet presenteren. Kan best zijn op de laptop. Als het op een webserver gezet mag worden ga ik idd met php alles includen; scheelt een berg typewerk
  • bewerkt zo 17 jan 2016
    PMPosts: 879
    dit moet de hoofdpagina worden; dit is een groot image. Wat kan ik hier het beste mee doen? compleets als bodybg inladen en dan de anchors in de paarse hexagons zetten of de hexagons apart uitsnijden, verschillende divjes aanmaken en elk divje de achtergrond van een paarse hexagon meegeven? Maar weet niet of ik dat wel spits krijg, want ze staan natuurlijk alles behalve netjes naast elkaar of onder mekaar
    Hoofdpagina.jpg
    1018 x 768 - 109K
  • bewerkt zo 17 jan 2016
    PMPosts: 732
    Zou de bloem als bg gebruiken.
    De hexagons in een div en die met een positie plaatsen.
    Zo kun je straks makkelijk responsive werken.

    tip: http://csshexagon.com/

    google eens op css hexagon grid ;)
    bootstrap of jquery plugin kom e al een heel eind mee
    nuet
    If it's not fun, you're not doing it right!
  • PMPosts: 879
    die is geweldig. Ik had al eens op css only gekeken maar kon alleen maar vinden in een kleur en niet met border. Maar border is dus ook mogelijk met css only. Goeie tip, scheelt nu een hoop images laden
  • PMPosts: 879
    @reneV de bloem kan die ook met css only??? =))
  • PMPosts: 732
    zoek eens op kersenbloesem in css :))

    weer een tip: google background srcset ;)

    Maar die hexagon in css is een pluspunt, zo kun je eenvoudige blokken scalen waardoor het er allemaal iets mooier uit komt te zien.
    If it's not fun, you're not doing it right!
  • PMPosts: 879
    heb eens ff gespeeld met die hexagon css maar is ook een heel gedoe. probleem si dat nergens een vorobeeld te ziens i met border eromheen. Of het staat verticaal omhoog en moet weer gedraaid worden. En als je eenkleiner formaat wilt, dan ben je er niet met allen de width aan te passen. Dan gaat weer alles scheef lopen enmoet je weer vele dingen aanpassen.
    Dus voor mij: gewoon een simpel image, resizen op maat en klaar
  • PMPosts: 732
    wat zijn de afmetingen van de hexagon (s) ?
    If it's not fun, you're not doing it right!
  • bewerkt ma 18 jan 2016
    PMPosts: 732


    <div class="hexagon een"></div>
    <div class="hexagon twee"></div>
    <div class="hexagon drie"></div>


    .hexagon {
    position: relative;
    background-color: #ffffff;
    border-left: solid 5px #e60be6;
    border-right: solid 5px #e60be6;
    }

    .hexagon:before,
    .hexagon:after {
    content: "";
    position: absolute;
    z-index: 1;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background-color: inherit;
    }

    .hexagon:before {
    border-top: solid 7.0711px #e60be6;
    border-right: solid 7.0711px #e60be6;
    }
    .hexagon:after {
    border-bottom: solid 7.0711px #e60be6;
    border-left: solid 7.0711px #e60be6;
    }

    .hexagon.een{
    width: 300px;
    height: 173.21px;
    margin: 86.60px 0;
    }
    .hexagon.een:before,
    .hexagon.een:after {
    width: 212.13px;
    height: 212.13px;
    left: 38.9340px;
    }
    .hexagon.een:before {
    top: -106.0660px;
    }
    .hexagon.een:after {
    bottom: -106.0660px;
    }

    .hexagon.twee{
    width: 150px;
    height: 86.60px;
    margin: 43.30px 0;
    }
    .hexagon.twee:before,
    .hexagon.twee:after {
    width: 106.07px;
    height: 106.07px;
    left: 16.9670px;
    }
    .hexagon.twee:before {
    top: -53.0330px;
    }
    .hexagon.twee:after {
    bottom: -53.0330px;
    }

    .hexagon.drie{
    width: 75px;
    height: 43.30px;
    margin: 21.65px 0;
    }
    .hexagon.drie:before,
    .hexagon.drie:after {
    width: 53.03px;
    height: 53.03px;
    left: 5.9835px;
    }
    .hexagon.drie:before {
    top: -26.5165px;
    }
    .hexagon.drie:after {
    bottom: -26.5165px;
    }

    en nu de haxegon.nummer positioneren bv. position absolute top en left of wat dan ook.
    nuet
    If it's not fun, you're not doing it right!
  • bewerkt ma 18 jan 2016
    PMPosts: 879
    is toch niet te geloven dat iemand dat als hobby heeft

    :))

    Ik heb die hexagons in ee fidle geprobeerd maar dat viel me gisteren ook al op met die webgenarator: hij wordt daar precies weergegeven maar in werkelijkheid verschuift er een en ander met die code: http://jsfiddle.net/EZqCz/540/
  • PMPosts: 732
    Is niet eenvoudig, en inderdaad het voorbeeld klopt niet.
    Als je met de border werkt dan moet je die 5px van de border van de breedte aftrekken enz. enz.

    Kijk hier eens http://codepen.io/web-tiki/pen/HhCyd
    Werken met responsive hexagon en achtergrond image, misschien dat je daar iets mee kunt.
    Probleem zal hem zitten zodra je een image verkleint zal de border ook wazig worden.

    Maar waarom moet hij zo zijn als op je afbeelding?
    Want het hele patroon wordt daar uit zijn geheel getrokken, zodat het hexagon niet meer klopt.
    If it's not fun, you're not doing it right!
  • PMPosts: 879
    ik heb hem nu vooralsnog zo; (zonder css hexagons maar met images): http://webprofis.nl/demo/vd/1/discussievoorbeelden/linda/index.html
    Wat ik niet snap: op mijn phone is het ontwerp op desktop precies hetzelfde als op de desktop; dus home hexagon en de 3 subhexagons 2d, 3d en fotografie in de sidekolom.
    Als ik op mijn desktop de browser verklein en de width komt onder de 968px, dan wordt daar een andere html structuur geladen en dat zou ook op de phone moeten gebeuren maar dat doet ie op de phone niet
  • PMPosts: 732
    Waarom bestaat jou reset.css uit html inhoud ?

    Snap je css niet,
    all en max width 968px ?

    Waar is je phone dan ?
    If it's not fun, you're not doing it right!
  • bewerkt di 9 feb 2016
    PMPosts: 879
    resect.css heb ik er al uitgeknikkerd
    Ik moet eerlijk bekennen, heb weinig kaas gegeten van responsive werken. Zoals de desktop het nu weergeeft is prima. Maar voor de phone had ik een andere structuur in gedachten zoals image bijlage.
    ik heb in de css met

    @media (min-width:320px)
    geexperimenteerd en dan gaat ie idd over op die andere structuur maar dan krijgt de desktop ook die structuur wat weer net niet de bedoeling is.
    Wat dan eigenlijk ook de bedoeling is is dat de hexagonenen schermbreefte worden op de phone zodat je niet meer hoeft uit te zoomen (hieronder)
    Portfolio heeft een submenuutje 2D, 3D en fotografie.
    http://webprofis.nl/test/linda/index.html

    snapphone.png
    470 x 839 - 149K
    snapphone.png 149.4K
  • PMPosts: 732
    Het is vrij makkelijk, maar wel tijd rovend.
    Ik begin eerst met kleine resolutie, en zo ga ik steeds groter werken.

    Hier staan bijvoorbeeld alle media queries: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries.

    Met ff webmaster tool zet ik mijn window op phone weergave, en nu maak ik mijn css.
    Dan zet ik mijn weergave op tablet enz.
    If it's not fun, you're not doing it right!
Login of Registreer om te reageren.