Autore Topic: Template beez: aggiungere una posizione top-image accanto al logo [risolto] (Letto 10423 volte)

queengab · « **il:** 20 Giu 2009, 14:01:41 »

Ciao a tutti,

ritonro sul forum per porvi un problema che non riesco a risolvere. Sto facendo un sito per una cooperativa sociale. Sto usando beez. Ho cambiato l'aspetto ma sopratutto vorrei inserire un div accanto al logo in cui inserire header image rotator. Pensavo fosse più semplice...

Ma sto avendo qualche grattacapo col css. Ho sistemato il nuovo div top-image all'interno di h1-id-logo prima della classe span header1.

A questo div top image ho dato una classe css così:
#top-image
{
   position:relative;
   top:-70px;
   left:350px;
   background:#fff;
   color:#000;
   width: 600px;
height:160px;
}

Il prblema però è che il logo e il div che dovrebbe essere affiancato va verso sotto. Potrei fare pure l'inverso posizionando il div prima dell'h1...

Come posso fare? Potete vedere le mie prove qui
http://gabweb.homepc.it/Joomla_risvolti

Fatemi sapere se volete vedere l'esempio così accendo lascio acceso il mio pc....

Grazie tante!
Gabriele

conti1 · « **Risposta #1 il:** 20 Giu 2009, 16:22:32 »

ciao
io non vedo il tuo css indicato a parte questo se vuoi allineare 2 div devi mettere nel css de di tutti e 2 gli id il comando

Codice: [Seleziona]

fload: left; altrimenti non si allineano .

queengab · « **Risposta #2 il:** 20 Giu 2009, 16:53:04 »

Ti ringrazio tanto per la risposta!

Adesso va un pochino meglio però ora la barra non so perchè ha comportamento strano rispetto alla content area.

riesci ad arrivare qui?
http://gabweb.homepc.it/Joomla_risvolti

C'è il sito in prova... Cmq ho costrutito un div in maniera tale da contenere logo e div con image rotator... I problemi adesso sono due:

1) La dicitura sotto il logo che è uno span class header 1 non prende più lo stile... Ed' è normalissimo però se io cambio l'id sul css mi scombina tutto e non so come agire
2) C'è troppo spazio tra la barra in bli e la parte content area perchè?

Grazie ancora!
Gabriele

conti1 · « **Risposta #3 il:** 20 Giu 2009, 17:02:43 »

prova in questo modo che la barra torna al suo posto

Codice: [Seleziona]

#prelogo {position.css (riga 149)
height:250px;<<<<<qui
width:800px;
}

queengab · « **Risposta #4 il:** 20 Giu 2009, 17:12:35 »

Grazie i tuoi consigli mi stanno salvando!!!

Posso chiederti un'ultima cosina?
Perchè secondo te l'intestazione cooperativa sociale che è lo span class header 1non prende più lo stile? Se lo inserisco all'interno del div prelogo mi va sotto la barra blu... Però ipoteticamente dovrebbe stare sopra il menu top...
Ti giuro impazzisco!!!

Comunque sei stato davvero prezioso!

Grazie
Gab

conti1 · « **Risposta #5 il:** 20 Giu 2009, 17:16:50 »

come hai dato lo style nel nuovo div?
prova a mettere xhtml
ora io non la vedo

queengab · « **Risposta #6 il:** 21 Giu 2009, 02:43:53 »

Ti devo una cena!!! Spero di aver messo tutto apposto (ancora devo controllare su ie) tranne un piccolo dettaglio la riga dell'intestazione ha due px di margine sul top menu... Se ci fai caso il div top menu è sfaksato di due px verso sotto e non riesco a capire come meterlo su. Ho giocato col padding e col margin sia di uno che dell'all'altro m senza risultato.Com,uqneu è un dettaglio. Domani con la calma... Scriverò due righe su come ho fatto se per caso servisse a qualcuno in futuro! Grazie! Gab Buona notte

conti1 · « **Risposta #7 il:** 21 Giu 2009, 10:29:01 »

non si vede il sito

queengab · « **Risposta #8 il:** 21 Giu 2009, 11:45:00 »

Ho riacceso il pc... pardon

conti1 · « **Risposta #9 il:** 21 Giu 2009, 12:18:43 »

ciao x sistemare lo scalino che si vede
qui

Codice: [Seleziona]

