[css] Fissare un div in un altro

[maforast]

Salve a tutti ho un problema che mi sta facendo impazzire.
Voglio fissare un div contenente un logo, all'interno di un div header. in pratica voglio che se uno ridimensiona la finestra, il logo non si sposti ma rimanga nella sua posizione originale, ovvero nel caso in cui uno riduce la finestra del browser lato sx, il logo venga coperto.

Il mio codice css, è il seguente:

div.header
{
  margin: 0 auto;
  position: relative;
  width:100%;
  height: 175px;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
}

div.headerobject
{
position:fixed;
left:50%;
margin-top:80px;
margin-left:-450px;
z-index:20;
width:30px;
height:39px;
background-image: url('../images/header-object.png');
}

l'header object è contenuto nel div header.

Solo adesso ho che il logo è fisso se ridimensiono il browser e quindi viene coperto ma se scorro la pagina, questo scorre anche lui in verticale.

Sapete perchè? Ho provato anche con absolute al posto di fixed ma nulla.

tnx

[Simo990]

Scorre anche lui in verticale proprio perché è "fixed".
Fixed significa che il div viene posizionato relativamente alla finestra del browser.
Tu invece vuoi che il div venga posizionato relativamente al suo contenitore, quindi innanzitutto usa:

div.headerobject {position:relative}

a questo punto ti basta usare le proprietà top, bottom, left, right per posizionare il logo dove vuoi tu, relativamente a div.header.

Se non riesci fammi sapere.

[maforast]

Originariamente inviato da Simo990
Scorre anche lui in verticale proprio perché è "fixed".
Fixed significa che il div viene posizionato relativamente alla finestra del browser.
Tu invece vuoi che il div venga posizionato relativamente al suo contenitore, quindi innanzitutto usa:

div.headerobject {position:relative}

a questo punto ti basta usare le proprietà top, bottom, left, right per posizionare il logo dove vuoi tu, relativamente a div.header.

Se non riesci fammi sapere.

Ciao ho fatto così

div.headerobject
{
  position: relative;
  left: 3%;
  right:90%;
  top: 81px;
  width: 30px;
  height: 39px;
  background-image: url('../images/header-object.png');
}

ma si muove lo stesso se ridimensiono il browser

è come se si muovesse all'interno del suo div.

mo ti posto anche la struttura.
HTML

	<div class="header">
	     <div class="header-center">
		<div class="header-jpeg"></div>
	     </div>
	     <div class="header-wrapper">
		<div class="header-inner">
	  	    <div class="headerobject"></div>
		    <div class="logo">
		    <h1 id="name-text" class="logo-name">Immobili per Impresa</h1>
	  	    <h2 id="slogan-text" class="logo-text">IMMOBILI COMMERCIALI AFFITTO VENDITA</h2>
		    </div>
  	             </div>
  	      </div>
	</div>

CSS

/* begin Header */
div.header
{
  margin: 0 auto;
  position: relative;
  width:100%;
  height: 175px;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
}

.header-wrapper 
{
    position: relative;
    width:80%;
    margin:0 auto;
}
.header-inner 
{
    margin: 0 7px;
}

div.header-center
{
	position: relative;
	width: 1920px;
	left:50%;
}


div.header-jpeg
{
  position: absolute;
  top: 0;
  left:-50%;
  width: 1920px;
  height: 175px;
  background-image: url('../images/header.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}
/* end Header */

/* begin HeaderObject */
div.headerobject
{
  position: relative;
  left: 3%;
  right:90%;
  top: 81px;
  width: 30px;
  height: 39px;
  background-image: url('../images/header-object.png');
  }
/* end HeaderObject */

/* begin Logo */
div.logo
{
 position: relative;
  left:11%;
  right:90%;
  top: 32px;
  }

Grazie per la risp.

[Simo990]

Hai ragione, si muove all'interno del suo div.
Questo perché tu hai specificato (con left: 3%; right:90%) che la distanza di div.headerobject dal margine sinistro debba essere il 3% della larghezza del suo parente e che la distanza dal margine destro sia il 90% del suo parente (cioè div.header-inner). Se andiamo a vedere la larghezza di header-inner scopriamo che è auto (lo è di default). Questo significa che il browser stesso calcolerà la larghezza di header-inner. Se torniamo più in cima vediamo che anche header e header-wrapper hanno una larghezza specificata in percentuale, quindi probabilmente faranno tutti riferimento alla larghezza dell'elemento <body>, cioè la finestra del browser. In pratica dovresti specificare almeno una larghezza fissa, altrimenti è chiaro che tutto il contenuto si adatterà alla finestra e il tuo div.headerobject continuerà a spostarsi di conseguenza.
P.S. in fondo al codice che hai postato c'è un </div> di troppo, forse l'hai scritto per sbaglio?

[maforast]

Originariamente inviato da Simo990
Hai ragione, si muove all'interno del suo div.
Questo perché tu hai specificato (con left: 3%; right:90%) che la distanza di div.headerobject dal margine sinistro debba essere il 3% della larghezza del suo parente e che la distanza dal margine destro sia il 90% del suo parente (cioè div.header-inner). Se andiamo a vedere la larghezza di header-inner scopriamo che è auto (lo è di default). Questo significa che il browser stesso calcolerà la larghezza di header-inner. Se torniamo più in cima vediamo che anche header e header-wrapper hanno una larghezza specificata in percentuale, quindi probabilmente faranno tutti riferimento alla larghezza dell'elemento <body>, cioè la finestra del browser. In pratica dovresti specificare almeno una larghezza fissa, altrimenti è chiaro che tutto il contenuto si adatterà alla finestra e il tuo div.headerobject continuerà a spostarsi di conseguenza.
P.S. in fondo al codice che hai postato c'è un </div> di troppo, forse l'hai scritto per sbaglio?

Dove credi sia meglio inserire la larghezza fissa?

[maforast]

Ho fatto cosi adesso va

.header-wrapper 
{
    position: relative;
    width: 1920px;
    margin:0 auto;
}
.header-inner 
{
	width: 1920px;
    margin: 0 7px;
}

div.header-center
{
	position: relative;
	width: 1920px;
	left:50%;
}


div.header-jpeg
{
  position: absolute;
  top: 0;
  left:-50%;
  width: 1920px;
  height: 175px;
  background-image: url('../images/header.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}
/* end Header */

/* begin HeaderObject */
div.headerobject
{
  position: relative;
  left: 10px;
  top: 81px;
  width: 30px;
  height: 39px;
  background-image: url('../images/header-object.png');
}
/* end HeaderObject */

/* begin Logo */
div.logo
{
  left: 46px;
  display: block;
  position: absolute;
  top: 82px;

}

Solo adesso l'immagine di sfondo si è spostata più a dx

Grazie 1000

[Simo990]

Prego