Newsgroup: it.comp.www.html
Titolo: Impaginazione DIV...

Ciao,
sto provando l'impaginazione tableless ( DIV ) ma ho dei problemi rispetto 
all' impaginazione con tabelle. Il menu', x esempio, contenuto in un div, 
alla risoluzione 1024x768 su un monitor si vede in orizzontale, in un'altro 
monitor, sempre a 1024x768 in verticale.
Non si puo' *obbligare* la visualizzazione orizzontale?
Grazie 
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 Non si puo' *obbligare* la visualizzazione orizzontale?
Attento a non ammalarti di divvite... Per i menu č molto meglio usare 
l'accoppiata ul-li.
ciao
-- 
g4b0, linux user n. 369000
http://brosulo.net



Hem, cos'e' ul-li ? 


 Hem, cos'e' ul-li ?
Ti mancano le basi fondamentali.
Prenditi un libro sui layout con css, o inizia a cercare e studiare 
materiale in rete.
Non sperare che dreamweaver ti dia una mano, anzi, disinstallalo e 
dimenticalo. Installati notepad++ (se sei su Windows) e inizia a scrivere 
codice a mano.
Bye.



Non uso DreamWeaver ma un CMS e l'edit delle pagime .ascx lo faccio con 
Notepad.
Certo cerchero' di documentarmi pero' penso possa apprendere meglio se mi 
esercito su un caso pratico come questo. A volte le teorie rimangono finli a 
se' stesse :-(
Ad, esempio, il menu rimane verticale anche se aumento la risoluzione del 
monitor da 1024 x 768 a 1280x1040, mentre in un'altro monitor 1024x768 
rimane orizzontale.
Qual'e' il motivo? Pensavo che, avendo piu' pixel in orizzontale, il menu si 
riposizionasse, invece....
ciao e grazie 


 finli a se' stesse :-(
Ma se ti mancano le basi, personalizzare il tema di un CMS e` la cosa 
piu` difficile per iniziare.
Parti facendo una paginetta statica e fai esperimenti su quella. Un libro 
non lo devi solo leggere, lo devi studiare (che significa leggere+capire
+provare a fare).
E quando provi, fallo con 3 browser aperti (firefox, explorer, chrome), 
se non 4 (opera). Sono piu` le eccezioni che le regole.
Alla tua domanda e` impossibile rispondere. Non esiste un 
riposizionamento, se non "gli elementi block si allineano in verticale, 
quelli inline in orizzontale", ma finche` non sai cosa e` block e cosa e` 
inline, non capirai questa frase.
Fidati: parti dalle basi.
Bye.


 Qual'e' il motivo? 
Con le proprietà dei CSS puoi modificare la naturale disposizione degli 
elementi, elementi che normalmente andrebbero a capo quando posti dopo 
un elemento del medesimo tipo possono essere forzati a rimanere sulla 
stessa lina.


 --
Eh, si come? Cmq un'altra cosa che non ho capito: come mai su un monitor con 
risoluzione x 1024x768 lo vedo in orizzontale mentre su un'altro monitor con 
risoluzione 1024x768 lo vedo in verticale? Forse c'entra la dimensione del 
monitor? Uno e' da 19" ed uno da 17" ?
Ciao e grazie


>> Qual'e' il motivo?
Se ho capito quel che intendi, stai usando dei "blocchi": elementi il cui 
comportamento predefinito è occupare l'intera larghezza dell'elemento che 
li contiene; inoltre, vanno sempre a capo.
Per ovviare al problema potresti trasformare i blocchi in elementi "in 
linea" (proprietà CSS display:inline), oppure impostare la larghezza dei 
blocchi e fare in modo che non vadano a capo (proprietà CSS float e 
width).
Ho scritto per aiutarti a soddisfare la curiosità. Anche il mio consiglio 
è quello di studiare bene dall'inizio HTML e CSS . E' un ottimo 
investimento: ci si impiega relativamente poco ed il tempo si recupera 
evitando poi di rompersi la testa su comportamenti apparentemente 
illogici.
Ciao
-- 
Enos  --> looking4work <--


 ?
Questo senz'altro no.



