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

Rispondi 
 
Valutazione discussione:
  • 0 voti - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5
Layout con posizioni assolute
08-06-2011, 00:27 (Questo messaggio è stato modificato l'ultima volta il: 08-06-2011 08:51 da Mattia.)
Messaggio: #1
Chandler Offline
Member
***
 		Messaggi: 70
Registrato: Nov 2008
Reputazione: 0
Layout con posizioni assolute
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
Trova tutti i messaggi di questo utente
Cita questo messaggio nella tua risposta
08-06-2011, 08:50
Messaggio: #2
Mattia Offline
Administrator
*******
 		Messaggi: 741
Registrato: Nov 2006
Reputazione: 2
RE: Layout
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!
Visita il sito web di questo utente Trova tutti i messaggi di questo utente
Cita questo messaggio nella tua risposta
08-06-2011, 12:42
Messaggio: #3
Chandler Offline
Member
***
 		Messaggi: 70
Registrato: Nov 2008
Reputazione: 0
RE: Layout
(08-06-2011 08: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
Trova tutti i messaggi di questo utente
Cita questo messaggio nella tua risposta
08-06-2011, 13:01
Messaggio: #4
Mattia Offline
Administrator
*******
 		Messaggi: 741
Registrato: Nov 2006
Reputazione: 2
RE: Layout con posizioni assolute
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!
Visita il sito web di questo utente Trova tutti i messaggi di questo utente
Cita questo messaggio nella tua risposta
08-06-2011, 13:34
Messaggio: #5
Chandler Offline
Member
***
 		Messaggi: 70
Registrato: Nov 2008
Reputazione: 0
RE: Layout con posizioni assolute
(08-06-2011 13: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??
Trova tutti i messaggi di questo utente
Cita questo messaggio nella tua risposta
08-06-2011, 13:49
Messaggio: #6
Mattia Offline
Administrator
*******
 		Messaggi: 741
Registrato: Nov 2006
Reputazione: 2
RE: Layout con posizioni assolute
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!
Visita il sito web di questo utente Trova tutti i messaggi di questo utente
Cita questo messaggio nella tua risposta
08-06-2011, 13:54
Messaggio: #7
Chandler Offline
Member
***
 		Messaggi: 70
Registrato: Nov 2008
Reputazione: 0
RE: Layout con posizioni assolute
(08-06-2011 13: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
Trova tutti i messaggi di questo utente
Cita questo messaggio nella tua risposta
11-07-2011, 21:09 (Questo messaggio è stato modificato l'ultima volta il: 11-07-2011 21:13 da Chandler.)
Messaggio: #8
Chandler Offline
Member
***
 		Messaggi: 70
Registrato: Nov 2008
Reputazione: 0
RE: Layout con posizioni assolute
(08-06-2011 13:54)Chandler Ha scritto:  
(08-06-2011 13: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
.png  Schermata 2011-07-11 a 21.07.15.png (Dimensione: 326,5 KB / Download: 2)
Trova tutti i messaggi di questo utente
Cita questo messaggio nella tua risposta
12-07-2011, 10:04
Messaggio: #9
Mattia Offline
Administrator
*******
 		Messaggi: 741
Registrato: Nov 2006
Reputazione: 2
RE: Layout con posizioni assolute
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!
Visita il sito web di questo utente Trova tutti i messaggi di questo utente
Cita questo messaggio nella tua risposta
12-07-2011, 13:24
Messaggio: #10
Chandler Offline
Member
***
 		Messaggi: 70
Registrato: Nov 2008
Reputazione: 0
RE: Layout con posizioni assolute
(12-07-2011 10: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
Trova tutti i messaggi di questo utente
Cita questo messaggio nella tua risposta
13-07-2011, 09:54
Messaggio: #11
Mattia Offline
Administrator
*******
 		Messaggi: 741
Registrato: Nov 2006
Reputazione: 2
RE: Layout con posizioni assolute
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!
Visita il sito web di questo utente Trova tutti i messaggi di questo utente
Cita questo messaggio nella tua risposta
Rispondi 


Discussioni correlate...
Discussione: Autore Risposte: Letto: Ultimo messaggio
  Sistemare layout Chandler 9 1.107 07-05-2010 07:34
Ultimo messaggio: Mattia

Vai al forum:


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

Contattaci | Matriz | Torna all'inizio della pagina | Torna al contenuto | Modalità archivio | RSS Syndication