plaatjes vallen in de browsers buiten de container, op mobiel wel goed
Code (php)
1
2
3
4
5
2
3
4
5
<div id="header" class="sixteen columns">
<div class="corner header-top-l"></div>
<h1>Rigging-Expert</h1>
<div class="corner header-top-r"></div>
</div>
<div class="corner header-top-l"></div>
<h1>Rigging-Expert</h1>
<div class="corner header-top-r"></div>
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.corner{
width:36px;
height:36px;
position:absolute;
display:inline-block;
}
.header-top-l{
background: url(images/bg_corner_top_l.png);
top: 0px;
left: 0px;
}
.header-top-r{
background: url(images/bg_corner_top_r.png);
top: 0px;
right: 0px;
}
width:36px;
height:36px;
position:absolute;
display:inline-block;
}
.header-top-l{
background: url(images/bg_corner_top_l.png);
top: 0px;
left: 0px;
}
.header-top-r{
background: url(images/bg_corner_top_r.png);
top: 0px;
right: 0px;
}
adres:
http://bit.ly/1a5wxYf
Gewijzigd op 07/01/2014 22:47:09 door - Ariën -
Ik heb alle marges op 0 staan.
Ik heb besloten het toch over een andere boeg te gooien en te kijken naar een kant en klare website. Dat wordt uiteindelijk minder werk.
Dit topic mag dan dicht
Gewijzigd op 07/01/2014 22:52:05 door J C
#header {
position: relative;
}
Dit betekent dat #header het nieuwe nulpunt wordt voor alle elementen die zich daar binnen bevinden en position: absolute hebben.
---
Als je dan dit doet:
top: 0px;
right: 0px;
wordt de top en de right berekend op de rechts-boven-hoek van #header.
----
Dito voor de footer
Gewijzigd op 08/01/2014 10:37:30 door Kris Peeters
