sito css colonne css e funzione clear

  • Creatore Discussione Creatore Discussione SL1
  • Data di inizio Data di inizio

SL1

Utente Attivo
17 Nov 2005
45
0
0
allora sto proseguendo ad impazzirmi con i css (grazie pole per i consigli) ora mi trovo ad aver realizzato la pagina a quattro colonne: quella superiore dove c'è il titolo ed i collegamenti alle sezioni del sito (qui tutto ok) una colonna di sinistra (per la pubblicità) una colonna centrale (per il contenuto) una colonna a destra(per altra pubblicità) una colonna orizzontale in basso (per altra pubblicità copyright ecc)

ora vorrei che la colonna orizzontale in basso rimanesse sempre al disotto delle altre tre colonne verticali ma come cavolo ci riesco

ho provato a posizionare le colonne verticali con la funzione float left e right, ma non riesco a posizionare la colonna centrale (float center?) il probblema con float è che se ridimensione la finestra del brosuer mi si sballa tutta l'impaginazione il float right rimane al margine della finestra che restringendosi va a posizionarsi sopra tutto il resto.

tutto il resto è posizionato in px absolute in modo che la grafica e la disposizione del sito no cambi con le dimensioni della finestra.

come faccio a posizionare le tre colonne verticali in modo che risultino sempre al loro posto anche se ridimensiono la finestra e come faccio a fare in modo che la colonna orizontale in basso sia sempre sotto le tre colonne verticali?

grazie mille a tutti
 
hai provato a impostare le larghezze e le altezze delle colonne, cosi che siano sempre fisse nelle loro dimensioni??!!
 
certo! il probblema è che non è detto che le colonne verticali abbiano sempre la stessa lunghezza massima e se una, per necessità, diventa più lunga del dovuto si sovrappone alla colonna trasversale sotto
 
allora ho letto il tuo link pole e messo in pratica tutto ok, ma il mio probblema persiste, facendo riferimento al tuo esempio se ridimensioni la pagina del brosuer (o come cavolo si scrive) mi succede questo le colonne mi si spostano in basso man mano che stringo la finestra io invece vorrei che le colonne rimanessero al loro posto. questo ci riesco con la position:absolute, ma poi non so come fare per fare in modo che la colonna trasversale in basso (footer) sia sempre sotto le altre colonne, cioè si posizioni sotto di esse anche quando variano la lunghezza
 
ecco tutto il codice per chi ci capisce ...

nel senzo che io ci capisco poco e vado per prove !!!!

questo è il codice css
#top{
float: center;
top: 10px;
left: 10px;
width: 960px;
height: 140px;
background-color: transparent;
border: 5px solid red;
border-top-width: 0px;
border-left-width: 10px;
border-right-width: 0px;
border-bottom-width: 10px;
border-top-style: double;
text-align: center;
vertical-align: center;
}
#logo{
float: left;}
#bandiere{
position: absolute;
top:10px;
left:880px;}
#logo1{
float: right;
vertical-align: bottom;
margin-top: 9%;
margin-bottom: 0%;}

#barra1{
clear:both;
float:center;
top: 168px;
left: 10px;
width: 970px;
height: 70px;
background-color: blue;
border: 5px solid white;
border-top-width: 5px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 5px;
font-size: 100%;
margin-left:0%;
margin-right:0%;
text-align:justify;
}
#top2{
Float:center;
Clear:both;
top: 245px;
left: 10px;
width: 965px;
height: 100px;
background-color: trasparent;
border: 3px solid red;
border-spacing:10px;
font-size: 100%;
margin-left:0%;
margin-right:0%;
text-align:justify;
}
#barrasinistra{
float:left;
top: 355px;
left: 10px;
width: 130px;
height: auto;
background-color: trasparent;
border: 3px solid red;
border-spacing:0px;
font-size: 100%;
text-align:justify;
}
#barradestra{
float:left;
width: 130px;
height: max height1470px;
background-color: trasparent;
border: 3px solid red;
border-spacing:10px;
font-size: 100%;
text-align:justify;
}
#barrasotto{
clear:both;

top: 2210px;
left: 10px;
width: 965px;
height: 100px;
background-color: trasparent;
border: 3px solid red;
border-spacing:10px;
font-size: 100%;
text-align:justify;
}
#barrasotto1{
clear:both;
top: 2320px;
left: 10px;
width: 965px;
height: 30px;
background-color: trasparent;
border: 3px solid red;
border-spacing:10px;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 5px;
font-size: 100%;
text-align:centre;
}
#news{
float:center;
top: 355px;
left: 148px;
width: 965px;
height: auto;
background-color: red;
border: 3px solid white;
border-spacing:00px;
font-size: 250%;
text-align:center;
}
#pagina{
float:left;
top: 420px;
left: 148px;
width: 688px;
height: autopx;
background-color: rgb(219,219,219);
border: 3px solid white;
border-spacing:20px;
font-size: 100%;
text-align:justify;
}
Body{
background-color: transparent;
}
h1 {
font-family: "Verdana";
font-style: normal;
color: #FFFFFF;
font-weight: 100;
font-size: 90%;
text-align: center;
vertical-align: botton;
line-height:1.3em;
margin-top: 1%;
margin-bottom: 1%;
margin-left:5%;
margin-right:5%;
}
h2 {
font-family: "Verdana";
font-style: normal;
color: black;
font-weight: 100;
font-size: 65%;
text-align: center;
vertical-align: botton;
line-height:1.5em;
margin-top: 1%;
margin-bottom: 1%;
}
h3 {
font-family: "Verdana";
font-style: normal;
color: black;
font-weight: 100;
font-size: 90%;
text-align: center;
vertical-align: botton;
line-height:1.5em;
margin-top: 1%;
margin-bottom: 1%;
}

