Posizionamento Zoom della pagina: i div non stanno al loro posto

Scar991

Utente Attivo
30 Apr 2012
167
0
0
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:

  1. 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)
  2. 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>&quot;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:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
per l'immagine del logo potresti racchiuderla dentro un div
HTML:
<div id="logo">
            <img src="Images/Logo.png" width="90" height="90" alt="logo">
        </div>
e impostare il css con float left
Codice:
#logo {
    float:left;
}
e aggiusti la posizione dell'immagine con margin:

per i div, con FF non si muovono
 
Ultima modifica:

Scar991

Utente Attivo
30 Apr 2012
167
0
0
Ho provato con il float ma non so per quale motivo non funziona. Ho ridimensionato il titolo, aggiunto l'immagine, impostato entrambi i float ma niente...
Per quanto riguarda FF ti faccio uno screen, a me si sposta tutto :S

Sito.jpg
 
Discussioni simili
Autore Titolo Forum Risposte Data
U Posizionamento Rack nel locale tecnico ed eventuali accortezze per evitare incendi Reti LAN e Wireless 1
F Posizionamento google 1# + nuovi utenti organici. Annunci servizi di Social Media Marketing 0
U Posizionamento telecamere per Videosorveglianza IP Cam e Videosorveglianza 7
M Posizionamento nelle serp SEO e Posizionamento 3
M CSS posizionamento stile HTML e CSS 2
S Domande sul posizionamento SEO SEO e Posizionamento 2
S [cerco] persona per SEO, posizionamento sito web Offerte e Richieste di Lavoro e/o Collaborazione 4
Y Meta Tag e posizionamento SEO e Posizionamento 4
G [HTML] Posizionamento testo in un div HTML e CSS 5
T Aiuto posizionamento seo indicizazzione lentissima SEO e Posizionamento 6
jonnino2004 strano comportamento del posizionamento su google SEO e Posizionamento 5
Dariocda Posizionamento home page SEO e Posizionamento 10
M Problema posizionamento google SEO e Posizionamento 8
D Posizionamento video su Youtube SEO e Posizionamento 1
A HELP: vedo il sito posizionato in serp solo con i tool di posizionamento!!! SEO e Posizionamento 3
Roxette Offresi webmaster e posizionamento seo Offerte e Richieste di Lavoro e/o Collaborazione 0
teoxs2508 [HTML] Posizionamento elementi su pagina web HTML e CSS 5
N Posizionamento sito realizzato con Adobe Muse SEO e Posizionamento 3
V Le sessioni: ho dei dubbi sul posizionamento PHP 6
C Posizionamento div HTML e CSS 6
R [OFFRO] Realizzazione siti web statici e dinamici con posizionamento su Google e Social Network Offerte e Richieste di Lavoro e/o Collaborazione 0
asevenx incrementare visite e posizionamento sito SEO e Posizionamento 11
felino Posizionamento sito web: consiglio e soluzione SEO e Posizionamento 8
A pop up come modificare il posizionamento e il tempo HTML e CSS 3
V Problema posizionamento sito tema turismo SEO e Posizionamento 2
S Consiglio Posizionamento Sito SEO e Posizionamento 4
F Posizionamento all'estero SEO e Posizionamento 4
novello88 Consigli per posizionamento nuovo blog SEO e Posizionamento 8
filippino Tag title e posizionamento: così importante? SEO e Posizionamento 1
Marcolotto Screaming Frog: H1 e titoli duplicati... ma ottimo posizionamento SEO e Posizionamento 1
Marcolotto Restyling sito e perdita di posizionamento SEO e Posizionamento 1
braccobaldo Aumento follower su Twitter = miglioramento del posizionamento? SEO e Posizionamento 7
T Passaggio da html a PHP/ASP: rischio perdita posizionamento? SEO e Posizionamento 2
A Sospensione sito (24h) con perdita posizionamento. SEO e Posizionamento 5
G Slideshow e Posizionamento DIV HTML e CSS 8
gandalf1959 problema nel posizionamento di un div HTML e CSS 1
F Parola chiave posizionata su Google Maps è posizionamento? SEO e Posizionamento 10
andry79fi Set di Libri per posizionamento Motori di Ricerca Altri Annunci 0
filippino Posizionamento organico e adwords Google Ads (AdWords) 0
Z Posizionamento micro-sito: aggiungere nuove pagine aiuta? SEO e Posizionamento 1
asevenx Gestire posizionamento voci sottomenu che si nascondono HTML e CSS 1
filippino Link interni: aiutano il posizionamento su google? SEO e Posizionamento 6
asevenx corso webmarketing, SEO, Copywriter, posizionamento Discussioni Varie 3
E problema posizionamento div HTML e CSS 1
A posizionamento pulsante "apri" per box articoli correlati HTML e CSS 2
V problemi di posizionamento SEO e Posizionamento 2
A Posizionamento su Google SEO e Posizionamento 1
V posizionamento pazzo HTML e CSS 7
B Problema di posizionamento PHP 1
L fpdf .. immagine di sfondo e posizionamento testo PHP 1

Discussioni simili