Ecco, qua, e' un estratto del file .ascx che produce la pagina ( Trattasi di 
DotNetNuke ) :
 <div id="menuWrap">
                <dnn:MLNAV runat="server" id="dnnNav" 
IndicateChildren="false" 
ProviderName="DNNMenuNavigationProvider"><CustomAttributes><dnn:CustomAttribute 
Name="RenderMode" Value="UnorderedList" 
/></CustomAttributes></dnn:MLNAV></div><!-- END menuWrap -->
Si capisce?
Grazie 



 mi son dimenticato il .css:
 #menuWrap { /* inherits height from DNNNav styles */
        clear:right;
        float:right; margin:10px 11px 24px 0; /* positions menu */
        background:url(images/menu-bg.png) repeat;
        position:relative; z-index:10; /* used to place menu over header 
image in IE */ 



Eh lo so, il problema e' che non riesco a studiare bene su *esercizi* ma 
devo proprio essere *obbligato* a farlo su delle situazioni reali, il tempo 
e' sempre poco .. :-( 


 Si capisce?
Se vuoi incollare il codice aspx o come si chiama scegli un ng a tema.
Dal css che hai postato non si vedono i vari elementi con id "dnnNav" 
dove si presume che "nn" varii.


 dove si presume che "nn" varii.
Questo e' tutto il css:
@import url("reset-fonts.css");
/*
Style notes
Table of Contents
1. CSS Sticky footer - see notes at bottom for reference to code
2. Layout Styles
3. Content Styling
	3.1 standard text styling
	3.2 header styling
	3.3 DNN overides
	3.4 footer styles
		3.5.1 footer links styles
		3.5.2 footer menu styles
	3.5 list styling
		3.6.1 Normal list
		3.6.2 sidebar list
	3.6 positioning styles
		3.6.1 image float
		3.6.2 link floats
	3.7 Portfolio Styles
	3.8 forms
	3.9 Blog Custom Styles
		3.9.1 Blog Content
		3.9.2 blog calendar
4. DNN Nav
	4.1 main menu
		4.1.1 main menu items
		4.1.2 main menu hover
	4.2 submenu
		4.2.1 submenu items
		4.2.2 submenu hover
		4.2.3 submenu icon
*/
/* 1. CSS Sticky footer - see notes at bottom for reference to code */
* {margin:0;padding:0;} html, body, form, #topWrap {height: 100%;} form > 
#topWrap {height: auto; min-height: 100%;}
/* End sticky footer */
/* clears floats, use in parent div when floating a div */  /* Needed for 
sticky footer also */
.clearfix:after {content: ".";display: block;height: 0;clear: 
both;visibility: hidden;}.clearfix {display: inline-block;}/* Hides from 
IE-mac \*/ * html .clearfix { height: 1%;}.clearfix {display: block;}/* End 
hide from IE-mac */
/* End clearfix */
/* 2. Layout Styles */
html, form, body {
	text-align:left; /* resets text align to left from reset-fonts.css file */
	background:url(images/top-bg.jpg) #d9d9d9 repeat-x; /* sets page bg */
}
html, body { margin-bottom:1px;} /* forces scrollbar to avoid page jump */
#topWrap {/* div is used to make footer stick to bottom of web page */
	height:100%;
	position:relative;
}
	.home-page #contentWrap { width:975px; margin:0 auto 60px; /* sets width 
and centers div */}
	.sub-page #contentWrap { width:975px; margin:0 auto 141px; /* sets width 
and centers div */}
		#logoWrap { float:left; margin:38px 0 0 11px; /* positions logo */}
		#menuWrap { /* inherits height from DNNNav styles */
			float:right; margin:31px 11px 24px 0; /* positions menu */
			background:url(images/menu-bg.png) repeat;
			position:relative; z-index:10; /* used to place menu over header image in 
IE */
		}
		#headerWrap {
			float:left;
			height:354px; width:975px; /* sets dimensions for background shadow */
			background:url(images/header-bg.png) no-repeat; /* background shadow */
		}
			#headerRotator{ margin:9px 11px 12px;} /* provides padding to acount for 
