Problema DIV e IMMAGINI

Bezelis

Nuovo Utente
16 Set 2009
11
0
0
Ciao a tutti.

Sto cercando di creare una barra per sfogliare le pagine del mio sito, inserendo delle freccette sulle quali cliccare, ma ho un problema nel centrare il testo.

La barra è composta da quattro immagini ("Pagina precedente", "Pagina successiva", "Prima pagina", "Ultima pagina") e in centro c'è (o almeno dovrebbe esserci) la scritta "Pagina 1 di 100".

Ecco come dovrebbe essere l'impostazione della barra (disegno grezzo fatto con Paint):

63032695.png


Il codice che ho scritto è il seguente (ma il testo non è centrato correttamente, perché altrimenti le immagini di destra non verrebbero allieate, ma "straborderebbero"):

Codice:
<html>
  <head>
  <style type="text/css">
  <!--
  #bar {
       border: 1px solid red;
       margin: 0;
       text-align: center;
  }
  .left {
       float: left;
  }
  .right {
       float: right;
  }
  .clear {
       clear: both;
  }
  .testo {
       margin-top: 0px; 
       margin-bottom: 0px; 
       padding: 0px; 
       float: left; 
  }
  //-->
  </style>
  </head>
  <body>
    <div id="bar">
      <img src="" width="25" height="25" class="left" /> 
      <img src="" width="25" height="25" class="left" />

      <p class="testo">Pagina</p>

      <img src="" width="25" height="25" class="right" />
      <img src="" width="25" height="25" class="right" />
      
      <div class="clear"></div>
    </div>
  </body>
</html>

Che cosa sbaglio?

Vi rigrazio in anticipo. :byebye:
 
Ultima modifica:

Bezelis

Nuovo Utente
16 Set 2009
11
0
0
Ti ringrazio per avermi risposto.

No, non cambia la situazione perché c'è il float: left (se lo togliessi, si formerebbero ulteriori problemi). Non sò come gestire i float, il clear e le div. Esisterà una combinazione che permetta la coesistenza di tre DIV sulla stessa linea con testo centrato?
 
Ultima modifica:

Bezelis

Nuovo Utente
16 Set 2009
11
0
0
prova dare ai due div laterali un 15% e a quello centrale 68-70% mentre dai un width fisso in px al #bar

Grazie per la risposta. Per 15% intendi la lunghezza, ossia width: 15%;? Il fatto è che esiste solo un DIV.

Comunque ho eseguito delle prove seguendo il tuo consiglio. Effettivamente con questo sistema posso centrare il testo, però considerando che il testo muterà grazie a una funzione PHP, non sarà sempre centrato... Se centro manualmente la scritta "Pagina 1 di 100" e poi la scritta cambia in "Pagina 100 di 100", i due caratteri in più faranno sì che la scritta non sarà più centrata.

Esistono altre soluzioni? Intendo soluzioni text-independent (per così dire).
 
Ultima modifica:

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao, prova a fare cosi (lavorando con i px)
HTML:
<style type="text/css">
<!--
#bar {
	width:500px;
	height:25px;
}
#sx{
	background-color:#00FF00;/*messo il colore per vedere l'effetto*/
	width:50px;
	height:25px;
	position:absolute;
	top:0px;
	left:0px;
} 
#testo{
	background-color:#FF9900;
	width:400px;
	height:25px;
	position:absolute;
	top:0px;
	left:50px;
	text-align:center;
}
#dx{
	background-color:#00FF00;/*messo il colore per vedere l'effetto*/
	width:50px;
	height:25px;
	position:absolute;
	top:0px;
	left:450px;
} 
-->
</style>
</head>

<body>
<div id="bar">
	<div id="sx">
	<!-- qui metti le immagini -->
	</div>
	<div id="testo">qui metti il testo entro i 400 px rimane sempre centrato</div>
	<div id="dx">
	<!-- qui metti le immagini -->
	</div>

</div>
</body>

ha te il resto per l'abbellimento grafico
p.s.
non ho considerato lo spessore del bordo
 

Bezelis

Nuovo Utente
16 Set 2009
11
0
0
Ti ringrazio, la tua è una buona idea (anche se avrei preferito una soluzione con position: relative per renderlo dinamico al massimo, ma non è impotante)

;)

Saluti,
Angelo
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
ANDREA20 [HTML] problema con i div HTML e CSS 10
E [Javascript] problema con margine quando viene mostrato div Javascript 0
D [HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div HTML e CSS 28
M Problema con ciclo foreach per chiusura apertura div in base al numero di record in database PHP 1
S Problema scorrimento DIV Javascript 6
S Problema scorrimento DIV senza scrollbar HTML e CSS 4
D problema sovrapposizione div in sito responsive HTML e CSS 4
C Problema div HTML e CSS 2
C Problema centraggio box div HTML e CSS 2
gandalf1959 problema nel posizionamento di un div HTML e CSS 1
M Problema altezza div automatica HTML e CSS 12
H Problema blocco div in rilievo jQuery 3
H Problema riguardo a contenitori div jQuery 2
E problema posizionamento div HTML e CSS 1
D Problema con lo scroll della pagina e del div position:fixed HTML e CSS 0
D Problema con sovrapposizione DIV HTML e CSS 2
P Problema con hover div jQuery 2
asevenx Problema Dreamweaver "impossibile individuare i file correlati dinamicamente..." e con i <div> HTML e CSS 1
A problema spazi tra i Div quando nello zoom in in Chrome o dispositivi mobili HTML e CSS 1
M Problema affiancamento div HTML e CSS 4
A Problema livelli tra div e script js Javascript 7
danlupo Problema Div OverFlow ed Height HTML e CSS 0
V problema refresh di un div Javascript 4
V problema riguardante l'apertura di pagine e passaggio dati nei div Javascript 0
V problema allineamento div HTML e CSS 1
U Problema java con <div> Javascript 0
N problema con div width: 100% HTML e CSS 0
S problema con div a scomparsa jquery jQuery 0
SolidSnake4 Problema div annidati HTML e CSS 1
I problema JS div is null Javascript 2
D problema div con internt explorer HTML e CSS 10
N [PHP+HTML+CSS] Problema con un div HTML e CSS 4
T problema posizionamento div HTML e CSS 2
F Problema Menu/Div Webdesign e Grafica 9
Nik Posizionare un div (contenente una tabella) al centro, problema con mozilla HTML e CSS 0
B Problema Strano Su DIV. mi scompare tutto!! HTML e CSS 8
Freshtaste Problema con il background dei div HTML e CSS 5
F [CSS] Problema con IE e div fixed HTML e CSS 2
gladenko CSS e DIV problema di dimensionamento HTML e CSS 3
Eugene Tre div all'interno di un altro div - problema IE HTML e CSS 2
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2

Discussioni simili