Problema impaginazione Topic is solved

[1dMN]

Ciao a tutti.
Utilizzo CMSMS dalla versione 0.10.2 e mi sono sempre trovato bene; tra le ultime cose che ho realizzato questo sito istiruzionale.

Ora vi espongo il mio problema: la navigazione delle pagine è impostata su un layout a 2 colonne; ebbene non riesco a far coincidere la fine delle due colonne e . Mi spiego meglio con questo esempio.

Come vedete, il menu sormonta il footer poichè il content non ha abbastanza contenuto. Entrambi i div sono inclusi in un superiore che dovrebbe evitare questo effetto indesiderato, ma dopo averle provate tutte ho deciso di arrendermi e chiedere aiuto!
Forse il problema l'ho generato facendo troppa mescolanza con i position relative e absolute nel css...

Ah, dimenticavo. Questa è la parte del foglio di stile interessata:
/* LAYOUT **********************************************************************/
html,body {
margin:0;
padding:0;
}
body {
background:#660000;
font-family:Tahoma, Arial, sans-serif;
font-size:76%;
text-align:center;
}
div#pagewrapper {
margin:0 auto;
max-width:80em;
min-width:60em;
padding:0;
text-align:left;
/*border:1px solid #FF0000;*/
}
div#container {
position:relative;
width:760px;
\width:780px;
w\idth:760px;
background-color:#FBF7E8;
margin:0 auto;
text-align:left;
height:100%;
/*border:1px solid #00FF00;*/
}
body>div#container {
height:auto;
min-height:100%;
}

/* HEADER **********************************************************************/
div#header {
background:#FBF4C7 url(uploads/images/header.jpg) top center no-repeat;
height:268px;
/*border:1px solid #0000FF;*/
}

/* MAIN ************************************************************************/
div#main {
height:100%;
/*border:1px solid #FFFF00;*/
}

/* NAVIGAZIONE ******************************************************************/
#menu_vert {
position: absolute;
/*float: right;*/
background: #E5D2C5 url(./uploads/images/fnd-nav.gif) bottom repeat-x;
top: 268px;
right: 30px;
width: 207px;
}

#menu_vert ul {
background: #FBF7E8;
margin: 0;
padding: 0;
}

#menu_vert ul li {
background: url(uploads/images/fnd-menu.gif) no-repeat;
width: 100%;
list-style: none;
font-weight: bold;
font-size: 94%;
}

/* Fix IE. Hide from IE Mac \*/
* html #menu_vert li { float: left; height: 1%; }
* html #menu_vert li a { height: 1%; }
/* End */

/* CONTENT *********************************************************************/
div#content {
background:#F3EADC url(uploads/images/fnd-content.gif) bottom repeat-x;
margin-left:30px;
margin-right:257px;
padding:1em;
overflow:hidden;
}

/* FOOTER **********************************************************************/
div#footer {
clear:both;
background:#660000 url(uploads/images/fnd-foot.gif) repeat-x;
height:48px;
text-align:center;
font-size:85%;
color:#C2967A;
padding-top:25px;
/*border:3px solid #0000FF;*/
}


Questo è invece il template:






 











Salta alla navigazione
{cms_selflink anchorlink='main' dir='anchor' text='Skip to content'}





Navigation
{cms_module module='MenuManager' template='bulletmenu-accessible.tpl' collapse='1'}




{title}
{content}









{global_content name='footer'}










Spero che qualcuno di voi mi possa aiutare, grazie.

[alby]

Non ho provato, ma ad una prima occhiata dovresti separare dentro #main i due div #content e #menu_vert.
Eliminare all'interno la position absolute.
In #content devi settare la width giusta con float:left; (così menu_vert si sposta sulla destra)

Buona fortuna 

Alby

[1dMN]

Non ho provato, ma ad una prima occhiata dovresti separare dentro #main i due div #content e #menu_vert.
Eliminare all'interno la position absolute.
In #content devi settare la width giusta con float:left; (così menu_vert si sposta sulla destra)

Buona fortuna 

Alby

Ciao Alby,
grazie e scusami se non sono riuscito a farmi sentire prima.
Ho provato a fare ciò che hai proposto; mi sei stato di grande aiuto! Ho anche scoperto l'inutilità del div#main che avevo creato...
Ora, prima di passare alla produzione farò tutti i controlli del caso.
Ancora grazie!

[1dMN]

Ciao ancora,
mi tocca rettificare quanto suddetto. Innanzitutto, ho dovuto reinserire il div#main per "contenere" i due #content (con float:left) e #menu_vert; poi volevo che qualcuno di voi verificasse quello che succede visualizzando il sito con tre browser differenti:

• IE6
• IE7
• Firefox

Noterete dalle immagini allegate che (incredibile!) IE7 non dà nessun problema; IE6 (non so perchè) non visualizza correttamente il margin-left:30px associato al div#content; mentre Firefox (non me l'aspettavo) distanzia la voce "padre" di menu dalla voce "figlia" in base al contenuto inserito nel div#content...!!!

