Ontwerp in volledig CSS
http://cl.ly/image/3w08301H1L25
Mijn HTML heb ik als volgt opgebouwd
Code (php)
1
2
3
4
2
3
4
<section class="skills">
<div class="title"><h2>Skills</h2></div>
</section>
<div class="title"><h2>Skills</h2></div>
</section>
als je in het plaatje kijkt heb ik elke section een zwarte stroke meegegeven. deze sections moeten aan het begin een stuk hebben met een kleur erin. De h2 tag moet 'verticaal' in dat stukje gezet kunnen worden.. dus letter onder letter en niet het hele woord verticaal.
Ik heb verschillende dingen geprobeerd maar tevergeefs.
heb het o.a. geprobeerd met pseudo element :before en met css3 rotate etc maar dit wil dus niet lukken hebben er mensen tips of ideeën hoe dit makkelijk te kunnen maken zonder gebruik van foto's en/of achtergronden
Gewijzigd op 06/11/2012 13:00:12 door Reshad F
Vlakje ervoor is gewoon de H2 (div.title kan weg)?
Letters onderelkaar kun je met deze technieken doen: http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-create-vertical-text-with-css/
de div.title heb ik erin gezet omdat ik de h2 tag op display:none wil zetten als deze op een scherm kleiner dan x wordt bekeken.
Bedankt! de letters heb ik kunnen maken dankzij je linkje :)
Het enige probleem is dat ik de gekleurde rechthoeken niet onder elkaar links kan laten staan zonder dat de text wat in het witte vlak komt verspringt.
zie link:
http://codepen.io/reshadf/full/xncEf
Reshad F op 06/11/2012 13:38:57:
de div.title heb ik erin gezet omdat ik de h2 tag op display:none wil zetten als deze op een scherm kleiner dan x wordt bekeken.
Dan hoef je het nog steeds niet in een div te zetten hoor. Je kunt gewoon <h2 class="title"> doen.
PS: die HTML code is niet heel mooi:
- Schrijf je code altijd in de volgorde zoals je het op het scherm ook ziet. Dus van boven naar beneden en van links naar rechts, dat helpt je al een stuk;
- Die section elementen horen er helemaal niet, je moet er een lijst van maken.
Gewijzigd op 06/11/2012 14:39:01 door Wouter J
Heb je toevallig ook een tip hoe ik mijn 'inhoud' er normaal naast kan krijgen zonder dat het een en ander verspringt zoals in de link 2 posts terug?
ik heb het nu even opgelost met position absolute maar dit zal niet werken met alle resoluties omdat ik het responsive wil houden. ( dan krijg je text over elkaar heen enzo )
Ik heb aan een 2 column layout gedacht maar ik twijfel hoe ik dit correct toepas en mijn html correct kan houden omdat daarmee de h2 tag weer buiten de boot valt.
Reshad F op 06/11/2012 14:01:58:
Maar de achtergrond wil ik wel van kleur blijven voorzien. en dat lukt niet als ik de h2 een class mee geef.
Waarschijnlijk moet je dan even in je css "display: block;" toevoegen.
Toevoeging op 06/11/2012 15:20:31:
Bij nader inzien... dat zou eigenlijk niet hoeven :-s
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div class=left>
<ul>
<!-- ... menu -->
</ul>
</div>
<div class=right>
<!-- ... content -->
</div>
<ul>
<!-- ... menu -->
</ul>
</div>
<div class=right>
<!-- ... content -->
</div>
Ozzie, dat is al opgelost. Wat reshad bedoelt is dat hij de tekst wou verbergen, maar de achtergrond niet. Als je het element display: none; meegeeft zijn ze allebei weg. Daarom raadde ik aan de tekst kleur dan aan te passen of de tekst 999em naar links te verplaatsen.
zie: http://codepen.io/reshadf/full/ekqBn
Ook zie je dat de h2 niet mee gestretched wordt naarmate de section groeit.
Als ik dit open in chrome staan niet alle letters onder elkaar. Is je dat opgevallen?