Forum di Matriz

Ciao Mattia,
sto provando a mettere su un layout per un progetto universitario...
questa è l'immagine di come dovrebbe venire il layout

e questa è la pagina html che ho fatto fin ora
mentre questo è il css:
Adesso, come potrai notare, la mia difficoltà sta nel mettere le scritte "COMMUNITY" e "I NOSTRI PRODOTTI", e le relative descrizioni in basso nei due box di DX, nelle giuste posizioni (vedi img, ovvero sovrapposte all'immagine e non subito sopra)... so di sbagliare a mettere l'immagine con id #img_border che gli da un bordo di 4 px, forse la soluzione potrebbe essere di metterla in background in un altro div, ma non saprei poi come mettere il bordo e farci andare quelle scritte sopra...suggerimenti??

Saluti

---

Ho risolto in parte in questo modo:
e aggiungendo questi nel css:
Il problema, adesso, è che non riesci ad allinearli come nell'immagine e poi l'id #description non viene preso in considerazione...cosa sbaglio?? (forse ho sbagliato tutto )

Saluti

L'id "description" non viene preso in considerazione, perché manca un uguale nel codice HTML.
Per mettere la descrizione in basso, potresti provare a utilizzare le posizioni assolute.
Al box che la contiene devi dare il parametro position uguale a relative e alla descrizione devi metterlo absolute. In più dovrai posizionare la descrizione assegnandogli i parametri left e bottom a 0.

Non puoi utilizzare un ID su più elementi, come ad esempio per l'ID "box". In quel caso dovresti utilizzare una classe (quindi class) e nel codice CSS dovrai utilizzare il punto, al posto del cancelletto.

(08/06/2011 07:50)Mattia Ha scritto: [ -> ]L'id "description" non viene preso in considerazione, perché manca un uguale nel codice HTML.
Per mettere la descrizione in basso, potresti provare a utilizzare le posizioni assolute.
Al box che la contiene devi dare il parametro position uguale a relative e alla descrizione devi metterlo absolute. In più dovrai posizionare la descrizione assegnandogli i parametri left e bottom a 0.

Non puoi utilizzare un ID su più elementi, come ad esempio per l'ID "box". In quel caso dovresti utilizzare una classe (quindi class) e nel codice CSS dovrai utilizzare il punto, al posto del cancelletto.

left e bottom devo assegnarli al <p>??
quindi box diventa .box?? e vale solo per quello? o anche per box 1 e 2??

Potresti farmi un esempio di quello che intendi??

Saluti

Devi assegnare left e bottom all'elemento che vuoi allineare in basso, quindi al p.

Se "box1" e "box2" sono univoci, puoi lasciarli come ID.
Il codice HTML per il "box" diventerà:

E il codice CSS sarà:

Naturalmente al posto dei puntini vanno i contenuti che ci sono già ora.

(08/06/2011 12:01)Mattia Ha scritto: [ -> ]Devi assegnare left e bottom all'elemento che vuoi allineare in basso, quindi al p.

Se "box1" e "box2" sono univoci, puoi lasciarli come ID.
Il codice HTML per il "box" diventerà:

Codice:

<div class="box">...</div>

E il codice CSS sarà:

Codice:

.box{
...
}

Naturalmente al posto dei puntini vanno i contenuti che ci sono già ora.

fatto, ma la descrizione non mi va in fondo alll'immagine:
Cosa sbaglio ancora??

Il codice HTML della descrizione dovrebbe essere:

Il codice CSS dovrebbe essere:

(08/06/2011 12:49)Mattia Ha scritto: [ -> ]Il codice HTML della descrizione dovrebbe essere:

Codice:

<p class="description">Scopri i benefici della nostra VASTA GAMMA</p>

Il codice CSS dovrebbe essere:

Codice:

.description{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;
    background-color: #FFF;
    height: 20px;
    width: 158px;
}

Perfetto, funziona!!
Grazie mille

(08/06/2011 12:54)Chandler Ha scritto: [ -> ]

(08/06/2011 12:49)Mattia Ha scritto: [ -> ]Il codice HTML della descrizione dovrebbe essere:

Codice:

<p class="description">Scopri i benefici della nostra VASTA GAMMA</p>

Il codice CSS dovrebbe essere:

Codice:

.description{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;
    background-color: #FFF;
    height: 20px;
    width: 158px;
}

Perfetto, funziona!!
Grazie mille

Ciao mattia,
ho un altro problema con un'altra pagina di questo sito!!
praticamente non riesco ad allineare il div del login alla stessa altezza di logo e menu...
il codice è il seguente:
e questo è il css (molto simile al precedente):
Cosa sbaglio?? Ho provato in mile modi diversi (col top, con il float..) ma nn riesco in nessun modo a portarlo su..
In allegato l'img di come dovrebbe venire
Saluti

Dovresti modificare il CSS del login in questo modo:

Poi modifichi i valori di top e right in modo da posizionare il div del login nel punto perfetto.

(12/07/2011 09:04)Mattia Ha scritto: [ -> ]Dovresti modificare il CSS del login in questo modo:

Codice:

#login {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 261px;
}

