Div come metterlo al centro

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?
 
S

Superman

Nuovo Utente
6 Ott 2009
4
0
0
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:
G

gio87

Nuovo Utente
6 Ott 2009
3
0
0
aiuto

senti scusami nn funziona se mi dai il tuo indirizzo msn parliamo piu velocemente se puoi aiutarmi
 
G

gio87

Nuovo Utente
6 Ott 2009
3
0
0
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
 
S

Superman

Nuovo Utente
6 Ott 2009
4
0
0
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
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

Alto Basso