|
|||||||
|
|
|
![]() |
|
|
Strumenti |
|
|
#1 |
|
Member
Iscritto dal: Jul 2009
Messaggi: 210
|
[HTML-CSS] Centrare testo div float:left
Sera,
sto realizzando un template e ahimè mi sono impuntato su un effetto che voglio ottenere. Avendo uno sfondo "patternizzato" mi piacerebbe creare dei div semi-trasparenti. Fin qui tutto ok, ma ho anche intenzione di smussare i due angoli superiori del div. Per questo ho creato le due immagini con i bordi smussati. Nella pagina uso una cosa del tipo: Codice HTML:
<div id="container"> <div id="divider_left"> </div> <div id="text_container"> Qualcosa scritto qui... </div> <div id="divider_right"> </div> </div> Il mio problema è quindi centrare il testo "Qualcosa scritto qui...". Su firefox 3 ho trovato un piccolo escamotage (quasi per caso) usando la proprietà css (su text_container) "display: block;" ma su IE ovviamente non funziona. Inoltre stò cercando di rendere il tutto più cross-browser possibile, ma dato che tutti e tre gli elementi (per essere visualizzati tutti sulla stessa linea) usano la proprietà float, il div centrale non può avere la dichiarazione "width:100%" altrimenti si prende tutta la linea, quindi ho dovuto dichiarare manualmente in pixel la larghezza, e tra firefox3 e ie8 già ho dovuto modificarla (altrimenti mi rimaneva a destra una spaziatura). Esiste un modo più portabile per fare questo? Per chiarici l'effetto che vorrei ottenere in questo modo è simile a quello della decorazione superiore (barra) delle finesre di mac (con gli angoli superiori smussati). E se già ho questo problemi con ie8 e ff3, non oso immaginare aggiungere il supporto per safari, opera, ff2 e ie7. Il sito non è un notiziario ne altro, una opera di pura fantasia, quindi non ho scrupoli a dire agli utenti che vengono con browser più vecchi "non è ora di aggiornare il browser?" Spero che qualcuno sappia aiutarmi :s Intanto io continuo a creare le sezioni css separate per ff3 e ie8. Grazie! [EDIT] Volevo aggiungere per chi ci lavora in mezzo, o comunque ha cognizione di causa per rispondere: quanto senso ha ancora considerare tra i browser ie6, safari 2 e opera 7? Insomma quelli più vecchiotti...
__________________
La disumanità del computer sta nel fatto che, una volta programmato e messo in funzione, si comporta in maniera perfettamente onesta.
Isaac Asimov Ultima modifica di Y3PP4 : 16-09-2009 alle 20:13. |
|
|
|
|
|
#2 | |
|
Junior Member
Iscritto dal: Sep 2009
Messaggi: 15
|
Potresti gentilmente allegare la parte dei CSS che interessa? Tanto per capire meglio lo schema.
Hai provato con "text-align: center;" insieme con "margin: 0 auto;"? Queste sono le prime possibili soluzioni per allineare un testo... però se avessi in mano un abbozzo di CSS, potrei far delle prove. Ti dico già che IE6 supporta solo una parte dei CSS 1.0 (quindi gli elementi introdotti in CSS 2.0 e CSS 2.1 li puoi anche tralasciare). Se il problema è causato da "float:left;" (brutto soggetto il float...)... prova con: left: 50%; Quote:
Ciao. Ultima modifica di Bezelis : 16-09-2009 alle 23:20. |
|
|
|
|
|
|
#3 | |
|
Member
Iscritto dal: Jul 2009
Messaggi: 210
|
Grazie mille per la risposta
Quote:
Questo il CSS che uso su IE ( prima della modifica di float con left -il cui risultato lo espongo tra poco ) Codice HTML:
#container{
margin-left: 320px;
margin-right: 40px;
width: auto;
height: 29px;
}
#text_container{
float: left;
text-align: center;
font-size: 20px;
font-weight: bold;
padding-bottom: 5px;
background-image: url('../images/window_title_rp.png');
background-repeat: repeat-x;
width: 648px; // per via del float ho dovuto aggiungerlo manualmente
//e mi causa molti problemi da browser a browser
}
#divider_left{
background-image: url('../images/window_title_sx.png');
width: 6px;
height: 29px;
float: left;
}
#divider_right{
background-image: url('../images/window_title_dx.png');
width: 6px; // le dimensioni le ho impostate perchè il div è vuoto
height: 29px; // altrimenti non si vedrebbe lo sfondo (bordo smussato)
float: left;
}
Codice HTML:
// il resto è tutto uguale a quello di IE
#text_container{
float: left;
font-size: 20px;
font-weight: bold;
padding-bottom: 5px;
text-align: center;
background-image: url('../images/window_title_rp.png');
background-repeat: repeat-x;
width: 652px; // idem con IE. Per via del float ho dovuto assegnare i px
display: block; // grazie a questo il testo mi viene allineato correttamente
// al centro. Idem con safari 4, ma il problema è sempre il
// width... su ogni browser deve essere diverso...
}
Considerando che dovrò usarlo rimuovendo tutti i parametri usati col float left, il testo viene centrato correttamente, ma se uso width: 100% lo sfondo del text_container, passa sotto divider_left (ed essendo semi trasparenti si vede un colore più marcato, andando a eliminare in questo modo l'effetto smussatura, dato che ci si piazza sotto). Inoltre in qualunque caso mi butta a capo divider_right. (anche riducendo la larghezza quel divider mi rimane a capo). Se non altro l'effetto è lo stesso su IE8 e su FF3. Comunque eccoti uno screen (tanto l'effetto è uguale su ambe due i browser, anche se i parametri width del text_container sono diversi) dell'effetto su FF3 con questi parametri CSS: Codice HTML:
#text_container{
left: 50%;
font-size: 20px;
font-weight: bold;
padding-bottom: 5px;
text-align: center;
background-image: url('../images/window_title_rp.png');
background-repeat: repeat-x;
width: 652px;
//display: block;
margin: 0 auto;
}
Codice HTML:
#title_text{
left: 50%;
text-align: center;
font-size: 20px;
font-weight: bold;
padding-bottom: 5px;
background-image: url('../images/window_title_rp.png');
background-repeat: repeat-x;
width: 648px;
margin: 0 auto;
}
![]() La scritta body si trova in un div esterno a "container" Codice HTML:
<div id="container"> <div id="divider_left"> </div> <div id="text_container"> Qualcosa scritto qui... </div> <div id="divider_right"> </div> <div id="body"> body </div> </div> Riguardo ai vecchi browser, uhm. Non è il mio caso, è più un sito "divertimento", nel senso che le persone ci vanno cosi per svago, ne per notizie ne per altro. Se poi la gente ci vuol navigare dall'ufficio... Grazie ancora, ciao!
__________________
La disumanità del computer sta nel fatto che, una volta programmato e messo in funzione, si comporta in maniera perfettamente onesta.
Isaac Asimov |
|
|
|
|
|
|
#4 |
|
Junior Member
Iscritto dal: Sep 2009
Messaggi: 15
|
Il problema è sorto a causa dei soliti float. Infatti il verbo inglese "to float" (da non confondere con i numeri in virgola mobile dei linguaggi di programmazione) significa "fluttuare, galleggiare". Impostando un float, che sia a sinistra, a destra o da entrambi le parti, si dice al browser (sperando che un browser stupido come IE6 capisca) di fluttuare sopra la DIV in cui esso è definito. Il suo effetto è quindi quello di spostare tutto il resto del contenuto come se il float fosse una barriera. Come risolvere allora? Esistono delle tecniche studiate apposta per risolvere il problema, ossia annullare il float (clearing float). Una di queste tecniche è quella di usare la seguente parolina chiave:
Codice:
clear: both; /* per annullare sia il float sinistro sia quello destro */ clear: left; /* per annullare il float sinistro */ clear: right; /* per annullare il float destro */ Di solito i float si utilizzano nei siti per creare delle colonne (un menu e uno spazio destinato al corpo del sito). Il fatto che tra i due float ci sia un terzo incomodo... beh, ciò complica le cose. Oltre ad annullare i float, ho provato a sbloccare la situazione impostando una lunghezza alla DIV centrale e assegnando un'altezza della linea in cui sta il testo (pari all'altezza della DIV). Non è proprio da manuale... però è l'unica cosa che funziona. Altrimenti dovresti far intervenire un linguaggio di programmazione server-based come PHP, ASP, ecc. Ma non mi sembra il caso. L'altezza del carattere (per così dire) si imposta con la seguente parola chiave: Codice:
line-height: npx; Codice:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="it" />
<meta name="description" content="Descrizione sito" />
<meta name="keywords" content="..." />
<title>Problema di allineamento</title>
<style type="text/css">
div#container {border: 5px solid red; width: 1000px; margin: 0 auto;}
div#divider_left {border: 5px solid blue; height: 50px; width: 30px; float: left;}
div#divider_right {border: 5px solid green; height: 50px; width: 30px; float: right;}
div#text_container {border: 5px solid orange; text-align: center; float: left; width: 910px; height: 50px; line-height: 50px;}
.clear {clear: both;}
</style>
</head>
<body>
<div id="container">
<div id="divider_left"></div>
<div id="text_container">
Paragrafo
</div>
<div id="divider_right"></div>
<div class="clear"></div>
</div>
</body>
</html>
E chi l'ha detto che tutti stiano al lavoro per... lavorare? Ultima modifica di Bezelis : 17-09-2009 alle 13:24. |
|
|
|
|
|
#5 |
|
Junior Member
Iscritto dal: Sep 2009
Messaggi: 15
|
Ah, se la compatibilità la vuoi con IE6, mi son dimenticato che XHTML non è supportato. Basta inserire il DOCTYPE di HTML 4.01.
Se il problema non è risolto oppure se non ti piace come è stato risolto, sono disponibile a far altre prove. Un altro modo per sistemare l'intestazione del sito (a discapito della compatibilità con IE6), potrebbe essere quello di utilizzare z-index (un valore maggiore equivale al livello più superficiale). Se alla <div id="text_container"> imposti uno z-index più elevato rispetto alle altre <div>, quest'ultima sarà in primo piano. http://www.w3schools.com/Css/pr_pos_z-index.asp Saluti. Ultima modifica di Bezelis : 17-09-2009 alle 14:24. |
|
|
|
|
|
#6 | ||||||
|
Member
Iscritto dal: Jul 2009
Messaggi: 210
|
Grazie mille per la disponibiltà!
Riguardo il clearing float, nel mio caso "visivamente" non risolve nulla, poichè devo dichiarare comunque staticamente la larghezza del div, ma nel codice che mi hai passato son riuscito a capirne il significato. Senza usare clear il div contenitore rimane "appiattito" mentre gli altri sono espansi (come dicevi giustamente "fluttuano"), mentre così tutto è al suo posto (compresa la dimensione del div contenitore che si espande per contenere tutti i suoi div. In questo modo mi torna chiaro perchè spesso coi float, anche se usavo dei div "contenitori" per decidere come posizionare il contenuto senza doverlo fare per ogni div, dovevo usare valori diversi da quelli necessari per i singoli float. Per sicurezza quindi lo lascio nei css, dato che non causa effetti negativi, ma anzi mi aiuta a tenere presente le distanze dalla fine dei div che effettivamente visualizzo. Ti ringrazio anche per il line-height che finalmente mi risolve quel fastidioso problema del testo non centrato orizzontalmente. Riguardo al problema del cross-browsing per la dimensione del text_container mi è venuto un barlume (dato che su FF mi rimaneva una strisciolina "vuota" cioè senza lo sfondo semi-trasparente), ovvero dichiarare la larghezza fissa del div container, pari alla somma delle larghezze di text_container + i due dividers, tenendoli tutti "appiccicati". In questo modo noto che mi aumenta un po' il margine destro, ma non mi importa dato che si tratta di 5px. Mi è solo sfuggito il metodo con cui ho risolto il fatto che IE mi teneva tutto allineato a sinistra per via del float: left... probabilmente deve aver risolto la dimensione fissa del div... :s Quote:
Io per sicurezza li metto sempre (non eccedo come molti siti che usano tutti i meta disponibili in stile anni 90, ma i più classici keywords, http-equiv=Content-Type, lang, description e se mi servono uso Author e Copyright più che altro per renderli visibili quando si guardano le "informazioni sulla pagina" tramite i browser. Quote:
Comunque mai usati. Più che altro cerco di rispettare dei consigli che ebbi modo di leggere su un sito che tratta di SEO. Ovvero mettere tra le prime keywords le parole che più servono per descrivere il sito e i servizi, usare un titolo confacente alla descrizione del sito stesso, e cercarvi di includere le keyword di maggiore interesse (non mi metto a fare poemi, ma per esempio anzi che mettere solo "Ditta Vattelapesca" ci metto "Ditta Vattelapesca - Fornitura questo e quello". Per il resto mi affido alla bontà dei motori di ricerca e all'enfasi del contenuto della pagina -già anche io cerco di rispettare il cosiddetto web semantico- Quote:
Quote:
Quote:
Quote:
Buona giornata! [EDIT] Dimenticavo... almeno adesso ho un CSS unico Anche se a furia di numerosi test, non sono ben certo di chi abbia fatto cosa :s (non in tutto, ma magari mi conviene rileggermeli poi questi CSS) farò chiarezza appena torno da una commissione
__________________
La disumanità del computer sta nel fatto che, una volta programmato e messo in funzione, si comporta in maniera perfettamente onesta.
Isaac Asimov Ultima modifica di Y3PP4 : 17-09-2009 alle 16:55. |
||||||
|
|
|
|
|
#7 |
|
Junior Member
Iscritto dal: Sep 2009
Messaggi: 15
|
Prego, prego. Anche se non ti ho risolto niente.
Comunque, per verificare velocemente la compatibilità senza dover avere 100 browsers installati sul PC, potrebbe esserti utile questo bel sito: http://browsershots.org/ To position --> ...zionare. Nuuuu! Ultima modifica di Bezelis : 17-09-2009 alle 17:51. |
|
|
|
|
|
#8 | ||
|
Member
Iscritto dal: Jul 2009
Messaggi: 210
|
Giammai! Mi hai aiutato parecchio, anche un consiglio, per te semplice, se mi era sconosciuto (tipo il line-height), è un aiuto che mi dai.
Quote:
Quote:
__________________
La disumanità del computer sta nel fatto che, una volta programmato e messo in funzione, si comporta in maniera perfettamente onesta.
Isaac Asimov |
||
|
|
|
|
|
#9 | |
|
Junior Member
Iscritto dal: Sep 2009
Messaggi: 15
|
Quote:
Off Topic: Niente, non te la prendere a male. Due anni fa discutevo con dei miei colleghi sull'influenza che ha l'informatica/inglese nel linguaggio moderno e sui meccanismi che fanno nascere dei neologismi. Parlavamo anche della parola che hai citato. E in effetti... Vedi, fino a due anni fa il termine "posizionare" non esisteva nella lingua italiana. Alcune persone (penso del ramo della programmazione/elettronica perché utilizzano spesso termini inglesi come se fossero italiani... ad esempio "luppare", da "to loop", iterare.) che usavano abitualmente il verbo inglese "to position" hanno cominciato (non sò per quale motivo, dato che la lingua italiana è molto ricca di sinonimi... ad esempio "collocare, mettere, disporre, ...") a prendere il verbo inglese e a usarlo "italianizzandolo" nella forma "posizionare". Adesso tale termine è descritto da qualunque dizionario. Altri neologismi che stanno prendendo piede sono ad esempio "polipo" (per indicare il "polpo"... invece il "polipo" è l'animaletto che forma il corallo oppure un tumore benigno... polipi al naso ad esempio). Oppure "quant'altro" (espressione secondo me prima di significato per dire eccetera...), "arancio" per indicare il frutto al posto dell'albero. Pian piano queste parole entreranno a far parte della lingua italiana. Io non me sono mai capacitato sul perché nascano questi neologismi se l'attuale lingua italiana è molto ricca (posso comprendere termini inglesi come "hardware" e "software", che non hanno proprio un corrispondente italiano) ma fa niente. Non è certamente nostra colpa, ma è la normale evoluzione della lingua. Quindi ti ho citato (quotato... to quote Saluti, Bezelis (Angelo) Ultima modifica di Bezelis : 17-09-2009 alle 21:47. |
|
|
|
|
|
|
#10 | ||||||||||
|
Member
Iscritto dal: Jul 2009
Messaggi: 210
|
No no, ci mancherebbe, era solo per sottolineare che non riuscivo a capire quanto avevi scritto
Quote:
Quote:
Quote:
Quote:
Quote:
Quote:
Quote:
Quote:
Quote:
Quote:
P.S. che maleducato, non mi sono accorto che sei nuovo del forum!?! Nel caso, voglio essere il primo a darti il benvenuto
__________________
La disumanità del computer sta nel fatto che, una volta programmato e messo in funzione, si comporta in maniera perfettamente onesta.
Isaac Asimov |
||||||||||
|
|
|
|
|
#11 | |||||||
|
Junior Member
Iscritto dal: Sep 2009
Messaggi: 15
|
Quote:
Quote:
Quote:
Quote:
Quote:
Quote:
Ultima modifica di Bezelis : 18-09-2009 alle 11:02. |
|||||||
|
|
|
|
|
#12 | ||||||
|
Member
Iscritto dal: Jul 2009
Messaggi: 210
|
Quote:
Quote:
Quote:
Soprattutto riguardo l'overquoting ![]() Quote:
Quote:
Quote:
Ma ben 5 elementi float!?! Se non coprono l'intera pagina -a mo' di tutorial- è una vera pazzia :s. Io mi trovo in difficoltà con tre, figuriamoci cinque ![]() Beh, questo è l'inizio di una profiqua (spero per entrambi) collaborazione Buona serata.
__________________
La disumanità del computer sta nel fatto che, una volta programmato e messo in funzione, si comporta in maniera perfettamente onesta.
Isaac Asimov |
||||||
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 09:30.























