Layout particolare - tabelle o div?

**Uva** · 18-07-2007, 01:58

Salve a tutti

Stò cercand di portare a termine la stesura di tale layout:

Sono giorni che ci sbatto la testa e non ne vengo fuori tra html e css.
Voi come procedereste? Sono un pò novellino naturalmente... e naturalmente i campi colorati devono avere dimensione fissa e contenere i miei "contenuti"... il nero sarà lo sfondo per capirci..

Vorrei capire se ci si può arrivare con i div o se devo per forza usare le tabelle...

Ciao e tutti e grazie x ora

**Myaku** · 18-07-2007, 07:21

Tutto quello che non rappresenta contenuti tabellari in corrispondenza riga/colonna non va gestito con le tabelle.
Il tuo esempio è realizzabile utilizzando i float o i posizionamenti assoluti (visto che dici che hanno dimensioni fisse)

Cyà

**Uva** · 18-07-2007, 09:22

quindi i div? scusa ma i float cosa sono? è forse la proprietà dei div?

potresti essere più specifico?

grazie

**oronze** · 18-07-2007, 09:51

http://css.html.it/guide/lezione/82/...nuti-centrali/
e in genere un po' tutta la guida visto che non ne sai molto:P
Con quel layout ti saranno indispensabili i css

**gabip87** · 18-07-2007, 09:51

senza la base teorica sarà sempre impossibile arrivare ad avere un qualsiasi risultato. per approfondire i tag e gli attributi fai sempre riferimento a w3schools e se non basta ricordati di google.

**Uva** · 18-07-2007, 20:25

stò facendo delle prove seguendo le guide e i vostri consigli...

sono arrivato a questo punto:

Html

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<link href="stile2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #000000;
}
-->
</style></head>

<body>
<div class="container">
  <div class="corpo"></div>
  <div class="corpo_02">Inserire qui il contenuto per  class "corpo_02"</div>
  <div class="corpo_01"></div>  
</div>
</body>
</html>

Css

codice:

html, body {
	margin: 0;
	padding: 0;
}
.container{
	background: Blue;
	height: 700px;
	left: 5px;
	top: 5px;
	margin: 10px;
	border: 10px double #A52A2A;
	}
