Centrare la pagina html con un file esterno di css

**marie_91** · 27-11-2015, 14:05

Ciao a tutti, sono Marie, mi sono appena iscritta a questo forum.

La professoressa ha fatto un corso basandosi su delle slide, quindi premetto che la mia preparazione è molto bassa; per l'esame devo però sviluppare 3 pagine di un sito...
Sono disperata...

Vorrei sapere come si fa a allineare una pagina html tramite l'uso di un file css esterno...
Io per ora ho fatto questo, ma non ho ottenuto nessun cambiamento nella mia pagina sul browser.

In html ho messo questo:
<!DOCTYPE html>
<html lang="it-IT">
<head>

<link rel="stylesheet" type="text/css" href="home.css" media="screen" />

<meta charset="UTF-8">
<title> Stop alla violenza sulle donne - Home </title>
<meta name="description" content="Associazione Nazionale Volontarie: Stop alla violenza sulle donne, aiuta da anni le donne vittime di violenza e i loro bambini proteggendoli e lottando al loro fianco" />
<meta name="keywords" content="HTML, CSS, XML, XHTML, Javascript">

</head>
<body>
<body style='width:1024px; height:768px'>
<div id "container">
</div>

<div style="float: left;"> <img src="immagini/logo.jpg" width="300" height="147"/> </div>
<div style="float: right;"> <img src="immagini/se sei vittima.jpg" width="400" height="102"/> </div>

<table style="width:50%" border="1" align="center">
<tr>
<th>HOME</th>

<th>CHI SIAMO</th>
<th>CENTRI ANTIVIOLENZA</th>
<th>GALLERIA</th>
<th>CONTATTI</th>
</tr>

</table>

<div style="float: right;"> <img src="immagini/violenza-donne.jpg" width="800" height="413"/> </div>
</body>
</html>

Il mio file CSS:
body, html {
height: 100%;
margin: 0;
}
#container {
width:1024px;
height:768px;
margin-top: 20px;
margin-right: 100px;
margin-bottom: 20px;
margin-left: 100px;
padding:0;
background: pink;
color: black;
}

h1 {
color: black;
font: 36px Helvetica, Arial, sans-serif;
}

li {color: purple;}

@media print {
h1 {color: black;}
}

Lo so che ho fatto un casino, vi prego, AIUTATEMI! HELP ME!

**Mich_** · 27-11-2015, 15:52

Anzitutto impara ad usare il forum.
Il codice va sempre inserito dentro i b-tag [ code ] ... [ /code ] (senza gli sapzi), altrimenti si perde la formattazione e diventa difficile capire.

Seconda cosa. Se usi gli stili in un file separato, non mettere stili anche all'interno del file HTML: e` una pratica che ti porta a fare errori stupidi.

Terza cosa. I tag hanno un loro significato semantico: se li forzi a fare qualcos'altro sara` molto piu` difficile formattare. Nel tuo caso hai usato una tabella per fare una lista. Se vuoi idee per fare un menu (orizzontale o verticale come preferisci), ti conviene andare alla ricerca di cose gia` pronte (ad esempio ce ne sono diversi citati tra i "link utili" di questo forum - a suo tempo io ho imparato molto dai menu di CSSplay)

Anche per il layout trovi spunti validissimi in rete (puoi partire ancora dai "link utili").

Comunque non ho capito cosa vuoi centrare: tipicamente per centrare in orizzontale un oggetto di tipo block si usano i margini automatici; comunque anche per questo ci sono esempi tra i "link utili".

**carlomarangoni** · 27-11-2015, 16:11

Prova così e vedi coso ho cambiato e se ti va bene il risultato

codice:

CSS
@charset "utf-8";
/* CSS Document */

body, html{
height: 100%;
margin: 0;
padding: 0;
}
#container {
width:1024px;
height:768px;
margin: 20px auto 20px auto;
padding:0;
background: #FF5F67;
color: #000000;
}


h1 {
color: #000000;
font: 36px Helvetica, Arial, sans-serif;
}

