Joomla.it Forum

Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => : lord.poeticus 15 Dec 2013, 19:18:55

: (RISOLTO) CSS per header e div main content modifiche
: lord.poeticus 15 Dec 2013, 19:18:55
Vorrei staccare l'header dal margine alto della pagina in modo che i pulsanti di login stiano nella parte sottostante all'header, nella parte grigia insomma.

Nel mio caso l'header è un'immagine: ho provato dal css a spostarlo in giù, ma l'unica cosa che si sposta è solo il pulsante di login e il logo.
Ho provato sia operando sui dati dell'header, sia su quelli della foto che fa da header, ma non riesco proprio a farla staccare.
Andando un po' fuori topic ma non tanto, vorrei ingrandire di poco il div main content, ossia la pagina bianca del sito: sicuramente c'è da aggiungere una voce nuova perchè con quelle esistenti riesco solo ad agire sul padding e anche cercando di allargare la pagina con position relative e left o right  - o + 20 px, riesco solo a spostarla ma non ad ingrandirla:
Vedo che sotto il div main content, c'è la shadow, che è un'immagine: pensavo magari dovessi eliminare la shadow che fa da contenitore: Insomma, ho le idee davvero confuse e da solo non riesco a cavarne piede.
Grazie a tutti per l'attenzione
: Re:CSS per header e div main content modifiche
: lord.poeticus 16 Dec 2013, 15:55:45
Ho provato a mettere un'altra immagine di sfondo come header ma rimane sempre incollata al margine alto.
Dovrei muovermi usando le posizioni: absolute, relative, fixed?
Mi servirebbe un aiutino.
Grazie
: Re:CSS per header e div main content modifiche
: giusebos 16 Dec 2013, 19:47:10
Mi servirebbe un aiutino.
a chi potrebbe aiutarti invece, un link al sito...
: Re:CSS per header e div main content modifiche
: lord.poeticus 16 Dec 2013, 20:56:30
Ops, avevo dimenticato il www e non appariva come link, scusate


: Re:CSS per header e div main content modifiche
: giusebos 16 Dec 2013, 21:01:21
aggiungi un margin-top come sotto

:
#header-w {
  margin-top: 10px;
  position: relative;
}
: Re:CSS per header e div main content modifiche
: lord.poeticus 16 Dec 2013, 21:12:45
Ho provato, ma si staccano solo i pulsanti di plug in.
A me interesserebbe che l'immagine si stacchi dal bordo e lasciare i pulsanti di plug in dove sono.
Vorrei che si vedesse lo spazio grigio del background dietro la foto dell'header
: Re:CSS per header e div main content modifiche
: lord.poeticus 17 Dec 2013, 01:13:02
devo aggiustare altre cose, comunque ho fatto delle prove e sembra funzioni facendo le seguenti modifiche:
elimare class background da ......body e risriverlo in div id=main  e sullo stile ho messo 32 px auto
: Re:CSS per header e div main content modifiche
: giusebos 17 Dec 2013, 13:56:19
se togli il link non so cosa analizzare con firebug, finchè non risolvi conviene tenerlo, almeno nella forma
tuodominio.it se non desideri indicizzazioni indesiderate.
: Re:CSS per header e div main content modifiche
: lord.poeticus 17 Dec 2013, 15:56:35
@giuse,
il link al sito è nel terzo messaggio che ho scritto, comunque lo riscrivo:
L'ho riaggiunto ieri stesso dopo averlo cancellato per un paio d'ore.
Ho fatto delle prove e son riuscito nell'intento anche se non ho salvato le modifiche:
lo spazio nella parte superiore l'ho creato facendo così:
ho eliminato class background dalla voce body e l'ho aggiunto alla voce div main e nella parte dello stile ho messo margin 32px auto.


Così l'immagine dell'header si è staccata.
Quello che non so ancora fare è allargare  il div main content, ossia il foglio bianco del sito diciamo; riesco a spostarlo, ma non ad ingrandirlo: mi servirebbe più grande per mettere dei banners un po' più larghi lateralmente.
: Re:CSS per header e div main content modifiche
: giusebos 17 Dec 2013, 17:11:50
queste le regole dove devi intervenire nella proprietà "width", quindi se vorrai aumentare di 100px la larghezza, aggiungerai 100px in più a tutte le varie dichiarazioni.
il file styles.css



:
#header {
  height: 198px;
  margin: 0 auto;
  position: relative;
  width: 980px;
}

.shadowtop {
  background-image: url("../images/shadowtop.png");
  height: 7px;
  margin: 30px auto -30px;
  width: 995px;
}

.shadow {
  background: url("../images/shadow.png") repeat-y scroll 50% center rgba(0, 0, 0, 0);
  margin: 0 auto;
  width: 995px;
}

#wrapper {
  margin: 30px auto 0;
  padding: 0;
  position: relative;
  width: 980px;
}

#navr {
  background: url("../images/mainmenu.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
  font-family: 'Cuprum',sans-serif;
  height: 55px;
  width: 981px;
}


: Re:CSS per header e div main content modifiche
: lord.poeticus 17 Dec 2013, 19:16:05
Perfetto, grazie, sempre impeccabile :)
: Re:CSS per header e div main content modifiche ( RISOLTO )
: giusebos 17 Dec 2013, 19:18:17
attenzione che l'header è allineato a sinistra!
: Re:CSS per header e div main content modifiche ( RISOLTO )
: lord.poeticus 17 Dec 2013, 19:43:39
si si grazie,
quello poi lo sposto a destra in funzione dei margini che creo
: Re:CSS per header e div main content modifiche ( RISOLTO )
: giusebos 17 Dec 2013, 19:52:18
Mettere [Risolto] è buona cosa, ma migliore se inserito prima del titolo ;)