Immagine centrale senza margini (top/bottom)

**marco_webd** · 20-07-2010, 13:39

Salve ragazzi,
ho un problemino con i margini della pagina...che è impostata con diversi DIV all'interno di un altro DIV che li contiene tutti.
Nel div che li contiene tutti (chiamato col nome master) ho inserito come sfondo un'immagine sfumata. L'effetto che vorrei ottenere è visualizzare l'immagine di sfondo senza margini sia sopra che sotto.
come vedrete dal codice i margini "top" e "bottom" sono a "0" e chiaramente nella parte superiore della pagina funziona. il problema è nalla parte bassa. chiaramente l'immagine è inserita nel div (master) che ha dimensioni minori minori rispetto alla pagina del browser (almeno nel mio caso 1280 x 800), ma come faccio a far chiudere l'immagine fino alla fine della pagina???? so gia che la risposta sta nel mettere l'immagine fuori dal div, ma dato che è sfumata ed è solo centrale non ho idea di come si faccia...
qualcuno può darmi un'indicazione???
grazie mille

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
#master {
	height: 600px;
	width: 910px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(img/bg.png);
	background-repeat: repeat-x;
	background-position: left;
}
#nav_sx {
	float: left;
	height: 600px;
	width: 80px;
}
#contenuto {
	float: left;
	height: 440px;
	width: 750px;
}
#footer {
	float: left;
	height: 80px;
	width: 750px;
}
#nav_dx {
	float: right;
	height: 600px;
	width: 80px;
}
#header {
	float: left;
	height: 80px;
	width: 750px;
}
body {
	margin-top: 0px;
	margin-bottom: 0px;
}
-->
</style>
</head>

<body>
<div id="master">
  <div id="nav_sx"></div>
  <div id="header"></div>
  <div id="nav_dx"></div>
  <div id="contenuto"></div>
  <div id="footer"></div>
</div>
</body>
</html>

**furbostandby** · 22-07-2010, 11:15

Potresti ad esempio includere il div master all'interno di un altro div della stessa larghezza e con altezza 100%, impostando l'immagine di sfondo a quest'ultimo.
Impostando height a 100% potrebbe apparire un margine sopra e sotto... vedi tu
Ciao

**marco_webd** · 22-07-2010, 11:48

Originariamente inviato da furbostandby
Potresti ad esempio includere il div master all'interno di un altro div della stessa larghezza e con altezza 100%, impostando l'immagine di sfondo a quest'ultimo.
Impostando height a 100% potrebbe apparire un margine sopra e sotto... vedi tu
Ciao

innanzitutto grazie per la risposta...
ho provato a fare come mi hai detto ma ho ottenuto lo stesso rislutato di prima...
quello che vorrei ottenere è proprio uno sfondo simile a questo di "html.it"! la differenza sta nel fatto che anzichè le strisce grigie vorrei un immagine sfumata centrale della larghezza del div e che non lasci però il margine sotto...proprio come nella parte superiore del sito...
(infatti i margini superiore e inferiore del body li ho messi a 0, ma funziona solo nella parte "top").
io l'ho vista più volte una cosa del genere in giro per i siti, se non sbaglio, ma ora non ricordo dove

mi dareste altre indicazioni please?

**furbostandby** · 22-07-2010, 11:57

In questo caso puoi direttamente impostarla come sfondo del body... mi pare di aver capito che è questo che vuoi fare
Ciao

**marco_webd** · 22-07-2010, 12:15

Originariamente inviato da furbostandby
In questo caso puoi direttamente impostarla come sfondo del body... mi pare di aver capito che è questo che vuoi fare
Ciao

il mio bg non è una foto ma una striscia di 2 px di larghezza che vorrei si ripetesse...se la metto nel body come faccio a centrarla? nel senso come faccio a farla inziare/terminare in corrispondenza dei limiti del div???

**furbostandby** · 22-07-2010, 12:25

In questo caso andava bene come ho detto prima... almeno io ho provato con questo codice e funziona, almeno in firefox ed IE:

Codice PHP:


<html>

<head></head>

<body style="margin:0;">

    <div style="width:900px; height:100%; margin:0 auto; margin-top:0; margin-bottom:0; background-color:blue;">

    <div style="width:900px; height:400px; margin-top:0; margin-bottom:0; background-color:red;">

    </div>

    </div>

</body>

</html>

**marco_webd** · 22-07-2010, 12:45

Originariamente inviato da furbostandby
In questo caso andava bene come ho detto prima... almeno io ho provato con questo codice e funziona, almeno in firefox ed IE:

Codice PHP:


<html>

<head></head>

<body style="margin:0;">

    <div style="width:900px; height:100%; margin:0 auto; margin-top:0; margin-bottom:0; background-color:blue;">

    <div style="width:900px; height:400px; margin-top:0; margin-bottom:0; background-color:red;">

    </div>

    </div>

</body>

</html>

ohhhhh....è proprio cosi che lo volevo...ti ringrazio!!!!
senti visto che io uso un'immagine come sfondo (al posto del colore blu) se apro la pagina su un monitor con risoluzione che ne so 1600 (e l'immagine che ho usato mi sembra si di altezza 630 px), l'immagine chiaramente si ripete ripartendo dall'inizio...esiste un modo per stirarla? oppure devo creare da subito un immagine con un'altezza di dimensioni consistenti?
oppure non so esiste un javascript che fonde due colori uno di partenza e uno di arrivo, creando cosi una sfumatura da sostituire all'immagine?

Discussione: Immagine centrale senza margini (top/bottom)

Strumenti discussione

Ricerca discussione

Visualizza

Immagine centrale senza margini (top/bottom)

Permessi di invio