Div e immagine

[Alex90]

Ciao, ho fatto questo div

<div id="header_banner">
[img]images/banner.gif[/img]
</div>

E' questo è il css

#header_banner{
float:inherit;
text-align:center;
background-image:url(../images/sfondo_header.gif);
text-align:center;
width:552px;
height:140px;
}

Solo che facendo in questo modo l'immagine mi stà attaccata all'inizio come nelle tabelle se ci fosse impostato un valing="top" solo che io vorrei che l'immagine mi verrebbe al centro, come faccio??

Ciao

[fontlover]

aggiungi nel css il padding(-top) .

[Alex90]

Allora adesso ho provato a fare delle prove

Ed ho visto su IE se metto

#header_banner{
float:left;
text-align:center;
background:url(../images/sfondo_header.gif) #FFFFFF left top no-repeat;
width:552px;
height:140px;
}

#contenitore_banner{
height:140px;
text-align:center;
float:left;
width:552px;
margin-top:40px;
}

Mi appare un box sotto bianco di 40px (vedi immagine allegata)

Se invece tolgo il margin-top:40px; il box sparisce cosa posso fare per togliere però lasciando il margin-top:40px;??

Ciao

P.S. Su firefox nn succede stà cosa

[fontlover]

ma i tuoi due 3d sono collegati? mica ho capito che vuoi fare

rispiegami cio' che vuoi ottenere plz

[Alex90]

In pratica vorrei che il banner verrebbe messo al centro del div sia in altezza che larghezza, ed allora ho pensatoa d un margin-top ma su firefox funziona su ie no..

Ciao

[fontlover]

mmmmm :master:

do x scontato :

che margin e' cio' che sta all' esterno del box , quindi cio' che distanzia
da un altro elemento;
padding e' lo spazio fra il contenuto interno al box e il box stesso.


p.s. ma xche usi il float?

che devi realizzare?

[fontlover]

mi sa c'e' qualche box di troppo...

se il banner e' il primo elemento del documento,

basta utilizzare anche il codice che ti ho postato, adattandolo :

un box contenitore inserito nel documento , con margin-top 0 o quello che ti pare a seconda
se lo vuoi distanziato o meno dall'inizio della pagina;

il banner contenuto nel box lo centri lateralmente col discorso text-align:center (ie) ; margin: auto (resto del mondo);

e verticalmente con padding (no margin) eventualmente top di x ....

sempre se ho capisciuto

[Alex90]

Guarda ti posto il codice che ho fatto

<div id="header">
<div id="header_logo">
<a href="" title="CdBurn.it - <? echo "$titolo_pag"; ?>">
[img]/images/logo.gif[/img]" id="img" /></a>
</div>
<div id="header_banner">
<div id="contenitore_banner">
[img]/images/banner.gif[/img]
</div>
</div>
</div>

Ed il css

#header{
width:1011px;
float:left;
text-align:center;
}

#header_logo{
float:left;
text-align:center;
width:459px;
}

#header_banner{
float:left;
text-align:center;
background:url(../images/sfondo_header.gif) #FFFFFF left top no-repeat;
width:552px;
height:140px;
margin: auto;
}

#contenitore_banner{
height:140px;
text-align:center;
float:left;
width:552px;
margin: auto;
padding-top:40px;
}

In questo modo ho messo contenitore_banner con paddint-top di 40px; ma in questo modo su ie mi appare il box bianco come hai visto nell'immagine.

In teoria io vorrei centrare il banner però togliendo il box bianco sotto..

Ciao

[fontlover]

nn ho modo di testarlo ... vedi cosi

body, html {
  text-align: center;   
  margin: 0;
  padding: 0;
}  	
#container {
  margin: 0 auto;
}  
#header_logo {
  width:459 px;
  border: 2px solid black;
  padding: 5px;
}  
#header_banner{
  border: 2px solid black;
  background:url(../images/sfondo_header.gif) #FFFFFF center no-repeat;
  width:552px;
  height:140px;
}



<div id="container">
      <div id="header_logo">  
      <a href="" title="CdBurn.it">
      [img]/images/logo.gif[/img]</a> 
      </div>
      <div id="header_banner">
      </div>
</div>

ricontrollalo.. nn vorrei nella fretta...
il border nel css toglilo l'ho messo solo per vedermi i box
il banner sotto il logo e' piu largo lo hai notato si .

facci sapere ciao

[Alex90]

Ottimo funziona