Inserire Menu' In Layout

**unnomechenonc'è** · 01-04-2010, 19:44

mi trovo ad avere i codici di un menu' e di un layout fluid-fluid-fluid

vorrei inserire il menu' nella colonna secondaria sulla sinistra

non so come fare mi potreste dare dei consigli pratici? se posto i codici mi ci date un occhiata gentilmente?

**webdemo** · 01-04-2010, 22:14

Originariamente inviato da unnomechenonc'è
se posto i codici mi ci date un occhiata gentilmente?

non lo saprai mai se non lo posti

**unnomechenonc'è** · 02-04-2010, 00:34

ok webdemo posto posto

per il menu che mi interessa:

codice:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<script type="text/javascript">


ddaccordion.init({
	headerclass: "submenuheader", //Shared CSS class name of headers group
	contentclass: "submenu", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["suffix", "[img]plus.gif[/img]", "[img]minus.gif[/img]"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})


</script>


<style type="text/css">

.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu a.menuitem{
background: black url(glossyback.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
background-image: url(glossyback2.gif);
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}

.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
colorz: white;
}

</style>

</head>

<body>

<div class="glossymenu">
Dynamic Drive
CSS Examples
<div class="submenu">
	<ul>
	[*]Horizontal CSS Menus
	[*]Vertical CSS Menus
	[*]Image CSS
	[*]Form CSS
	[*]DIVs and containers
	[*]Links & Buttons
	[*]Other
	[*]Browse All
	[/list]
</div>
JavaScript Reference
DOM Reference
CSS Drive
<div class="submenu">
	<ul>
	[*]CSS Gallery
	[*]Menu Gallery
	[*]Web Design News
	[*]CSS Examples
	[*]CSS Compressor
	[*]CSS Forums
	[/list]
	
</div>
Coding Forums		
</div>



Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p>



- Expand 1st header within "submenuheader" header group

</p>



Helpful links: </p>



- Adding arbitrary links hat expand/ collapse the contents

- Taking advantage of the oninit() and onopenclose() event handlers

</p>

</body>
</html>[/QUOTE] 

per il layout che mi interessa a tre colonno con le due  secondarie ai margini sinistro e destro simmetriche:
[QUOTE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #3.3- (Fluid-Fluid-Fluid)</title>
<style type="text/css">


body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}


#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 15% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
margin-left: -100%;
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 15%; /*Width of right column in pixels*/
margin-left: -15%; /*Set margin to that of -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.3- (Fluid-Fluid-Fluid)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">Content Column: Fluid <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube">Left Column: 20% <script type="text/javascript">filltext(20)</script></div>

</div>

<div id="rightcolumn">
<div class="innertube">Right Column: 15% <script type="text/javascript">filltext(15)</script></div>
</div>

<div id="footer">Dynamic Drive CSS Library</div>

</div>
</body>
</html>

**unnomechenonc'è** · 02-04-2010, 11:59

siccome nella prima colonna secondaria ci deve essere un menu e sulla seconda secondaria i banner e dato che al centro ci devono essere anche delle immagini penso che sia meglio cambiare il layout fluid-fluid-fluid in fixed-fixed-fixed

posto il codice che mi interessa:

codice:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">Content Column: Fixed <script type="text/javascript">filltext(10)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube">Left Column: 180px <script type="text/javascript">filltext(20)</script></div>

</div>

<div id="rightcolumn">
<div class="innertube">Right Column: 190px <script type="text/javascript">filltext(15)</script></div>
</div>

<div id="footer">Dynamic Drive CSS Library</div>

</div>
</body>
</html>

**webdemo** · 02-04-2010, 14:59

per inserire un menù nella colonna di sinistra
devi inserirlo dove trovi:

codice:

<div id="leftcolumn">
<div class="innertube">

inserisci qui il tuo menù

</div>
</div>

**unnomechenonc'è** · 02-04-2010, 17:29

ciao webdemo innanzitutto grazie moltissime per avermi aiutato con il menu

poi volevo farti se possibile altre domande

per esempio (riferendoci al codice di sopra quello fixed-fixed-fixed per intenderci) se volessi aumentare la larghezza per le colonne so come fare ma per il centro l'header e il footer no potresti indicarmelo tu?

altra domanda è questa

c'è un modo per fare rimanere sempre lo stesso menu riducendo anche i tempi di caricamento?

poi fin ora ho a disposizione comunque menu header footer + altra colonna

ma come si creano le pagine varie che collego al menu? cioè devo fare altri fogli di blocco note? e poi li devo mettere in cartelle?

so che ti sto chiedendo molto probabilmente troppo ma... ci tengo molto a fare questo sito e poi sto gia iniziando a raccapezzarci qualcosa dunque se ti è possibile potresti continuare a guidarmi? ad ogni mdo ti ringrazio a prescindere

**webdemo** · 02-04-2010, 17:58

la larghezza dei vari blocchi
la puoi cambiare aumentando il valore in pixel,
c'è scritto dove devi interventire, nel codice stesso che hai postato

codice:

width: 840px; /*Width of main container*/

width:  180px; /*Width of left column in pixel*/

width:  190px; /*Width of right column*/

si, le pagine successive le devi realizzare duplicando la prima
esempio:

index.html (quella attuale)
dovesiamo.html
prodotti.html
(ecc...)

per lincare le pagine ti basterà scrivere nel menù:

codice:

dove siamo

**unnomechenonc'è** · 02-04-2010, 18:20

webdemo

per le dimensioni ora provo (prima mi sono lasciato distrarre dal -840 che mi spostava il menu a destra invece)

per quanto riaguarda le pagine ho capito ne creo di nuove con le stesse impostazioni per il menu e le dimensioni per la seconda colonna secondaria e per quella centrale

ora però vorrei chiederti un'altra cosa

ho provato a scrivere all'interno di quello che mi sembrava il conteiner <div> del centro

in effetti mi scrive li PERO' NON VA A CAPO ,

, cioè scrive anche sotto la seconda colonna secondaria sulla destra e oltre come posso fare per inserire testi che rispettino le dimensioni del conteiner centrale? e per inserire anche delle immagini?

e ancora un'altra cosa gentilmente, in particolare vorrei inserire nella colonna principale (quella al centro), dei blocchi con immagini che mi facciano aprire altre pagine del sito
i blocchi che vorrei inserire mi piacerebbe che avessero la forma di quello con scritto OGGI nel sito: http://it.yahoo.com/
(solo immagine e breve testo sotto con cornicetta come nel sito, senza quella barra di scorrimento)

grazie ancora per tutto l'aiuto che mi stai dando

**webdemo** · 02-04-2010, 23:08

il layout sembra corretto, non va oltre le colonne:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>


</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">

Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale Qui puoi scrivere il contenuto della colonna centrale 




</div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube">




Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  Qui puoi scrivere il contenuto della colonna sinistra  



</div>

</div>

<div id="rightcolumn">
<div class="innertube">



Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il contenuto della colonna destra  Qui puoi scrivere il 





</div>
</div>

<div id="footer">Dynamic Drive CSS Library</div>

</div>
</body>
</html>

per quanto riguarda i contenuti di altri siti
cerca nel sito dove vuoi "attingere" i contenuti
spesso offrono il codice per visualizzare contenuti su siti esterni

in alternativa (se il sito sorgente lo permette) prova a cercare qui su html.it la parola inclusione

**unnomechenonc'è** · 02-04-2010, 23:44

ciao webdemo

quando ho detto che mi spostava la colonna di sinistra verso destra è perchè io avevo modificato -840 anziche 840

per quanto riguarda quuesto:

e ancora un'altra cosa gentilmente, in particolare vorrei inserire nella colonna principale (quella al centro), dei blocchi con immagini che mi facciano aprire altre pagine del sito
i blocchi che vorrei inserire mi piacerebbe che avessero la forma di quello con scritto OGGI nel sito: http://it.yahoo.com/
(solo immagine e breve testo sotto con cornicetta come nel sito, senza quella barra di scorrimento

io non mi riferivo al contenuto del riquadro ma al riquadro stesso mi piace e mi serve in modo da poter inserire un immagine e un breve testo da poter poi rendere il tutto come un link
ne devo mettere più di uno in una pagina nella colonna centrale

HO CAPITO COME LINKARE IMMAGINI E TESTO NON ANCORA COME FARE IL BLOCCO DI CUI SOPRA

questo problema ancora mi rimane:

ho provato a scrivere all'interno di quello che mi sembrava il conteiner <div> del centro
in effetti mi scrive li PERO' NON VA A CAPO , , cioè scrive anche sotto la seconda colonna secondaria sulla destra e oltre come posso fare per inserire testi che rispettino le dimensioni del conteiner centrale?

altra domanda è questa:
per rendere un sito più leggero si possono usare parti che rimangano fisse esempio il menu tramite frameset, ora io uso <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" dunque non posso usare i frameset MA QUALORA USASSI FRAMESET AL POSTO DI TRANSITIONAL a parte body dovrei cambiare molte cose? e ne varrebbe la pena?

(N.B. SE PER RISPONDERE A QUESTA DOMANDA TU DOVESSI PERDERE MOLTO TEMPO E SACRIFICARE QUELLE SOPRA PER PIACERE EVITA DI RISPONDERE A QUESTA E DAI PRECEDENZA A QUELLE DI SOPRA)

ovviamente ora qualunque ringraziamento ti facessi risulterebbe un po quasi di comodo
ma assolutamente non è così e ti ringrazio moltissimo gia per tutto il tempo che hai perso per rispondere alle mie domande precedenti a questo post

grazie

Discussione: Inserire Menu' In Layout

Strumenti discussione

Ricerca discussione

Visualizza

Inserire Menu' In Layout

Re: Inserire Menu' In Layout

Permessi di invio