bordo che contenuto che cambia a seconda del float

**blekm** · 06-12-2007, 11:51

allora, la situazione è questa:

- div sito (senza altezza specificata)
-- div navigazione
-- div contenuto (senza specificarne l'altezza, in quanto è a contenuto variabile)

se io imposto il border sul SITO, e metto float: left/right; il bordo mi si vede correttamente (primo caso nell'allegato)

se invece centro tutto il sito al centro della pagina, il bordo generale mi si accorcia quasi fin sopra la navigazione (secondo caso nell'allegato)

Perchè?

So che bisognerebbe vedere il codice, e la pagina (eventualmente domani) ma la mia domanda è puramente teorica: perchè un bordo si vede correttamente con il float e si vede male senza float?

(per ora ho risolto float: left, e dando il margine a sinistra fino a centrare il sito)

**gra-fichetto** · 06-12-2007, 12:40

Originariamente inviato da blekm
...ma la mia domanda è puramente teorica: perchè un bordo si vede correttamente con il float e si vede male senza float?

(per ora ho risolto float: left, e dando il margine a sinistra fino a centrare il sito)

Risposta puramente teorica: navigazione e contenuto sono "floattati" (?)

**blekm** · 06-12-2007, 12:43

Originariamente inviato da gra-fichetto
Risposta puramente teorica: navigazione e contenuto sono "floattati" (?)

oddio.. sai che ora, mi hai fatto venire un dubbio. Stasera controllo e ti ridico.

Per centrare il tutto e avere il bordo corretto, dovre non floattare niente?

**gra-fichetto** · 06-12-2007, 12:59

Se hai due <div>, testata e contenuto, che debbano occupare l'intera larghezza del loro contenitore e debbano essere disposti uno sotto l'altro, non capisco l'uso del float.
Il contenitore potresti centrarlo con

codice:

body{
text-align: center
}

#contenitore{
width: xxx;
margin: 0 auto;
text-align: left /*ripristina l'allineamento del testo*/
}

Altrimenti non mi è chiaro.

**blekm** · 06-12-2007, 13:04

ora non ricordo precisamente il codice css... stasera controllo e posto il codice.

**blekm** · 06-12-2007, 19:21

http://blekm.altervista.org/copy.html

http://blekm.altervista.org/copy1.css

una parte del codice css

codice:

#container-visualizza
{
	padding-top: 5px;
	padding-left: 5px;
	margin-top: 10px;
	padding-bottom: 10px;
	width:800px;
	float:none;
/*	margin-left: 190px;*/
	background-color:#FAFAFA;
	border: 1px solid black;
}

#colonna-sinistra-visualizzazione
{
	float: none;
	width: 790px;
	padding: 2px;
	margin-top: 20px;
}


ul#navigazione 
{
	float:none;
	margin: 0;	
	padding: 15px 10px 30px 10px;
	list-style: none;
	width:350px;
	border:2px solid black;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	height: 1px;
	background-color: #D8D8D8;
}

se imposto i tre float: left; e margin-left: 190px; su container-visualizza, centro tutto alla perfezione e il bordo è corretto.

Come centrare senza l'uso di questo margin?

**gra-fichetto** · 07-12-2007, 10:49

la pagina HTML

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="copy1.css" type="text/css">
    </head>
    <body>
    <div id="container-visualizza">
        <ul id="navigazione">
		[*]Inserisci
		[*]Ricerca
		[*]Visualizza tutti
    	[/list]
        <div id="colonna-sinistra-visualizzazione">
    		<form action="visualizza.php" name="cancella" method="post">
	       	  	

	       	  	ATTENZIONE: la cancellazione degli articoli &egrave; IRREVERSIBILE
				<input type="submit" name="submit" value="Cancella colture selezionate"> 
			</form>        
    	</div>
    </div>
	</body>
    </html>

il CSS

codice:

*{
	margin: 0;
	padding: 0
}

body
{
	font-family: arial,sans-serif;
	font-size: 12px;
	text-align: center;
}


#container-visualizza{
	width:800px;
	padding: 5px;
	margin: 10px auto;
	padding-bottom: 10px;
	background :#FAFAFA;
	border: 1px solid #000;
	text-align: left;
}

#colonna-sinistra-visualizzazione{
	width: 790px;
	padding: 2px;
	text-align: center;
}
ul#navigazione {
	padding: 15px 10px 30px 10px;
	list-style: none;
	width: 27em;
	border: 2px solid black;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	height: 1px;
	background-color: #D8D8D8;
}

ul#navigazione li{
	display: inline;
	margin: 0;
	padding: 0;	
}

ul#navigazione li a {
	margin: 2px 4px 2px 2px;
	padding: 2px 20px 2px 20px;
	color: #000;
	text-decoration: none;
}

ul#navigazione li a:hover, ul#navigazione a.selected{ 
	background: #000;
	color: #FFF
}

**blekm** · 07-12-2007, 19:01

grazie.

Discussione: bordo che contenuto che cambia a seconda del float

Strumenti discussione

Ricerca discussione

Visualizza

bordo che cambia sul sito a seconda del float

Re: bordo che cambia sul sito a seconda del float

Re: Re: bordo che cambia sul sito a seconda del float

Permessi di invio