Punto informatico Network
Login Esegui login | Non sei registrato? Iscriviti ora (è gratuito!)
Username: Password:
  • Annuncio Pubblicitario

Aiuto con CSS

Cerchi consigli per migliorare il tuo sito? Vuoi aprire un sito in poco tempo?
Discuti con altri webmaster, chiedi chiarimenti ed opinioni in tutta libertà.
Lo spam verrà cancellato.

Aiuto con CSS

Messaggioda Fred » mer gen 16, 2008 2:59 pm

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.
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda ssjx » mer gen 16, 2008 4:48 pm

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; [;)]
Usavo IE e mi lamentavo... usavo Mozilla e mi lamentavo, decisamente meno ma mi lamentavo, ... poi ho trovato Opera e fu amore a prima vista
Avatar utente
ssjx
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 5756
Iscritto il: ven nov 26, 2004 3:37 pm
Località: Barcellona

Messaggioda Fred » mer gen 16, 2008 6:17 pm

Ok, grazie tante, funziona bene. [;)]
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe


Messaggioda Fred » ven gen 25, 2008 1:07 pm

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
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda Fred » ven gen 25, 2008 8:29 pm

Qualche idea?
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda ssjx » ven gen 25, 2008 9:40 pm

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]
Usavo IE e mi lamentavo... usavo Mozilla e mi lamentavo, decisamente meno ma mi lamentavo, ... poi ho trovato Opera e fu amore a prima vista
Avatar utente
ssjx
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 5756
Iscritto il: ven nov 26, 2004 3:37 pm
Località: Barcellona

Messaggioda Fred » sab gen 26, 2008 11:00 pm

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
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda ssjx » dom gen 27, 2008 8:13 pm

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
Usavo IE e mi lamentavo... usavo Mozilla e mi lamentavo, decisamente meno ma mi lamentavo, ... poi ho trovato Opera e fu amore a prima vista
Avatar utente
ssjx
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 5756
Iscritto il: ven nov 26, 2004 3:37 pm
Località: Barcellona

Messaggioda Fred » mar gen 29, 2008 7:20 pm

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.
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda ssjx » mar gen 29, 2008 9:45 pm

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
Usavo IE e mi lamentavo... usavo Mozilla e mi lamentavo, decisamente meno ma mi lamentavo, ... poi ho trovato Opera e fu amore a prima vista
Avatar utente
ssjx
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 5756
Iscritto il: ven nov 26, 2004 3:37 pm
Località: Barcellona

Messaggioda Fred » mar gen 29, 2008 9:50 pm

grazie dell'aiuto, stò risolvendo, credo di aver capito come si fa, verifico e posto la soluzione del problema
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda Fred » mar gen 29, 2008 10:28 pm

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.
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda ssjx » mar gen 29, 2008 11:05 pm

questa è una delle soluzioni più semplici che ci sono in quella guida... ecco perché consiglio sempre di leggerla [;)]
Usavo IE e mi lamentavo... usavo Mozilla e mi lamentavo, decisamente meno ma mi lamentavo, ... poi ho trovato Opera e fu amore a prima vista
Avatar utente
ssjx
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 5756
Iscritto il: ven nov 26, 2004 3:37 pm
Località: Barcellona


Torna a Sviluppo Web

Chi c’è in linea

Visitano il forum: Nessuno e 0 ospiti

Powered by phpBB © 2002, 2005, 2007, 2008 phpBB Group
Traduzione Italiana phpBB.it

megalab.it: testata telematica quotidiana registrata al Tribunale di Cosenza n. 22/09 del 13.08.2009, editore Master New Media S.r.l.; © Copyright 2008 Master New Media S.r.l. a socio unico - P.I. 02947530784. GRUPPO EDIZIONI MASTER Spa Tutti i diritti sono riservati. Per la pubblicità: Master Advertising