Colonne di stessa lunghezza

**firagaspell** · 24-12-2009, 22:08

Ciao a tutti!

Questo è il mio primo topic in questo forum e vi chiedo aiuto perchè non riesco a fare una cosetta... devo riuscire a dare a due colonne la stessa lunghezza, qualsiasi cosa capiti

.
Innanzitutto il sito su cui sto lavorando è questo:
http://blackgecko.altervista.org/nuovo/index.html
Se volete vedere il vecchio sito internet (vi prego! Non guardate il codice html perchè dal lato SEO fa veramente

) cliccate qui:
http://blackgecko.altervista.org/vecchio/index.html

Come vedete ho una colonna di navigazione sulla sinistra (chiamata #leftbar nel CSS), la parte centrale (#content nel CSS) e la barra destra dove voglio mettere alcune cose come paypal ecc. ecc. (rightbar nei CSS)
Ho due problemi: quello che per me è più grave e quindi deve avere la precedenza è che le due colonne content e rightbar non hanno la stessa lunghezza, l'altro è che nel caso che il menu laterale superi il content e rightbar questi ultimi non si portano alla stessa lunghezza del menu.
Notate una cosa per quanto riguarda il problema del content e rightbar. Ognuna delle due colonne è divisa in tre div: uno dei div si chiama top_border e serve per mostrare il bordo "curvato superiore", un'altro su chiama bottom_border e mostra quello inferiore, l'ultimo si chiama background ed è la parte che uso per contenere il contenuto della barra (è la solita immagine alta 1px che viene ripetuta con repeat-y).
Non so se questa cosa può essere un problema ma ad ogni modo sono tutti e tre contenuti in un altro div che ha lo scopo di definire una regola generale per tutti, compreso lo spazio massimo che possono occupare.

(Chiedo scusa ma tutto il codice è stato fatto da linux e nel fare copia-incolla non vengono copiati gli a capo)
CSS:

codice:

/* Definizione dei tag XHTML */

html, body {
  background-color: #5f504e;
  border-width: 0px;
  font-family: verdana, sans-serif;
  font-size: 12px;
  margin: 0px;
}

/* Definizione della parte centrale del sito */

#all {
  background-color: transparent;
  width: 960px;
  margin: auto;
}

/* Definizione dell'header */

#all #header {
  background-color: #bbb;
  width: 960px;
  height: 150px;
}

/* Definizione dei menu verticali */

#all #leftbar {
  background-color: transparent;
  width: 180px;
  float: left;
}

#all #leftbar #background {
  background: transparent url('img/menu_background.png') repeat-y;
  padding: 0px 5px;
}

#all #leftbar #bottom_border {
  background: transparent url('img/menu_bottom_border.png') no-repeat;
  width: 180px;
  height: 8px;
}

/* Definizione del menu programmi */

#all #leftbar #programs {
  background: transparent url('img/menu_programs.png') no-repeat;
  width: 180px;
  height: 87px;
}

/* Definizione della colonna destra */

#all #rightbar {
  background-color: transparent;
  width: 220px;
  min-height: 100%;
  float: right;
}

#all #rightbar #top_border {
  background: transparent url('img/rightbar_top_border.png') no-repeat;
  width: 220px;
  height: 10px;
}

#all #rightbar #background {
  background: transparent url('img/rightbar_background.png') repeat-y;
  padding: 0px 5px;
}

#all #rightbar #bottom_border {
  background: transparent url('img/rightbar_bottom_border.png') no-repeat;
  width: 220px;
  height: 10px;
}

/* Definizione della parte dei contenuti */

#all #content {
  background-color: transparent;
  margin: 0px 220px 0px 185px;
  width: 555px;
  height: 100%;
}

#all #content #top_border {
  background: transparent url('img/content_top_border.png') no-repeat;
  width: 555px;
  height: 10px;
}

#all #content #background {
  background: transparent url('img/content_background.png') repeat-y;
  padding: 1px 4px 1px 8px;
}

#all #content #bottom_border {
  background: transparent url('img/content_bottom_border.png') no-repeat;
  width: 555px;
  height: 10px;
}

/* Definizione del footer */

#all #footer {
  background-color: #999;
  width: 100%;
  clear: both;
}

XHTML:

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" xml:lang="it-it" lang="it-it" >

<head>
  <title>BlackGecko!</title>
