Creare un Box Model fisso

**Koqu** · 15-04-2008, 18:10

Salve a tutti!
Sto provando a scrivere un template Css per rifare il look al mio sito utilizzando quindi i fogli di stile e bandendo ste benedette tabelle!!!
Il mio problema è che sto utilizzando i vari div (a cui associo una classe) per realizzare l'header, la colonna dei menu a destra, il corpo, la colonna dei link a sinistra ed il footer.
Il problema che riscontro è che se il testo presente nel div che realizza la colonna dei link (quindi colonna dei link) è di dimensioni superiori al width impostato (190px) questo esce fuori e non va a capo. Continua dritto uscendomi dal blocco colonna!!!
Ho letto della proprieta overflow:scroll ma questa risolve il problema facendomi comparire le barre di scorrimento e non voglio questo.
Vorrei semplicemente che il blocco si estendesse verso il basso per contenere eventuali link lunghi.

Spero di essere stato chiaro e ringrazio fin d'ora chi vorrà e saprà rispondermi.
Siete mitici!!!!
Buona serata.

**fcaldera** · 15-04-2008, 18:17

da come hai descritto il problema probabilmente stai usando posizionamenti assoluti e/o relativi e dovresti evitarli se non hai ben chiaro quali sono le implicazioni

Ad ogni modo aiuterebbe vedere la pagina, il codice xhtml e css o almeno un link, altrimenti è impossibile aiutarti.

Ps: benvenuto nel forum

**Koqu** · 15-04-2008, 18:33

Grazie per la velocissima risposta! Questo è il mio primo messaggio sul forum ma leggo questo forum da un sacco di tempo e per questo mi permetto di dire che siete mitici!!!
E' molto interessante e ci sono sempre preziosi consigli e soluzioni....
Comunque, per quanto riguarda il mio problema, ti posto il codice del foglio di stile:

/* INIZIO CSS MIO */

body {
margin: 0px;
padding: 0px;
}
div#header {
text-align: center;
background-color: #CCCCCC;
height: 60px;
margin: 0px;
padding: 1px;
}
div#navcol {
padding: 10px;
width: 130px;
float: left;
background-color: red;
}
div#main {
padding: 10px;
margin-left: 150px;
margin-right: 150px;
}
div#sidecol {
background-color: red;
padding: 10px;
width: 130px;
float: right;
}
div#foot {
border-top: solid #000 1px;
background-color: #CCCCCC;
padding: 10px;
text-align: center;
clear: both;
}
div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:750px;
background-color: #CCCCCC;
}

div#column2 {
margin: 0;
padding: 0;
background-image: url(side2.gif);
background-position: right;
background-repeat: repeat-y;
width: 100%;
background-color: #FFFF99;

}
div#column1 {
margin: 0px;
padding: 0px;
background-image: url(side1.gif);
background-repeat: repeat-y;
width: 100%;

}

.clear {
clear: both;
display: block;
height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}
-------------------
e questo è quella della pagina HTML (non è la pagina vera e propria nei contenuti ma la struttura è questa :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>- Home</title>

<link href="template_css.css" rel="stylesheet" type="text/css"/>

</head>

<body>
<div id="wrapper">
<div id="header">
<h1>Header Text</h1>
</div>
<div id="column2">
<div id="column1">
<div id="navcol">
<h4>Nav Column</h4>

<ul>[*]Let me not to the marriage of true minds[*]Admit impediments; love is not love[*]Which alters when it alteration finds[*]Or bends with the remover to remove
[/list]

</div>
<div id="sidecol">
<h4>Starboard Side Column</h4>
<ul>[*]Let me not to the marriage of true minds[*]Admit impediments; love is not love[*]Which alters when it alteration finds
[*]Or bends with the remover to remove
[/list]
oooooooooooooooooooooooooooooooooooooooooooooooooo ooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div id="main">
<h2>Main Content</h2>

That looks on tempests ... taken.</p>

That looks on tempests ... taken.</p>

If this be error ... height be taken.</p>

That looks on tempests ... remove.</p>
</div>
<div class="clear">
</div>
</div>

</div>
<div id="foot">

Footer text goes here. ... </p>
</div>
</div>
</body>
</html>

se vedi la lunga serie di "oooooo...." queste mi escono dal box di sinistra mentre io vorrei che il blocco si estendesse verso il basso senza modificare la lunghezza(width).

Grazie ancora!!!!

**Koqu** · 15-04-2008, 19:08

ragazzi... chi mi puo aiutare????

**simulacron** · 15-04-2008, 20:13

Comincia a correggere gli errori.....
Nel css, ad esempio i colori vanno preceduti da due punti e seguiti da un pto e virgola...
Così:

codice:

......
background:red;
......

Seconda domanda:
perchè il div navcol è innestato dentro il column1 che è innestato dentro il column2?(È il primo mistero che ho incontrato....)

Usa l'indentazione a scalare verso il centro pagina quando innesti un blocco dentro l'altro.
È scomodo da scrivere ma si legge meglio.....

Discussione: Creare un Box Model fisso

Strumenti discussione

Ricerca discussione

Visualizza

Creare un Box Model fisso

Grazie mille!

Qualche consiglio?

Permessi di invio