DIV indipendente con distanza dal body fissa

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Ragazzi, buon ferragosto a tutti, e visto che non so cosa fare mi chiedevo una cosa.
Ho la mia bella pagine web, tutta regolare, ma vorrei inserire un box, una colonna un riquadro, quello che sia a i bordi del contenitore in modo tale da poter inserire poi dei link tipo FB o Twitter o anche la login. So che mettendo il div con positin:fixed ed ipostando i valori top left etc, riesco a fissarlo e renderlo indipendente dal flusso della pagina web. Ma io avevo bisogno che avesse una distanza fissa dal contenitore e che restasse ovviamente fisso allo scorrere della pagina. Come posso fare? Lo devo inserire nel flusso oppure c'è un altro modo?

Grazie
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Forse non ho capito la tua richiesta!
Ma come hai accennato tu con posizione fissa non gli dai le distanze che vuoi?
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Le distanze le dai, certo, ma essendo indipendente dal sito e quindi dal body la distanze fanno riferimento al bordo dello schermo, quindi più grande è lo schermo più a destra o sinistra si troverà il box anche se inserisco delle distanze non sara mai "vicino" al contenitore.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Dello schermo? Boh!:confused: A me risulta che faccia riferimento all'angolo sinistro/alto della pagina (cioè al body) e non allo schermo
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Ma guarda io ho messo un semplice div con larghezza e altezza base 100 x 100 fuori dal contenitore ma all'interno del body. Da questo mi trovo un box fuori dal sito, fisso cioè che rimane dove si trova allo scorrere della pagina ma la posizione gliela do riferendomi al body o comunque all'html che di per se è grande quanto lo schermo dove si viaualizza la pagina quindi se io riduco la pagina, non ottengo nessuna "riduzione" o zoom del sito visto che ha layout fisso (e quindi mi si incasina da matti) ma il box rimane alla stessa distanza dal bordo del browser. Io invece vorrei sapere come poterlo lasciare ad una distanza fissa dal contenitore.

Spero di essere stato chiaro. :byebye::book:
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
può darsi che sia una put....ta, ma prova
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
#fisso{
position: fixed;
background-color:#990000;
width:300px;
height:215px;
top:5%;
margin-left:-150px;/*= metà della larghezza del fisso*/
left: 86%;/*da valutare con delle prove*/
}
#cont{/*contenitore centrato nel monitor*/
	width:600px;
	height:1500px;/*per avere lo scrol*/
	position: absolute;
	background-color: #c8c8c8;
	overflow: hidden;
	left: 50%;
	margin-left: -300px;/*= metà della larghezza del cont*/
	margin-top:5px;
}
</style>
</head>
<body>
<div id="cont">
<div id="fisso">
box fisso
</div>
contenitore
</div>
</body>
</html>
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Ciao, purtroppo non funziona. Ti allego il markup ed css.

Markup:
HTML:
</head>

<body>

<div id="contenitore">
<div id="box_ext_sx">Metti ciò che vuoi</div>
		<div style="height: 7px"></div>
        <div id="logo"><img src="images/logo nuovo biblio2.JPG" alt="" /></div>
        <div class="menu">
			<ul class="primo">
			   <li class="active "><a href="Master.php"><span>Home</span></a>
			<ul>
         <li><a href="Dove Siamo.php"><span>Dove Siamo</span></a></li>
         <li><a href="Chi Siamo.php"><span>Chi Siamo</span></a></li>

HTML:
#box_ext_sx {	position:fixed;
			left:10px;
			top:10px;
			width:150px;
			height:150px;
/*			margin: 100px 0 0 15px;*/
			background-color:#CCCCCC;
			-moz-border-radius: 10px 10px 10px 10px;
			-webkit-border-radius: 10px 10px 10px 10px;
			border-radius: 10px 10px 10px 10px;

#contenitore {	min-height: 100%;
				width: 100%;
				height: 1%;
				max-width: 980px;
				background-color:transparent;
				border: 5px;
				height: 100%;
				height: auto !important; 
				margin: 0 auto -65px; /* Stessa altezza del footer*/
				-moz-border-radius: 10px 10px 10px 10px;
				-webkit-border-radius: 10px 10px 10px 10px;
				border-radius: 10px 10px 10px 10px;

come si vede ho provato ad inserirlo dentro il contenitore ma mi ha scompaginato tutto! :dipser: quindi nulla. Per rendere le cose più chiare vi dico che nella home page di questo sito, non del forum ma del sito c'è un box a lato con le voci fb twitter google+ che rimane alla stessa distanza dal contenitore principale, questo sia che rimpicciolisca la pagina sia che la ampli. Naturalmente il contenitore rimane della stessa larghezza centrato e gli spazi vengono coperti con il bianco.

Che ne dite come si fa?
 
Discussioni simili
Autore Titolo Forum Risposte Data
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
paloppa Div che appare appena due form sono compilati jQuery 16
S [javascript] visualizzare/nascondere div Javascript 3
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
L php - pulsante premuto che mostra #div PHP 3
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
M Ottenere i valori di una proprietà su un array di oggetti (es. DIV) in JavaScript Javascript 7
C Nascondere un div al click di una casella Ajax 1
S [HTML] Distanza esatta tra due div HTML e CSS 7
G [HTML] Posizionamento testo in un div HTML e CSS 5
trattorino css solo se richiama un class di un div HTML e CSS 1
G [HTML] Bordo bianco sotto immagine in un Div HTML e CSS 1

Discussioni simili