problema impostazione HEIGHT

**F.Bandiera** · 27-03-2007, 16:29

Salve a tutti,
ho il seguente problema:

In una pagina ho due div in linea, rispettivamente con float left e right, racchiusi in un altro div contenitore con lunghezza assegnata (ma non altezza che non è dichiarata perchè si deve adattare ai contenuti dei div contrapposti).

Il div con float:right è costituito da:
- un tag

(che ha una altezza line-height: 1.2em)
- una img (alta per es. 100px con padding top e bottom di 5px e 10px)
la sua altezza è quindi variabile al variare della visualizzazione del carattere.

Il div con float:left invece contiene:
-un <ul>[*] dove:
- <ul> ha list-style-type: none
-[*] float:left
che dovrebbero essere le dichiarazioni per ottenere un elenco in linea.ù
- l'"argomento" del[*] sono delle img di dimensione fissa (es. 15px)

Io vorrei fare in modo che le img del div float left fossero allineate in basso all'altezza della chiusura del div float right.

Spero di essere stato sufficientemente chiaro nell'esporre il mio prob. e spero che qualcuno sappia darmi un consiglio.

Allego comunque alcuni dati per facilitare il lavoro di tutti coloro che vorranno cimentarsi in tale impresa...

INTESTAZIONE PAGINA HTM:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

STRUTTURA HTM:
<body>
<div id="container">
<div id="header" class="fascia">
<div id="lingue">
<ul>[*][img]bandiera_italia_current.gif[/img] (altezza 15px)[*][img]bandiera_inglese.gif[/img] [/list]
</div>
<div id="patrocini">

Con il patrocinio di:</p>
[img]logo_comune.gif[/img] (altezza 100px)
</div>
</div>
<div id="vetrina" class="fascia"> (...seguito della pag...)
[img]top.jpg[/img]
</div>
</div>
</body>

CSS:
body {margin: 0px; padding: 0px; /* if IE */ text-align: center; font-size: 0.7em;}
ul {margin: 0px; padding: 0px; list-style-type: none;}
#container {width: 760px; margin: 0px auto; padding: 0px; /* if IE */ text-align: left;}
.fascia {width: 100%; margin: 0px; padding: 0px; clear: both;}
#lingue {margin: 0px; padding: 0px; float: left;}
#patrocini {margin: 0px; padding: 0px; float: right;}
#patrocini p {line-height: 1.5;}
#patrocini img {padding: 5px 0px 10px 0px;}

Grazie a tutti e allego anche una immagine per chiarire visivamente ciò che vorrei!!!

**F.Bandiera** · 28-03-2007, 12:15

Ciao di nuovo...
continuando a leggere sul forum negli ultimi "casi" trattati, ne ho trovato uno che può forse risolvere il mio problema.

Potrei usare il sistema di inserire un <div> con clear both all'interno del mio contenitore class .fascia e da lì provare ad allineare in basso il contenuto del div float left.

Adesso provo.... PERO' a livello di validità del codice e di correttezza concettuale, questo sistema è corretto?
Perchè in fondo un div (trasparente, di 1px, ecc.) non si vede, mi risolve [forse] il problema... ma c'è!!!! E a me non sembra che abbia un "significato" nell'economia della pagina, serve solo a sistemare un prob di visualizzazione...

Cosa ne dite?
E' vero che la scala di importanza è:
1) funziona e il sito c'è
2)il sito è pure correttissimo

ma non esistono altri modi meno euristici?

IDEA: non ne so molto... (vado a vedere e mi documento, non si sa mai)
e usare i sellettori BEFORE e AFTER di cui ho sentito parlare?
dite che è possibile? sono supportati da css2 in IE, FF, e Opera?

Ciao e grazie a tutti

**gra-fichetto** · 28-03-2007, 12:52

La tua pagina tipo

codice:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">

<head>
<title>pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" href="stile.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
	<div id="header">
		
		<div id="lingue">
		<ul>
		[*][img]bandiera_italia_current.gif[/img]
		[*][img]bandiera_inglese.gif[/img]
		[/list]
		</div>
		
		<div id="patrocini">
		

Con il patrocinio di:</p>
		[img]logo_comune.gif[/img]
		</div>
	</div>

	<div id="vetrina" class="fascia">
	[img]top.jpg[/img]
	</div>
</div>
</body>

Il tuo css:

codice:

body {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 0.7em;
}
ul{
	margin: 0;
	padding: 5px 0 10px 0;
	list-style-type: none
}
ul li{
	display: inline
}
#container {
	width: 760px;
	margin: 0 auto;
	padding: 0
}
#header {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
	top: 0;
	left: 0
}
#lingue {
	width: 60%;
	margin: 0;
	padding: 0;
	float: left;
	position: absolute;
	left: 0;
	bottom: 0
}
#patrocini {
	width: 39%
	margin: 0;
	padding: 0;
	float: right
}
#patrocini p {
	line-height: 1.2em
	}
#patrocini img {
	padding: 5px 0 10px 0
}

Altrimenti, non ho capito

**F.Bandiera** · 29-03-2007, 17:39

Grazie mille, ora il codice funziona...
YEAH!!!!

Discussione: problema impostazione HEIGHT

Strumenti discussione

Ricerca discussione

Visualizza

problema impostazione HEIGHT

Prova così

Permessi di invio