Forum di Matriz › Programmazione Web › (X)HTML, CSS & JavaScript v
Layout con posizioni assolute

Valutazione discussione:
  • 0 voto(i) - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5
Modo discussione
Layout con posizioni assolute
Chandler Offline
Senior Member
****
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione: 0
#1
07/06/2011 23:27 (Questo messaggio è stato modificato l'ultima volta il: 08/06/2011 07:51 da Mattia.)
Ciao Mattia,
sto provando a mettere su un layout per un progetto universitario...
questa è l'immagine di come dovrebbe venire il layout
[Immagine: Home_final.jpg]
e questa è la pagina html che ho fatto fin ora
Codice:
<html>
<head>
<title>Neutrogena</title>
<link href="css/stili.css" rel="stylesheet" type="text/css">
<style type="text/css">
#box {
    align: left;
    padding-left: 750px;
    clear: both;
}
#img_border {
    border: 4px solid #FFFFFF;
    float: left;
    background-image: url(immagini/com.jpg);
}
#logo {
    align: left;
    width: 400px;
    padding-left: 120px;
    position: absolute;
    top: 624px;
    clear: both;
}
</style>
</head>
<body background="immagini/home.jpg"><br />
<div id="login"><p id="title">ENTRA oppure REGISTRATI</p>
<form id="form" name="username">
Username</form>
<form id="form" name="password">
Password
</form><INPUT id="input" value=">>"></div>
<div id="menu">
<p align="right"><a href="*">HOME </a></p></div>
<div id="menu">
<p align="right"><a href="*">PRODOTTI </a></p></div>
<div id="menu">
<p align="right"><a href="*">CHI SIAMO </a></p></div>
<div id="menu">
<p align="right"><a href="*">PUNTI VENDITA </a></p></div>
<div id="menu">
<p align="right"><a href="*">COMMUNITY </a></p></div>
<div style="background-position: center center;
background-image: url('.\immagini\com.jpg');
background-repeat: no-repeat;
height: 100%; width: 100%;"><div id="box"></div></div>
<div id="box"><p id="title">I NOSTRI PRODOTTI<img id="img_border" src="immagini/prod.jpg"></p></div>
<div id="logo"><img src="immagini/logo.png"></div>
</body>
</html>
mentre questo è il css:
Codice:
body {
    background-color: #e1dad2;
    background-repeat: no-repeat;
    margin-top: -0;
    margin-left: -0;
    margin-right: -0;
    margin-bottom: -0
}
#menu {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFF;
    background-color: #696865;
    height: 25px;
    width: 158px;
}
#menu a {
    color: #fff;
    text-decoration: none;
    padding: 5px;
    margin-right: 8px;
    float: right;
    display: block;
}
#menu a:hover {
    color: #000;
    tex-decoration: none;
}
#login {
    float: right;
    width: 61%;
}
#title {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    background-color: #696865;
    height: 22px;
    width: 158px;
}
#form {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 10px;
    width: 135px;
    color: #696865;
    background-color: #FFF;
    border:0px
}
#input {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 10px;
    width: 20px;
    color: #FFF;
    background-color: #696865;
    border:0px
}
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>
e aggiungendo questi nel css:
Codice:
#box1 {
    background-image: url(../immagini/com.jpg);
    height: 174px;
    width: 261px;
    border: 4px solid #FFFFFF;
    background-repeat: no-repeat;
}
#box2 {
    background-image: url(../immagini/prod.jpg);
    height: 186px;
    width: 261px;
    border: 4px solid #FFFFFF;
    background-repeat: no-repeat;
}
#description {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;
    background-color: #FFF;
    height: 20px;
    width: 158px;
}
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 smilie)

