soliditi codice

**torrone** · 10-04-2008, 21:05

Avrei una domandina da neofita riguardo all'intergrazione dei fogli di stile con la struttura delle pagine

come vi sembra scritta questa paginetta? cioè è scritto bene css e html?

codice:

<html>
<body>
<style type="text/css">

html, body { 
	margin:0; 
	padding:0; 
	text-align:center; 
} 
 
#corpo{ 
	width:800px; 
	height: 100%;
	text-align:left;  
	margin-left:auto; 
	margin-right:auto;  
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
} 
 
#header {
	position:relative; 
	height:150px; 
	background-color:#333333; 
	width:100%;
} 
 
#colonna {
	width:200px; 
	float:left; 
	position:relative; 
	background-color:#CCCCCC; 
}
 
#contenuto {
	background-color: #99138F;  
	float: right; 
	display:inline; 
	position: relative; 
	width:600px; 
}
 
#footer {
	width: 800px;
	height:100px; 
	background-color:#333333; 
	position: absolute;
	bottom:0;
} 
 
 #nav_header {
	width: 800px;
	height: 20px;
	background-color: #FF0000;
	left: 0px;
	top: 0px;
	position: relative;
}

</style>

<div id="corpo">
	<div id="header"> Header </div>
		<div id="nav_header"> </div>
			<div id="contenuto"> Contenuto </div>
			<div id="colonna"> Colonna </div>
	<div id="footer"> Footer </div>
</div>

</body>
</html>

**torrone** · 11-04-2008, 15:38

up

cmq il titolo era: Solidità codice

**LineaPixel** · 11-04-2008, 16:06

Ma riscontri dei problemi? Le pagine vengono visualizzate come vorresti sui vari browser?
Io di troppo vedo solo quei "position: relative" usati assieme al float

**torrone** · 17-04-2008, 14:15

ho avuto qualche problema con explorer.. cmq ho riscritto completamente tutto ora ma ho un piccolo problemino!... Con explorer si vede bene

mentre con mozilla ho problemi :berto: il che dovrebbe essere al massimo l'incontrario ma vabbè, veniamo al dunque.. ho diviso l'header in due, la parte del logo e la parte dove dovrei metter il pannello utente. vorrei che l'altezza non venga stabilita, cioè se ci sono troppi contenuti in uno il blocco si allunga, invece se ci sono troppi contenuti si sovrappone con quello che c'è sotto! con gli altri div!

CSS

codice:

body {
	color: #333333;
	font-family: Verdana, Arial, helvetica, sans-serif;
	font-size: 8pt;
	height: 100%;
	width: 100%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px; 
	margin-left: auto;
	margin-right: auto;
}

#corpo {
	width: 800px;
	height: 100%;
	text-align: justify;
	left: 0px;
	top: 0px;
	margin: 0 auto;
	position: relative;
	background-color: #FFFFFF;
	border-right: 1px solid #C1C1C1;
	border-left: 1px solid #C1C1C1;
}

#footer_corpo {
	clear: both;
	margin: 0px;
	padding: 0px;
	border-top: 8px solid #fff;
	border-bottom: 8px solid #fff;
	background-color: #F9CE8A;	
	text-align: center;
	color: #000000;
	width: 800px;
}

#header_corpo {
	width: 800px;
	min-height: 150px;
	position: relative;
	border-bottom: 1px solid #C1C1C1;
}

#header_logo {
	float: left;
	width: 330px;
	height: 100%;
	text-align: center;
	border-right: 1px solid #C1C1C1;
	padding-top: 5px;
	padding-bottom: 5px;
}

#header_pannello {
	height: 100%;
	float: left;
	left: 340px;
	text-align: left;
	padding: 10px;
}

#posizione {

	position: relative;
	text-align: left;
	padding: 5px;
	border-bottom: 1px solid #C1C1C1;
}

#colonna {
	clear: both;
	width: 150px;
	padding: 8px 0px 0px 2px;
	vertical-align: top;
	float: left;
	text-align: justify;
}

#contenuto {
	width: 640px;
	padding: 8px 0px 5px 8px;
	vertical-align: top;
	float: left;
	top: 0px;
	left: 155px; 
	text-align: justify;
}

HTML

codice:

<div id="corpo">
    <div id="header_corpo">
      
		<div id="header_logo">
			
		</div>
		<div id="header_pannello">

		</div>

    </div>

    <div id="posizione"></div>

    <div id="colonna"></div>
    <div id="contenuto"></div>

    <div id="footer">

    </div>

</div>

Discussione: soliditi codice

Strumenti discussione

Ricerca discussione

Visualizza

soliditi codice

Permessi di invio