Qui sotto riporto un estratto del template:

Code: Select all

</__body>
<div id="pagewrapper">
<div id="container">

	<div id="header" class="clearfix">
	</div>

	<div id="main">
		<div id="content" class="clearfix">
			<div class="breadcrumbs">
			</div>

			<h1>{title}</h1>
			{content}
			</div>

		<div id="menu_vert">
		{cms_module module='MenuManager' template='bulletmenu-accessible.tpl' collapse='1'}
		</div>
	</div>

	<div id="footer" class="clearfix">
	</div>
</div>
</div>

<__body>

Questo l'estratto dello stile utilizzato:

Code: Select all

html,body {
	margin:0;
	padding:0;
}
body {
	background:#660000;
	font-family:Tahoma, Arial, sans-serif;
	font-size:76%;
	text-align:center;
}
div#pagewrapper {
	margin:0 auto;
	max-width:80em;
	min-width:60em;
	padding:0;
	text-align:left;
}
div#container {
	position:relative;
	width:760px;
	\width:780px;
	w\idth:760px;
	background-color:#FBF7E8;
	margin:0 auto;
	text-align:left;
}

/* HEADER *********************************************************************/
div#header {
	background:#FBF4C7 url(uploads/images/header.jpg) top center no-repeat;
	height:268px;
}

/* MAIN **********************************************************************/
div#main {
	/*margin:0 30px;*/
	padding:0;
	vertical-align:top;
	overflow:hidden;
}

/* NAVIGAZIONE *****************************************************************/
#menu_vert {
	background: #E5D2C5 url(./uploads/images/fnd-nav.gif) bottom repeat-x;
	margin-top: 0;
	margin-left: 523px;
	width: 207px;
}

#menu_vert ul {
	/*background: #E5D2C5;*/
	margin: 0;
	padding: 0;
}

#menu_vert ul li {
	background: url(uploads/images/fnd-menu.gif) no-repeat;
	width: 100%;
	list-style: none;
	font-weight: bold;
	font-size: 94%;
}

#menu_vert ul li a {
	/*background: #FBF7E8;*/
	display: block;
	text-decoration: none;
	color: #660000;
	padding: 8px 10px 8px 25px;
}

#menu_vert ul li a:hover {
	background: url(uploads/images/fnd-menu_over.gif) no-repeat;
	color: #FF0000;
}

/* Fix IE. Hide from IE Mac \*/
* html #menu_vert li { float: left; height: 1%; }
* html #menu_vert li a { height: 1%; }
/* End */

/* CONTENT *********************************************************************/
div#content {
	float:left;
	background:#F3EADC url(uploads/images/fnd-content.gif) bottom repeat-x;
	width:453px;
	margin:0 0 0 30px;
	padding:10px;
	overflow:hidden;
}

Spero che Alby o qualcun'altro tra voi possa aiutarmi a capire dove ho sbagliato...


[gelöscht durch Administrator]

[alby]

Se riesci posta una pagina online così è più semplice da vedere che cosa succede (puoi metterla non visibile nel menù)

Alby

[1dMN]

Ciao Alby.
In effetti non hai tutti i torti  qui trovi la pagina online senza richiamo dal menu (così però non riesco a farti vedere l'effetto di "distacco" visualizzato da FF in base al contenuto del div#content).
Attendo i tuoi suggerimenti.
Grazie, ciao!

[alby]

Ciao Alby.
In effetti non hai tutti i torti  qui trovi la pagina online senza richiamo dal menu (così però non riesco a farti vedere l'effetto di "distacco" visualizzato da FF in base al contenuto del div#content).
Attendo i tuoi suggerimenti.
Grazie, ciao!

Il link non è corretto.
Dovrei vedere benissimo lo stacco perchè uso sempre FF

Alby

[1dMN]

Prova questo link.
Dovresti vedere cosa intendo...

[alby]

Prova questo link.

Intanto:
- via .clearfix da h3 nel menu
- #menu_vert ul li.active01 h3 {
  sostituire block con inline in display

così FF non ha problemi.
Per IE6 in genere bisogna giocare fra margin e padding
Se riesco ci dò una occhiata più tardi

Alby

[1dMN]

Intanto:
- via .clearfix da h3 nel menu
- #menu_vert ul li.active01 h3 {
  sostituire block con inline in display

così FF non ha problemi.

Grazie Alby!
Ho provato la soluzione, ma mettendo display:inline su #menu_vert ul li.active01 h3 mi genera un altro tipo di errore... Dunque mi è venuta voglia di provare a mettere display:inline invece di block proprio sulla classe .clearfix: et voilà! Sistemato su FF, perfetto su IE7.

Per IE6 in genere bisogna giocare fra margin e padding

Ok, non dannarti l'anima: io ho fatto tutte le prove possibili ma se metto il margin non va bene il padding e viceversa, poi un browser interpreta in un modo e uno in un altro... eccheppalle!!!