border in div pakt hij niet goed. zie hem over de hele breedte van de webpagina

[djeric]

Hallo.

Ik heb wel een heel simpel probleempje lijkt mij, maar toch niet willen lukken...

Ik heb een afbeelding geplaatst op de webpagina met de volgende code:

<div id="logo">
<img src="index/logo.jpg" alt="" width="561" height="195">
</div>

en in de css:

#logo  {     
     /* instelingen voor logo */
text-align : center; 
padding-top : 10px; 
border: 5px solid #000000;
}

de volledige css met een achtergrond heb ik toegevoegd, even eens met zaken als reset toegevoegd.

/* wat algemene zaken (reset) */

html,body,div,ul,li,a,img,span 


/* instellingen voor achtergrond. */  

{
  margin:0; padding:0; border:0; outline:0; font-size:100%;
  vertical-align:baseline; background:transparent; }    

body  { 

background-image : url(index/achtergrond.jpg); 

background-attachment : fixed; 
}

#logo  {     
     /* instelingen voor logo */
text-align : center; 
padding-top : 10px; 
border: 5px solid #000000;
}

me border is echter dan over de gehele breedte van me webpagina te zien van links tot rechts. (dus ver van het plaatje af)

hoe kan dit?

 

[bron]

Een andere manier die ook erg goed werkt....

<div id="logo">
  <img src="index/logo.jpg" alt="" width="561" height="195" />
</div>

#logo  {
  width: ....px; /* geef een breedte in px, em of % */
  text-align : center;
}
#logo img {
  padding: 5px; /* dikte van img border */
  background: #666; /* kleur van img background + border */
}

De afmeting van de foto maakt niet uit (net als bij het gebruik van border:...)

*** edit
Ik zag nog 10px staan, zet die bij #logo img { margin-top: 10px;

 

[djeric]

owk... tnx:thumb: