Adattare due parametri dello stesso CSS; è possibile?

[sweet_elly91]

Salve a tutti, ^^
mi scuso per il disturbo. Sono nuova del Forum, mi chiamo Elena.
Vorrei chiedervi di aiutarmi nella risoluzione di un problema.
Dunque, io ho un css a due colonne. Per quel che riguarda la colonna di sinistra, il codice è questo (non riporto i codici per interi, ma se dovesse servire, li posto volentieri):

#leftcolumn
{color : #333;
border : 1px solid #4e7fb6;
width : 215px;
height: 1670px;
float : left;
background : white; margin-left:0; margin-right:5px; margin-top:0; margin-bottom:5px
}

Per quel che concerne la colonna di destra, il codice è questo:

#rightcolumn {
float : right;
border-bottom : 1px solid #4e7fb6;
height : auto;
width : 578px;
display : inline;
background-image : url('images/rcbg.png');
background-repeat : repeat-y; margin-left:0; margin-right:0; margin-top:0; margin-bottom:5px

Come potete intuire, l'altezza della colonna di destra si adatta in base al contenuto ivi inserito. Ecco, io vorrei che l'altezza della colonna di sinistra (al momento 1670px) assumesse di volta in volta lo stesso valore (praticamente casuale) dell'altezza della colonna di destra, valore casuale proprio perché si adatta in base al contenuto. Non sono un'esperta, perciò non so se sia possibile. Spero di sì. Vi ringrazio in anticipo.

Qualora non fosse possibile, potreste gentilmente consigliarmi una soluzione alternativa?
Grazie davvero.

Un abbraccio!

[Mich_]

Anzitutto benvenuta nel forum!

Mi par di capire che stai cercando il trucco
false colonne (faux columns)
E` argomento trattato infinite volte, per cui ti rimando a discussioni vecchie: fa' una ricerca nel forum (bottone in alto) con tale parola chiave e troverai molte risposte ...
E se non sbaglio e` trattoato anche tra i "link utili"

[sweet_elly91]

Ciao!
Anzitutto ti ringrazio tanto per il tuo benvenuto.
Chiedo scusa se ho aperto un topic che è già stato trattato diverse volte; il fatto è che non ero a conoscenza di queste "faux columns"; controllerò subito e ti ringrazio tanto per la tua cortesia e per la celerità della tua risposta!

Tanti saluti.

[sweet_elly91]

Scusate, sono ancora io.... ^^ ...
Purtroppo non sono un'esperta del campo; ho effettuato la ricerca che mi hai consigliato ed ho appurato che il metodo delle false colonne è proprio ciò che cerco. =)
Tuttavia, non riesco a capire come inserirlo per bene...posso chiedere il tuo (vostro) aiuto?
Vi ringrazio anticipatamente.

Il codice del mio CSS è il seguente:

