Ciao a tutti
Ho iniziato da poco a creare siti con i css. Fino ad oggi avevo usato solo le tabelle e come ovvio, ho un bel po' di difficolta'.
vorrei relizzare un semplice sito con layout a due colonne (menu a sx) e con news nel contenitore centrale divise in sezioni con bordo e immagini. Per fare questo ho utilizzato due esempi di layout di html.it ma il risultato non e' quello desiserato. Per la precisione non riesco a visualizzare il bordo delle singole sezioni (textimage) e il colore dello sfondo.
Allego il codice e...portate pazienza se ho scritto qualche cretinata. Grazie
html:
<html>
<head>
<title>Layout a due colonne con float</title>
<style type="text/css">
@import url("2cpbase.css");
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Sito AABBCC</h1>
</div>
<div id="content">
<div class="textimage">
[img]delfino2.jpg[/img]
<h1>News 1</h1>
testo news 1........</p>
</div>
<div class="clearer"></div>
<div class="textimage">
[img]delfino2.jpg[/img]
<h2>News 2</h2>
testo news 1........</p>
<div class="clearer"></div>
</div>
</div>
<div id="navigation">
<ul>
[*]Home
[*]Primo
[*]Secondo
[*]Terzo
[*]Quarto
[*]Quinto
[*]Sesto
[/list]
</div>
<div id="footer">
Copyright, 2006 - 2007 by Xxxx for xxxxxxxxx
</div>
</div>
</body>
</html>
il css:
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center;}
div#container{position:relative; width: 760px;margin: 0 auto;text-align: left;
border-left: 2px solid #36c;border-right: 2px solid #36c}
/*stili generici, su header e footer*/
div#header{background-color:#36C;color: #ff0}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}
/*stili specifici per il layout*/
div#navigation{position:absolute;top: 80px;width: 12em; background: #6CFDFF; height: 250px; }
div#content{margin-left: 12em; padding: 1em}
div#footer{text-align:center; padding: 0.5em; background-color: #69c; color: #000}
/*stili per la navigazione*/
div#navigation ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none;}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal bold 1.2em/1.6em arial,sans-serif;text-decoration: none; border-bottom-style: none; }
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}Torna indietro
div.textimage{width: 400px;margin-bottom: 10px;border: 1px solid #000;background-color: #f9f9f9; }
div.textimage img{float:left;margin: 10px}
div.textimage h2, div.textimage p{margin:0 10px;padding: 0}
div.textimage h2{margin-top: 10px; color: #666}
div.clearer{clear: left}
Rispondi quotando
