Aiuto CSS - posizionamento div e altro...

**alemoppo** · 22-07-2009, 12.47.31

Salve a tutti.
Ieri sera mi sono messo a rifare tutto il sito, non più basato su layout tabellare, ma con i div e css.

Il risultato di quello che ho fatto è questo:

pagina:

Codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link href="./stili/1/home.css" type="text/css" rel="stylesheet">
		<title>Benvenuto su alemoppo.altervista.org!</title>
	</head>
	<body>
		<div id='impo'>Impostazioni</div>
		<div id='titolo'>Titolo</div>
		<div id='principale'>
			<div id='menu'>
				<dir>
					<li>Voce 1</li>
					<li>Voce 2</li>
					<li>Voce 3</li>
					<li>Voce n</li>
				</dir>
			</div>
			<div id='contenuto'>contenuto</div>
			<div id='caratteristiche'>caratteristiche</div>
			<div id='crediti'>crediti</div>
		</div>
	</body>
</html>

Con le relative "regole" css:

Codice HTML:

body
{
	font-family:Century Gothic, Calibri, Verdana;
	background-color:#3399CC;
	margin:0px;  
	text-align:center;
	font-size:14px;
}

#impo
{
  margin:0px auto;
	text-align:right;
	width:900px;
	height:20px;
	background-color:white;
	margin-top:30px;
}

#titolo
{
	font-family:Ravie,Algerian;
	font-size:30px;
  margin:0px auto;
	text-align:center;
	width:900px;
	height:50px;
	background-color:white;
	border:1px solid;
}

#principale
{
  margin:0px auto;
	text-align:center;
	width:900px;
	height:auto;
	background-color:#ffffff;
}

#menu
{
	text-align:left;
	width:200px;
	height:auto;
	background-color:yellow;
	margin-top:0px;
	margin-left:0px;
}
#menu dir
{
	list-style-type:none;
}
#menu li:hover
{
	font-size:15px;
	background-color:#3399CC;
}

#contenuto
{
	background-color:green;
	text-align:center;
	margin-top:0px;
	margin-left:200px;
	width:500px;
}

#caratteristiche
{
	background-color:pink;
	text-align:right;
	margin-top:0px;
	margin-left:700px;
	width:200px;
}

#crediti
{
	margin-top:0px;
	margin-left:0px;
}

Però con firefox mi da questi problemi:

1-> Le scritte dentro il menu le ho allineate a sinistra, ma non sono effettivamente posizionate a sinistra.
2->Tra il div "Titolo" e il div "principale" c'é uno spazio... perché? Io gli ho messo un margin:0px auto;.. quindi dovrebbe essere margin-top:0px; no?
3->I div "contenuto" e "caratteristiche" non sono allineati in alto rispetto al div "principale"... Perché? anche a questi gli ho dato (come al div menu) un margin-top:0px;

Poi, la goccia che ha fatto traboccare il vaso e quindi chiedere aiuto a voi, è stato quando l'ho visualizzato con IE (sperando in meglio, invece...

).

Grazie,

Ciao!

**acsocmel** · 22-07-2009, 17.29.31

usa un doctype strict per una maggiore omogeneità di risultati
dir non mi risulta essere un tag html
un div occupa sempre tutto lo spazio disponibile e per affiancarli puoi usare il float o position, ma soltanto dopo che hai letto qualche guida, con attenzione ai bug di IE
li deve stare dentro ul
usi troppi id, dovresti usare le classi e occasionalmente gli id
usi troppi div, dovresti usare i tag html (h1...h6 p ul ol span etc.)

22-07-2009, 17.55.06

Per precisare, gli id possono essere utilizzati una volta sola, quindi soltanto un contenitore nella pagina può avere l'id (ad esempio) "impo", mentre le classi possono essere utilizzate tante volte in una pagina, quindi più contenitori possono avere class="mia_classe"

**alemoppo** · 22-07-2009, 19.35.18

Originalmente inviato da acsocmel

dir non mi risulta essere un tag html

L'ho letto qui, ma ho sbagliato perché è una proprietà. Il tag è <ol> o come suggerito <ul>

Originalmente inviato da nokiagames

Per precisare, gli id possono essere utilizzati una volta sola, quindi soltanto un contenitore nella pagina può avere l'id (ad esempio) "impo", mentre le classi possono essere utilizzate tante volte in una pagina, quindi più contenitori possono avere class="mia_classe"

Certo, lo so: infatti gli id sono univoci! Ad esempio non ci sono due id "impo"

Adesso sostituisco <dir> con <ul> e aggiungo float, anche se a me risulta per i bordi

... poi faccio risapere...

Grazie,

Ciao!

EDIT:

usi troppi id, dovresti usare le classi e occasionalmente gli id
usi troppi div, dovresti usare i tag html (h1...h6 p ul ol span etc.)

Perché poi con ajax riesco a gestirli bene; cosa che con gli span o altri tag non si riescie

EDIT2:

Ho soltituito i <dir> con <ol>, ma non cambia niente.
I float non so come metterli...

**nukta** · 23-07-2009, 10.46.27

ti consiglio di partire da un template css già fatto:
http://www.intensivstation.ch/en/templates/

ps: cambia lo sfondo!!

**dreadnaut** · 23-07-2009, 11.04.55

Qua ce n'e' un'altra manciata, con tutorial:
http://www.maxdesign.com.au/presentation/page_layouts/

Discussione: Aiuto CSS - posizionamento div e altro...

LinkBack

Strumenti discussione

Display

Aiuto CSS - posizionamento div e altro...

Regole di scrittura