| Precedente :: Successivo |
| Autore |
Messaggio |
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
 Inviato: 30 Set 2005 13:23 Oggetto: * Div allineati |
 |
|
Ho bisogno di mettere 3 div su una stessa riga. Siccome sto facnedo un po' di pratica, non ne ho idea di come si faccia, e non so nemmeno se sia giusto procere con i div o usare una semplice tabella, posto comunque il codice. i div che vorrei allineati nella stessa riga sono left, central e right. Grazie.
| Codice: | #corpo {
width: 860px;
margin: 3px auto 3px auto;
border: 1px solid green;
}
#left {
width: 150px;
margin: 3px auto auto 3px;
border: 1px solid pink;
}
#central {
width: 430px;
margin: 3px auto 3px auto;
border: 1px solid cyan;
}
#right {
width: 150px;
margin: 3px 3px auto auto;
border: 1px solid pink;
} |
e
| Codice: |
<div id="corpo">
<div id="left"></div>
<div id="central"></div>
<div id="right"></div>
</div>
|
|
|
| Top |
|
 |
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 30 Set 2005 13:36 Oggetto: |
|
|
devi dare a tutti e tre il comando float: left;
calcola che con float non puoi usare il 100% della larghezza, altrimenti sballa sotto (ti bastano una cosa tipo 5 pixel o qualcosa del genere, ma se riesci a tenerti piu' ampio meglio, altrimenti rischi che qualche browser faccia finire sotto il terzo div)
al footer dai clear: both; altrimenti si comporta in maniera strana, "spalmandosi" sui div soprastanti; eventualmente puoi anche inserire un div vuoto ad hoc dopo i tre div centrali e prima della chiusura del div corpo e dare a questo div ad hoc clear: both; (a scelta, nel senso: o il footer o questo div creato apposta)
altro sistema: piazza in maniera assoluta i due div laterali
allora:
- al div corpo dai position: relative
- al div di sinistra dai position: absolute; top: 0px; left: 0px;
- al div di destra dai position: absolute; top: 0px; right: 0px;
- al div centrale dai un margin left pari al div left (piu' qualche pixel) e un margin right pari al div right (piu' qualche pixel) senza dargli nient'altro
occhio che se i div laterali sono piu' lunghi di quello centrale, il footer ti sballa; per ovviare, eventualmente creati una classe che dia padding: 30px (esempio a caso) da mettere al div centrale nel caso in cui il contenuto della pagina sia piu' corto dei div laterali  |
|
| Top |
|
|
horus
Macchinista
Registrato: 22/03/05 10:48
Messaggi: 2554
Residenza: Sirio e dintorni
|
| Inviato: 30 Set 2005 13:36 Oggetto: |
|
|
Devi aggiungere la proprietà:
ai div left e center. Dopo magari dovrai aggiustare un po' i margini ma dovrebbe andare. Atenzione all'uso di auto in quanto con IE crea problemi.
edit: postato assieme, come sempre però la precisione di Rebelia è superiore. |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 30 Set 2005 13:45 Oggetto: grazie |
|
|
| Grazie delle prezione info, sto rifacendo del tutto il mio sitarello, e quindi sto partendo proprio da zero! |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 01 Ott 2005 17:41 Oggetto: validazione |
|
|
Sto un po' smanettando su un sito che sto facendo, e stavo un po' guardano il css validator relativo al mio css... non mi da errori, ma neppure le belle "Congratulazioni" che ha Rebelia. Metto il codicequi, qui c'è gente che ne capisce più di me.
| Codice: |
body {
background: #FFFFFF;
text-align: center;
font-family: "century gothic", verdana, arial, sans-serif;
font-size: 80%;
}
#esterno {
position: relative; top: 0px; right: 0px;
width: 900px;
border: none;
background: #FFFFFF;
}
#testata {
background-image: url(logo/nuovo-9.jpg);
background-position: left;
background-repeat: no-repeat;
height: 100px;
width: 900px;
margin: 0px 0px 3px 0px;
border: none;
}
#language {
position: absolute; top: 7px; right: 0px;
width: 160px;
border: none;
font-family: arial;
font-size: 10px;
}
#menu {
width: 900px;
margin: 3px auto 3px auto;
border: 1px solid #2A73F8;
}
#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#menu ul li {
display: inline; /*trasformazione di un elemento blocco in un elemento in linea */
margin: 0px;
padding: 20px;
color: #FF0000;
}
#corpo {
height: 431px;
width: 900px;
position: relative; /*margin: 10px auto 3px auto;*/
border: 1px solid #06D388;
font-family: arial;
}
#left {
width: 150px;
margin: 3px auto 3px 3px;
border: 1px solid #F3ACF7;
float: left;
}
#central {
width: 550px;
margin: 3px auto 3px 16px;
border: 1px solid #62D8FA;
float: left;
}
#right {
width: 150px;
margin: 3px 3px 3px auto;
border: 1px solid #F3ACF7;
float: right;
}
#piede {
font-family: arial;
font-size: 10px;
width: 900px;
margin: 3px auto 3px auto;
border: 1px solid #C144C9;
}
|
|
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 01 Ott 2005 17:50 Oggetto: |
|
|
scusa, non capisco
a me pare a posto... forse dovresti postare il codice della pagina e dirci cosa secondo te si comporta in maniera incongrua, cosi' possiamo renderci conto meglio
(congratulazioni! da dove l'hai tirata fuori!?   ) |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 01 Ott 2005 18:01 Oggetto: metto tutto, anche la pagina |
|
|
Premetto che non da errori, solo che volevo vedere che voto mi dava il css validator, tipo quello che c'è nel tuo sito (Rebelia). A te fa pure le congratulazioni, a me non da errori (li dava, ma ho sistemato...) ma dei warnings... e non riesco a capire come si risolvono quegli avvisi!
Posto comunque anche la pagina...
Questo il css:
| Codice: |
body {
background: #FFFFFF;
text-align: center;
font-family: "century gothic", verdana, arial, sans-serif;
font-size: 80%;
}
#esterno {
position: relative; top: 0px; right: 0px;
width: 900px;
border: none;
background: #FFFFFF;
}
#testata {
background-image: url(logo/nuovo-9.jpg);
background-position: left;
background-repeat: no-repeat;
height: 100px;
width: 900px;
margin: 0px 0px 3px 0px;
border: none;
}
#language {
position: absolute; top: 7px; right: 0px;
width: 160px;
border: none;
font-family: arial;
font-size: 10px;
}
#menu {
width: 900px;
margin: 3px auto 3px auto;
border: 1px solid #2A73F8;
}
#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#menu ul li {
display: inline; /*trasformazione di un elemento blocco in un elemento in linea */
margin: 0px;
padding: 20px;
color: #FF0000;
}
#corpo {
height: 431px;
width: 900px;
position: relative; /*margin: 10px auto 3px auto;*/
border: 1px solid #06D388;
font-family: arial;
}
#left {
width: 150px;
margin: 3px auto 3px 3px;
border: 1px solid #F3ACF7;
float: left;
}
#central {
width: 550px;
margin: 3px auto 3px 16px;
border: 1px solid #62D8FA;
float: left;
}
#right {
width: 150px;
margin: 3px 3px 3px auto;
border: 1px solid #F3ACF7;
float: right;
}
#piede {
font-family: arial;
font-size: 10px;
width: 900px;
margin: 3px auto 3px auto;
border: 1px solid #C144C9;
}
|
Questa la pagina html (che non ho provveduto a verificare col validatore... è ancora in fase embrionale...):
| Codice: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Atigra Homepage</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="esterno">
<div id="testata">
<div id="language">
<table border="0">
<tr><td><img src="img/italy_flag.jpg"></td><td>Versione Italiana</td></tr>
<tr><td><img src="img/uk_flag.jpg"></td><td>English Version<td></tr>
</table>
</div>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>Contatti</li>
<li>Stupidate</li>
<li>Links</li>
<li>Utility</li>
<li>Fotogallery</li>
<li>TPR</li>
<li>Portfolio</li>
</ul>
</div>
<div id="corpo">
<div id="left"><p>testo sinistro</p></div>
<div id="central"><p>testo centrale<br>testo centralissimo</p></div>
<div id="right"><p>testo destro</p></div>
</div>
<div id="piede"><p>Copyright 2005 Atigra. Tutti i diritti riservati.</p></div>
</div>
</body>
</html>
|
|
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 01 Ott 2005 18:11 Oggetto: |
|
|
ok, vediamo assieme 'sti warning
| Citazione: |
* Line : 2 (Level : 1) You have no color with your background-color : body
|
devi dichiarare il colore del testo o in alternativa non dichiarare neanche il colore dello sfondo; questo perche' se qualcuno carica un css alternativo, potrebbe avere problemi (nel senso che magari nel css alternativo impostano background black e color yellow e il risultato sara' background white e color yellow: illeggibile!)
| Citazione: |
* Line : 12 (Level : 1) You have no color with your background-color : #esterno
|
stesso problema e tra l'altro risolvibile togliendo la dichiarazione di background: con l'eccezione delle tabelle (e cmq non per tutto), gli elementi figli ereditano le impostazioni degli elementi padri, percio' la dichiarazione di background e di color nel body vale per tutta la pagina salvo disposizioni differenti
| Citazione: |
* Line : 29 font-family: You are encouraged to offer a generic family as a last alternative |
il discorso vale per la font-family: una volta dichiarata nel body, vale per tutta la pagina, percio' ti conviene eliminarlo, perche' nel body tu la font generica l'hai messa
| Citazione: |
* Line : 29 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #language
|
come sopra
| Citazione: | * Line : 49 (Level : 1) You have no background-color with your color : #menu ul li
* Line : 58 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 58 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #corpo
* Line : 83 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 83 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #piede
|
i problemi sono poi sempre quelli: togli le font family tranne quella del body, dichiara il colore generico nel body e quando cambi colore o background in uno degli elementi, dichiara anche l'altro: tutto qua
edit: mi rendo conto ora che il codice della pagina era superfluo... vabbe', amen! cmq mi par buono pure quello |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 01 Ott 2005 18:26 Oggetto: grazie... |
|
|
Grazzzzissssime!!! ovvio che il merito per quello che so (moolto poco) è tuo, degli altri guru di questo e altri forum... e poi... senza offesa, ma per primo, di un amico che io chiamo sempre BigEdo! che forse non sa neppure dell'esistenza di questo forum, ma...
Appena ho un attimino sistemo tutti quegli avvisi... thanks! |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 01 Ott 2005 19:00 Oggetto: Re: grazie... |
 |
|
| atigra ha scritto: | Grazzzzissssime!!! ovvio che il merito per quello che so (moolto poco) è tuo, degli altri guru di questo e altri forum... e poi... senza offesa, ma per primo, di un amico che io chiamo sempre BigEdo! che forse non sa neppure dell'esistenza di questo forum, ma...
Appena ho un attimino sistemo tutti quegli avvisi... thanks! |
figurati! sono sicura che ti capitera' di fare altrettanto per altri utenti un giorno
e per il tuo amico... digli di iscriversi, che piu' conoscenza mettiamo assieme e piu' abbiamo da guadagnarne tutti quanti |
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
