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
Rispondi quotando