Piccolo Dubbio

emanuelevt · 25 Gen 2010

Allora ragazzi considerando questo codice nel css

Codice:

*{margin:0;
padding:0;}
#contenitore{
position:relative;
width:1700px;
border:1px solid red;
}

<!--INIZIO LOGO--->

#contenitore #logo{
float:left;
clear:both;
widht:100%;
border:1px solid green;
}

#contenitore #logo #a{float:left;
width:15%;
border:1px solid yellow;
margin-left:0;}

#contenitore #logo #b{float:right;
width:15%;
border:1px solid orange;
margin-right:0;}


#contenitore #logo #link{
float:left;
width:100%;
clear:both;
border:1px solid red;
}
<!--FINE LOGO--->

#corpo1{
float:left;
width:100%;
clear:both;
border:5px solid silver;
}

e questo nell'html

Codice:

<body>

<div align='center'>

<div id='contenitore'>
		<!--INIZIO LOGO-->
		<div id='logo'>
			<div id='a'>a</div>
			<div id='b'>b</div>
			<div id='link'>link</div>
		</div>
		<!--FINE LOGO-->
		
		<!--INIZIO CORPO PARTE1-->
		<div id='corpo1'>Prova</div>
		<!--FINE CORPO PARTE 1-->
		
</div><!--fine contenitore--->
</div><!--fine centrato--->
</body>

perchè la scritta prova mi compare in linea con "a" e "b" se questi appartengono al logo il quale ha un clear:both? come faccio a far apparire prova al di sotto del Logo?

borgo italia · 26 Gen 2010

ciao
prova a dare al #logo

clear:left;
o
clear:right;

MarcoGrazia · 27 Gen 2010

L'errore tuo è stato quello di inserire il clear both all'interno dello stessa proprietà che contiene anche il float, così si annullano a vicenda.
Prova così invece:

Codice:

*{margin:0;
padding:0;
text-align:center;
}
.ripristina{clear:both}
#contenitore{
width:1700px;
border:1px solid red;
margin: 0 auto;
text-align:left;
}
<!--INIZIO LOGO--->

#logo{
widht:100%;
border:1px solid green;
}

#a{
float:left;
width:15%;
border:1px solid yellow;
margin-left:0;}

#b{float:right;
width:15%;
border:1px solid orange;
margin-right:0;}


#link{
width:100%;
clear:both;
border:1px solid red;
}
<!--FINE LOGO--->

#corpo1{
width:100%;
clear:both;
border:5px solid silver;
}

html

Codice:

<body>

<div id='contenitore'>
		<!--INIZIO LOGO-->
		<div id='logo'>
			<span id='a'>a</span>
			<span id='b'>b</span>
			<div id='link'>link</div>
		</div>
		<!--FINE LOGO-->
		
		<!--INIZIO CORPO PARTE1-->
		<div id='corpo1' class="ripristina">Prova</div>
		<!--FINE CORPO PARTE 1-->
		
</div><!--fine contenitore--->
</body>

In questo modo usi una classe separata che contiene il clear da mettere dove serve.
Non l'ho provato quindi sarà sicuramente da aggiustare, immagino che a e b dovrebbero essere degli header giusto? Quindi in finale non usare degli span o dei div ma due elementi h1 e h2, a cui però dai display: inline se vuoi che uno vada a sinistra e uno a destra nella stessa riga, oppure metti h1 con tex-align left e dentro uno span con float right, vedi tu, l'abuso di float è nocivo

Nel secondo caso semplicemente si fa così: <h1>bla bla<span>bli bli</span></h1>

Cerca

Cerca

Piccolo Dubbio

emanuelevt

Utente Attivo

borgo italia

Super Moderatore

MarcoGrazia

Utente Attivo

Discussioni simili