Saluti
Cerca
Cita messaggio
Mattia Offline
Administrator
*******
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione: 2
#2
08/06/2011 07:50
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.
Mattia!
Sito web Cerca
Cita messaggio
Chandler Offline
Senior Member
****
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione: 0
#3
08/06/2011 11:42
(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
Cerca
Cita messaggio
Mattia Offline
Administrator
*******
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione: 2
#4
08/06/2011 12:01
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.
Mattia!
Sito web Cerca
Cita messaggio
Chandler Offline
Senior Member
****
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione: 0
#5
08/06/2011 12:34
(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:
Codice:
<p id="description" align="center" bottom="0">I nostri specialisti sapranno darti qualsiasi risposta!</p>
</div></div>
<div class="box">
  <div id="box2"><p id="title">I NOSTRI PRODOTTI</p>
  <p id="description" align="center" bottom="0">Scopri i benefici della nostra VASTA GAMMA</p></div></div>
Cosa sbaglio ancora??
Cerca
Cita messaggio
Mattia Offline
Administrator
*******
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione: 2
#6
08/06/2011 12:49
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;
}
Mattia!
Sito web Cerca
Cita messaggio
Chandler Offline
Senior Member
****
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione: 0
#7
08/06/2011 12:54
(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
Cerca
Cita messaggio
Chandler Offline
Senior Member
****
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione: 0
#8
11/07/2011 20:09 (Questo messaggio è stato modificato l'ultima volta il: 11/07/2011 20:13 da Chandler.)
(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:
Codice:
<html>
<head>
<title>Neutrogena</title>
<link href="css/stili.css" rel="stylesheet" type="text/css">
<style type="text/css">
.box {
    align: left;
    padding-left: 750px;
    clear: both;
}
#img_border {
    border: 4px solid #FFFFFF;
    float: left;
}
</style>
</head>
<body background="immagini/goccia.jpg"><br />
<div id="menu">
<p align="right"><a href="*">HOME </a></p></div>
<div id="menu_selected">
<p align="right"><a href="*">PRODOTTI </a></p></div>
<div id="menu">
<p align="right"><a href="*">CHI SIAMO </a></p></div>
<div id="menu">
<p align="right"><a href="*">PUNTI VENDITA </a></p></div>
<div id="menu">
<p align="right"><a href="*">COMMUNITY </a></p></div>
<div id="logo"><img src="immagini/logo.png"></div>
<div id="login"><p id="title">ENTRA oppure REGISTRATI</p>
<form id="form" name="username">
Username</form>
<form id="form" name="password">
Password
</form><INPUT id="input" value=">>"></div>
<div class="box"><div id="box1"><p id="title"> @COMMUNITY</p>
<p class="description">I nostri specialisti sapranno darti qualsiasi risposta!</p>
</div></div>
<div class="box">
  <div id="box2"><p id="title"> CREMA CORPO</p>
  <p class="description">Scopri i benefici della nostra crema</p></div></div>
</body>
</html>
e questo è il css (molto simile al precedente):
Codice:
@charset "UTF-8";
body {
    background-color: #f2f1ec;
    background-repeat: no-repeat;
    margin-top: -0;
    margin-left: -0;
    margin-right: -0;
    margin-bottom: -0
}
#logo {
    align: left;
    width: 400px;
    padding-left: 180px;
    position: absolute;
    top: 30px;
}
#login {
    padding-left: 750px;
    width: 261px;
    position: fissa;
}
#menu {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFF;
    background-color: #696865;
    height: 25px;
    width: 158px;
}
#menu a {
    color: #fff;
    text-decoration: none;
    padding: 5px;
    margin-right: 8px;
    float: right;
    display: block;
}
#menu a:hover {
    color: #b61626;
    tex-decoration: none;
}
#menu_selected {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    background-color: #b61626;
    height: 25px;
    width: 158px;
}
#menu_selected a {
    color: #fff;
    text-decoration: none;
    padding: 5px;
    margin-right: 8px;
    float: right;
    display: block;
}
#menu_selected a:hover {
    color: #FFFFFF;
    tex-decoration: none;
    }

#title {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    background-color: #696865;
    height: 20px;
    width: 158px;
    opacity: 0.8;
    padding-left: 4px;
}
.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: 15px;
    width: 261px;
    opacity: 0.8;
}
#form {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 10px;
    width: 135px;
    color: #696865;
    background-color: #FFF;
    border:0px
}
#input {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 10px;
    width: 20px;
    color: #FFF;
    background-color: #696865;
    border:0px
}
#box1 {
    background-image: url(../immagini/com.jpg);
    height: 174px;
    width: 261px;
    border: 4px solid #FFFFFF;
    background-repeat: no-repeat;
    position: relative;
}
#box2 {
    background-image: url(../immagini/prod.jpg);
    height: 186px;
    width: 261px;
    border: 4px solid #FFFFFF;
    background-repeat: no-repeat;
    position: relative;
}
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


Allegati Anteprime
   
Cerca
Cita messaggio
Mattia Offline
Administrator
*******
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione: 2
#9
12/07/2011 09:04
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.
Mattia!
Sito web Cerca
Cita messaggio
Chandler Offline
Senior Member
****
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione: 0
#10
12/07/2011 12:24
(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
Cerca
Cita messaggio
Mattia Offline
Administrator
*******
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione: 2
#11
13/07/2011 08:54
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):
Codice:
#nuovodiv{
    margin: 0 auto;
    width: 960px;
}
Mattia!
Sito web Cerca
Cita messaggio
Chandler Offline
Senior Member
****
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione: 0
#12
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>

