Herma werkt volgens de methode van het oude kleermakersvak.
Dit doet ze met veel liefde en toewijding in haar eigen studio.
Eerst volgt een intakegesprek waarbij de klant haar specifieke wensen kenbaar maakt omtrent het model.
Daarbij geeft Herma zelf ook suggesties.
Als de klant tevreden is over het model neemt ze volledig de maat van het lichaam op en maakt ze een proefmodel. Als deze perfect zit en aanvoelt als een tweede huid, dan pas word de stof uitgezocht.
Eventueel naar behoefte met of zonder Herma's hulp.
Het uiteindelijke resultaat is een exclusief kledingstuk volledig naar wensen op maat gemaakt.
Vooral voor vrouwen die in de winkel niet kunnen slagen is dit de ideale oplossing.
font-family:"Gill Sans","Gill Sans MT","Myriad Pro","DejaVu Sans Condensed", Helvetica, Arial,sans-serif;
padding-top:35px;
text-align:center;}
#divContent{width:90%;
height:90%;
margin:0auto;}
#menu{float:left;
width:150px;
overflow:hidden;
height:inherit;
background:#FFFdc5;
border-radius:10px;
}
#normalepagina{float:right;
width:85%;
background:#FFFdc5;
border-radius:10px;}
#onder{clear:both;
;}
#tussen{clear:both;}
#vooter{background-color:#FFFdc5;
margin-top:20px;
margin-bottom:20px;
height:20px;
border-radius:10px;
}
#vooter p {text-align:center;
font-size:10px;
padding-top:2px;}
/* inhoud */
/* menu */
#MenuLinks{margin-top:10px;margin-left:10px;}
#MenuLinks ul li {padding-top:30px;}
/* index */
#indextitel{text-align:center;
font-size:36px;
margin-top:20px;}
#index{margin-top:50px;
margin-left:20px;
margin-right:20px;}
#index img {float:left;
margin:0.5em1em1em0;
clear:left;}
ik hoop dat jullie een oplossing hebben
5 antwoorden
Gesponsorde links
Thomas - 15/09/2015 21:55 (laatste wijziging 15/09/2015 22:00)
Moderator
Beste,
Hier zijn een aantal truuks voor.
Wat eigenlijk nog veel belangrijker is, is een (syntactisch) kloppend HTML-document. Immers, als het HTML-document niet is opgesteld volgens de regels, kan simpelweg niet gegarandeerd worden dat deze correct wordt weergegeven.
Allereerst ontbreekt de body-openingstag.
Als ik mij niet vergis mist de Wrapper-div een sluitingstag.
Daarbij gebruik je het id "tussen" meerdere keren, wat eigenlijk niet is toegestaan - elk id mag maar één keer gebruikt worden binnen het HTML-document.
Ik zou je aanraden om (onwikkel)tools te installeren die je helpen bij het correct opzetten / controleren van je webpagina's en/of pagina's af een toe eens door een validator te halen.
Daarnaast helpt het ook enorm als je op de juiste manier "inspringt" in je HTML, dat maakt een en ander zoveel beter leesbaar...
---
Dan terug naar je oorspronkelijke probleem. Als ik dit menu zo zie, dan zal de content vaak langer zijn dan het menu, oftewel het menu zal in de meeste gevallen te kort zijn. Ik denk ook dat ik het probleem zie: als je een menu met afgeronde hoeken hebt, dan moet de onderkant van het menu boven de "vooter" geplakt worden. Je zou misschien iets kunnen doen met absoluut gepositioneerde elementen ofzo, maar dit druist een beetje in tegen het principe van een "dynamische" website denk ik. En wat nu als het menu overhoopt langer wordt dan de inhoud?
Het kan wel, maar het is alles behalve een handige oplossing. Ik zou je ontwerp toch herzien of met afbeeldingen voor header/footer werken.
Een pure HTML/CSS oplossing ziet er bijvoorbeeld als volgt uit, maar ik zou dus voor een andere aanpak gaan (EDIT: de spil in deze oplossing is dus een absoluut gepositioneerd element wat je aan de onderkant plakt van het element wat je content omvat):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div { margin: 0; padding: 0; border: 0; }
/* zet hierin de achtergrondkleur van het menu */
.container { width: 800px; margin: 0 auto; position: relative; background-color: #ffcccc; }
/* geef het menu een padding bottom zodat menu niet achter menu-footer valt */
.left { display: block; float: left; width: 200px; padding-bottom: 25px; }
.right { display: block; float: left; width: 600px; background-color: #ccccff; }
.clear { clear: both; }
/* deze div is enkel nodig voor het clearen van de bgcolor van het menu */
.menuheader { width: 200px; height: 25px; background-color: #ffffff; }
/* dit is voor de ronde randen van de bovenkant van het menu */
.menuheader-inner { width: 100%; height: 100%; border-top-left-radius: 25px; border-top-right-radius: 25px; background-color: #ffcccc; }
/* deze div is enkel nodig voor het positioneren van de box en het clearen van de bgcolor van het menu */
.menufooter { position: absolute; left: 0; bottom: 0; width: 200px; height: 25px; background-color: #ffffff; }
/* dit is voor de ronde randen van de onderkant van het menu */
.menufooter-inner { width: 100%; height: 100%; background-color: #ffcccc; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; }
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="menuheader">
<div class="menuheader-inner"><!-- niks --></div>
</div>
<ul>
<li>een</li>
<li>twee</li>
<li>drie</li>
</ul>
</div>
<div class="right">
<!-- als deze inhoud te kort is zul je ook iets moeten verzinnen, -->
<!-- veeg maar eens alles op 1 paragraaf na weg... -->
<!-- als je paragrafen toevoegt rekt het menu mee -->
<p>Bla bla bla bla bla bla bla bla</p>
<p>Bla bla bla bla bla bla bla bla</p>
<p>Bla bla bla bla bla bla bla bla</p>
<p>Bla bla bla bla bla bla bla bla</p>
</div>
<div class="clear"><!-- clear --></div>
<div class="menufooter">
<div class="menufooter-inner"><!-- niks --></div>
</div>
</div>
</body>
</html>
Of het handig is iets dergelijks van Javascript te laten afhangen is maar de vraag, maar het werkt wel. Uiteindelijk is een pure HTML/CSS oplossing beter, maar dan zijn de oplossingen van FangorN denk ik het best haalbare.
Mijn bovenstaande voorbeeld is slechts een voorbeeld; dit ontwerp is ook niet responsive (verandert niet mee afhankelijk van het apparaat (met specifieke schermafmetingen) waarmee je de site bekijkt). Het illustreert in grote lijnen wat er voor nodig is om voor elkaar te krijgen wat je probeert te bereiken.
Je zult waarschijnlijk wel om beide kolommen een soort van wrapper moeten zetten om ervoor te zorgen dat de achtergrondkleuren blijven kloppen. De oplossing van JointJeff is eigenlijk helemaal zo gek nog niet, in die zin dat dit niet extreem ingrijpt op het verdere ontwerp van de hoofd layout (maintemplate) van je website. Er moet vrij veel moeite gedaan worden enkel om een bepaald effect te bereiken. Ik denk dat het al een stuk simpeler wordt als je afbeeldingen gebruikt in plaats van border-radius.
Eigenlijk zit je al in zekere zin op een verkeerd spoor als je in een dynamische website iets met vaste hoogtes wilt gaan doen, dit zorgt onvermijdelijk voor problemen. De vraag is, wil je de moeite nemen om deze problemen te overwinnen, of kies je (toch) voor een flexibeler ontwerp.
Het valt waarschijnlijk wel te doen, maar het maakt je design er niet bepaald gemakkelijker op.
Wat je ook kunt doen is divs als tabel-cellen gebruiken, of wellicht simpeler: gebruik een table. Ik zou echter overwegen om je ontwerp te herzien.
Een table is wel vele malen simpeler, omdat de cellen automatisch meerekken:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.main { table-layout: fixed; border-collapse: collapse; }
.left { width: 200px; border-radius: 25px; background-color: #ffcccc; }
.gap { width: 25px; }
.right { width: 550px; border-radius: 25px; background-color: #ccffcc; padding: 25px; }
ul.menu { margin: 25px 0 0; }
</style>
</head>
<body>
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left" valign="top">
<ul class="menu">
<li>een</li>
<li>twee</li>
<li>drie</li>
</ul>
</td>
<td class="gap"><!-- derp --></td>
<td class="right" valign="top">
<p>Bla bla bla bla bla bla bla.</p>
<p>Bla bla bla bla bla bla bla.</p>
<p>Bla bla bla bla bla bla bla.</p>
<p>Bla bla bla bla bla bla bla.</p>
<p>Bla bla bla bla bla bla bla.</p>
</td>
</tr>
</table>
</body>
</html>
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