.corpo {
background: Silver;
margin : 10px;
border : 10px solid #CC0033;
padding : 10px;
width : 100px;
height : 100px;
float: left;
}
.corpo_01 {
background: Silver;
margin : 10px;
border : 10px solid #CC0033;
padding : 10px;
width : 100px;
height : 100px;
float: right;
}
.corpo_02 {
background: Silver;
margin : 10px;
border : 10px solid #CC0033;
padding : 10px;
width : 100px;
height : 100px;
}{

Ma il mio riquadro centrale se ne scappa da tutte le parti...
QUalche suggerimento? Mi sento un pò arenato...

**Myaku** · 18-07-2007, 21:35

primo, hai una graffa aperta di troppo (alla fine del css).
secondo, quando usi i float devi poi usare anche il clear.
terzo, occhio a usare nel modo corretto class o id.
quarto, ricordati sempre che il codice e il tuo foglio di stile vengono letti dall'alto al basso.

Cyà

**Uva** · 19-07-2007, 01:21

Originariamente inviato da Myaku
primo, hai una graffa aperta di troppo (alla fine del css).
secondo, quando usi i float devi poi usare anche il clear.
terzo, occhio a usare nel modo corretto class o id.
quarto, ricordati sempre che il codice e il tuo foglio di stile vengono letti dall'alto al basso.

Cyà

Si si, la graffa era dovuta al copia incolla...
Cosa intendi x usare nel modo corretto class e id? ho sbagliato xchè dovevo usare una sola classe e poi suddividere gli id? E il problema della lettura?
Sei stato un pò criptico oltre che naturalmente gentile x avermi risposto..

**Myaku** · 19-07-2007, 07:47

Originariamente inviato da Uva
Si si, la graffa era dovuta al copia incolla...
Cosa intendi x usare nel modo corretto class e id? ho sbagliato xchè dovevo usare una sola classe e poi suddividere gli id? E il problema della lettura?
Sei stato un pò criptico oltre che naturalmente gentile x avermi risposto..

ottimo, due volte nello stesso thread... le firme che ci stanno a fare?!

l'id identifica in modo univoco un elemento. pertanto, ad esempio, se ci sarà un solo div che avrà un determinato nome, userai id.
Quando invece l'elemento si ripete più volte nella pagina, puoi usare class. Esempio, un div che ha determinate proprietà, che verrà utilizzato più volte nella tua pagina web (attenzione, pagina, non sito intero), userà class.

CSS = Cascade Style Sheet, ovvero Foglio di Stile a Cascata. Come viene pertanto interpretato, te lo dice il nome stesso (dall'alto al basso).
Quindi, la regola dopo sovrascrive quella messa prima
Esempio banalissimo

codice:

h1 {
  font: 12pt Verdana;
}
....
....
h1, h2 {
  font-weight: 14pt;
}

aspettati che h1 verrà scritto in Verdana ma con carattere 14pt.
Questo perchè ho notato che nel tuo html hai corpo_2 prima di corpo_1, mentre nel css hai definito corpo_1 prima di corpo_2. Inoltre corpo_2 non ha float, e considerato che non c'è clear, il comportamento dei box ne può risentire (come ti è in pratica accaduto). Un consiglio: cerca di essere il più ordinato possibile quando scrivi l'html e il css delle tue pagine.

Cyà

**Uva** · 22-07-2007, 15:17

Salve, eccomi di nuovo.
Ho cercato di seguire le vostre direttive e sono arrivato a questo punto:

codice:

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!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>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<link href="css/template_css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #000000;
}
-->
</style></head>

<body>
<div class="container">
  <div class="corpo" id="sx"><?php mosLoadModules ( 'left' ); ?></div>
  <div class="corpo" id="dx"><?php mosMainBody(); ?></div>
  <div class="corpo" id="sotto_sx"><form action="index.php" method="post">
  <div align="center">
    <?php mosLoadModules ( 'user1' ); ?>
    <input class="inputbox" type="text" name="searchword" size="15" value="<?php echo _SEARCH_BOX; ?>"  onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" />
    <input type="hidden" name="option" value="search" />
  </div>
</form>
</div>
  <div class="corpo" id="sotto_dx">
    <?php mosLoadModules ( 'right' ); ?>
  </div>
</div>
</body>
</html>

per l'html e:

codice:

html,body {
	margin:5px 0px; padding:0px;
	text-align:center;
	}	
.container {
	width:565px;
	height: 565px;
	margin:0px auto;
	text-align:left;
	padding:5px;
	border: 3px;
	background-color: Black;
	}
.corpo {
background: Silver;
border : 10px solid #CC0033;
padding : 10px;
float: left;
}
#sx{
background: Orange;
border : 2px solid #F5F5F5;
padding : 10px;
width : 256px;
height : 256px;
float: left;
text-align: center;
}
#dx{
background: #B0C4DE;
border : 2px solid #F5F5F5;
padding : 10px;
width : 256px;
height : 256px;
float: right;
}
#sotto_sx{
background: #9ACD32;
border : 2px solid #F5F5F5;
padding : 10px;
width : 256px;
height : 256px;
float: right;
 position: absolute;
 margin-top: 285px;
 }
 #sotto_dx{
background: #B22222;
border : 2px solid #F5F5F5;
padding : 10px;
width : 256px;
height : 256px;
float: right;
 position: absolute;
 margin-top: 285px;
 margin-left: 285px;
 }
 a:link, a:visited {
	color: #0A1761; text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #1626FF;	text-decoration: none;
	font-weight: bold;
}

td,tr,p,div {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height: 120%;
	font-size: 11px;
	color: Black;
	text-align: justify;
}

h3 {


}

div.box_m td {
	color: #ffffff;
}

div.box_b {
  float: left;
  width: 194px;
	height: 10px;
	overflow: hidden;
	background: #FF4500 no-repeat;
	margin-bottom: 8px;
}

a.mainlevel:link, a.mainlevel:visited {
	font-size: 9px;
	background: Orange no-repeat;
	font-weight: bolder;
	color: #004080;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	padding-left: 0px;
	width: 194px;
}

a.mainlevel:hover {
	text-decoration: none;
	font-weight: bold;
	background-position: 0px -22px;
	color: #B22222;
}

a.mainlevel#active_menu {
	background-position: 0px -48px;
	color: #000;
}
a.mainlevel#active_menu:hover {
	color: #333;
}

per il css (molto codice me lo sono portato dietro da un css già compilato) poi lo dovrò pulire!

Ora il problema è questo, su FF tutto perfetto a mio modo di vedere, mentre su IE non vedo i due riquadri sottostanti...

Qualche aiuto?

Grassie...

Discussione: Layout particolare - tabelle o div?

Strumenti discussione

Ricerca discussione

Visualizza

Layout particolare - tabelle o div?

Permessi di invio