questo è html delle parti (salvate con .php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>top1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href= "corpo.css" />

</head>
<div id="top">
<div id="logo"><img src= "bicicletta.gif"/> <img src= "ciclonline.gif"/> </div> <div id="logo1"> <h2>|Chi siamo|Contattaci|Credits|Disclaimer| |Lavora con noi|Mission|Pubblicità|</h2> </div>
<div id="bandiere"><img src= "binglese.jpg"/> <img src= "bitaliana.jpg"/> </div></div>
<div id="barra1">
<h1>|Home|Abbigliamento ed accessori|Alimentazione|Biciclette|Biomeccanica ed allenamento|Ciclismo amatoriale|</h1>
<h1>|Editoriale|Fisiologia|Gare|Iscrizioni gare|Links|Mobilità sostenibile|News|Q&A|Tecnica|</h1>
</div>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>top2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href= "corpo.css" />

</head>
<div id="top2">
spazio pubblicità</div>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>corponews</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href= "corpo.css" />

</head>
<body>
<div align="center"

<div id="news">
<h1>News</h1>
</div></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>barra sinistra</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href= "corpo.css" />

</head>
<div id="barrasinistra">Nella colorata carovana del Giro d’Italia non manca il Celeste Bianchi. L’azienda di Treviglio è partner del team Barloworld che “debutta” nella corsa rosa con una buona dose di ottimismo come conferma il team manager Claudio Corti: «Quest’anno abbiamo partecipato a tutte le corse più importanti con ottime performance. Ora ci aspettano prima il Giro d’Italia poi il Tour de France in virtù dell’invito ricevuto dagli organizzatori. Questo significa che la squadra sta lavorando bene e dobbiamo continuare su questa strada con l’entusiasmo, la serenità e la serietà che abbiamo dimostrato finora».
Il team Barloworld al Giro d’Italia può contare su tre gioielli Bianchi.

BIANCHI 928 CARBON T-CUBE
E’ “l’ultimo modello” di casa Bianchi, progettata per ottenere il massimo della rigidità, utilizza la tecnologia “Tube to Tube”, made in Bianchi, particolari sono le forme con snodi fasciati che conferiscono un design armonioso ma dal carattere agonistico. Di rilievo è anche il risultato ponderale: la taglia media pesa solo 1 Kg. Anche le grafiche sono dedicate con ampi spazi a vista della fibra a 12K.

BIANCHI 928 CARBON SL</div>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>barra destra</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href= "corpo.css" />

</head>
<div id="barradestra">Nella colorata carovana del Giro d’Italia non manca il Celeste Bianchi. L’azienda di Treviglio è partner del team Barloworld che “debutta” nella corsa rosa con una buona dose di ottimismo come conferma il team manager Claudio Corti: «Quest’anno abbiamo partecipato a tutte le corse più importanti con ottime performance. Ora ci aspettano prima il Giro d’Italia poi il Tour de France in virtù dell’invito ricevuto dagli organizzatori. Questo significa che la squadra sta lavorando bene e dobbiamo continuare su questa strada con l’entusiasmo, la serenità e la serietà che abbiamo dimostrato finora».
Il team Barloworld al Giro d’Italia può contare su tre gioielli Bianchi.

BIANCHI 928 CARBON T-CUBE
E’ “l’ultimo modello” di casa Bianchi, progettata per ottenere il massimo della rigidità, utilizza la tecnologia “Tube to Tube”, made in Bianchi, particolari sono le forme con snodi fasciati che conferiscono un design armonioso ma dal carattere agonistico. Di rilievo è anche il risultato ponderale: la taglia media pesa solo 1 Kg. Anche le grafiche sono dedicate con ampi spazi a vista della fibra a 12K.
</div>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>barra sotto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href= "corpo.css" />

</head>
<div id="barrasotto">
spazio pubblicità e coyright</div>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>barra sotto1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href= "corpo.css" />

</head>
<div id="barrasotto1">
<h3>Ciclonline.com. © 2008-2018. Tutti i diritti riservati. Ogni riproduzione, totale o parziale, dei contenuti di questo sito è vietata</h3>
</div>
</html>

INFINE ECCO LA PAGINA CHE COMPONGO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>indexprova</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>
<?php include("top1.php"); ?>
<?php include("top2.php"); ?>
<?php include("corponews.php"); ?>
<?php include("barra sinistra.php"); ?>
<div id="pagina">
<h3>qui va il testo dell'articolo
©Dopo tutto non tutto è perduto
</div>
<?php include("barra destra.php"); ?>
<?php include("barra sotto.php"); ?>
<?php include("barra sotto1.php"); ?>


</html>

ORA IL PROBBLEMA
se visualizzo a vinestra aperta tutto ok ma se ridimensiono la finestra le varie parti si iniziano a posizionare una sotto l'altra perche?

inoltre (ma qui siamo oltre...) io vorrei mettere l'intestazione news "corponews.php" al centro tra le due barre sinistra e destra e subito sotto il <div id="pagina"> ma non ci riesco

se qualcuno ci capisce....
inoltre visto che ho messo il codice... ma è scritto bene?
mi sembra molto complicato (venendo da front page) .....
grazie a chi si vorra impazzire....
 
Grazie, il problema che ho è presente anche in quell'esempio, (se restringi la finestra il contenuto del sito si sovrappone, invece io vorrei che rimanesse fermo e apparissero le barre di scorrimento) a tal punto dovrò ripiegare con la funzione position absolute, non credo che ci siano altre soluzioni.
Altri consigli sono ben accetti.
Grazie a tutti di nuovo.
 
ho trovato!

basta inserire tutto in un div con posizione fissa ...
così le tabelle non si sovrappongono e posso utilizzare l'opsione float clear
 

Discussioni simili