PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

[CSS] Schuine div

Door Jasper DS op 23-02-2012 16:13 gewijzigd op 23-02-2012 16:20
8.713 views
Hoi,

ik wil me wat verdiepen in de front-end van websites en maakte om te oefenen onlangs dit design:


Nu heb ik alles in mijn html en css gekregen. Ik heb alleen voor het logo een afbeelding gebruikt. Maar nu loop ik bij de footer tegen een probleem aan want deze loopt schuin. Hoe ga ik nu het beste te werk? De breedte die ik in mijn psd-bestand gebruikte was 1600px maar stel nu dat er iemand is met een kleiner scherm?

Iemand tips?
Dank!

Jasper
E
Erwin H
23-02-2012 16:29
Als ik je goed begrijp dat je een div schuin wilt zetten, dan kan dat bij mijn weten (nog) niet met standaard CSS, maar wel met een hoop kunst en vliegwerk. Gelukkig is er al iemand geweest die dit heeft uitgevoerd, dus kan de rest het alsnog vrij makkelijk: http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

Dit script werkt alleen bij pageload, als je naderhand nog een div wilt roteren dan kan dat niet standaard. Ik heb daar voor mezelf wel al eens een uitbreiding voor geschreven wat maar een paar regels code is.
Jasper DS
23-02-2012 16:34 gewijzigd op 23-02-2012 16:36
Oke dus dat is volgens jouw de beste oplossing? Ik moet niet met afbeeldingen gaan klooien?

edit:
Erwin, de tekst draait blijkbaar mee als ik jouw oplossing gebruik? Is er een mogelijkheid om alleen de rand schuin te laten aflopen?
Kris Peeters
23-02-2012 16:51
Tja, dan wil je dus geen schuine div.
Dan zou ik gewoon met afbeeldingen beginnen klooien.
Jasper DS
23-02-2012 16:53
Ok, en hoe doe ik dat het beste? Achtergrond-afbeelding rechts vastzetten endan overflow: hidden; ?
Kris Peeters
23-02-2012 17:04
css3 biedt wel nieuwe mogelijkheden.
Je kunt nu backgroud-images zelf ook scalen, gemakkelijker een referetie-punt meegeven, multiple background-images ...

Het moet mogelijk zijn daarmee te doen wat je nodig hebt.
Ik zou het zelf eens deftig moeten uitzoeken.

Zeg, trouwens, ik veronderstel dat het de bedoeling is dat de breedte van de site in principe oneindig breed kan zijn (met content: vaste breedte, gecentreerd) dat dus die schuine zijde van heel smal naar vrij breed kan gaan.
Dat al eens uitgezocht?


Wouter J
23-02-2012 17:23
Ik heb zo'n zelfde iets gemaakt voor mijn website. Ik heb daarvoor gebruik gemaakt van psuedo elements. Voorbeeldje: http://tinkerbin.com/tAJ1g7pC
E
Erwin H
23-02-2012 17:37
PHP Jasper op 23/02/2012 16:34:29

Oke dus dat is volgens jouw de beste oplossing? Ik moet niet met afbeeldingen gaan klooien?

edit:
Erwin, de tekst draait blijkbaar mee als ik jouw oplossing gebruik? Is er een mogelijkheid om alleen de rand schuin te laten aflopen?

Als je een div draait, draait ook de inhoud mee inderdaad.
Als je alleen een achtergrond gedraaid wil hebben dan kan je natuurlijk binnen de footer een extra (leeg) element plaatsen, dat je met position: absolute binnen de footer plaatst en dan draait. Dan kan de tekst gewoon op zijn plek blijven.
Dan hoef je niet met afbeeldingen te klooien. Of het een hele elegante manier is is weer een tweede....

Wouter J
23-02-2012 17:49
Als je alleen een achtergrond gedraaid wil hebben dan kan je natuurlijk binnen de footer een extra (leeg) element plaatsen

En dat is slecht voor je semantiek en dus kun je beter pseudo elements gebruiken, zoals ik hierboven beschreef.
Kris Peeters
23-02-2012 18:00
Iets wat het eerst in mij opkwam, is zoiets:
dus stel je voor dat schuin.png een afbeelding is met een schuine lijn.
bv. 2000px breed, 150px hoog.
Die hand kan je in de image zelf integreren, maar met css3 kan je die ook apart maken (transparant) en als background van #footer-inner zetten.


<!DOCTYPE html>
<html>
  <head>
    <style>
      .row {
        width: 978px;
        border: 1px solid #dddddd;
        /*centreren*/
        margin-left: auto;
        margin-right: auto;
      }
      #footer {
        background-image: url('schuin.png');
        background-repeat: no-repeat;
        background-position: bottom center;
      }
      #footer-inner {
        height: 150px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">Header</div>
      <div class="row">content <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p></div>
      <div id="footer"><div id="footer-inner" class="row">footer</div></div>
    </div>
  </body>
</html>


Maar dat hoeft absoluut niet de betere oplossing te zijn (en er is nog werk aan, en niet te veel op mijn semantiek letten)
E
Erwin H
23-02-2012 18:02
Wouter J op 23/02/2012 17:49:05

Als je alleen een achtergrond gedraaid wil hebben dan kan je natuurlijk binnen de footer een extra (leeg) element plaatsen

En dat is slecht voor je semantiek en dus kun je beter pseudo elements gebruiken, zoals ik hierboven beschreef.

Die beschrijving heb ik dan gemist, maar zou ik wel graag willen zien (en daarbij bedoel ik niet een stuk code, maar de uitleg erachter).

Reageren

Inloggen om te reageren