CSS klein plaatje

Door Bart Matsko op 08-10-2013 23:30 gewijzigd op 08-10-2013 23:31

2.267 views

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?

En daar wil ik graag dit plaatje in:

Dus ongeveer zo:

Mijn CSS code is nu:

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:

  <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!

Ozzie PHP

09-10-2013 00:00 gewijzigd op 09-10-2013 00:00

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:


.erroricon {
  background-image: url('404_application_error.png');
  padding-left: 20px;
}

Bart Matsko

09-10-2013 00:07 gewijzigd op 09-10-2013 00:11

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,

Ozzie PHP

09-10-2013 00:11

Dan haal je die padding-left toch weg? :) Of begrijp ik je verkeerd?

Bart Matsko

09-10-2013 00:11 gewijzigd op 09-10-2013 00:12

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.

Wouter J

09-10-2013 00:27

Wat gaat er dan mis? Kun je een online voorbeeld geven?

Bart Matsko

09-10-2013 00:29

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

09-10-2013 00:35

voeg nog eens "margin-right: 50px;" toe ;-)

Wouter J

09-10-2013 00:40

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

09-10-2013 00:42

Soms moet ik nog even 10 keer na denken haha ...

Bedankt het is gelukt! :)

Ozzie PHP

09-10-2013 00:46

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.

Reageren

Inloggen om te reageren