Poi modifichi i valori di top e right in modo da posizionare il div del login nel punto perfetto.

Grazie mille Mattia...

Invece tornarno alla prima pagina (quella in alto) se la volesi centrare...dovrei intervenire sul body?? e in che modo?? Ho provato a inserire l'align ma nn funzia... è evidente che devo agire nel css... ma come??

Saluti

Dovresti inserire un div che conterrà tutto il sito (praticamente si apre subito dopo l'apertura del tag body e si chiude subita prima la chiusura del tag body) e dovrai dargli questo valore in CSS (la larghezza la scegli poi tu):

Ciao Mattia,
continuo su questo topic visto che l'argomento è il medesimo...
dovrei sistemare una HOME page (QUESTA),
ho strutturato l'index in questo modo:


e il css in questo modo:


il punto è che se visualizzo la pagina dal mio pc portatile (con risoluzione 1280x800, che dovrebbe essere ancora lo standard) lo vedo correttamentecome questa immagine





ma se la visualizzo dal mio imac 27'', la struttura è tutta sballata come nell'immagine di seguito





ho, quindi provato a modificare la classe descrizione con il float anzichè postion: absolute come qui di seguito:


ma non si è sistemato il problema...
come posso risolvere, ottenendo un risultato fedele a quello della prima immagine??

Grazie mille

Secondo me, dovresti modificare il codice HTML (naturalmente questo è il codice all'interno del tag body) in questo modo:

Mentre il codice CSS sarà così:

La logica è la seguente:

• tutta l'home page si trova all'interno del div con classe container che ha una larghezza fissa poco superiore a quella dell'immagine ed è centrato in mezzo alla pagina per qualsiasi risoluzione superiore a 1200 pixel;
  
• il div con classe header contiene l'immagine ed è centrato;
  
• sotto c'è il div che contiene la descrizione, è largo come il div con classe container e ha overflow impostato a hidden per fare in modo che i contenuti sottostanti non si posizionino a sinistra della descrizione;
  
• il testo della descrizione è all'interno di un p che ha il float a destra (quindi si sposta a destra nel div con classe description) e ha una larghezza fissa;
  
• il p con classe coming contiene il testo centrato.
  

Non ho fatto dei test, ma dovrebbe essere più o meno corretto.

Ciao Mattia,
ho seguito i tuoi consigli e in effetti adesso la descrizione è allineata con la scritta "Attenzione Vera Frutta" ma resta comunque troppo in basso rispetto a dove dovrebbe stare....ho provato ad aggiungere il parametro height su description ma nn ho risolto...
Attualmente la home è così:
e il css così:

Fammi sapere
Thanks

Mi ero perso il fatto che la descrizione dovesse stare più in alto.
A questo punto nell'HTML modifica:

In questo modo:

Mentre nel CSS modifica:

In questo modo:

Inoltre alla classe container aggiungi il parametro position con valore relative. In questo modo il p della descrizione è posizionato in base al div che lo contiene e non in base al body che può variare in base alla risoluzione dello schermo.

Perfetto!! ora funziona correttamente!!

Grazie mille