[CSS] Schuine div
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
Gewijzigd op 23/02/2012 16:20:09 door Jasper DS
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.
edit:
Erwin, de tekst draait blijkbaar mee als ik jouw oplossing gebruik? Is er een mogelijkheid om alleen de rand schuin te laten aflopen?
Gewijzigd op 23/02/2012 16:36:15 door Jasper DS
Dan zou ik gewoon met afbeeldingen beginnen klooien.
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?
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?
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....
Quote:
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.
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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>
<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)
Wouter J op 23/02/2012 17:49:05:
En dat is slecht voor je semantiek en dus kun je beter pseudo elements gebruiken, zoals ik hierboven beschreef.
Quote:
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).
http://www.phphulp.nl/php/tutorial/scripting-ajax-html-css/html-in-2012/767/
Als je tijd hebt, kijk eens naar de video. Daar wordt mooi getoond hoe iemand, al doende, nadenkt over semantiek
Doormiddel van CSS pseudo elements kun je als het ware elementen toevoegen aan de DOM van een pagina met CSS. Dit gebeurd in het echt niet zo, maar het lijkt er wel heel erg op (vandaar ook de naam pseudo elements).
Een voorbeeld van een pseudo element:
Code (php)
1
2
2
<h1>Hello World</h1>
<style>h1::first-letter { color: #c33; }</style>
<style>h1::first-letter { color: #c33; }</style>
Wat ::first-letter eigenlijk doet is dit:
Code (php)
1
2
2
<h1><span class="first-letter">H</span>ello World</h1>
<style>h1 .first-letter { color: #c33; }</style>
<style>h1 .first-letter { color: #c33; }</style>
Een psuedo element die je veel gebruikt in CSS is ::before en ::after. Met deze 2 psuedo elements kun je een element toevoegen als child van het element die je selecteert. Before voegt het element aan het begin toe en ::after aan het eind:
Code (php)
1
2
3
4
5
2
3
4
5
<h1>Hello world</h1>
<style>h1::before { content: 'Titel: '; }</style>
===== Wordt =====
<h1><span class="before">Titel: </span>Hello World</h1>
<style>h1::before { content: 'Titel: '; }</style>
===== Wordt =====
<h1><span class="before">Titel: </span>Hello World</h1>
Het voordeel van deze 2 psuedo elements is dat je deze mooi kunt stijlen. Als je als content een lege string, of een spatie, meegeeft zit er geen content in. Even het span element display: block; maken en hij gedraagt zich gewoon als een leeg div element.
PS: Ik gebruik hier ::before, in CSS3 is het normaal dat je psuedo elements met :: doet en pseudo selectors met :. Helaas was deze regel er nog niet bij het uitkomen van IE9 en dus accepteert IE9 ::before nog niet.
Ik zou het als volgt maken, gewoon een footer div maken en die gewoon breedte van 100% geven en deze een background afbeelding mee geven van 2000 pixels en deze centreren?
Begrijp ik het dan goed dat het pseudo element zich standaard altijd als een (soort) span gedraagt?
@Kris, dank voor de link. Ik heb nog niet de hele video kunnen bekijken, maar dat komt zeker nog wel.
Op zich moet ik wel zeggen dat het me in dit geval echt specifiek om die pseudo elementen ging. Eerlijkheidshalve moet ik zeggen dat ik daar nog nooit eerder mee in aanraking ben gekomen, dus ook nog niet van hoe te gebruiken. Semantisch gebruik van HTML daar heeft Wouter me als eens eerder de voordelen van leren kennen.... of ik het helemaal juist doe is dan uiteraard wel weer een tweede :-)
Quote:
Begrijp ik het dan goed dat het pseudo element zich standaard altijd als een (soort) span gedraagt?
Een pseudo element heeft eigenlijk niet echt een basis stijl en kan zich dus ook als niks gedragen.
Als een element geen default stijl heeft kun je stellen dat het display: inline; is en daarom lijkt het erg op een span en daarom gebruik ik het in mijn voorbeeld ook.
Edit:
Klein probleem, zoals je misschien ziet gebruik ik nog een kleine kleurovergang in mijn footer maar doordat het niet één blok is kan ik dat nu niet meer gebruiken?
Opgelost
Opgelost
Gewijzigd op 23/02/2012 22:16:51 door Jasper DS
De onderste met een gradient.
De bovenste (wit) schuin.
Iemand die het wel weet?
Dank!
Gewijzigd op 24/02/2012 13:22:32 door Jasper DS