CSS klein plaatje
Ik ben nog niet zo ver in CSS en HTML en probeer voor m'n website een 404 pagina te maken. Alles wat ik wil is tot nu toe gelukt. Alleen wil ik nu een klein plaatje van 16x16 in de zwarte balk krijgen. Ik kom er niet uit, hoe moet dit?
En daar wil ik graag dit plaatje in:
Dus ongeveer zo:
Mijn CSS code is nu:
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
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
body {
font-family: Verdana, Arial;
font-size: 11px;
background-image: url('404_logo.png');
background-repeat: no-repeat;
background-position: 0px 45px;
margin-left: 400px;
}
.container {
width: 330px;
}
.textbox {
border: 1px solid grey;
border-radius: 5px;
float: left;
width: 320px;
margin-top: 30px;
background-color: #EFEFEF;
padding: 5px;
text-align: center;
}
.menubox {
background-image: url('404_menubalk.png');
padding: 10px;
color: #FFF;
font-weight: bold;
border-radius: 5px;
border-bottom:2px solid #dcdcdc;
margin-left: 5px;
margin-right: 5px;
margin-top: 2px;
margin-bottom: 8px;
}
.erroricon {
image: url('404_application_error.png')
float: left;
}
font-family: Verdana, Arial;
font-size: 11px;
background-image: url('404_logo.png');
background-repeat: no-repeat;
background-position: 0px 45px;
margin-left: 400px;
}
.container {
width: 330px;
}
.textbox {
border: 1px solid grey;
border-radius: 5px;
float: left;
width: 320px;
margin-top: 30px;
background-color: #EFEFEF;
padding: 5px;
text-align: center;
}
.menubox {
background-image: url('404_menubalk.png');
padding: 10px;
color: #FFF;
font-weight: bold;
border-radius: 5px;
border-bottom:2px solid #dcdcdc;
margin-left: 5px;
margin-right: 5px;
margin-top: 2px;
margin-bottom: 8px;
}
.erroricon {
image: url('404_application_error.png')
float: left;
}
En mijn HTML code:
Code (php)
1
2
3
4
2
3
4
<div class="container">
<div class="textbox">
<div class="menubox"><div class="erroricon"></div> Pagina niet gevonden</div>
</div></div>
<div class="textbox">
<div class="menubox"><div class="erroricon"></div> Pagina niet gevonden</div>
</div></div>
Iemand die mij kan vertellen wat ik fout doe?
Alvast bedankt Bart!
Gewijzigd op 08/10/2013 23:31:48 door Bart Matsko
Dat is een lege div.
Je kunt het plaatje in de html toevoegen als <img src="404_application_error.png"> voor de tekst "Pagina niet gevonden". Mooier is het om het plaatje als background-image in te stellen.
Zou je even zoiets moeten proberen:
<div class="erroricon">Pagina niet gevonden</div></div>
en dan in je css:
Code (php)
1
2
3
4
2
3
4
.erroricon {
background-image: url('404_application_error.png');
padding-left: 20px;
}
background-image: url('404_application_error.png');
padding-left: 20px;
}
Gewijzigd op 09/10/2013 00:00:39 door Ozzie PHP
Alleen de padding-left: 20px; zorgt dat de tekst opschuift, het plaatje blijft staan.
Enig idee?
Groeten Bart,
Gewijzigd op 09/10/2013 00:11:33 door Bart Matsko
Gewijzigd op 09/10/2013 00:12:02 door Bart Matsko
Ik wil de tekst in het midden met het plaatje er net voor, 2 spatie ruimte ongeveer.
Ik heb het nu gedaan met: margin-left: 50px;
maar zoals je ziet gaat de tekst naar rechts verschuiven...
Bedankt het is gelukt! :)
Wouter J op 09/10/2013 00:40:55:
Margin-left betekend dat er aan de linkerkant ruimte bijkomt, dat heeft als gevolg dat de tekst naar links verschuift. Jij wil ruimte aan de rechterkant, margin-right dus.
In dit geval zowel margin-left als margin-right om de div te centreren en kleiner te maken ten opzichte van de div die eromheen staat, waardoor het icoontje dichter naar de tekst schuift.