Back to top

Autore Topic: [RISOLTO]allineamento orizzontale e verticale  (Letto 5032 volte)

Offline der kaiser

  • Nuovo arrivato
  • *
  • Post: 38
    • Mostra profilo
[RISOLTO]allineamento orizzontale e verticale
« il: 25 Set 2013, 16:12:23 »
Salve a tutti, chiedo il vostro aiuto per un "problema" che mi sta creando qualche grattacapo.
Il sito di riferimento è questo: http://colpani.altervista.org/
Ho bisogno di allineare l'immagine con la scritta colpani a centro pagina: ebbene, in orizzontale lo è, tuttavia non riesco a sistemarla nello stesso modo anche in verticale. Qualcuno può aiutarmi?
« Ultima modifica: 04 Ott 2013, 11:31:28 da der kaiser »

Offline giovi

  • Instancabile
  • ******
  • Post: 9835
  • Sesso: Maschio
    • Mostra profilo
Re:allineamento orizzontale e verticale
« Risposta #1 il: 25 Set 2013, 17:24:32 »
ciao, è una cosa che non dipende da Joomla e ci sono più modi di attuarla. Un riferimento: http://www.html.it/pag/18971/centrare-orizzontalmente-e-verticalmente-un-div/

Offline der kaiser

  • Nuovo arrivato
  • *
  • Post: 38
    • Mostra profilo
Re:allineamento orizzontale e verticale
« Risposta #2 il: 27 Set 2013, 12:05:16 »
Dopo vari tentativi, non ne sono venuto a capo :(
Ho aggiunto il codice nel mio template.css (template/my_template/css/template.css).
Se lo richiamo nell'articolo usando l'editor jce, inserendo dall'editor Html (click su "toggle editor"), quando vado nell'editor normale (con le funzioni di formattazione, scusate la terminologia non precisa) mi mostra solo un quadrato verde (al momento ho fatto le prove con il codice base per verificare l'effettivo allineamento) e se scrivo del testo non me lo visualizza (lo vedo però se torno nell'editor Html).
Per di più, nella Home dove dovrebbe mostrare il quadrato verde centrato più il testo di prova, visualizza solo il testo di prova in alto a sinistra.

Il codice inserito nel css è questo:
Codice: [Seleziona]
div#verticale {
    width: 200px;
    height: 200px;
    background: #25FF00;
 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

E nell'articolo l'ho richiamato così:
Codice: [Seleziona]
<div id="verticale"><>
Ho provato a centrare l'immagine anche con
Codice: [Seleziona]
<div align="CENTER"><>, ma non funziona.


Evidentemente non ho abbastanza conoscenze di css e Html, ma cosa sbaglio?  :-[
« Ultima modifica: 27 Set 2013, 12:07:10 da der kaiser »

Offline giovi

  • Instancabile
  • ******
  • Post: 9835
  • Sesso: Maschio
    • Mostra profilo
Re:allineamento orizzontale e verticale
« Risposta #3 il: 27 Set 2013, 23:10:34 »
anche se non dipende da Joomla! possiamo provare a darti una mano ma devi fornirci un link alla pagina!  :)

Offline der kaiser

  • Nuovo arrivato
  • *
  • Post: 38
    • Mostra profilo
Re:allineamento orizzontale e verticale
« Risposta #4 il: 28 Set 2013, 18:03:19 »
Visto che avrò tempo, approfitto per capire come allineare in questi giorni.

Dunque, ho letto la discussione che mi hai linkato.
Ho inserito nel mio css questo codice
Codice: [Seleziona]
div#verticale {
    width: 200px;
    height: 200px;
    background: #25FF00;
 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;}

Nell'articolo joomla ho poi inserito
Codice: [Seleziona]
<div id="verticale">
<p>verticale</p><>

Nell'articolo quindi vedo:
E l'immagine è perfettamente centrata.

Ma nella Home risulta questo:
La Home è volutamente vuota al momento; ciò che non capisco è perchè nell'articolo il div risulti centrato, mentre nella Home si vede solo il testo contenuto nel div (cui tra l'altro manca il colore verde di sfondo), perdipiù nel classico allineamento a sinistra.

