CSS problema impaginazione ed elementi centrati

**pegaso22** · 03-11-2014, 18:43

Buongiorno,
non riesco a impaginare bene con i CSS, li uso da pochissimo quindi ho difficoltà.

Sto cercando di impostare un campo input al centro della mia pagina mettendo di fianco un immagine.

Il campo input è in percentuale mentre l'immagine ha una larghezza fissa.

In base alle risoluzioni la percentuale della parte centrale varia (modifico i margini così come visto in un altro post).

Pare vada tutto bene quando solo in linea, però quando va a capo vorrei che l'immagine si posizionasse al centro.

Non riesco a farlo... ci sono dietro ore.

Potete verificare il codice per capire se, oltre al problema indicato, anche il resto va bene?

Vedete il problema stringendo la pagina o da cellulare.

Ecco il codice semplificato.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#columns {
     width:auto;
	 align: center;
}


@media (max-width: 400px) 
{ 
	#center {
		position: relative;
		width:auto;
		margin: 20px 5% 0px 5%;
		text-align: center;
	}
}


@media (min-width: 600px) 
{ 
	#center {
		position: relative;
		width:auto;
		margin: 20px 29% 0px 29%;
		text-align: center;
	}
}


@media (min-width: 800px) 
{ 
	#center {
		position: relative;
		width:auto;
		margin: 20px 38% 0px 38%;
		text-align: center;
	}
}


#center form .biginput {
  display:block;
  height: 30px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  border: 1px solid #c8c8c8;
  color: #5E5E5E;
  font-weight:normal;
  font-size: 13px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
</style>
</head>


<body>
<div id="columns">
	<div id="center">
		<div style="float:left; width:100%; background-color:#ff0000; height:32px;">
			<form><input type="text" src="cerca.gif" placeholder="Dove vuoi andare?" name="currency" class="biginput"></form>
		</div>
	</div>
	<div>
		<div style="float:left; background-color:#ff0000; height:32px;">
			<input type="image" src="cerca.gif">
		</div>
	</div>
</div>
</body>
</html>

Fatemi sapere.

Grazie mille.

**pegaso22** · 04-11-2014, 11:50

Qualcuno può darmi una mano?

**Mich_** · 04-11-2014, 12:03

Ci sono dei problemi nel tuo codice.

1. evita di usare nomi uguali agli elementi HTML: questo puo` portare a errori, sia da parte tua che da parte del browser - center

2. evita di inserire la formattazione nel codice HTML: ne perdi il controllo

3. text-align agisce solo sugli elementi di tipo inline, all'interno del blocco, tu vuoi centrare elementi di tipo blocco

Per centrare ci sono vari aiuti, gia` citati tra i "link utili". Prova a farti un giretto li`.

**pegaso22** · 04-11-2014, 12:17

Grazie per la risposta.
Ora cerco nel link utili un metodo per centrare.

**pegaso22** · 04-11-2014, 12:43

1. ho fatto la variazione da center a centraricerca
2. ho inserito il css nell'HTML per postare qua un blocco unico, altrimenti uso file css separati.
3. ho eliminato text-align
4. non riesco a trovare una soluzione che faccia al caso mio neanche nei link utili. Non trovo qualcosa che ragioni in parte in percentuali e in parte in pixel.

Se provi l'esempio che ho inviato vedrai che l'immagine si affianca al campo input/text però se stringo si sposta a sinistra mentre la vorrei centrata.
O, sarebbe ancora meglio, se riuscissi a far rientrare tutto nella "fascia centrale", immagine compresa visto che ora è posizionata di fianco sulla destra (fuori dal centro).

Come dovrei modificare?
E' fattibile quello che chiedo?
Con tabelle ci avrei messo mezzo minuto... con i CSS (fino a quando non mi abituo) pare un caos.

Fammi sapere.
Grazie mille.

Nuovo codice:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<style>
#columns {
     width:auto;
	 align: center;
}


@media (max-width: 400px) 
{ 
	#centraricerca {
		position: relative;
		width:auto;
		margin: 20px 5% 0px 5%;
		text-align: center;
	}
}


@media (min-width: 600px) 
{ 
	#centraricerca {
		position: relative;
		width:auto;
		margin: 20px 29% 0px 29%;
		text-align: center;
	}
}


@media (min-width: 800px) 
{ 
	#centraricerca {
		position: relative;
		width:auto;
		margin: 20px 38% 0px 38%;
		text-align: center;
	}
}


#centraricerca form .biginput {
  display:block;
  height: 30px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  border: 1px solid #c8c8c8;
  color: #5E5E5E;
  font-weight:normal;
  font-size: 13px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
</style>
</head>


<body>
<div id="columns" align="center">
	<div id="centraricerca">
		<div style="float:left; width:100%; background-color:#ff0000; height:32px;">
			<form><input type="text" src="cerca.gif" placeholder="Dove vuoi andare?" name="currency" class="biginput"></form>
		</div>
	</div>
	<div>
		<div style="float:left; background-color:#ff0000; height:32px; padding:0px 0px 0px 2px;">
			<input type="image" src="cerca.gif">
		</div>
	</div>
</div>
</body>
</html>

**Mich_** · 04-11-2014, 13:06

Anzitutto mi par di vedere attributi che non esistono. Prova a passare dai validatori.
E ancora c'e` parte della formattazione dentro il codice HTML (gli attributi style=".."): questo crea delle variazioni alla formattazione che l'umano che legge il codice fa fatica a considerare.

Per centrare in orizzontale un blocco dentro un altro si usano i margini automatici.
Se ho capito bene, tu hai due blocchi che vuoi centrare assieme.
Devi racchiuderli tutti dentro un unico contenitore, e centrare questo.

Discussione: CSS problema impaginazione ed elementi centrati

Strumenti discussione

Ricerca discussione

Visualizza

CSS problema impaginazione ed elementi centrati

Permessi di invio