Pagina 1 di 1

Aiuto con CSS

MessaggioInviato: mer gen 16, 2008 2:59 pm
da Fred
Salve a tutti, io ho fatto un nuovo CSS per il mio sito solo che ho sbagliato qualche cosa: non è che potreste controllare e vedere se trovate l'errore? Per la precisione le cose che non tornano sono:
1)non si vede l'header;
2)è allineato tutto a destra.
Codice: Seleziona tutto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//IT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
Conteniore {
width:640px;
position:absolute;
left:50%;
margin: -320px 0 0 0;
}

Header {
margin: 0 0 0 0;
}

Pulsanti {
margin: 0 0 0 0;
height:20px;
}

Copyright {
float:left;
width:100px;
font-family:"Times New Roman", Times, serif;
font-size:9px;
}

Varie {
float:right;
width:120px;
}

Infoutente {
margin: 0 0 0 0;
font-family:"Times New Roman", Times, serif;
font-size:small;
}

Textbox {
margin: 0 0 0 0;
}

Ringraziamenti {
margin: 0 0 0 0;
font-size:small;
font-family:"Times New Roman", Times, serif;
}

Corpocentrale {
margin-left:105px;
margin-right:125px;
}

Bestview {
margin: 0 0 0 0;
font-size:smaller;
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>

<body>
<div id="Conteniore">
<div id="Header">
<h1>HEADER</h1>
</div>
<div id="Pulsanti">
<h2>PULSANTI PULSANTI PULSANTI PULSANTI PULSANTI PULSANTI PULSANTI PULSANTI PULSANTI PULSANTI PULSANTI PULSANTI</h2>
</div>
<div id="Copyright">
Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright Copyright
</div>
<div id="Varie">
<div id="Infoutente">
acabbones<br />cicciones<br />puzzones
</div>
<div id="Textbox">
Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox Textbox
</div>
<div id="Ringraziamenti">
Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti Ringraziamenti
</div>
</div>
<div id="Corpocentrale">
Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale Corpocentrale
</div>
<div id="Bestview">
Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview Bestview
</div>
</div>

</body>
</html>


Per facilitare il post ho inegrato il CSS nel documento HTML.
Vi ringrazio per l'aiuto.

MessaggioInviato: mer gen 16, 2008 4:48 pm
da ssjx
Ho provato il codice e:

1) io l'header lo vedo

2) nel CSS metti questo

Codice: Seleziona tutto
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
}

Conteniore {
width:640px;
margin: 0 auto;
}


Così dovrebbe andare


PS
e comunque attento che i margini sono

margin: top left right bottom; [;)]

MessaggioInviato: mer gen 16, 2008 6:17 pm
da Fred
Ok, grazie tante, funziona bene. [;)]

MessaggioInviato: ven gen 25, 2008 1:07 pm
da Fred
Evito di aprire un'altra discussione inquanto il CSS è sempre lo stesso. Innanzitutto vi ringrazio ancora per la risposta precedente che mi ha aiutato non poco, poi dovrei chiedervi un altra cosa: come dovrei fare se volessi allineare anche il fonfo del CSS? Per essere più chiaro: vorrei che tutti gli elementi avessero la stessa altezza (anche a costo di avere una parte di una colonna vuota).
Spero di essere stato chiaro.
A presto

MessaggioInviato: ven gen 25, 2008 8:29 pm
da Fred
Qualche idea?

MessaggioInviato: ven gen 25, 2008 9:40 pm
da ssjx
Io sinceramente non ho capito... potresti postare magari uno scarabocchio fatto con il semplice Paint di windows per farmi capire cosa vuoi fare? (usa colori diversi x i vari div e mettigli il nome) ... in alternativa spiega un po' meglio [:D]

MessaggioInviato: sab gen 26, 2008 11:00 pm
da Fred
Come puoi vedere le colonne sono ffalsate in altezza, questo perché varia la quantità di cose scritte all'interno di ciascuna di esse. io vorrei che arrivassero tutte a fondo pagina (per quanto riguarda la parte centrale è "corpocentrale" che deve allungarsi). Spero di essere stato chiaro.
Immagine

MessaggioInviato: dom gen 27, 2008 8:13 pm
da ssjx
Quindi in pratica la colonna di dx (in giallo) è quella che ha la lunghezza massima e gli altri la devono raggiungere?

Ti consiglio di dare una letturaa questa guida (in particolare la lezione 17) per capire quali sono i problemi e come risolverli.