* {
padding : 0;
margin : 0;
}
body {
font-family : Tahoma, Verdana, Arial, sans-serif;
font-size : 10px;
}
img {
padding : 0px;
border : 1px solid #6666FF;
}
img.floatTL {
float : left;
margin-right : 10px;
margin-bottom : 0;
margin-top : 10px;
margin-left : 10px;
}
img.floatTR {
float : right;
margin-left : 7px;
margin-bottom : 0;
margin-top : -2px;
margin-right : 10px;
}
p {
text-align : justify;
padding : 5px;
color : #666;
font-size : 1.1em;
}
#wrapper {
margin : 0 auto;
width : 800px;
}
#header {
color : #333;
width : 800px;
height : 142px;
float : left;
background-image : url('http://www.allgamestaff.altervista.org/AllGame_Header_generale.jpg');
background-repeat : no-repeat; margin-left:0; margin-right:0; margin-top:10px; margin-bottom:5px
}
.logo h1#lineone {
font-size : 2em;
font-weight : lighter;
font-family : helvetica, arial, sans-serif;
padding-top : 40px;
padding-left : 155px;
color : #99ff32;
border : none;
top : 0;
left : 14px;
letter-spacing : -1px;
}
.logo h1#lineone span {
color : #0066ff;
}
.logo h2#linetwo {
padding-left : 155px;
font-size : 0.9em;
font-family : helvetica, arial, sans-serif;
text-transform : none;
top : 25px;
left : 14px;
color : #0066ff;
}
.logo h2#linetwo a {
color : #0066ff;
text-decoration : none;
}
#navigation {
float : left;
width : 800px;
height : 36px;
color : #333;
background-image : url('http://www.allgamestaff.altervista.org/images/navbarbg.jpg');
background-repeat : no-repeat; margin-left:0; margin-right:0; margin-top:0; margin-bottom:5px
}
#navigation {
background-color : #1f00ca;
}
#navigation ul {
font-family : Tahoma, Verdana, Arial, sans-serif;
font-weight : bold;
color : #0066ff;
text-align : center;
margin : 0;
padding-bottom : 5px;
padding-top : 10px;
padding-left : 0;
}
#navigation ul li {
display : inline;
}
#navigation ul li a {
padding : 5px 10px 5px 10px;
color : #004ab2;
text-decoration : none;
border-left : 1px solid #004ab2;
border-right : 1px solid #004ab2;
margin-right : -5px;
}
#navigation ul li a:hover {
color : #fffffe;
}
#leftcolumn
{color : #333;
border : 1px solid #4e7fb6;
margin : 0 5px 5px 0;
width : 215px;
height: 1670px;
float : left;
background : white;
}
#leftcolumn h3 {
padding-left : 5px;
padding-top : 3px;
padding-bottom : 8px;
font-size : 1.4em;
font-weight : lighter;
color : #4e7fb7;
letter-spacing : 0px;
background-image : url('http://www.allgamestaff.altervista.org/images/weblink1.gif');
}
#leftcolumn ul {
padding : 3px 0 8px 0;
}
#leftcolumn li {
line-height : 18px;
background : #fff;
list-style : none;
padding-left : 0;
margin-left : 21px;
color : #4e7fb6;
}
#leftcolumn ul li
a:link {text-decoration: none; color: #6666FF}
a:visited {text-decoration: none; color: #6666FF}
a:hover { color : #0000FF; }
}
#leftcolumn a {
text-decoration : none;
color : #4e7fb8;
}
.news {
margin-left : 5px;
width : 196px;
height: 68px;
padding-bottom : 50px;
}
.news p {
margin-top : 0;
padding-left : 5px;
border : 1px solid #6172f4;
background-color : #bfd5f9;
}
.news b {
color : #577c81;
}
.news em {
line-height : 10px;
color : #0f2bff;
}
.news h2 {
font-family : "arial", helvetica, sans-serif;
font-size : 1.2em;
margin-top : 5px;
margin-left : 5px;
margin-bottom : 10px;
color : #679499;
}
#rightcolumn {
float : right;
border-bottom : 1px solid #4e7fb6;
width : 578px;
height: auto;
display : inline;
background-image : url('http://www.allgamestaff.altervista.org/images/rcbg.png');
background-repeat : repeat-y; margin-left:0; margin-right:0; margin-top:0; margin-bottom:5px
}
#rightcolumn h2 {
background-image : url('http://www.allgamestaff.altervista.org/images/kantun.png');
background-repeat : no-repeat;
background-position : 0 1px;
padding-left : 10px;
padding-top : 5px;
font-size : 1.3em;
color : #4e7fb7
}
#rightcolumn h4 {
padding-left : 5px;
padding-top : 6px;
font-size : 1.3em;
color : #4e7fb7;
border-bottom : 2px solid #4e7fb7;
margin-left : 10px;
margin-right : 10px;
}
#box {
margin-top : 5px;
margin-bottom : 10px;
}
#box p {
font-size : 1em;
}
#box a {
text-align : right;
text-decoration: underline;
float : none;
color : #0000FF;
font-weight : bolder;
}
.content_right {
margin : 0 auto;
display : inline;
float : right;
width : 275px;
text-align : justify;
margin-right : 5px;
padding-left : 5px;
padding-bottom : 5px;
padding-right : 5px;
padding-top : 2px;
line-height : 1.5em;
}
.content_left {
margin : 0 auto;
padding : 5px;
display : inline;
float : left;
width : 275px;
text-align : justify;
line-height : 1.5em;
}
.content_left h3 {
padding-left : 5px;
font-size : 1.1em;
margin-bottom : 5px;
font-family : Arial, Helvetica, sans-serif;
color : #515b7b;
}
.content_right h3 {
font-size : 1.1em;
margin-bottom : 2px;
margin-top : 5px;
font-family : Arial, Helvetica, sans-serif;
color : #515b7b;
}
#footer {
width : 800px;
clear : both;
color : #333;
border : 1px solid #4e7fb6;
margin : 0 0 10px 0;
text-align : center;
display : inline;
float : left;
padding-top : 5px;
padding-bottom : 5px;
background : white
}
#footer p {
font-size : 0.8em;
text-align : center;
}
#footer a {
color : #173aff;
text-decoration : none;
}

