Posizionamento + Zoom della pagina: i div non stanno al loro posto
Salve a tutti! Ho un piccolo problema di ridimensionamento con il mio sito.
Ho creato un modello a tre colonne (centrale più grande, due laterali), header e footer.
Ho stabilito le regole di CSS per posizionare tutto al proprio posto, ma ho due problemi:
Lascio qui sotto sia il codice HTML che il CSS (PS: Non fate caso ai commenti, è un lavoro di gruppo e non tutti conoscono tag e vari)
(Inserisco il CSS come codice PHP per la formattazione a colori)
Salve a tutti! Ho un piccolo problema di ridimensionamento con il mio sito.
Ho creato un modello a tre colonne (centrale più grande, due laterali), header e footer.
Ho stabilito le regole di CSS per posizionare tutto al proprio posto, ma ho due problemi:
- Non riesco a posizionare un'immagine (logo) accanto alla barra del titolo: i due div non vengono allineati. (Per questo sono stato costretto ad inserirlo all'interno del blocco del titolo, cosa che a me non piace, esteticamente parlando)
- Quando faccio lo zoom della finestra, i div non restano al loro posto: in particolare, il footer esce fuori dal container principale
Lascio qui sotto sia il codice HTML che il CSS (PS: Non fate caso ai commenti, è un lavoro di gruppo e non tutti conoscono tag e vari)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<!-- QUESTO META INSERITO QUI FA IN MODO CHE SI POSSANO INSERIRE GLI ACCENTI. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modello del Sito</title>
<!-- LINK AL FILE DI STYLE CSS -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="title">
<img src="Images/Logo.png" width="90" height="90"><h1>TITOLO DEL SITO</h1>
<h5>"CITAZIONE - SOTTOTITOLO</h5>
</div> <!-- title -->
<div id="container">
<div id="contenuto">
<div id="colonna_sx">
<!-- COLONNA SX: I CONTENUTI INIZIANO DA QUI -->
<p align="center">COLONNA SINISTRA: SCRIVI QUI</p>
<!-- COLONNA SX: I CONTENUTI FINISCONO QUI -->
</div> <!-- colonna_sx -->
<div id="header">
<!-- HEADER: I CONTENUTI INIZIANO DA QUI -->
HEADER: SCRIVI QUI
<!-- HEADER: I CONTENUTI FINISCONO QUI -->
</div><!-- header -->
<div id="colonna_dx">
<!-- COLONNA DX: I CONTENUTI INIZIANO DA QUI -->
COLONNA DESTRA: SCRIVI QUI
<!-- COLONNA DX: I CONTENUTI FINISCONO QUI -->
</div><!-- colonna_dx -->
<!-- CONTENUTO: INIZIANO DA QUI -->
CONTENUTO: SCRIVI QUI
<!-- CONTENUTO: FINISCONO QUI -->
<div id="footer">
<!-- CONTENUTI DEL FOOTER INIZIO -->
FOOTER: SCRIVI QUI
<!-- CONTENUTI DEL FOOTER FINE -->
</div> <!-- footer -->
</div> <!-- contenuto -->
</div> <!-- container -->
</body>
</html>(Inserisco il CSS come codice PHP per la formattazione a colori)
PHP:
@charset "utf-8";
body {
/* COLORE DI SFONDO DELLA PAGINA */
background-color:#66a6b8;
}
#title {
width:1202.5px;
height:90px;
padding:5px;
border: 2px solid #cae0e7;
margin-left:auto;
margin-right:auto;
background-image: url(Images/Sfondo_Title.png);
background-repeat: repeat-x;
background-position: top;
background-color: #83b1fd;
}
#container {
/* SFUMATURA SFONDO */
background-color: #fff;
background-image: url(Images/Sfondo_Container.png);
background-repeat: repeat-x;
background-position: top;
/* FINE SFUMATURE SFONDO */
/* GRANDEZZA E POSIZIONE */
height: 580px;
width: 1180px;
margin-right: auto; /* in questo modo il container è centrato */
margin-left: auto; /* in questo modo il container è centrato */
margin-top:10px;
/* FINE GRANDEZZA E POSIZIONE */
/* BORDI */
border: 20px solid #abcfd9;
/* FINE BORDI*/
}
#contenuto {
/* CONTENITORE INTERNO */
/* SFONDO MONOCROMATICO */
background-color:#a8cdd7;
border: 2px solid #006;
/* DIMENSIONI */
width:1162px;
height:522px;
/* CENTRATURA */
margin-top:2%;
margin-left:auto;
margin-right:auto;
}
#header {
height: 69px;
border-bottom: 2px solid #36C;
border-right: 1px solid #36C;
border-left: 1px solid #36C;
width: 838px;
float:left;
background-color:#fff;
background-image: url(Images/Sfondo_Footer.png);
background-repeat: repeat-x;
background-position: top;
}
#footer {
clear: both;
float: left;
height:71px;
width:1161px;
border-top: 1px solid #039;
background-color: #87d3f9;
background-image: url(Images/Sfondo_Footer.png);
background-repeat: repeat-x;
background-position: top;
}
#colonna_sx {
width: 160px;
height: 450px;
float:left;
border-right: 1px solid #039;
background-color: #87d3f9;
background-image: url(Images/Sfondo_Laterali.png);
background-repeat: repeat-x;
background-position: top;
}
#colonna_dx {
width: 160px;
height: 450px;
float:right;
border-left: 1px solid #039;
background-color: #87d3f9;
background-image: url(Images/Sfondo_Laterali.png);
background-repeat: repeat-x;
background-position: top;
}
/* FORMATTAZIONE DEL CARATTERE */
h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 25px;
font-weight: bold;
text-transform: capitalize;
text-decoration: none;
text-align:center;
color: #006;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: italic;
text-align:center;
color: #039;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: italic;
text-align:center;
color: #039;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-style: italic;
text-align:center;
color: #039;
}
h5 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:15px;
font-style:italic;
text-align:right;
color: #039;
}
/* FORMATTAZIONE IMMAGINI */
/* IMMAGINI NELLA BARRA DEL TITOLO */
#title img {
float: left;
}
Ultima modifica:
