Div come metterlo al centro

  • Creatore Discussione Creatore Discussione gio87
  • Data di inizio Data di inizio
G

gio87

Nuovo Utente
6 Ott 2009
3
0
0
RAGA HO UN PROBLEMA NN SONO TANTO ESPERTO E NN RIESCO A POSIZIONARE UN IDV ALL INTERNO DELLA PAGINA IN MANIERA CENTRALE ,mI POTETE AIUTARE??QUALCUNO MI DA IL SUO CONTATTOMSNOVE PARLERE PIU VELOCEMENTE?
 
Crei il DIV con le dimensioni prestabilite e position: absolute;:
width: 180px;
height: 120px;
position: absolute;
posizioni il vertice in alto a sx del DIV al centro della pagina:
top: 50%;
left: 50%;
riposizioni il vertice in alto a sx del DIV spostandolo verso sx e verso l'alto per la metà della larghezza e dell'altezza del DIV stesso, in modo tale che al centro della pagina non ci sia più il vertice in alto a sx ma il centro del DIV:
margin-left: -90px;
margin-top: -60px;

va bene?
 
Ultima modifica:
aiuto

senti scusami nn funziona se mi dai il tuo indirizzo msn parliamo piu velocemente se puoi aiutarmi
 
questo e' il mio foglio praticamente vorrei inserire il div al centro e proporzionarlo nella pagina in maniera tale che se rimpicciolisco la pagina rimpicciolisce anche il div.aiutatemi


<HEAD>
<title>papapapap</title>
</HEAD>
<!--collegamento al foglio di stile-->
<link rel='stylesheet' href='stili/stile.css'>

<BODY leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<table width=850 border=0 align=center cellpadding=0 cellspacing=0 bgcolor='#4d4d4d' height="100%">
<tr><td width=100% height=20></td></tr>
<tr>
<td align=center>
<table width=800 border=0 cellpadding=0 cellspacing=0>
<tr><td><script src='Librerie/Intestazione.js'></script></td></tr>
<tr><td height=10></td></tr>
<tr><td background='Immagini/box_top.jpg' height=12></td></tr>
<tr>
<td background='Immagini/box_bg.jpg' valign="middle">
<table border=0 cellpadding=0 cellspacing=0 height="100%">
<tr height="100%" valign="middle">
<td width=216 align=center valign=middle height="100%">
<table width=100% align=center border=0 cellpadding=0 cellspacing=0>
<tr valign="middle"><td><script src='Librerie/Collegamenti_home.js'></script></td></tr>
<tr><td height=50></td></tr>
<tr> <br><br><br>
<td align=left>
<!--Link di pagina-->
<!--.............................................................................................-->
</td>
</tr>
</table>
</td>


<!--Contenuto pagina--> <!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" lang="it">
<head>
<title>S3 Slider45t45t4 - Esempio JavaScript scaricato da HTML.it</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="HTML.it - il sito italiano sul Web publishing" />
<meta name="Keywords" content="Ad ogni apertura di pagina questo script genera un differente colore di sfondo." />
<meta name="Owner" content="HTML.it srl" />
<meta name="Author" content="HTML.it srl" />
<meta name="Copyright" content="HTML.it srl" />
<style type="text/css" media="screen">
<div id="slider"></div>
#slider{width:40%;padding:0 1em 1em 1em;
}


}#slider{ width:100% }


#sliderContent {
width: 410px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>

</head>
<body>
<h1>S3 Slider</h1>
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href=""><img src="Penta_Files/41.jpg" alt="1" /></a>
<span class="top"><strong>Villa Camilla</strong><br />Bari - Poggiofranco</span>
</li>
<li class="sliderImage">
<a href=""><img src="Penta_Files/44.jpg" alt="2" /></a>
<span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
</li>
<li class="sliderImage">
<img src="Penta_Files/53.jpg" alt="3" />
<span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="Penta_Files/43.jpg" alt="4" />
<span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="Penta_Files/127.jpg" alt="5" />
<span class="top"><strong>Title text 2</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="Penta_Files/126.jpg" alt="5" />
<span class="top"><strong>Title text 2</strong><br />Content text...</span></li>
</li> <li class="sliderImage">
<img src="Penta_Files/37.jpg" alt="5" />
<span class="top"><strong>Title text 2</strong><br />Content text...</span>v</li>
</li> <li class="sliderImage">
<img src="Penta_Files/107.jpg" alt="5" />
<span class="top"><strong>Title text 2</strong><br />Content text...</span></li>
</li> <li class="sliderImage">
<img src="Penta_Files/111.jpg" alt="5" />
<span class="top"><strong>Title text 2</strong><br />Content text...</span></li>
<div class="clear sliderImage"></div>
</ul>
</div>


<!--.............................................................................................-->
</td>
</tr>
</table>
</td>
</tr>
<tr><td background='Immagini/box_bottom.jpg' height=12></td></tr>
<tr><td height=30 align=middle><span class='style7'>Realizzato da Penta Elettrica snc</span></td></tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
se iruscite mi rispondete con le modifiche gia apportate grazie perche io nn so che fare essendo inesperto
 
Per avere un Div che si ridimensioni al ridimensionamento del browser credo ci siano due vie: una, più semplice, consiste nel dare al DIV la larghezza e l'altezza in percentuale e non in pixel, l'altra consiste nel ricavare le dimensioni in pixel dello spazio disponile del browser e, con una funzioncina JS, ridimensionare il DIV, in questo secondo caso puoi utilizzare i dati ottenuti sulle dimensioni dello spazio in pixel anche per centrare il DIV.
Per ottenere lo spazio disponibile in pixel:
Firefox window.innerwidth e window.innerheight
IE document.body.clientWidth e document.body.clientHeight

