misure blocchi non conformi

valerio matrix

Nuovo Utente
7 Mag 2015
33
0
6
buongiorno... sto provando a scrivere del codice dopo un po di tempo di inattività.. sono un po' arruginito ;)
vi posto il codice in questione:
Codice:
#blocco {
	width: 300px;
	height:300px;
	background-color: rgba(255,255,255,0.7);
	border-width: 2px;
	border-style: solid;
	border-color: white;
	display: inline;
	padding: 5px 10px 5px 10px;
	margin:  5px  2px 5px  2px
}
e vi posto anche l'immagine di ciò che vedo.
Di fatto, ci dovrebbero essere 3 quadrati 300 px in linea tra il menu e il contenitore contenuti, ma sono piccolissimi. Cosa ho sbagliato?
Immagine.jpg
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
  1. Non puoi usare un id per tre contenitori diversi
  2. un displey inline non mi sembra appropriato
Per un consiglio più esastivo posta il codice di tutta la pagina CSS e HTML
 

valerio matrix

Nuovo Utente
7 Mag 2015
33
0
6
Lo faccio per hobby e molto probabilmente il codice non è pulito, nel senso che ci saranno cose non necessarie. Ti ho messo i due fogli di stile e la pagina html.

Codice:
body {
BACKGROUND-COLOR: rgb(166, 16, 34); /! rosso fuoco !/

}

#contenitore {
	width: 1024px;
	margin: 0 auto;
	padding: 0;
	}


#top {
	width: 1024px;
	height: 80px;
	background-color: #990033;
	border-width: 2px;
	border-style: solid;
	border-color: white;
	display:block;

	}
#top1 {
	width: 250px;
	height: 80px;
	background-color: white;
	color: rgb(25, 25, 112);
	font-family: arial, sans-serif;
	font-size: 16px;
	text-align: center;
	font-weight: bold;
	float: left;
	}
#top2 {
	width: 774px;	
	height:80px;
	background-color: green;
	background: url(../img/skyline.jpg) no-repeat;
	float:left;
	}
#menu_principal {
	width: 1024px;
	height: 30px;
	background-color: white;
	margin: 10px 0 15px 0;
	border-width: 2px;
	border-style: solid;
	border-color: white;
	
	}
		#menu_principal ul
		{
		display: block;
		margin: 5 auto;
		
		width: 1024px;
		height: 30px;
		}

		#menu_principal li
		{
		display: inline;
		margin: 0px;
		padding: 8px;
		
		}

			#menu_principal a:link, 
			#menu_principal a:visited
			{
			color: rgb(25, 25, 112);
			text-decoration:none;
			font-variant:small-caps;
			}


#contenuto {
width: 1004px;
background-color: rgba(255,255,255,0.7);
border-width: 2px;
border-style: solid;
border-color: white;
display: block;
float: left;
padding: 5px 10px 5px 10px;
margin:  20px  0px 20px  0px;
}
#footer {
	width: 1024px;
	background-color: white;
	margin: 10px 0 15px 0;
	float: left;
	border-width: 2px;
	border-style: solid;
	border-color: white;
}
Codice:
#cont_blocco {
	width: 1024px;
	height: 300px;
	display: block;
	clear: both;
	
}
	
#blocco {
	width: 312px;
	height: 300px;
	clear: none;
	float: left;
	background-color: rgba(255,255,255,0.7);
	border-width: 2px;
	border-style: solid;
	border-color: white;
	display: block;
	padding: 5px 10px 5px 10px;
	margin:  5px  2px 5px  2px;
}
Codice:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>Gestione Aurora 97</title>
<link rel="stylesheet" type="text/css" href="css/classi.css" />
<link rel="stylesheet" type="text/css" href="css/stile.css" />
<link rel="stylesheet" type="text/css" href="css/blocco_home.css" />
</head>

<body>
	<div id="contenitore">
		<div id="top">
			<div id="top1">
				<h1> SERVER </h1>
			</div>
			<div id="top2">
			</div>
		</div>
		<div id="menu_principal">
			<ul>
				<li><a href="index.html">HOME</a></li>
				<li><a href="soci.html">SOCI</a></li>
				<li><a href="risorseumane.html">RISORSE UMANE</a></li>
				<li><a href="contabilita.html">CONTABILITA</a></li>
				<li><a href="approvvigionamento.html">APPROVVIGIONAMENTO</a></li>
				<li><a href="mezzi.html">MEZZI</a></li>
				<li><a href="iso.html">ISO 9001</a></li>
				<li><a href="archivio.html">ARCHIVIO</a></li>
			</ul>
		</div>
		<div id="cont_blocco">
			<div id="blocco">  <!-- blocco 1 -->
			</div>
			<div id="blocco">  <!-- blocco 2 -->
			</div>
			<div id="blocco">  <!-- blocco 3 -->
			</div>
		</div>
		<div id="contenuto">
		<p> Prova </p>
		</div>
		<div id="footer">
		</div>
	</div>
</body>
</html>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
01.jpg
Questo è quello che vedo io con il tuo codice senza modifiche!
Il menu non è centrato!
Cosa vuoi modificare?
 

SamTo

