Css per tre div

delta12

Css per tre div

Ho bisogno di realizzare un css per una pagina come nell'immagine dove i rettangoli sono dei div con le relative quote.

Vi posto il codice html
Allora c'è un div grande chiamato 'ilcontenitore', al suo interno ce ne sono due cioè quello di sinistra largo 150 chiamato 'link' e quello di 300x85 chiamato 'motore'.

html:
[html]
<div id=ilcontenitore>

</div>
[/html]

e quel poco di css che sono riuscito a scrivere


#ilcontenitore{
}
#link{
width:150px;
float: left;
}
#motore{
height:85px;
width:300px;
float: left;
}

Mancano soltanto le linee rosse e quella verde. Praticamente il div motore deve distanziarsi 200px dal top e centrarsi nello spazio che gli rimane in base alle dimensioni dello schermo, quindi le linee rosse non devono avere larghezza fissa.

x:x da solo non riesco proprio

tigrone

In #motore prova a mettere:

margin-top: 200px auto;

... e vediamo un po'.

delta12

@tigrone said:

In #motore prova a mettere:

margin-top: 200px auto;

... e vediamo un po'.

non accade nulla, ne in ie ne in firefox

delta12

Fore stiamo facendo un passettino avanti
modificando il codice piu o meno come ha detto tigrone cioè:


#ilcontenitore{
}
#link{
width:150px;
height:400px;
border:2px solid #900;
}
#motore{
height:85px;
width:300px;
margin:0px auto;
border:2px solid;
}

mi ritrovo cosi:
ie non fa niente

mentre firefox centra 'motore' ma va a capo dopo link...

tigrone

Nel contenitore, prova a mettere:

overflow: auto;

delta12

non accade nulla

tigrone

Sto provando... in effetti è più complesso di quel che sembra per tenerlo fluido. Se si potesse fare fisso sarebbe molto più semplice.

tigrone

Forse ci sono...
Copia/incolla il codice in una file html vuoto e aprilo col browser:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xxxx://xxx.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="xxxx://xxx.w3.org/1999/xhtml" xml:lang="it" lang="it" dir="ltr">
<head>
</head>
<body>
<div style="border: 1px solid red; position: fixed; top: 0px; left: 0px; width: 150px; height: 97%;">
<p><strong>Menu</strong></p>
  <ul>
  <li>Link 1</li>
  <li>Link 2</li>
  <li>Link 3</li>
  <li>Link 4</li>
  <li>Link 5</li>
  <li>Link 6</li>
  <li>Link 7</li>
  <li>Link 8</li>
  <li>Link 9</li>
  </ul>
</div>
<div style="margin-left: 150px;">
<center>
<div style="background-color: silver; margin-top: 200px; height: 85px; width:300px; text-align: left;">
<p><strong>Motore</strong></p>
</div>
</center>
</body>
</html>

delta12

Woooow a dir poco perfetto!
Non saprei proprio come ringraziatri

tigrone

Ma figurati! magari si può fare meglio...
Piuttosto, testalo bene su tutti i browser...
Ciao

marcocarrieri

Su Safari, Opera, Chrome, Flock, Firefox 3.6.8, si vede nello stesso modo, c'è solo un leggero spostamento tra IE8 e la sua visualizzazione compatibilità.

tigrone

@marcocarrieri said:

c'è solo un leggero spostamento tra IE8 e la sua visualizzazione compatibilità.
Il solito bastian-contrario...