li {color: #FFEAEB;}


@media print {
h1 {color: #000000;}
}

codice:

HTML
<!DOCTYPE html>
<html lang="it-IT">
<head>
<link rel="stylesheet" type="text/css" href="home.css" media="screen" />
<meta charset="UTF-8">
<title> Stop alla violenza sulle donne - Home </title>
<meta name="description" content="Associazione Nazionale Volontarie: Stop alla violenza sulle donne, aiuta da anni le donne vittime di violenza e i loro bambini proteggendoli e lottando al loro fianco" />
<meta name="keywords" content="HTML, CSS, XML, XHTML, Javascript">
</head>
<body>
<div id="container">
<div style="float: left;"> <img src="immagini/logo.jpg" width="300" height="147"/> </div>
<div style="float: left"> <img src="immagini/se sei vittima.jpg" width="400" height="102"/> </div>
<div style="clear:both;">&nbsp;</div>
<table style="width:50%" border="1" align="center">
<tr>
<th>HOME</th>
<th>CHI SIAMO</th>
<th>CENTRI ANTIVIOLENZA</th>
<th>GALLERIA</th>
<th>CONTATTI</th>
</tr>
</table>
<div align="center"> <img src="immagini/violenza-donne.jpg" width="800" height="413"/> </div>
</div>
</body>
</html>

**marie_91** · 27-11-2015, 16:50

Originariamente inviata da carlomarangoni

Prova così e vedi coso ho cambiato e se ti va bene il risultato

codice:

CSS
@charset "utf-8";
/* CSS Document */

body, html{
height: 100%;
margin: 0;
padding: 0;
}
#container {
width:1024px;
height:768px;
margin: 20px auto 20px auto;
padding:0;
background: #FF5F67;
color: #000000;
}


h1 {
color: #000000;
font: 36px Helvetica, Arial, sans-serif;
}

li {color: #FFEAEB;}


@media print {
h1 {color: #000000;}
}

codice:

HTML
<!DOCTYPE html>
<html lang="it-IT">
<head>
<link rel="stylesheet" type="text/css" href="home.css" media="screen" />
<meta charset="UTF-8">
<title> Stop alla violenza sulle donne - Home </title>
<meta name="description" content="Associazione Nazionale Volontarie: Stop alla violenza sulle donne, aiuta da anni le donne vittime di violenza e i loro bambini proteggendoli e lottando al loro fianco" />
<meta name="keywords" content="HTML, CSS, XML, XHTML, Javascript">
</head>
<body>
<div id="container">
<div style="float: left;"> <img src="immagini/logo.jpg" width="300" height="147"/> </div>
<div style="float: left"> <img src="immagini/se sei vittima.jpg" width="400" height="102"/> </div>
<div style="clear:both;">&nbsp;</div>
<table style="width:50%" border="1" align="center">
<tr>
<th>HOME</th>
<th>CHI SIAMO</th>
<th>CENTRI ANTIVIOLENZA</th>
<th>GALLERIA</th>
<th>CONTATTI</th>
</tr>
</table>
<div align="center"> <img src="immagini/violenza-donne.jpg" width="800" height="413"/> </div>
</div>
</body>
</html>

Ho provato ha usare questo codice, devo fare alcune modifiche, ma va molto meglio del mio.
Grazie tante! sei stato gentilissimo!

**marie_91** · 27-11-2015, 16:51

Originariamente inviata da carlomarangoni

Prova così e vedi coso ho cambiato e se ti va bene il risultato

codice:

CSS
@charset "utf-8";
/* CSS Document */

body, html{
height: 100%;
margin: 0;
padding: 0;
}
#container {
width:1024px;
height:768px;
margin: 20px auto 20px auto;
padding:0;
background: #FF5F67;
color: #000000;
}


h1 {
color: #000000;
font: 36px Helvetica, Arial, sans-serif;
}

li {color: #FFEAEB;}


@media print {
h1 {color: #000000;}
}

codice:

HTML
<!DOCTYPE html>
<html lang="it-IT">
<head>
<link rel="stylesheet" type="text/css" href="home.css" media="screen" />
<meta charset="UTF-8">
<title> Stop alla violenza sulle donne - Home </title>
<meta name="description" content="Associazione Nazionale Volontarie: Stop alla violenza sulle donne, aiuta da anni le donne vittime di violenza e i loro bambini proteggendoli e lottando al loro fianco" />
<meta name="keywords" content="HTML, CSS, XML, XHTML, Javascript">
</head>
<body>
<div id="container">
<div style="float: left;"> <img src="immagini/logo.jpg" width="300" height="147"/> </div>
<div style="float: left"> <img src="immagini/se sei vittima.jpg" width="400" height="102"/> </div>
<div style="clear:both;">&nbsp;</div>
<table style="width:50%" border="1" align="center">
<tr>
<th>HOME</th>
<th>CHI SIAMO</th>
<th>CENTRI ANTIVIOLENZA</th>
<th>GALLERIA</th>
<th>CONTATTI</th>
</tr>
</table>
<div align="center"> <img src="immagini/violenza-donne.jpg" width="800" height="413"/> </div>
</div>
</body>
</html>

Sì, lo so ho un po' le idee confuse a riguardo...
Seguirò i tuoi preziosi consigli!
Grazie tante! sei stato gentile!

Discussione: Centrare la pagina html con un file esterno di css

Strumenti discussione

Ricerca discussione

Visualizza

Centrare la pagina html con un file esterno di css

Permessi di invio