Utente Attivo
18 Apr 2015
40
0
6
Torino
Quoto Max 1,
Ho testato il codice senza modifiche sulle ultime versioni di IE, Chrome, Firefox e Opera, i blocchi risultano come nella schermata di Max 1 (312x300).

Quale browser utilizzi quando vedi l'errore?
 

valerio matrix

Nuovo Utente
7 Mag 2015
33
0
6
Ciao.. scusate il ritardo.
Ho aperto di nuovo la pagina e mi dava lo stesso problema, cosi ho provato a cancellare la cache e adesso va bene. Il problema ora è un altro: come faccio a centrare il testo del menù? e come posso centrare i blocchi (i tre blocchi) con i margini degli altri? non riesco a farlo con i singoli px, c'è un modo per distanziarli gli uni dagli altri in percentuale allo spazio libero che hanno o in modo automatico?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Prova a usare le misure in percentuale in margin
 

valerio matrix

Nuovo Utente
7 Mag 2015
33
0
6
Ancora non ci sono riuscito ma continuo a provare. Prima che vado troppo avanti, un'ultima cosa, non posso utilizzare lo stesso id per i tre blocchi? ne creo 3 diversi?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Un ID è un'identificatore univoco ciò vuol dire che nella stessa pagina vuole usato una sola volta, pertanto non si può dare a tre elementi uno stesso ID bisogna usare 3 ID diversi.
Se vuoi usare le stesse regole per tutti e tre bisogna che usi una classe
 

valerio matrix

Nuovo Utente
7 Mag 2015
33
0
6
grazie mille. Ora ricordo.
Per quanto riguarda i blocchi sto provando con le percentuali. la chiavi credo sia li... proverò ancora :)
 
Discussioni simili
Autore Titolo Forum Risposte Data
M [Xamarin] Rilevare le misure antropometriche di una persona puntando la fotocamera su di essa Offerte e Richieste di Lavoro e/o Collaborazione 1
G [PHP] Quali sono tutte le misure di sicurezza che un sito deve avere? PHP 1
G Testo che si adatta in grandezza alle misure di un DIV: è possibile farlo? HTML e CSS 2
Y corrispondenza misure portando un layout da photoshop in html/css Photoshop 0
C quali sono le misure di sicurezza minime per la privacy? Leggi, Normative e Fisco 0
gara1 MIT app: blocchi relazionali Sviluppo app per Android 1
trattorino [Javascript] aprire blocchi via via che si scorre Javascript 0
trattorino [PHP] blocchi div che si posizionano in alto automaticamente PHP 5
M Divisione in blocchi PHP 3
D [Risolto] Invio mail a blocchi Classic ASP 31
P Impossibile completare immediatamente l'operazione sul socket non a blocchi. PHP 1
J while dentro while per invio email blocchi PHP 0
N Invio email a blocchi PHP 9
maxbossi Aggiungere blocchi alla sidebar di vB4 CMS (Content Management System) 2
C drupal: blocchi diversi per ogni "pagina" CMS (Content Management System) 5
S Inserimento Video dentro blocchi Javascript 1
M schema a blocchi! HTML e CSS 2
B Evitare che explorer blocchi pulsanti flash Flash 3
C PHP-NUKE: I blocchi LINKS CORRELATI e ARTICLE RATING PHP 0
A Explorer i suoi blocchi HTML e CSS 2
A creare blocchi in aspnuke 2.0.4 Classic ASP 0
A crea blocchi asp nuke 2.0.4 Classic ASP 0
felino Mac OS e Client Mail: Stato non in linea Mac e Software 1
I nome utente non esiste nel database PHP 1
M Drag and Drop non capisco le sequenze... Javascript 1
L Suggerimento Pagespeed per non vedenti HTML e CSS 0
F comando di inclusione file audio in I-Pad non funziona HTML e CSS 1
M Immagini non usate WordPress 0
B Non riesco a trovare i cognomi con i caratteri speciali in Access (Microsoft 365) MS Access 0
G Numero zero null non deve visualizzare nulla PHP 0
F Paypal _xclick IPN non risponde PHP 1
R Variabile non risconosciuta dentro una funzione PHP 1
C ACCESS Aprire maschera se valore non presente in una combo MS Access 7
E Alert non viene mostrato PHP 1
felino Hardisk WD SATA 1TB 3.5" non si avvia! Hardware 4
K Scrip non funzionante Javascript 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
zorro CREATE TABLE non funziona PHP 6
L tipo boolean non funzionante su mariadb (mysql). E codice php 7.4. PHP 0
Sevenjeak Php8 non carica estenzioni PHP 0
R query DELETE non cancella i record PHP 1
otto9due Input text: accetta solo numeri e non può essere vuoto. Javascript 9
G Non vedo frecce su forme Photoshop 2
G Il mio sito dopo aver abilitato l'ssl non visualizza le immagini con indirizzi senza ssl HTML e CSS 0
P jquery refresh div non funziona Javascript 0
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
S Certificato SSL non funzionante Domini 0
zorro modulo di registrazione: funziona ma non sempre PHP 2
D Form contatti non funzionante HTML e CSS 0
MarcoGrazia Trovare record nel database partendo da id non sequenziali PHP 6

Discussioni simili