...
</head>
<body>
    <div id="all">
      <div id="header">
        http://blackgecko.altervista.org
      </div>
      <div id="leftbar">
        <div id="programs">
          
        </div>
        <div id="background">
        
        Nessun Programma al momento... provare più tardi
        </div>
        <div id="bottom_border">
          
        </div>
      </div>
      <div id="rightbar">
        <div id="top_border">
          
        </div>
        <div id="background">
          
          Dona con PayPal:

          - 5€;

          - 10€.

        </div>
        <div id="bottom_border">
          
        </div>
      </div>
      <div id="content">
        <div id="top_border">
          
        </div>
        <div id="background">
          
          <h1>Benvenuti!</h1>
          


          Questo è il mio nuovo sito...

          <hr />
          Data di inizio: 15/12/2009;

          Data di fine: ??/??/????;

          Fatto da: Emanuele Di Blasi;

          URL: http://blackgecko.altervista.org;
          </p>
        </div>
        <div id="bottom_border">
          
        </div>
      </div>
      <div id="footer">
        Fatto da Emanuele Di Blasi, 2010. http://blackgecko.altervista.org
      </div>
    </div>
</body>
</html>

Grazie mille a tutti coloro che mi aiuteranno!

**firagaspell** · 25-12-2009, 13:56

se potete rispondetemi per favore

**miki003** · 25-12-2009, 16:57

Originariamente inviato da firagaspell
se potete rispondetemi per favore

Prima di postare, sarebbe bello anche fare una piccola ricerca sul forum.

Comunque ecco qua
http://forum.html.it/forum/showthrea...t=Faux+columns

**firagaspell** · 25-12-2009, 23:47

La ricerca l'avevo fatta e anche con più parole chiave ma non ho trovato niente che mi andasse bene (anche io sono uno di quelli che odia rispondere 120 volte alla stessa domanda

). Grazie mille. Adesso andrò a vedere se questo risolve i miei problemi.

EDIT:
Gli ho dato una letta. In quel caso si usa la tecnica della false colonna fatta con una immagine di background come già viene fatto vedere nella guida avanzata dei CSS su http://css.html.it.
Ha un certo senso applicarlo se la colonna è un rettangolo ma nel mio caso ho a che fare con colonne fatte da più pezzi e con gli angoli arrotondati.
Adesso proverò ad applicare questa tecnica ai div che contengono le colonne che mi interessano e vediamo se funziona... spero proprio di si!

RE-EDIT:
Non funziona... stavo pensando di ricorrere a "height: expression(...);" ma risulta essere rifiutato da tutti i validatori. Come mai? Ci sono tecniche alternative? Il mio scopo era proprio quello di ottenere la validazione dei miei css. Esiste quindi una tecnica con cui posso rendere queste colonne alla stessa lunghezza?

**miki003** · 26-12-2009, 00:57

Originariamente inviato da firagaspell
La ricerca l'avevo fatta e anche con più parole chiave ma non ho trovato niente che mi andasse bene (anche io sono uno di quelli che odia rispondere 120 volte alla stessa domanda

). Grazie mille. Adesso andrò a vedere se questo risolve i miei problemi.

EDIT:
Gli ho dato una letta. In quel caso si usa la tecnica della false colonna fatta con una immagine di background come già viene fatto vedere nella guida avanzata dei CSS su http://css.html.it.
Ha un certo senso applicarlo se la colonna è un rettangolo ma nel mio caso ho a che fare con colonne fatte da più pezzi e con gli angoli arrotondati.
Adesso proverò ad applicare questa tecnica ai div che contengono le colonne che mi interessano e vediamo se funziona... spero proprio di si!

RE-EDIT:
Non funziona... stavo pensando di ricorrere a "height: expression(...);" ma risulta essere rifiutato da tutti i validatori. Come mai? Ci sono tecniche alternative? Il mio scopo era proprio quello di ottenere la validazione dei miei css. Esiste quindi una tecnica con cui posso rendere queste colonne alla stessa lunghezza?

L'unico che ho collaudato e che trovo valido è il metodo delle false colonne, altri che siano validati non ne conosco, per esigenze a cui non ho potuto applicare le false colonne, ho sempre adattato il codice all'occorenza senza seguire un metodo specifico

**firagaspell** · 26-12-2009, 11:55

Ok, grazie ^_^
Volevo fare qualcosa di fluido ma mi sa che ci dovrò lavorare un bel po'

Girerò un po' per internet e vedrò cosa riesco a ottenere. Se qualcuno conosce metodi che mi possano essere d'aiuto lo dica.

Grazie mille miki.

**firagaspell** · 27-12-2009, 19:41

Qualcuno sa come risolvere?

Discussione: Colonne di stessa lunghezza

Strumenti discussione

Ricerca discussione

Visualizza

Colonne di stessa lunghezza

Permessi di invio