misure blocchi non conformi

valerio matrix · 19 Gen 2016

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?

Max 1 · 19 Gen 2016

Non puoi usare un id per tre contenitori diversi
un displey inline non mi sembra appropriato

Per un consiglio più esastivo posta il codice di tutta la pagina CSS e HTML

valerio matrix · 19 Gen 2016

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 · 19 Gen 2016

Questo è quello che vedo io con il tuo codice senza modifiche!
Il menu non è centrato!
Cosa vuoi modificare?

SamTo · 20 Gen 2016

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 · 25 Gen 2016

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 · 25 Gen 2016

Prova a usare le misure in percentuale in margin

valerio matrix · 25 Gen 2016

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 · 25 Gen 2016

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 · 25 Gen 2016

grazie mille. Ora ricordo.
Per quanto riguarda i blocchi sto provando con le percentuali. la chiavi credo sia li... proverò ancora

Cerca

Cerca

misure blocchi non conformi

valerio matrix

Nuovo Utente

Max 1

Super Moderatore

valerio matrix

Nuovo Utente

Max 1

Super Moderatore

SamTo

Utente Attivo

valerio matrix

Nuovo Utente

Max 1

Super Moderatore

valerio matrix

Nuovo Utente

Max 1

Super Moderatore

valerio matrix

Nuovo Utente

Discussioni simili