e il css in questo modo:

Codice:
@charset "UTF-8";
body {
    background-color: #3d7a25;
    background-repeat: no-repeat;
    margin-top: -0;
    margin-left: -0;
    margin-right: -0;
    margin-bottom: -0
}
.description{
    display: block;
    position: absolute;
    bottom: 330;
    left: 610;
    text-align: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFF;
    height: 15px;
    width: 600px;
}
.coming{
    display: block;
    position: absolute;
    bottom: 0;
    left: 400;
    text-align: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 50px;
    color: #FFF;
    height: 100px;
    width: 600px;
}

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


[Immagine: 11.jpg]


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


[Immagine: schermata.png]


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

Codice:
@charset "UTF-8";
body {
    background-color: #3d7a25;
    background-repeat: no-repeat;
    margin-top: -0;
    margin-left: -0;
    margin-right: -0;
    margin-bottom: -0
}
.description{
    display: block;
    float: right;
    bottom: 330;
    left: 100;
    text-align: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFF;
    height: 15px;
    width: 600px;
}
.coming{
    display: block;
    position: absolute;
    bottom: 0;
    left: 400;
    text-align: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 50px;
    color: #FFF;
    height: 100px;
    width: 600px;
}

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

Grazie mille
Cerca
Cita messaggio
Mattia Offline
Administrator
*******
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione: 2
#13
10/12/2012 14:52
Secondo me, dovresti modificare il codice HTML (naturalmente questo è il codice all'interno del tag body) in questo modo:
Codice:
<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>

Mentre il codice CSS sarà così:
Codice:
@charset "UTF-8";
body{
    margin: 0;
    background-color: #3d7a25;
}
.container{
    margin: 0 auto;
    width: 1200px;
}
.header{
    text-align: center;
}
.description{
    overflow: hidden;
}
.description p{
    float: right;
    width: 600px;
    text-align: left;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFF;
}
.coming{
    text-align: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 50px;
    color: #FFF;
}

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.
Mattia!
Sito web Cerca
Cita messaggio
Chandler Offline
Senior Member
****
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione: 0
#14
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>
e il css così:
Codice:
@charset "UTF-8";
@font-face {
   font-family: 'Futura';
   src: url(Futura.eot);
   src: local('Futura'), url('Futura.ttf') format('truetype');
}
body {
font-family: Futura, Verdana, sans-serif;
    margin: 0;
    background-color: #3d7a25;
}
.container{
    margin: 0 auto;
    width: 1200px;
}
.header{
    text-align: center;
}
.description{
    overflow: hidden;
}
.description p{
    float: right;
    width: 600px;
    text-align: left;
    font-family: "Futura",Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFF;
}
.coming{
    text-align: center;
    font-family: "Futura",Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 50px;
    color: #FFF;
}

Fammi sapere
Thanks
Cerca
Cita messaggio
Mattia Offline
Administrator
*******
Messaggi: 1.323
Discussioni: 171
Registrato: Nov 2006
Reputazione: 2
#15
11/12/2012 15:56
Mi ero perso il fatto che la descrizione dovesse stare più in alto.
A questo punto nell'HTML modifica:
Codice:
<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>

In questo modo:
Codice:
<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>

Mentre nel CSS modifica:
Codice:
.description{
    overflow: hidden;
}
.description p{
    float: right;
    width: 600px;
    text-align: left;
    font-family: "Futura",Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFF;
}

In questo modo:
Codice:
.description{
    position: absolute;
    top: 250px;
    right: 0;
    width: 600px;
    text-align: left;
    font-family: "Futura",Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFF;
}

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.
Mattia!
Sito web Cerca
Cita messaggio
Chandler Offline
Senior Member
****
Messaggi: 578
Discussioni: 47
Registrato: Nov 2008
Reputazione: 0
#16
11/12/2012 22:15
Perfetto!! ora funziona correttamente!!

Grazie mille Big Grin
Cerca
Cita messaggio


Discussioni simili
Discussione Autore Risposte Letto Ultimo messaggio
  Sistemare layout Chandler 9 16.569 07/05/2010 06:34
Ultimo messaggio: Mattia

Vai al forum:


Utenti che stanno guardando questa discussione: 1 Ospite(i)