Problema DIV e IMMAGINI

Bezelis · 16 Set 2009

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):

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:

lukeonweb · 17 Set 2009

Prova ad aggiungere text-align: center; al livello #testo.

Fammi sapere.

Bezelis · 17 Set 2009

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?

WpStyle · 17 Set 2009

prova dare ai due div laterali un 15% e a quello centrale 68-70% mentre dai un width fisso in px al #bar

Bezelis · 17 Set 2009

kodemondo ha scritto:
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).

borgo italia · 18 Set 2009

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 · 19 Set 2009

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

Cerca

Cerca

Problema DIV e IMMAGINI

Bezelis

Nuovo Utente

lukeonweb

Utente Attivo

Bezelis

Nuovo Utente

WpStyle

Utente Attivo

Bezelis

Nuovo Utente

borgo italia

Super Moderatore

Bezelis

Nuovo Utente

Discussioni simili