Forse potresti anche considerare la creazione di un DIV a tutta pagina, invisibile, senza bordi, (width e height 100%) che funga da contenitore del DIV che vuoi centrato e ridimensionabile, e centrarvi questo dentro utilizzando, sul contenitore, align=" center" e valign="middle"... ma dovresti provare.

Qui un esempio di cosa puoi ottenere con le dimensioni in percentuale, il DIV che ti riguarda è "Centro1"
HTML: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 2</title>
</head>

<body>

<div style="border:2px solid #008000; position: absolute; width: 40%; height: 30%; z-index: 1;
left: 0%;
top:0%" id="livello1">
A1&nbsp;</div>
<div style="border:2px solid #800000; position: absolute; width: 30%; height: 30%; z-index: 1;
top: 0%;
left: 40%" id="livello1">
B1&nbsp;</div>
</body>
<div style="border:2px solid #808000; position: absolute; width: 30%; height: 30%; z-index: 1;
top: 0%;
left: 70%" id="livello1">
C1&nbsp;</div>

<div style="border:2px solid #008000; position: absolute; width: 40%; height: 30%; z-index: 1;
left: 0%;
top:30%" id="livello1">
A2</div>
<div style="border:2px solid #800000; position: absolute; width: 30%; height: 30%; z-index: 1;
top: 30%;
left: 40%" id="livello1">
B2</div>
</body>
<div style="border:2px solid #808000; position: absolute; width: 30%; height: 30%; z-index: 1;
top: 30%;
left: 70%" id="livello1">
C2</div>

<div style="border:2px solid #008000; position: absolute; width: 40%; height: 30%; z-index: 1;
left: 0%;
top:60%" id="livello1">
A3&nbsp;</div>
<div style="border:2px solid #800000; position: absolute; width: 30%; height: 30%; z-index: 1;
top: 60%;
left: 40%" id="livello1">
B3</div>
</body>
<div style="border:2px solid #808000; position: absolute; width: 30%; height: 30%; z-index: 1;
top: 60%;
left: 70%" id="livello1">
C3</div>

<div style="border:4px solid #00FFFF; position: absolute; width: 30%; height: 30%; z-index: 1;
top: 35%;
left: 35%; background-color:#C0C0C0" id="livello1">
<p align="center"><b><font color="#00FFFF">Centro1</font></b></div>

<div style="border:4px solid #FF0000; position: absolute; width: 50%; height: 50%; z-index: 1;
top: 0%;
left: 0%" id="livello1">
<p align="center"><b><font color="#FF0000">Alto Sinistra</font></b></div>

<div style="border:4px solid #FF00FF; position: absolute; width: 50%; height: 50%; z-index: 1;
top: 50%;
left: 50%" id="livello1">
<p align="center"><b><font color="#FF00FF">Basso Destra</font></b></div>

</body>

</html>
 
Ultima modifica:
Devi accedere o registrarti per poter rispondere.

Discussioni simili

E
Creare un testo trasparente dietro un div
Risposte
5
Visite
3K
HTML e CSS
WmbertSea
WmbertSea
F
Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni?
Risposte
0
Visite
710
Javascript
fede12
F
M
Accordion menu e posizione div
Risposte
0
Visite
1K
HTML e CSS
miagy
M
P
jquery refresh div non funziona
Risposte
0
Visite
1K
Javascript
psicona
P
P
refresh div + scrittura/lettura dal db
Risposte
1
Visite
907
Javascript
marino51
marino51
napuleone
  • Bloccata
div centrato alla pagina posto sopra ai contenuti
Risposte
1
Visite
2K
HTML e CSS
Max 1
Max 1
M
Unire 2 funzioni per l'invio di un form e con l'apertura di un div
Risposte
0
Visite
2K
Javascript
maxnegri2036
M
Cosina
Nascondere div di default
Risposte
2
Visite
3K
jQuery
Cosina
Cosina
napuleone
modificare il contenitore di un div
Risposte
2
Visite
1K
Javascript
napuleone
napuleone
napuleone
  • Bloccata
modificare il contenitore di un div
Risposte
1
Visite
973
Javascript
Max 1
Max 1
A
inserire variabile php colore in div html
Risposte
2
Visite
2K
PHP
AndreaCerre
A
J
Far comparire e scomparire un div con un select
Risposte
1
Visite
3K
Javascript
Max 1
Max 1
T
Far sparire dalla pagina div che saranno inseriti successivamente
Risposte
0
Visite
3K
jQuery
the_indios
T
E
Div che scompare con scroll jquery
Risposte
0
Visite
1K
Javascript
enzo7903
E
G
Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna
Risposte
5
Visite
3K
HTML e CSS
Max 1
Max 1
Stefano Migotto
Creazione di un div con php o js
Risposte
9
Visite
3K
PHP
Tommy03
Tommy03
felino
Bootstrap alert: usare lo stesso div per due messaggi consecutivi
Risposte
1
Visite
2K
jQuery
MarcoGrazia
MarcoGrazia
S
Visibilità div in PHP
Risposte
1
Visite
1K
PHP
otto9due
otto9due
L
[Javascript]Scorrere div con frecce avanti-indietro
Risposte
0
Visite
2K
Javascript
lazlo
L
P
[Javascript] Aprire Link in Div e pagina Dinamica
Risposte
0
Visite
2K
Javascript
pianeta0
P
Alto Basso