Così su 2 piedi è difficle poterti postare il codice CSS senza sapere esattamente i contenuti dei vari div [cry]


PS
per il corpocentrale puoi usare semplicemente height

MessaggioInviato: mar gen 29, 2008 7:20 pm
da Fred
ed impostare height come?
Codice: Seleziona tutto
/* CSS Document */


#html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
}

#Conteniore {
width:640px;
margin: 0 auto;
height:100%;
}

#Header
{
margin: 0 0 0 0;
height: 120px;
}

#Pulsanti
{
margin: 0 0 0;
}

#Copyright
{
float:left;
width:100px;
font-family:"Times New Roman", Times, serif;
font-size:10px;
padding: 1px;
margin-bottom:0;
background-color:#6633CC;
}

#Varie
{
float:right;
width:120px;
background-color:#FF00FF;
}

#Infoutente
{
margin: 0 0 0 0;
font-family:"Times New Roman", Times, serif;
font-size:small;
background-color:#CC0000;
}

#Textbox
{
margin: 0 0 0 0;
background-color:#00FF00;
}

#Ringraziamenti
{
margin: 0 0 0 0;
font-size:small;
font-family:"Times New Roman", Times, serif;
background-color:#00FFFF;
}

#Corpocentrale
{
margin-left:105px;
margin-right:125px;
background-color:#333333;
}

#Bestview
{
clear:both;
margin-left:0;
margin-right:0;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
padding:1px;
background-color:#FFFF00;
}

In ogni caso questo è il nuovo CSS, leggermente modificato, ma presenta ancora lo stesso problema.
Codice: Seleziona tutto
<body>
<div id="Conteniore">
           <div align="center" id="Header"></div>
           <div id="Pulsanti"></div>
           <div id="Copyright"></div>
           <div id="Varie">
                      <div id="Infoutente"></div>
                      <div id="Textbox"></div>
                      <div id="Ringraziamenti"></div>
           </div>
           <div id="Corpocentrale"></div>
           <div id="Bestview"></div>
</div>

</body>

E questo è il codice html.

Corpocentrale conterrà del testo ed un filmato in flash;
Varie conterrà lo script php per il rilevamento dell'IP;
Textbox conterrà un'altro script in php per la lettura del database messaggi della chatbox che inserirò in un'altra pagina;
Ringraziamenti slamente del testo;
Copyright e Bestview idem.
Ho omesso header e pulsanti perché è mia convinzione che non influiscano conil problema in questione.

MessaggioInviato: mar gen 29, 2008 9:45 pm
da ssjx
fermo restando che staimo parlando un po' sul nulla e che io ti consiglio di dare una lettura alla guida che ti ho postato sopra (lezioni come la 17 o la 24 e seguenti possono chiarirti molti dubbi) mi pare di capire che la pagina non sarà molto "dinamica" ma manterrà sempre la stessa lunghezza...

in questo caso non vedo quale difficoltà tu incontri nell'usare height per il corpo centrale...

Esempio:

Codice: Seleziona tutto
#Corpocentrale
{
margin-left:105px;
margin-right:125px;
background-color:#333333;
height: 500px;
}



Risolvendo questo primo problema poi si può cominciare a parlare delle colonne laterali la cui gestione può essere più difficile

MessaggioInviato: mar gen 29, 2008 9:50 pm
da Fred
grazie dell'aiuto, stò risolvendo, credo di aver capito come si fa, verifico e posto la soluzione del problema

MessaggioInviato: mar gen 29, 2008 10:28 pm
da Fred
Ho parlato con un mio amico e siamo giunti alla conclusione che non c'è modo di rendere tutte le colonne di una stessa altezza, quindi abbiamo trovato un sistema alternativo. Bisogna inserire le colonne in un contenitore ed inserire in questo contenitore un'immagine di sfondo e fare in modo che questa si moltiplichi solo verticalmente con un codice come
Codice: Seleziona tutto
background-repeat: y-repeat
Detto questo quest'immagine deve avere i colori delle colonne. Un esempio: noi abbiamo tre colonne: 1, blu e larga 3; 2, rossa e larga 4; 3, verde e larga 5. Quindi la nostra immagine (alta 1px) avrà un primo settore blu largo 3, uno rosso largo 4 e così via.
N.B.: Affinchè questo sistema funzioni la pagine deve avere una larghezza predefinita.

MessaggioInviato: mar gen 29, 2008 11:05 pm
da ssjx
questa è una delle soluzioni più semplici che ci sono in quella guida... ecco perché consiglio sempre di leggerla [;)]