width of shadow */
		.content-pane {
			clear:both; float:left; width:620px;
			margin-left:11px; /* padding to account for width of header's shadow */
		}
		.full-width .content-pane {
			clear:both; float:left; width:960px;
			margin-left:11px; /* padding to account for width of header's shadow */
		}
		.side-bar-pane {
			float:right; width:262px;
			margin-right:11px; /* padding to account for width of header's shadow */
			background-color:#b3b5b8;
			padding:12px;
		}
	#middleWrap {
		clear:both; width:100%; /* clears float and sets full width for background 
*/
		background:url(images/gradient-bg.jpg) repeat-x; /* sets middle content 
background */
		padding:45px 0 65px; /* padding to account for sticky footer (footer 
height - 16px) */
	}
		#middleInnerWrap { width:960px; margin:0 auto; /* sets width and centers 
div */}
			.bottom-left-pane { width:286px; float:left; margin-right:46px; /* 
padding between panes */}
			.bottom-middle-pane { width:286px; float:left;}
			.bottom-right-pane { width:286px; float:right;}
	#footerWrap {
		width:100%; clear:both;
		margin-top: -81px; /* negative value of footer height */
		height: 81px; /* sets height of footer */
		position:relative; /* forces footer over #middleWrap to access links */
		background:url(images/footer-bg.jpg) repeat-x #626d7f; /* sets footer 
background */
	}
		#footerInnerWrap { width:960px; margin:0 auto; /* sets width and centers 
div */}
			#footerLeft { float:left; width:70%; margin-top:27px; }
			#footerRight { float:right; width:30%; margin-top:25px; text-align:right; 