#header ul {layout.css (riga 229)
background:#FFFFFF none repeat scroll 0 0;
display:block;
margin:-7px 0 0;<<<<qui
padding:5px 0;
text-align:right;
}

queengab · « **Risposta #10 il:** 21 Giu 2009, 12:30:20 »

Eh mi scende sotto invece la barra blu... però sopra rimane lo stesso... non so magari trovo na maniera elegante per evitare il tutto....

ps: secondo te è il caos di rimettere la cornicetta sul div all e fare uno sfondino magari sfumato?

gab

conti1 · « **Risposta #11 il:** 21 Giu 2009, 12:45:15 »

io con firefox la visone e ottima in ie7 dietro il menu sinistro hai una scritta

queengab · « **Risposta #12 il:** 21 Giu 2009, 12:46:48 »

ah! porca miseria!
come risolvo?

conti1 · « **Risposta #13 il:** 21 Giu 2009, 12:53:34 »

bella domanda non si riesce a leggere neppure cosa c'è scritto
fai una cosa disattiva il menu sinistro che vedo che c'è scritto

forse ti ripete la scritta risvolti ......

queengab · « **Risposta #14 il:** 21 Giu 2009, 12:57:42 »

c'è scritto risvolti... penso che sia il div con la scritta sotto il logo che non so perchè ie mette pure sotto...
Mannaccia a explorer!!!

Tu che ersione di firefox usi... Io lo scalino lo vedo sempre allo stesso modo... Però sono con Centos forse diepnde da quello...

conti1 · « **Risposta #15 il:** 21 Giu 2009, 13:28:32 »

ora la scritta in ie e sparita ma e tornato lo scalino
qui x toglere lo scalino

Codice: [Seleziona]

#breadcrumbs {layout.css (riga 325)
background:#171047 none repeat scroll 0 0;
color:#FFFFFF;
margin-top:4px;<<<<<qui
min-height:3em;
padding-top:0;
text-align:left;
}

firefox 3.0.11

queengab · « **Risposta #16 il:** 21 Giu 2009, 14:00:43 »

Adesso va bene! Grazie... Io adesso su ie vedo la scritta sociale in h1... chissà che cavolo si va a leggere quella porcheria di mircozoz!

Dai comunque me lo vedo con ie e iedevloper toolbar e risolvo... spero.

Grazie di tutto! A qusto punto penso di poter inserire il risolto! Hia visto che si vede un'immaginetta su? E il modulo header rotator!

Per tutti gli interessati ad inserire un banner e un'immagine accanto al logo di beez... io ho proceduto così:

1) create una nuova posizione nel file templatesdetails xml.

2) sulla parte header ho creato un ulteriore div per inscatolare logo e più div img. in questa maniera.
Se guardate, infatti, il codice originale è diverso.

2) <div id="all">

      <div id="header">
<div id=prelogo >
<div id="top-image"><jdoc:include type="modules" name="header" /> </div>
         <h1 id="logo">
            <img src="<?php echo $this->baseurl ?>/templates/beez/images/logo.gif" border="0" alt="<?php echo JText::_('risvolti'); ?>" width="300" height="180"/> </h1>
</div><div id="header1"><?php echo JText::_('Risvolti cooperativa sociale'); ?></div>

3) divertitevi con i css! Io ci sono stato mezza giornata. Può darsi che la parte span salti o non prenda più lo stile... Date ad ogni id uno stile preciso sul position.css

Se qualcuno ha bisogno contattatemi

Gabriele

conti1 · « **Risposta #17 il:** 21 Giu 2009, 16:07:57 »

fermo a dire risolto hai di nuovo la scritta dietro il menu principale

queengab · « **Risposta #18 il:** 21 Giu 2009, 16:14:26 »

dici su ie7... su ie6 è ancora peggio!!!

Adesso lo sto vedendo con la ie developer toolbar ma il mio portatile è una chiavica... Hai due minuti per darmi una mano?

conti1 · « **Risposta #19 il:** 21 Giu 2009, 16:40:40 »

scusa la mia domanda
xche hai messo questo id?

Codice: [Seleziona]

#prelogo {position.css (riga 151)
height:210px;
width:1000px;
}

che non serve secondo me?
guarda come ho fatto io in locale x fare una prova

