CSS klein plaatje

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bart Matsko

Bart Matsko

08/10/2013 23:30:33
Quote Anchor link
Hallo,

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?

Afbeelding

En daar wil ik graag dit plaatje in:

Afbeelding

Dus ongeveer zo:

Afbeelding

Mijn CSS code is nu:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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;
}


En mijn HTML code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
  <div class="container">
    <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
 
PHP hulp

PHP hulp

19/06/2024 00:38:19
 
Ozzie PHP

Ozzie PHP

09/10/2013 00:00:10
Quote Anchor link
Dit gaat niet werken: <div class="erroricon"></div>
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.erroricon {
  background-image: url('404_application_error.png');
  padding-left: 20px;
}
Gewijzigd op 09/10/2013 00:00:39 door Ozzie PHP
 
Bart Matsko

Bart Matsko

09/10/2013 00:07:41
Quote Anchor link
Ik had dit als eerste geprobeerd maar toen kreeg ik geen plaatje te zien. Dat doet hij nu gelukkig wel met background-repeat: no-repeat;

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
 
Ozzie PHP

Ozzie PHP

09/10/2013 00:11:05
Quote Anchor link
Dan haal je die padding-left toch weg? :) Of begrijp ik je verkeerd?
 
Bart Matsko

Bart Matsko

09/10/2013 00:11:23
Quote Anchor link
Ik zou graag willen dat het plaatje net voor de tekst staat en de tekst gewoon nog in het midden. Met margin-left: 20px; lukt dat niet.
Gewijzigd op 09/10/2013 00:12:02 door Bart Matsko
 
Wouter J

Wouter J

09/10/2013 00:27:33
Quote Anchor link
Wat gaat er dan mis? Kun je een online voorbeeld geven?
 
Bart Matsko

Bart Matsko

09/10/2013 00:29:57
Quote Anchor link
http://bartdenhoed.nl/404.shtml/

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...
 
Ozzie PHP

Ozzie PHP

09/10/2013 00:35:43
Quote Anchor link
voeg nog eens "margin-right: 50px;" toe ;-)
 
Wouter J

Wouter J

09/10/2013 00:40:55
Quote Anchor link
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.
 
Bart Matsko

Bart Matsko

09/10/2013 00:42:40
Quote Anchor link
Soms moet ik nog even 10 keer na denken haha ...

Bedankt het is gelukt! :)
 
Ozzie PHP

Ozzie PHP

09/10/2013 00:46:36
Quote Anchor link
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.