color:#d9d9d9; font-size:11px!important; line-height:20px;}
/* 3. Content Styling */
	/* 3.1 standard text styling */
	.Normal, .NormalDisabled, .BlogContent { color:#4f5868; text-align:justify; 
font:13px/24px "Lucida Sans Unicode", "Lucida Grande", sans-serif /* sets 
default text */}
	p {	margin-bottom:22px;}
	.Normal a:link, .Normal a:visited { color:#3e5e98; 
text-decoration:underline;}
		.Normal a:hover { color:#7794C8; text-decoration:underline;}
		.Normal a:active { position:relative; top:1px; color:#000; 
text-decoration:underline;} /* pushes link down on click to resemble a 
button */
	em { font-style:italic;font-family: "Lucida Sans", "Lucida Sans Unicode", 
"Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}
	strong { font-weight:700; font-family: "Lucida Sans", "Lucida Sans 
Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}
	/* 3.2 header styling */
	h2 .Head { font-size:inherit; color:inherit;}
	.Head, h1, h1 .Head, h2, h2 .Head, h3, h4, h5, h6 { color:#4f5868; 
font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, 
Arial, Helvetica, sans-serif;}
	h1, h1 .Head { font-size:28px; line-height:47px;}
	h2, h2 .Head { font-size:24px; line-height:36px;}
	h3 { font-size:20px; line-height:30px;}
	h4 { font-size:18px; line-height:27px;}
	h5 { font-size:16px; line-height:24px;}
	h6 { font-size:14px; line-height:21px;}
	table td{ padding:2px;} /* reapplies padding from reset-fonts.css */
	.DNNEmptyPane { display:none; /* hides empty content pages */}
	/* 3.3 DNN overides */
	.SubHead { color:#4f5868; font-family: "Lucida Sans", "Lucida Sans 
Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}
		a.SubHead, a.SubHead:visited { color:#4f5868; font-family: "Lucida Sans", 
"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, 
sans-serif; text-decoration:underline;}
			a.SubHead:hover { color:#7794C8;}
	a.CommandButton:link, a.CommandButton:visited { color:#3e5e98; font-family: 
"Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, 
Helvetica, sans-serif; font-weight:700; font-size:14px;}
		a.CommandButton:hover { color:#7794C8;}
		a.CommandButton:active { position:relative; top:1px; color:#000; 
text-decoration:underline;}
	/* 3.4 footer styles */
		/* 3.4.1 footer links styles */
		a.DNNLinks, a.DNNLinks:visited { font:11px/20px Arial, Helvetica, 
sans-serif; color:#d9d9d9; text-decoration:underline;}
			a.DNNLinks:hover { color:#d9d9d9; text-decoration:none;}
			a.DNNLinks:active { position:relative; top:1px; color:#000; 
text-decoration:underline;}
		/* 3.4.2 footer menu styles */
		a.ContextLinks, a.ContextLinks:visited { font:16px/30px Arial, Helvetica, 
sans-serif; padding-right:45px; color:#d9d9d9;}
			a.ContextLinks:hover { color:#d9d9d9;}
			a.ContextLinks:active { position:relative; top:1px; color:#000; 
text-decoration:underline;}
	/* 3.5 list styling */
		/* 3.5.1 Normal list */
		.Normal ul, .Normal ol { margin:0 0 24px 0; padding:0px;} /* resets list 
margin and padding across browsers */
			.Normal li { margin-left:30px; padding:0px; line-height:24px;} /* resets 
list margin and padding across browsers and sets list item height */
				.Normal ul li { list-style:disc;}
					.Normal li li { margin-left:30px; padding:0px;} /* indents sub list */
						.Normal ul li li { list-style:circle;}
		/* 3.5.2 sidebar list */
		ul.sidebar-list { border-top:1px #cecece solid;} /* puts line at top of 
list */
			ul.sidebar-list li{ list-style:none; margin-left:0px} /* removes bullets 
and resets margin */
				ul.sidebar-list li a{ display:block; line-height:34px; border-bottom:1px 
#cecece solid; padding-left:5px; text-decoration:none!important;} /* makes 
links appear to be a menu */
					ul.sidebar-list li a:hover{ background:#c6c9cc;} /* hover background 
color */
	/* 3.6. positioning styles */
		/* 3.6.1 image float */     /* used to float image to a side and give 
padding */
		.img-right { float:right; margin-left:15px;} .img-left { float:left; 
margin-right:20px;}
		/* 3.6.2 link floats */
		.right-float-link { float:right; text-align:right; width:100%;}
	/* 3.7 Portfolio Styles */
	.portfolio-box { width:286px; float:left; border:1px solid #abafb5; 
margin:0 11px 32px; padding-bottom:10px;}
	.full-width .portfolio-box { margin:0 16px 32px;} /* allows projects to be 
used on full width and 2 column pages */
	.portfolio-box img{ margin:10px;  border:1px solid #abafb5;}
	.portfolio-box h3, .portfolio-box p{ margin:0 10px;}
	/* 3.8 forms */
	label { line-height:27px;}
	input.NormalTextBox, select.NormalTextBox { height:26px; font-size:14px;}
	textarea.NormalTextBox { font-size:14px;}
	/* 3.9 Blog Custom Styles */
		/* 3.9.1 Blog Content */
		.blog_title a:link, .blog_title a:visited { color:#3e5e98;}/* blog title 
*/
			.blog_title a:hover { color:#7794C8;}/* blog title */
		.blog_head { padding-top:20px;}
		.blog_pub-date { line-height:16px;}
		.BlogContent table { padding:inherit;}
			.BlogContent a.CommandButton { display:block; width:244px; 
line-height:24px;border-bottom:1px #cecece solid; }
				.BlogContent a.CommandButton:hover { background:#c6c9cc;}
		.blog_topics a, .blog_topics a:visited, a.blog_more_link, 
a.blog_more_link:visited, a.blog_comments_normal, 
a.blog_comments_normal:visited { color:#3e5e98;}
			.blog_topics a:hover, a.blog_more_link:hover, 
a.blog_comments_normal:hover  { color:#7794C8; text-decoration:underline;}
		/* 3.9.2 blog calendar */
		th.Blog_Archive_DayHeader { width:35px; text-align:center;}
/* 4. DNN Nav */
	/* 4.1 main menu */
	#dnn_dnnNav_ctldnnNav li {
		display:block; float:left; /* convert unordered list to horizontal menu */
		list-style:none; /* remove bullets */
		z-index:10; /* places dropdown menu over header image */
		position:relative; /* used to place menu above slider */
	}
		/* 4.1.1 main menu items */
		ul#dnn_dnnNav_ctldnnNav li a {
			display:block;
			color:#FFF; /* set font type and color */
			font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", 
Verdana, Arial, Helvetica, sans-serif; /* sets font-size/line-height and 
font family */
			font-size:16px;
			padding:0 17px; /* padding on main menu items */
			line-height:55px; /* height of menu */
		}
		/* 4.1.2 main menu hover */
		ul#dnn_dnnNav_ctldnnNav li a:hover {
			color:#d9d9d9;
			text-decoration:none; /* removes underline */
		}
	/* 4.2 submenu */
	#dnn_dnnNav_ctldnnNav ul li {
		display:block; clear:left; /* reverts list back to veritical */
		background-color:#373C48!important;
		z-index:20;
		opacity: 0.80; /* transparency of submenu */
		color:#F00;
	}
		/* 4.2.1 submenu items */
		ul#dnn_dnnNav_ctldnnNav ul li a {
			color:#FFF;
			font-variant:normal;
			font-size:13px;
			display:block;
			min-width:150px;
			width:100%;
			line-height:28px;
			padding:0 10px;
		}
		/* 4.2.2 submenu hover */
		ul#dnn_dnnNav_ctldnnNav ul li a:hover {
			background-color:#697389;
			width:100%;
		}
		/* 4.2.3 submenu icon */
		ul#dnn_dnnNav_ctldnnNav ul li img {
			padding-right:5px;
		}
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/


 Questo e' tutto il css:
[super-cut]
ok, ora fai anche 31  :)  e incolla anche l'HTML (e RIPETO l'HTML), magari
solo la parte inerente al men� in questione ti scongiuro non copiare 10Mb
inutili...


 tempo e' sempre poco .. :-(
Allora fallo fare a uno esperto finche` non trovi il tempo di studiare.
Scusa la franchezza, ma e` come se fossi andato su un ng di ingegneria a 
dire "Sto aggiustando un Boeing 747, ho messo la benzina ma non si 
accende. Cosa puo` essere? A proposito: cosa sono un cacciavite e un 
bullone?".
Bye.


 inutili...
Ok, ecco qua, prima ci sono solo delle righe di dichiarazione ( ci sono dei 
commenti che utilizzo scopo didattico :-) ):
<%-- RIGA INSERITA (SOTTO ) PER APOLLO--%>
<dnn:MLPAGETITLE runat="server" id="ApolloMLPAGETITLE" />
<div id="topWrap" class="home-page clearfix">
    <div id="contentWrap" class="clearfix">
        <div id="logoWrap"><dnn:LOGO runat="server" id="dnnLOGO" /></div>
<%-- RIGA INSERITA (SOTTO ) PER L'INSERIMENTO DEL SELETTORE DELLA LINGUA ( 
ralph ) --%>
<div id="langWrap"><dnn:Language runat="server" showMenu="False" 
showLinks="True" id="dnnLanguage" /></div>
<%-- riga inserita (sotto ) per portare il login in alto a destra  --%>
<div id="topRight"><dnn:LOGIN runat="server" id="dnnLOGIN" 
CssClass="DNNLinks" /> | <dnn:USER runat="server" id="dnnUSER" 
CssClass="DNNLinks" /><br /></div>
<%-- riga inserita (sotto ) per visualizzare la data  --%>
<div id="topRight"><dnn:CURRENTDATE runat="server" id="dnnCURRENTDATE" 
CssClass="CurrentDate"/><br /></div>
  <%-- INSERITO  (SOTTO ) PER APOLLO BREADCRUMB --%>
<div id="topRight">
	                            <dnn:TEXT runat="server" id="dnnTEXT" 
CssClass="DNNLinks" Text="You are here >" ResourceKey="Breadcrumb" 
/>&nbsp;<span>
								<dnn:MLBREADCRUMB runat="server" id="ApolloBREADCRUMB" 
CssClass="DNNLinks" RootLevel="0" Separator="&nbsp;>&nbsp;" />
	                            </span>
	            </div>
<%-- INSERITO  (SOPRA ) PER APOLLO BREADCRUMB --%>
<%-- RIGA DA MODIFICARE (SOTTO ) PER APOLLO
        <div id="menuWrap"><dnn:NAV runat="server" id="dnnNav" 
IndicateChildren="false" 
ProviderName="DNNMenuNavigationProvider"><CustomAttributes><dnn:CustomAttribute 
Name="RenderMode" Value="UnorderedList" 
/></CustomAttributes></dnn:NAV></div><!-- END menuWrap -->
-- FINE RIGA DA MODIFICARE (SOPRA ) PER L'INSERIMENTO DI APOLLO--%>
<%-- RIGA MODIFICATA  (SOTTO ) PER APOLLO PROPRIA DELLO SKIN  --%>
        <div id="menuWrap">
                <dnn:MLNAV runat="server" id="dnnNav" 
IndicateChildren="false" 
ProviderName="DNNMenuNavigationProvider"><CustomAttributes><dnn:CustomAttribute 
Name="RenderMode" Value="UnorderedList" 
/></CustomAttributes></dnn:MLNAV></div><!-- END menuWrap -->
        <div id="headerWrap" class="header-wrap">
            <object id="headerRotator" codetype="dotnetnuke/client" 
codebase="RotatorWidget" declare="declare">
                <param name="height" value="295" />
                <param name="width" value="953" />
                <param name="imageUrl" value="<%=SkinPath %>images/header/" 
/>
                <param name="imageCount" value="3" />
                <param name="imageTemplate" value="header_0{INDEX}.jpg" />
                <param name="interval" value="8000" />
                <param name="direction" value="left" />
                <param name="transition" value="slide" />
            </object>
        </div><!-- END headerWrap -->
        <div id="contentPane" class="content-pane-home" runat="server" />
        <div id="sideBar" class="side-bar-pane-home" runat="server" />
        </div><!-- END contentWrap -->
    <div id="middleWrap">
        <div id="middleInnerWrap" class="clearfix">
            <div id="bottomLeftPane" class="bottom-left-pane" runat="server" 
/>
            <div id="bottomMiddlePane" class="bottom-middle-pane" 
runat="server" />
            <div id="bottomRightPane" class="bottom-right-pane" 
runat="server" />
        </div><!-- END middleInnerWrap -->
    </div><!-- END middleWrap -->
</div><!-- END topWrap -->
<div id="footerWrap" class="clearfix">
    <div id="footerInnerWrap" class="clearfix">
<%-- elimina footerLeft CHE SONO I MENU IN BASSO A SINISTRA
        <div id="footerLeft"><dnn:LINKS runat="server" id="dnnLINKS" 
CssClass="ContextLinks" Level="Root" /></div><!-- END footerLeft -->
--%>
<%--   originale ( sotto )
        <div id="footerRight"><dnn:LOGIN runat="server" id="dnnLOGIN" 
CssClass="DNNLinks" /> | <dnn:USER runat="server" id="dnnUSER" 
CssClass="DNNLinks" /><br /><dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" 
CssClass="DNNLinks" align="middle" /></div><!-- END footerRight -->
--%>
<%-- Questi sarebbero i LINKS CHE SONO I MENU IN BASSO A SINISTRA 
Implementati per APOLLO --%>
        <div id="footerLeft"><dnn:MLLINKS runat="server" id="ApolloLINKS" 
CssClass="ContextLinks" Level="Root" /></div><!-- END footerLeft -->
<%--   quello che e' rimasto ( sotto ) per far vedere il COPYRIGHT IN PIU' 
AGGIUNTO TERMS PER I TERMINI IN USO--%>
       <div id="footerRight"><dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" 
CssClass="DNNLinks" align="middle" /><dnn:TERMS runat="server" id="dnnTERMS" 
CssClass="DNNLinks" /></div><!-- END footerRight -->
        </div><!-- END footerInnerWrap -->
</div><!-- END footerWrap --> 


> [cut]
:"(
io ci ho provato, ma direi che ho fallito miseramente  :"(



Ok, ma se ti trovi con il Boeing 747 rotto in mezzo al deserto , anche se 
non sai cosa sono un cacciavite ed un bullone ci provi no ? :-) 


 --
Hum, ma qualcosa avrai capito sicuramente piu' di me :-), come pensavi di 
modificarlo?
ciao e grazie 