Codice: [Seleziona]

	<div id="all">
		<div id="header">
                        <div id="logo1">
                        <img width="300" height="97" border="0" alt="Logo Beez, Three little Bees" src="/templates/beez/images/logo.gif"/>
              </div>
			<h1 id="logo">
				<img src="<?php echo $this->baseurl ?>/templates/beez/images/logo.gif" border="0" alt="<?php echo JText::_('Logo Beez, Three little Bees'); ?>" width="300" height="97" />

con aggiunta del suo css

Codice: [Seleziona]

#logo1{fload:left;}

------

vedo che stai tentando di sistemare
togliendo id che to chiesto ma se fai come o messo io devi togliere tutti i css che hai aggiunto prima altrimenti il template si sfasa come ora che hai un id #top-image
che non serve .
mio consiglio riparti da capo senza aver modifiche fatte nella parte logo e in 5 minuti te ne esci con il secondo logo senza problemi.

guarda sensa incasinare nulla con quello che to postato il secondo logo affiancato al primo

queengab · « **Risposta #20 il:** 21 Giu 2009, 17:03:36 »

Non va... l'altro div l'ho usato prorpio per contenere solo logo e immagine così da tenere separate la parte centrale con tutto l'header... Come mi hai suggerito la bara blu viene sparata in alto... e pure se aumento l'height... lo spazio non aumenta...

Comuqneu dai non ti vorrei farti perdere una giornata dietro un mio problema. Spero di rosolvere e di postare poi... Lo so che ho scelto la strada più complicata ma mi sembra la più netta...

Puoi spararmi una prova del tuo sito da qualche parte. Tieni presente che il css l'ho cambiato molto quindi sicuramente come mi dici tu è giusto però trovo difficoltà.

Grazie sei davvero prezioso! Se stai a Roma hai un cena assicurata!

conti1 · « **Risposta #21 il:** 21 Giu 2009, 17:08:23 »

te lo mandato in posta

queengab · « **Risposta #22 il:** 21 Giu 2009, 18:41:01 »

Ti ringrazio mille. La tua soluzione è ottima però comunque dovevo provare a vedere se alla fine riuscivo a rimettere tutto apposto con la mia versione... e penso di avercela fatta. Ho scaricato un emulatore di ie ea desso sia col 6 che col 7 si vede bene... Bisognava semplicemente (mica tanto c'ho mesos 2 ore a capirlo) spostare il div top image fuori dall'h1 altrimenti ie leggeva male l'istruzione. Oltretutto in questa maniera ho potuto dare margin-top positivo all'immagine (prima era -180 non si può vedere).

Ora è perfetto!

Grazie davvero... adesso penso di poter scrivere risolto!

Buona domenica
Gabriele

JohnBi · « **Risposta #23 il:** 22 Giu 2009, 10:14:53 »

Un ciao a tutti,
mi inserisco nella discussione in quanto sto tentando anch'io una cosa simile, ma senza ottenere l'effetto desiderato. Prendendo spunto dai Vs suggerimenti:

Nel file index.php ho aggiunto:
<body>
   <div id="all">
      <div id="header">

      <div id="logo1">
<img width="300" height="97" border="0" alt="Logo Beez, Three little Bees" src="/templates/beez/images/logoCopia.gif"/>
</div>

   <h1 id="logo">
   <img src="<?php echo $this->baseurl ?>/templates/beez/images/logo.gif" border="0" alt="<?php echo JText::_('Logo Beez, Three little Bees'); ?>" width="300" height="97" />

Poi nel file layout.css
#logo1{
   font-size:1em !important;
   font-weight:bold !important;
   position:relative;
   text-align:left;
   text-transform:none !important;
   z-index:0;
   margin-top:1em;
   fload:left;
}
Il risultato è:
#logo1 in alto a dx
#logo sotto a logo1 ma in basso a sx. Ma non affiancati come vorrei ottenere.

Mi potete dare qualche ulteriore indicazione in quanto sono proprio new new new...
Ciao e grazie
John

queengab · « **Risposta #24 il:** 22 Giu 2009, 18:32:12 »

prova a dare a logo1 un display block e vedi se affianca i due div... poi dai un text-align: left e dovresti avere l'immagine a sinistra... usi firebug e webdeveloper toolbar?

Se vuoi prova a fare come ho fatto io...
Io però ho creato un altro div che contiene logo e immagine a destra in maniera tale da tenere più ordinato.

Ognuno opta per una strada... hai visto qui? http://gabweb.homepc.it/Joomla_risvolti

vai con la webdeveloper toolbar e copia il codice...

Gabriele