problema div con css

**giobaxx** · 15-06-2010, 10:50

Ciao ragazzi
Sto provanto a realizzare i miei primi layout anche complessi(per me) con i div e mi sono imbattuto in qualche problematica che ancora non ho risolto pienamente.

Sono partito da un layout standard un header due colonne ed un footer....insomma niente di che.
Ho creato all'interno della colonna1 quattro 6 float(nell'immagine allegata sono un float celeste uno giallo e quattro grigi) e successivamente 2 relative(viola).
Questo ha portato la colonna1 ad allungarsi rispetto alla colonna 2..

problema 1

ie8: mi si crea un buco tra colonna2 e footer visto che l'altezza della collona1 è maggiore di quello della colonna2 - e me lo aspettavo direi...

firefox: mi sposta il footer sotto la colonna2 come se fosse relative sotto la colonna2..e quindi il footer non è più footer:-(............

ho risolto allungando la colonna2 fino a raggiungere l'altezza della colonna1 ma la mia curiosità è in un caso reale quindi in cui non si può sapere il contenuto della colonna se questo mi provoca una maggiore altezza di una delle due colonne come faccio a prevenire questo comportamento?

problema 2

restringendo le finestre del browser la colonna due si sposta sotto la colonna1 ed io ho risolto inglobando tutto in un div container....con larghezza fissa...è corretto?..

-------------------------------HTML

<head>
<link rel='stylesheet' href=stile.css Type='text/css'>

</head>
<body topmargin=0 leftmargin=0>

<div class=container>

<div class=header>
RELATIVE CLASS HEADER
</div>
<div class=menu>
RELATIVE CLASS MENU
</div>

<div class=left>
<div class=left11>
<H6>FLOAT CLASS LEFT11</H6>
</div>
<div class=left12>
FLOAT CLASS LEFT12
</div>
<div class=leftd1>
FLOAT CLASS LEFTD1
</div>
<div class=leftd1>
FLOAT CLASS LEFTD1
</div>
<div class=leftd1>
FLOAT CLASS LEFTD1
</div>
<div class=leftd1>
FLOAT CLASS LEFTD1
</div>
<div class=leftdr1>
RELATIVE CLASS LEFTDR1
</div>
<div class=leftdr1>
RELATIVE CLASS LEFTDR1
</div>
</div>

<div class=right>
FLOAT CLASS RIGHT
</div>

<div class=footer>
RELATIVE CLASS FO0TER
</div>

</div>
</body>

-------------------------------CSS-------------------------------------

.header
{
clear:both;
position:relative;
top: 0px;
left: 0px;
width:990px;
height:150px;
background:#CCFF99;/*background-position: center right;*/
/* con il margin<>0 stacca i quadrati*/
font-family:verdana, times;
font-size:12 px;
line-height:12px;
color: #000000;
Font-Weight:normal;
text-decoration:none;
/* zindex comanda chi sta sopra......quello che ha il numero più alto sta sopra*/

font-style:normal;
border-top:0px solid #ff0000;
border-left:0px solid #ff0000;
border-right:0px solid #ff0000;
border-bottom:0px solid #ff0000;
}
.menu
{
clear:both;
position:relative;
top: 0px;
left: 0px;
width:990px;
height:50px;
background:#CC0099;/*background-position: center right;*/
/* con il margin<>0 stacca i quadrati*/
font-family:verdana, times;
font-size:12 px;
line-height:12px;
color: #000000;
Font-Weight:normal;
text-decoration:none;
/* zindex comanda chi sta sopra......quello che ha il numero più alto sta sopra*/

font-style:normal;
border-top:0px solid #ff0000;
border-left:0px solid #ff0000;
border-right:0px solid #ff0000;
border-bottom:0px solid #ff0000;
}

.left
{
float:left;

width:600px;
height:500px;
background:#ADD8E6;/*background-position: center right;*/
/* con il margin<>0 stacca i quadrati*/
font-family:verdana, times;
font-size:12 px;
line-height:12px;
color: #000000;
Font-Weight:normal;
text-decoration:none;
/* zindex comanda chi sta sopra......quello che ha il numero più alto sta sopra*/

font-style:normal;
border-top:0px solid #ff0000;
border-left:0px solid #ff0000;
border-right:0px solid #ff0000;
border-bottom:0px solid #ff0000;
}
.right
{
float:left;
z-index:1pt;
width:390px;
height:950px;
background:#66FF00;/*background-position: center right;*/
/* con il margin<>0 stacca i quadrati*/
font-family:verdana, times;
font-size:12 px;
line-height:12px;
color: #000000;
Font-Weight:normal;
text-decoration:none;
/* zindex comanda chi sta sopra......quello che ha il numero più alto sta sopra*/

font-style:normal;
border-top:0px solid #ff0000;
border-left:0px solid #ff0000;
border-right:0px solid #ff0000;
border-bottom:0px solid #ff0000;

}
.left11
{
float:left;

width:400px;
height:500px;
background:##ADD8E6;/*background-position: center right;*/
/* con il margin<>0 stacca i quadrati*/
font-family:verdana, times;
font-size:12 px;
line-height:12px;
color: #000000;
Font-Weight:normal;
text-decoration:none;
/* zindex comanda chi sta sopra......quello che ha il numero più alto sta sopra*/

font-style:normal;
border-top:0px solid #ff0000;
border-left:0px solid #ff0000;
border-right:0px solid #ff0000;
border-bottom:0px solid #ff0000;
}
.left12
{
float:left;

width:200px;
height:500px;
background:#FFD700;/*background-position: center right;*/
/* con il margin<>0 stacca i quadrati*/
font-family:verdana, times;
font-size:12 px;
line-height:12px;
color: #000000;
Font-Weight:normal;
text-decoration:none;
/* zindex comanda chi sta sopra......quello che ha il numero più alto sta sopra*/

font-style:normal;
border-top:0px solid #ff0000;
border-left:0px solid #ff0000;
border-right:0px solid #ff0000;
border-bottom:0px solid #ff0000;
}
.leftd1
{
float:left;
width:150px;
height:150px;
background:#999999;/*background-position: center right;*/
/* con il margin<>0 stacca i quadrati*/
font-family:verdana, times;
font-size:12px;
line-height:12px;
color: #000000;
Font-Weight:normal;
text-decoration:none;
/* zindex comanda chi sta sopra......quello che ha il numero più alto sta sopra*/

font-style:normal;
border-top:0px solid #ff0000;
border-left:0px solid #ff0000;
border-right:0px solid #ff0000;
border-bottom:0px solid #ff0000;
}

.leftdr1
{
position:relative;
clear:both;
width:600px;
height:150px;
background:#996699;/*background-position: center right;*/
/* con il margin<>0 stacca i quadrati*/
font-family:verdana, times;
font-size:12 px;
line-height:12px;
color: #000000;
Font-Weight:normal;
text-decoration:none;
/* zindex comanda chi sta sopra......quello che ha il numero più alto sta sopra*/

font-style:normal;
border-top:0px solid #ff0000;
border-left:0px solid #ff0000;
border-right:0px solid #ff0000;
border-bottom:0px solid #ff0000;
}
.footer
{
position:relative;
top: 0px;
left: 0px;
width:990px;
height:150px;
clear: both;
background:#FFCCFF;/*background-position: center right;*/
/* con il margin<>0 stacca i quadrati*/
font-family:verdana, times;
font-size:12 px;
line-height:12px;
color: #000000;
Font-Weight:normal;
text-decoration:none;
/* zindex comanda chi sta sopra......quello che ha il numero più alto sta sopra*/

font-style:normal;
border-top:0px solid #ff0000;
border-left:0px solid #ff0000;
border-right:0px solid #ff0000;
border-bottom:0px solid #ff0000;
}
.container
{
top: 0px;
left: 0px;
width:990;
border-top:0px solid #ff0000;
border-left:0px solid #ff0000;
border-right:0px solid #ff0000;
border-bottom:0px solid #ff0000;
}

**Mich_** · 15-06-2010, 11:01

Anzitutto quando posti codice usa i tag corretti (bottone CODE sopra l'area di inserimento), altrimenti diventa illeggibile.

E occhio ai tag deprecati: dovresti usare un linguaggio moderno, tipo XHTML 1.0 Strict e non usare tag di formattazione che vanno in conflitto con i CSS

Risp.1 --> false colonne (fa' na ricerca nel forum o vedi tra i "link utili")

Risp.2 --> e` una soluzione possibile. Altra soluzione e` un layout fluido (vedi raccolte di layout tra i "link utili")

**giobaxx** · 15-06-2010, 11:26

scusa:-(....per gli errori nei post.....

relativamente ad xhtml1 posso trovare qualcosa sul sito....che elenchi i tag che vanno in conflitto con i css?

grazie per i link.....

**Mich_** · 15-06-2010, 11:45

Originariamente inviato da giobaxx
scusa:-(....per gli errori nei post.....

Se la gente leggesse il regolmento prima di postare non occorrererebbe ripetere le stesse cose centinaia di volte

relativamente ad xhtml1 posso trovare qualcosa sul sito....che elenchi i tag che vanno in conflitto con i css?

Se validi per XHTML 1.0 Strict il validatore ti trova i tag deprecati ed obsoleti

**giobaxx** · 15-06-2010, 16:10

...ci sto uscendo fuori di testa.....
per provare a fare la validazione hO scritto file nuovo html...ed uno css....e nonostante ci sia un solo div ed una sola classe la validazione mi da una serie di errori che proprio non riesco a capire...

codice:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>La mia prima pagina XHTML</title>
		<link href="prova.css" rel="stylesheet" type="text/css" />
		
  </head>
  <body >
      <div class=header>   
   
      <div>
  
  </body>
</html>

codice:

.header
{
clear:both;
position:relative;
top:0px;
left:0px;
width:990px;
height:150px;
background:#CCFF99;
font-family:verdana, times;
font-size:12px;
line-height:12px;
color:#000000;
Font-Weight:normal;
text-decoration:none;
font-style:normal;
}

**ResianTaxidrive** · 15-06-2010, 16:19

Direi che mancano le " qui <div class=header> e quindi prova con <div class="header">

**giobaxx** · 15-06-2010, 16:32

mancava anche lo / sul div di chiusura!!!!!!! un </div> :-(

una curiosità è possibile che la validazione veda <body > come un errore? e debba mettere <body>?....mi era scappato uno spazio di troppo

GRAZIE!!!!!!!!!!!!

**ResianTaxidrive** · 15-06-2010, 17:28

ma adesso che hai corretto quei / e " mica te lo da ancora l'errore su body?

**giobaxx** · 15-06-2010, 22:30

no ora no....mah....quello che ri frega è che funziona comunque anche se fai errori

**ResianTaxidrive** · 16-06-2010, 10:27

Perchè i browser capiscono comunque ma non è un motivo per non correggere gli errori

Discussione: problema div con css

Strumenti discussione

Ricerca discussione

Visualizza

problema div con css

Permessi di invio