Ciao,
Premessa: quando posti del codice sul forum, sarebbe opportuno che tu usassi gli appositi tag di formattazione [ code ] [ /code ]. Grazie.
- Nel tuo codice c'è qualche errore.
codice:
<title>Prova allineamento <div></title>
Vedo un tag <div> in più.
E' importante assicurarsi che tutto il codice sia sintatticamente corretto prima di impostare e testare il css. I vari browser, nel tentare di interpretare gli errori, possono comportarsi molto differentemente tra loro, ottenendo così un risultato sempre falsato.
- E' raccomandato (direi necessario) dichiarare il doctype nei propri documenti html. Il fatto di non inserire la DTD può portare, anche in questo caso, ad avere dei risultati differenti tra i vari browser.
- Il float, più precisamente, toglie l'elemento dal normale flusso del documento e lo butta a destra o sinistra. Il risultato che hai ottenuto è esattamente quello. Nel tuo caso, invece, dovrai piuttosto inserire, all'interno del contenitore, il div etichetta e specificare il margine sinistro con un valore negativo in modo che esca fuori oltre il lato sinistro del contenitore. Il float ti serve, ma in questo caso lo impostiamo sempre a sinistra, cioè dalla parte da cui vogliamo che sporga l'etichetta.
Ecco il codice rivisto:
codice:
<!DOCTYPE HTML>
<head>
<title>Prova allineamento</title>
<style type="text/css">
div.contenitore{
color:#FFF;
background-color:#666;
width:800px;
height:1000px;
position:absolute;
right:0px;
left:0px;
padding:15px;
border:0px;
margin:0 auto
}
div.contenitore div.etichetta{
background-color: #FC0;
padding: 15px 15px 15px 15px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
width:120px;
margin-left:-165px;
float:left;
text-align:right
}
</style>
</head>
<body>
<div class="contenitore">
<div class="etichetta">Prova | Label</div>
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
<div class="etichetta">Label 2 quello che vuoi bla bla bla</div>
Lorem Ipsum 2
Lorem Ipsum 2
Lorem Ipsum 2
Lorem Ipsum 2
Lorem Ipsum 2
Lorem Ipsum 2
</div>
</body>
</html>
In rosso puoi notare che ho impostato il margine a -165px. Non è un valore a caso. Ho considerato infatti la distanza esatta che serviva per far "spostare" quell'elemento rispetto alla posizione in cui sarebbe dovuto essere normalmente. Esattamente è la somma della larghezza dell'etichetta (120px), più il padding dell'etichetta (che in questo caso è 30, cioè 15 a dx e 15 a sx) più il padding sinistro del div contenitore (cioè 15).
Il float, in questo caso, è necessario se vuoi impedire che il testo, contenuto nel div contenitore, tenga in considerazione lo spazio riferito all'altezza del div etichetta, ed evitare quindi che il testo si porti al di sotto di quest'ultimo.
Spero di esserti stato utile.
Rispondi quotando
