Ridimensionamento browser

**pancu** · 01-08-2006, 16:55

Ragazzi ho questo problema.
Quando io ridimensiono la finestra del browser i div e tutti gli elementi che ho nella mia pagina web vanno uno sotto l'altro..
Come posso evitare questo??
Spero abbiate capito cosa intendo
Saluti
Andrea

**Mich_** · 01-08-2006, 17:12

Probabilmente abbiamo capito cosa intendi, ma non sappiamo come correggere.

L'effetto che hai descritto puo` essere dato da una decina di errori abbastanza comuni ...

Dovresti postare un link ... oppure il codice HTML e CSS (oltre il DOCTYPE)

**pancu** · 01-08-2006, 20:04

ecco il documento html:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<meta http-equiv="Content-language" content="it-IT" />
<link rel="stylesheet" href="/pagliaranisport/style/style.css" type="text/css" />
<title><? echo $g_menu;?></title>
</head>
<body>
<div id="body">

	<div id="header_barra_su">
	</div>
	<div id="header">
		[img]/pagliaranisport/images/header.gif[/img]
	</div>
	<div id="header_barra_giu">
	</div>



		<?
	if ($g_menu == "Home Page" && (!isset($_SESSION['id']))){?>
	[img]/***/images/menu/home_page_bianco.gif[/img]
	[img]/***/images/menu/home_page_bianco.gif[/img][img]/***/images/menu/home_page_bianco.gif[/img][img]/***/images/menu/home_page_bianco.gif[/img][img]/***/images/menu/home_page_bianco.gif[/img][img]/***/images/menu/home_page_bianco.gif[/img][img]/***/images/menu/home_page_bianco.gif[/img][img]/***/images/menu/home_page_bianco.gif[/img][img]/***/images/menu/home_page_bianco.gif[/img]
	<? }
	?></p>

e il css:

codice:

/* CSS Document */
/* CSS Document */
body {
font-family:Arial, Helvetica, sans-serif;
color: #0066CC;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
font-size:10px;
height:auto;
}
p {
font-family:Arial, Helvetica, sans-serif;
color: #0066CC;
background-color: #FFFFFF;
font-size:10px;
}
/* HEADER */
div#header_barra_su{
margin-top:2em;
height:2px;
width:100%;
border-top:1px solid #0066CC;
border-bottom:1px solid #0066CC;
}
div#header_barra_giu{
height:2px;
width:100%;
border-top:1px solid #0066CC;
border-bottom:1px solid #0066CC;
}
div#header_menu{

}

**Mich_** · 02-08-2006, 09:29

Anzitutto dovresti controllare il codice HTML: contiene degli errori.
Nel linguaggio dichiarato (XHTML Strict) non esistono i seguenti attributi che usi:
name, hspace, border, vspace, ecc.

Poi il tuo layout contiene immagini molto larghe, che quindi rendono il layout praticamente fisso: e` chiaro che a stringere non ci sta tutto in larghezza.

Per corerggere dovresti usare immagini piu` piccole, lasciando dello spazio libero che il browser possa sistemarsi a seconda della larghezza del browser.
In linea di massima le immagini non dovrebbero superare i 300px per immagini flottate (o in oggetti flottati), e 600px per immagini a tutta larghezza.
Oppure devi passare ad una formattazione rigida, che pero` ti mette la barra di scorrimento orizzontale se la finestra e` piu` stretta.

**pancu** · 02-08-2006, 15:32

per l'html ok.
Ma per il layout non è che abbia capito benissimo...
Quali sarebbero le mie immagini larghe???Uso immagini da 92px tranne l'intestazione che è 909px ma che non dovrebbe condizionare niente.
E soprattutto dove dovrei lasciare dello spazio libero??
Forse non mi sono spiegato bene.
Il mio problema è questo:

Quando il browser viene rimpicciolito in larghezza, i pulsanti vanno uno sotto l'altro...

**Mich_** · 02-08-2006, 15:39

I pulsanti sono in un pezzo di codice che non hai postato. Hai postato il codice lato server che li genera, ma quello non serve: devi postre il codice che arriva al browser (visualizza il codice da dentro il browser, tramite il menu edit/modifica).

Anche uno screenshot del pezzetto che non ti piace potrebbe aiutare a capire il problema nel dettaglio.

**pancu** · 02-08-2006, 15:43

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<meta http-equiv="Content-language" content="it-IT" />
<meta http-equiv="description" content="Pagliarani Sport di Pagliarani Claudio.Vendita di articoli sportivi caccia e pesca" />
<meta http-equiv="keywords" content="armeria pesca gambettola vendita pescare cacciare fucili pistole canne" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="autore" content="Andrea Pagliarani" />
<script language="javascript" src="/pagliaranisport/inc/function.js" type="text/javascript"></script>
<link rel="stylesheet" href="/pagliaranisport/style/style.css" type="text/css" />
<title>PAGLIARANIsport.it  - Home Page</title>
</head>
<body>
<div id="body">


	<div id="header_barra_su">
	</div>
	<div id="header">
		[img]/pagliaranisport/images/header.gif[/img]
	</div>
	<div id="header_barra_giu">
	</div>
	<div id="header_menu">

			[img]/pagliaranisport/images/menu/home_page_bianco.gif[/img]
	[img]/pagliaranisport/images/menu/azienda_bianco.gif[/img]
	[img]/pagliaranisport/images/menu/prodotti_bianco.gif[/img]
	[img]/pagliaranisport/images/menu/shop_online_bianco.gif[/img]
	[img]/pagliaranisport/images/menu/carrello_bianco.gif[/img]
	[img]/pagliaranisport/images/menu/spedizione_bianco.gif[/img]
	[img]/pagliaranisport/images/menu/produttori_bianco.gif[/img]
	[img]/pagliaranisport/images/menu/faq_bianco.gif[/img]
	[img]/pagliaranisport/images/menu/contatti_bianco.gif[/img]

	[img]/pagliaranisport/images/menu/login_bianco.gif[/img]
		</div>

Questo è il codice lato client.
Il problema sono i pulsanti che vanno a capo.
Più diminuisco la larghezza più loro vanno a capo e formano nuove righe.

**Mich_** · 02-08-2006, 15:54

Non riesco a trovare il CSS per i blocchi:
#header_menu
#header_menu a
#header_menu img

Inoltre con che browser stai testando? Perche` con quel commento prima del DOCTYPE, probabilmente IE interpreta in quirk mode, e non come XHTML Strict.

E ci sono ancora attributi non previsti dalla sintassi.

**pancu** · 02-08-2006, 16:00

Non ho impostato il css per i blocchi:
#header_menu
#header_menu a
#header_menu img

Non saprei cosa impostare nei css di quei blocchi per risolvere questo problema.
Ho testato sia su IE che su Firefox e Safari. Niente da fare..Si comportano tutti alla stessa maniera.

**Mich_** · 02-08-2006, 16:38

header_menu dovra` avere una larghezza definita (ad esempio 100%).
a e/o img al suo interno dovranno avere una larghezza uguale per tutti ed un'altezza pure.

Ma perche` non fai il menu con i tag <ul> e[*] che sono quelli semanticamente corretti ?
(vedi i menu tra i "link utili").

Discussione: Ridimensionamento browser

Strumenti discussione

Ricerca discussione

Visualizza

Ridimensionamento browser

Permessi di invio