Layout Css

**afterhours1988** · 02-06-2012, 16:15

Premetto che ho utilizzato le tecnologie per la programmazione web solo per realizzare un progettino all'università, quindi le mie conoscenze sono abbastanza scarse a riguardo anche perchè per la realizzazione di progetti più grossi ho usato vari cms!
Da qualche giorno mi sto cimentando, più per curiosità che per esigenze lavorative, con l'uso dei CSS classici.

vorrei realizzare un layout con intestazione, pagina centrale e footer separati da un pò di spazio. La pagina centrale a sua volta deve essere divisa 2 parti sempre separate con menù a sinistra e gli articoli a destra. Ovviamente vorrei che il div contenitore centrale aumenti le sue dimensioni in base ai div (sinistro e destro) che contiene. In pratica i div non si devono accavallare mai.

In pratica dovrei ottenere qualcosa come il disegno che ho allegato.

Ecco quì il codice che mi produce orrori

!! I colori inseriti sono un vero e proprio cazzotto in faccia a tutti i tipi di design in generale ma li uso solo per distinguere i vari div.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script language="javascript" type="text/javascript" src="jquery-1.7.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Preve con Nik</title>
<meta name="author" content="Onion" />
<link rel="stylesheet" type=text/css href="ProvaStyle.css">
<style type="text/css">
div#Contenitore
{
position:static;
margin-top:5%;
margin-left:10%;
margin-right:10%;
margin-bottom:5%;
background-color: #dedede;
width: 80%;
}

div#Intestazione
{
position:static;
height:25%;
width:100%;
background-color:red;
border-radius: 5px;
}

div#Corpo
{
position: static;
width:100%;
height:100%;
background-color: green;/*#FF8080;*/
border-radius: 5px;
}

div#Footer
{
position:static;
height:15%;
width: 100%;
top:10px;
background-color: #008080;
border-radius: 5px;
}

div#Sinistro
{
float:left;
width: 20%;
background-color:yellow;
border-radius: 5px;
}

div#Destro
{
float:right;
width: 79%;
background-color:blue;
border-radius: 5px;
}
</style>

</head>
<body>

<div id="Contenitore">

<div id="Intestazione">
<h1 id="Intestazione">
<h1>Prova Intestazione</h1>
</h1>
</div>

<div id="Corpo">
<div id="Sinistro">
<h1>Prova Sinistro</h1>
</div>
<div id="Destro">
<h1>Prova Destro</h1>
</div>
</div>

<div id="Footer">
<h1>Prova Footer</h1>
</div>
</div>
</body>
</html>

Spero di non essere troppo banale e di non avere annoiato nessuno.
Grazie in anticipo per le risposte

**carlomarangoni** · 02-06-2012, 17:09

Brutto titolo a rischio chiusura thread, Help mee è errato si scrive help me!

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Documento senza titolo</title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
.div-1 {
	border: none;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 58.56em;
}

.div-1-1 {
	border: none;
	clear: both;
	float: left;
	padding: 0px;
	width: 58.56em;
}

.div-2 {
	border: none;
	text-align: left;
	width: 58.56em;
}

.div-2-1 {
	background-color: #ff0000;
	border: none;
	clear: both;
	display: inline;
	float: left;
	line-height: 1.19em;
	margin-left: 10px;
	margin-top: 10px;
	padding: 10px;
	width: 56.06em;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */

}

.div-2-2 {
	background-color: #ffff00;
	border: none;
	clear: both;
	display: inline;
	float: left;
	line-height: 1.19em;
	margin-left: 10px;
	margin-top: 10px;
	padding: 10px;
	width: 10.06em;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */

}

.div-2-3 {
	background-color: #999999;
	border: none;
	float: left;
	line-height: 1.19em;
	margin-left: 10px;
	margin-top: 10px;
	padding: 10px;
	width: 44.13em;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */

}

.div-2-4 {
	background-color: #008080;
	border: none;
	clear: both;
	display: inline;
	float: left;
	line-height: 1.19em;
	margin-left: 10px;
	margin-top: 10px;
	padding: 10px;
	width: 56.06em;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */

}
</style>
	</head>
	<body>
		<div class="div-1">
			<div class="div-1-1">
				<div class="div-2">
					<div class="div-2-1">Intestazione</div>
					<div class="div-2-2">Menu</div>
					<div class="div-2-3">ContenutiColonna destra</div>
					<div class="div-2-4">Footer</div>
					<div style="clear: both;"></div>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>

Resta sottointeso che per IE ci vuole un'altro codice per i bordi arrotondati

**afterhours1988** · 03-06-2012, 10:24

ahahahah scusate l'ignoranza riguardo alle regole del sito! Grazie mille per la risposta immediata.. Avrei preferito un pò più di teoria e un pò meno di codice per capire dove sbagliavo ma capirò paragonando i codici!!! Grazie tante ancora, gentilissimo..

**afterhours1988** · 05-06-2012, 14:17

Rieccomi. Allora.. non capivo determinate scelte come, soprattutto, il fatto di usare tre div uno dentro l'altro come contenitore centrale. Ho deciso di rimodellare il tutto mischiando i tuoi consigli con le mie idee e, diciamo, che ho ottenuto qualcosa di simile con meno codice e meno DIV.. Quà c'è il codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MyIndex</title>
<meta name="author" content="Onion" />
<script language="JavaScript" type="text/javascript" src="jquery-1.7.1.js"></script>

<style title="text/css">
#Contenitore
{
border:none;
margin-left:auto;
margin-right:auto;
width: 60em;
background-color:#DEDEDE;
padding:3px;
}

#Intestazione
{
border:none;
background-color:green;
clear:both;
display: line;
margin-bottom:0.5em;
border-radius:3px;
}

#Sinistro
{
border:none;
background-color:yellow;
float:left;
width: 15em;
margin-bottom:0.5em;
border-radius:3px;
}

#Destro
{
border:none;
background-color: red;
float:right;
width: 44.5em;
margin-bottom:0.5em;
border-radius:3px;
}

#Footer
{
border:none;
background-color:#008080;
clear:both;
width: 100%;
border-radius:3px;
}

</style>

</head>
<body>
<div id="Contenitore">
<div id="Intestazione">
Intestazione
</div>
<div id="Sinistro">
Sinistro
</div>
<div id="Destro">
Destro
</div>
<div id="Footer">
Footer
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>

Vorrei sapere, se possibile, se la scelta di utilizzare quei tre div é mirata e giustificata da qualche motivo particolare! Cioè, il mio codice così com'è potrebbe darmi problemi in determinate situazioni che attualmente disconosco?? Ah e poi, a che ci sono, gradirei un piccolo consiglio: come si fa ad inserire il codice indentato nel form??

Discussione: Layout Css

Strumenti discussione

Ricerca discussione

Visualizza

Layout Css - Help Mee

Grazie mille

Risolto. Curiosità a riguardo..

Permessi di invio