Il link alla pagina incriminata è questo: http://colpani.altervista.org/
Il template che sto usando è qua: http://colpani.altervista.org/templates/alecolpabianco4/css/template.css
« Ultima modifica: 28 Set 2013, 18:06:23 da der kaiser »

Offline giovi

  • Instancabile
  • ******
  • Post: 9835
  • Sesso: Maschio
    • Mostra profilo
Re:allineamento orizzontale e verticale
« Risposta #5 il: 30 Set 2013, 21:51:41 »
nell'editor vedi tutto centrato perchè l'editor è stato ben relizzato con i div menter il tuo template è stato evidentemente generato con tools esterni che lo hanno riempito di divs, diciamolo, a casaccio. Se l'intenzione è quella di creare una sorta di splash page centrata, all'interno del body non deve esserci niente fuorchè il contenuto del componente. Es.
Codice: [Seleziona]
<body>
    <jdoc:include type="component" />
</body>

Offline der kaiser

  • Nuovo arrivato
  • *
  • Post: 38
    • Mostra profilo
Re:allineamento orizzontale e verticale
« Risposta #6 il: 02 Ott 2013, 16:20:08 »
Grazie, ho fatto altri tentativi ... nel body (templates/my_templates/index.php) ho eliminato tutto quello che c'era e ho sostituito con
Codice: [Seleziona]
<div id="verticale"><>Il codice del div verticale è il seguente:
Codice: [Seleziona]
div#verticale {
    width: 1221px;
    height: 200px;


    background: #25FF00;
 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -610px;
}

Nell'editor articolo il box è centrato (a scanso di equivoci sottolineo che ho sempre inserito div="verticale":

Se il codice nell'articolo funziona come deve funzionare, sarà lo stesso nella Home con il codice inserito nell'index.php? No ...
 
Il box effettivamente è centrato, ma non è della grandezza giusta ... dovrebbe essere un 1221x200 e invece è 200x200
« Ultima modifica: 02 Ott 2013, 16:22:47 da der kaiser »

Offline giovi

  • Instancabile
  • ******
  • Post: 9835
  • Sesso: Maschio
    • Mostra profilo
Re:allineamento orizzontale e verticale
« Risposta #7 il: 03 Ott 2013, 21:47:11 »
ma è il div con all'interno l'immagine?
A me sembra centrato e della grandezza giusta! Prende le dimensioni dell'immagine che c'è dentro

Offline der kaiser

  • Nuovo arrivato
  • *
  • Post: 38
    • Mostra profilo
Re:allineamento orizzontale e verticale
« Risposta #8 il: 04 Ott 2013, 11:05:09 »
Si grazie a ciò che mi hai linkato sono riuscito  :)

Il problema è che nonostante cancellassi cache e cookie non riuscivo a vedere la pagina aggiornata, ieri quando ho ripreso in mano il sito ho constatato che effettivamente era tutto funzionante.
Grazie! ;)

Offline $Red

  • Team Joomla.it
  • Instancabile
  • *******
  • Post: 5351
  • "Bastard Inside"
    • Mostra profilo
Re:allineamento orizzontale e verticale
« Risposta #9 il: 04 Ott 2013, 11:19:05 »
Il problema è che nonostante cancellassi cache e cookie non riuscivo a vedere la pagina aggiornata, ieri quando ho ripreso in mano il sito ho constatato che effettivamente era tutto funzionante.
Grazie! ;)
ciao, questo ti succede perche hai CloudFlare attivo, se vuoi utilizzare quel servizio quando effettui queste operazioni nel pannello di controllo altervista altersito/cloudflare metti in modalità sviluppo altrimenti quando aggiorni la pagina per visualizzare le modifiche cloudflare continua a mostrarti quella che ha in cache

Offline der kaiser

  • Nuovo arrivato
  • *
  • Post: 38
    • Mostra profilo
Re:allineamento orizzontale e verticale
« Risposta #10 il: 04 Ott 2013, 11:29:48 »
Ti ringrazio, non ne ero a conoscenza :)

 



Web Design Bolzano Kreatif