Uitlijnen met css3 lukt niet
Ik zit met de volgende twee "uitdagingen":
Met behulp van onderstaande script wil ik het logo (afbeelding) centreren in de box.
Helaas blijft het plaatje links uitgelijnd.
Het html5-gedeelte:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
In bovenstaande code zit ook mijn tweede uitdaging. De <box75header> gaat zich verticaal uitlijnen aan de onderzijde van de eerder gebruikte <boxlogo> terwijl ik deze juist aan de bovenzijde wil uitlijnen. (De twee boxen moeten dus bovenaan de pagina gepositioneerd zijn.
De gebruikte css3-codes:
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
header, aside, article, section, footer {
display: block;
}
section {
position: relative;
width: 100%;
min-width: 320px;
max-width: 990px;
padding: 0px 5%;
margin: auto;
}
article {
position: relative;
width: 100%;
line-height: 2em;
font-size: 1.4em;
min-height: 600px;
}
div.container {
width: 990px;
margin: auto;
margin-top: 0px auto;
vertical-align: top;
}
div.boxlogo {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
background-color: burlywood;
width: 20%;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
}
div.box75header {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
background-color: burlywood;
width: 70%;
float: right;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
margin-top: 0px;
height: 100px;
}
.marge_rondom {
margin: 10px;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.logo {
margin: auto;
border: none;
height: 100px;
}
display: block;
}
section {
position: relative;
width: 100%;
min-width: 320px;
max-width: 990px;
padding: 0px 5%;
margin: auto;
}
article {
position: relative;
width: 100%;
line-height: 2em;
font-size: 1.4em;
min-height: 600px;
}
div.container {
width: 990px;
margin: auto;
margin-top: 0px auto;
vertical-align: top;
}
div.boxlogo {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
background-color: burlywood;
width: 20%;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
}
div.box75header {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
background-color: burlywood;
width: 70%;
float: right;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
margin-top: 0px;
height: 100px;
}
.marge_rondom {
margin: 10px;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.logo {
margin: auto;
border: none;
height: 100px;
}
Waar gaat het bij mij nu fout?
Voor een live-voorbeeld verwijs ik jullie naar mijn test-site: http://fotoalbum.vanbaasbank.nl
George
Gewijzigd op 06/07/2012 09:52:14 door George van Baasbank
George van Baasbank op 06/07/2012 09:50:27:
... wil ik het logo (afbeelding) centreren in de box.
Helaas blijft het plaatje links uitgelijnd. ...
Helaas blijft het plaatje links uitgelijnd. ...
Dit al eens geprobeerd?
Code (php)
1
2
3
2
3
div.boxlogo {
text-align: center;
...
text-align: center;
...
Met de volgende codes heb ik het plaatje gecentreerd:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
div.boxlogo {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
background-color: burlywood;
width: 20%;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
flex-align: auto;
}
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
background-color: burlywood;
width: 20%;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
flex-align: auto;
}
en de html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<section>
<article>
<?php include "html/menu.inc" ; ?>
<div class="container">
<div class="boxlogo">
<p class="midden"><img alt="logo" height="100px" class="marge_rondom" src="<?php echo $cLogo ; ?>" /></p>
</div>
<div class="box75header">
<label> <?php echo $cHeader1 ; ?></label>
</div>
</div>
<article>
<?php include "html/menu.inc" ; ?>
<div class="container">
<div class="boxlogo">
<p class="midden"><img alt="logo" height="100px" class="marge_rondom" src="<?php echo $cLogo ; ?>" /></p>
</div>
<div class="box75header">
<label> <?php echo $cHeader1 ; ?></label>
</div>
</div>
Nu nog de rechterbox die blijft verkeerd uitgelijnd
George
Toevoeging op 06/07/2012 11:07:03:
welke browser gebruik je?
Voorbeeldje:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis massa orci. Nulla ac ante ac sem tempus vestibulum. Morbi euismod nisi vel dui elementum non viverra urna suscipit. Vestibulum sit amet nisl sed nibh iaculis pulvinar et eget neque. Donec at nisl ac mi congue interdum.
<img src="http://cache0.bigcartel.com/product_images/13445461/tesla-620.jpg" class="floating_left">
Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at elit in arcu pellentesque vehicula. Curabitur fringilla orci ac lacus accumsan id tempor ipsum dignissim. Nullam risus lorem, volutpat id consectetur eget, vestibulum et risus. Duis vel faucibus nulla. Phasellus odio sapien, egestas eu ultrices et, vulputate at eros. Nullam magna lectus, aliquam eget hendrerit ut, eleifend vel turpis. Curabitur eu est non orci luctus suscipit. Mauris congue blandit orci sit amet accumsan.
</p>
<p>
<img src="http://cache0.bigcartel.com/product_images/13445461/tesla-620.jpg" class="floating_right">
Sed vitae imperdiet odio. Nullam bibendum ante at risus tempus vel ullamcorper nisl malesuada. Morbi tincidunt commodo mauris, luctus tristique augue ultricies at. Sed et dignissim elit. Pellentesque porta suscipit purus nec aliquam. Vestibulum tellus arcu, malesuada sit amet interdum ut, cursus non enim. Praesent accumsan dictum libero, eu ultrices ante faucibus sed. Integer purus nisl, rhoncus in cursus eget, euismod a magna. Donec venenatis elit vitae nunc venenatis a eleifend quam pharetra. Aliquam laoreet cursus augue eget cursus. Aenean in libero non tellus ultrices ullamcorper condimentum a eros. Maecenas tempor erat non nunc lacinia in malesuada dolor porttitor. Fusce dui leo, imperdiet aliquet cursus vitae, imperdiet in odio. Duis ac purus velit, vitae egestas odio. Vestibulum vestibulum tellus eleifend dolor aliquet consequat.
</p>
<style>
.floating_right {
float: right;
margin-left: 5px;
margin-bottom: 5px;
height: 120px;
}
.floating_left {
float: left;
margin-right: 5px;
margin-bottom: 5px;
height: 120px;
}
</style>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis massa orci. Nulla ac ante ac sem tempus vestibulum. Morbi euismod nisi vel dui elementum non viverra urna suscipit. Vestibulum sit amet nisl sed nibh iaculis pulvinar et eget neque. Donec at nisl ac mi congue interdum.
<img src="http://cache0.bigcartel.com/product_images/13445461/tesla-620.jpg" class="floating_left">
Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at elit in arcu pellentesque vehicula. Curabitur fringilla orci ac lacus accumsan id tempor ipsum dignissim. Nullam risus lorem, volutpat id consectetur eget, vestibulum et risus. Duis vel faucibus nulla. Phasellus odio sapien, egestas eu ultrices et, vulputate at eros. Nullam magna lectus, aliquam eget hendrerit ut, eleifend vel turpis. Curabitur eu est non orci luctus suscipit. Mauris congue blandit orci sit amet accumsan.
</p>
<p>
<img src="http://cache0.bigcartel.com/product_images/13445461/tesla-620.jpg" class="floating_right">
Sed vitae imperdiet odio. Nullam bibendum ante at risus tempus vel ullamcorper nisl malesuada. Morbi tincidunt commodo mauris, luctus tristique augue ultricies at. Sed et dignissim elit. Pellentesque porta suscipit purus nec aliquam. Vestibulum tellus arcu, malesuada sit amet interdum ut, cursus non enim. Praesent accumsan dictum libero, eu ultrices ante faucibus sed. Integer purus nisl, rhoncus in cursus eget, euismod a magna. Donec venenatis elit vitae nunc venenatis a eleifend quam pharetra. Aliquam laoreet cursus augue eget cursus. Aenean in libero non tellus ultrices ullamcorper condimentum a eros. Maecenas tempor erat non nunc lacinia in malesuada dolor porttitor. Fusce dui leo, imperdiet aliquet cursus vitae, imperdiet in odio. Duis ac purus velit, vitae egestas odio. Vestibulum vestibulum tellus eleifend dolor aliquet consequat.
</p>
<style>
.floating_right {
float: right;
margin-left: 5px;
margin-bottom: 5px;
height: 120px;
}
.floating_left {
float: left;
margin-right: 5px;
margin-bottom: 5px;
height: 120px;
}
</style>
Je moet eerst denken aan de bovenkant van het floatende object.
Positioneer die bovenkant waar je ze nodig hebt.
Alles (nu ja...) wat onder dit punt komt, zal zich om dat object heen hullen, aan de linker- of rechterkant.
Over het algemeen: als je een element als float: right zet, zet dan dat element boven (in de markup) de rest.
In jouw geval dus: zet <div class="box75header"> boven (hoger in de code) <div class="boxlogo">
Ik had de code alsvolgt aangepast:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
div.box75header {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
background-color: burlywood;
width: 70%;
float: right top;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
margin-top: 0px;
height: 100px;
}
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
background-color: burlywood;
width: 70%;
float: right top;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
margin-top: 0px;
height: 100px;
}
Regel 7 heb ik de toevoeging <top> meegegeven maar dan verdwijnt deze box onder de box met het logo
De code van de box met het logo:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
div.boxlogo {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
background-color: burlywood;
width: 20%;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
}
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
background-color: burlywood;
width: 20%;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
}
Toevoeging op 06/07/2012 11:31:54:
Het verplaatsen van de code in het css-bestand geeft geen verschil
Eureka,
Deze oplossing werkt. Bedankt!!
George