Grazie in anticipo e scusate il disturbo!

[sweet_elly91]

Salve! =)
Scusate per il triplo post (purtroppo non ho più avuto modo di modificare il post sopra questo, che si può liberamente cancellare). Volevo dirvi che ho capito il trucco e sono quasi riuscita a metterlo in atto.
In pratica, ho impostato nel CSS questo codice:

#container {
width : 800px;
background: white;
}

E ho richiamato questo div prima della colonna di sinistra, chiudendolo alla fine della colonna di destra...in IE l'effetto funziona e si vede...mentre in Mozilla è come se non esistesse!!
Non so proprio perché...resta tutto come se il div container non fosse impostato...e qualsiasi valore io attribuisca al background non gli interessa....
qualcuno può aiutarmi?

Grazie davvero.

[simotenax]

io questa problematica sono riuscita a risolverla facilmente e velocemente con l'ausilio di jQuery (libreria JS) basterebbe qualche righe di codice

questo metodo delle colonne false mi sembra un tantino intricato

con il metodo che uso io l'altezza dei due contenitori è effettivamente la stessa in entrambi, inquanto basta prendere l'altezza maggiore e darla anche al contenitore di dimensioni minori..

dimmi se potrebbe interessarti..

[Mich_]

Non ho guardato tutto il coidce CSS postato. Primo perche` non hai usato i tag di formattazione (devi usare il tag [ code ] ... [ /code ] (senza spazi) che puoi inserire anche usando il bottone # sopra l'area di inserimento, secondo perche` e` un codice lunghissimo, e terzo perche` manca il codice HTML, per cui il CSS e` incomprensibile.
Piu` comodo sarebbe un link alla pagina (anche in una locazione provvisoria).

Per Mozilla/FireFox, proababilmente hai dimenticato di chiudere i float, per cui i blocchi interni escono dal contenitore. Devi metere un clear, ad esempio come consigliato in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float.


@simotenax
Il tuo metodo, anche se sembra semplice, non e` normalmente applicabile, dato che non e` possibile conscere la altezza di un blocco contenente testo: infatti non puoi sapere la dimensione del font usato dal browser dell'utente, e se fissi un'altezza fissa, e` molto facile che il testo strabordi dal suo blocco.

[simotenax]

Originariamente inviato da Mich_

@simotenax
Il tuo metodo, anche se sembra semplice, non e` normalmente applicabile, dato che non e` possibile conscere la altezza di un blocco contenente testo: infatti non puoi sapere la dimensione del font usato dal browser dell'utente, e se fissi un'altezza fissa, e` molto facile che il testo strabordi dal suo blocco.

mmmm secondo me è fattibilissimo.. ho applicato questa soluzione in più di qualche sito.. poi forse stiamo intendendo cose diverse

[sweet_elly91]

Salve a tutti,
mi scuso per le mie dimenticanze; ho cercato il tag code, ma credevo non fosse abiliato. Invito, perciò, i moderatori di questa sezione a rimuovere tranquillamente il codice che ho postato sopra. Dunque, in questi giorni sono riuscita ad applicare il metodo delle faux columns, però mi è sorto un grave problema con le etichette (o segnalibri), ovvero con la funzione seguente:

<a name="nome_segnalibro"></a>

Il problema è che appena si clicca su un'etichetta sballa completamente tutto il layout...la colonna di sinistra tende quasi a sparire tutta e tutta la parte nella colonna destra sopra l'etichetta sparisce. Potete aiutarmi, per favore? Ve ne ringrazio tanto.
Per aiutarvi nel lavoro, posso invarvi per e-mail la pagina HTML (in formato php) ed il foglio di stile. Una piccola cortesia che vi chiedo, però, è quella di rimuovere il file allegato non appena scaricato (per questione di sicurezza).

Ringraziandovi di tutto, aspetto vostre notizie.

[Mich_]

Originariamente inviato da simotenax
mmmm secondo me è fattibilissimo.. ho applicato questa soluzione in più di qualche sito.. poi forse stiamo intendendo cose diverse

Se lo hai applicato, posta il link alle pagine dove e` realizzato, cosi` possiamo vedere da un lato se intendiamo le stesse cose, e dall'altro se la pagina regge l'ingrandimento dei caratteri.