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:
Codice:
<div id="box"><div id="box1"><p id="title">@COMMUNITY</p>
<p id "description">I nostri specialisti sapranno darti qualsiasi risposta!</p>
</div></div>
<div id="box">
<div id="box2"><p id="title">I NOSTRI PRODOTTI</p>
<p id "description">Scopri i benefici della nostra VASTA GAMMA</p></div></div>
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 )
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??
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:
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
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??
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):
09/12/2012 19:51 (Questo messaggio è stato modificato l'ultima volta il: 09/12/2012 20:13 da Chandler.)
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:
Codice:
<html>
<head>
<title>ROCCACOOP - Siciliana di natura, dal 1965</title>
<link href="css/stili.css" rel="stylesheet" type="text/css">
</head>
<body><br />
<div id="*">
<p align="center"><img src="immagini/home.gif" /></p>
</div>
<div bgcolor="#FFFFFF">
<p class="description">Organizzazione di produttori<br />
"Rocca di Caprileone" Impr. Agr. Coop. P.A.<br />
Sede Legale: Via Libertà, 129 - 90143 Palermo<br />
P.IVA 00115690828<br />
Sede Operativa: Via Stazione Zappulla - 98070 Torrenova (ME)<br />
Tel: +39 0941 958067<br />
Fax: +39 0941 958844<br />
Mail: info@roccacoop.com</p></div>
<div>
<p class="coming">COMING SOON</p></div>
</body>
</html>
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:
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.
10/12/2012 20:35 (Questo messaggio è stato modificato l'ultima volta il: 10/12/2012 20:37 da Chandler.)
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ì:
Codice:
<html>
<head>
<title>ROCCACOOP - Siciliana di natura, dal 1965</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link href="css/stili.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="header"><img src="immagini/home.gif" /></div>
<div class="description">
<p>Organizzazione di produttori<br />
"Rocca di Caprileone" Impr. Agr. Coop. P.A.<br />
Sede Legale: Via Libertà, 129 - 90143 Palermo<br />
P.IVA 00115690828<br />
Sede Operativa: Via Stazione Zappulla - 98070 Torrenova (ME)<br />
Tel: +39 0941 958067<br />
Fax: +39 0941 958844<br />
Mail: info@roccacoop.com</p>
</div>
<p class="coming">COMING SOON</p>
</div>
</body>
</html>
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.