overflow:auto

or

overflow:hidden

in your container; however this solution makes the container div to have scrollbars which is not pleasant to the user eyes; the same author states that “You need to keep in mind that overflow:auto might cause some issues in Firefox” and IE7.

My solution: just use

display:table

in your container or wrapper div; this way your div will wrap around the containing divs; moreover, you do not have to declare the height of the div because it will be computed by the browser itself.

.marginetop{margin:15px 0 0 0}
.margineleft{margin:0 0 0 15px}
.marginebottom{margin:0 0 15px 0}
.margineright{margin:0 15px 0 0}

.nascondi{display:none}
.pulisci{clear:both}

.corsivo{font-style:italic}
.grassetto{font-weight:bold}
.sx{float:left}
.dx{float:right}
.centra{margin:0 auto; text-align:center}

.googlemap{
border:1px solid #f7931d;
overflow:hidden}

a[href$='.pdf'] {
    padding-right: 18px;
    background: transparent url(/images/icon_pdf.gif) no-repeat center right;
}

*{text-shadow:#000 0 0 0}
/* safari text fix*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	/*vertical-align:baseline*/}
a img, :link img, :visited img {border:0}
table {
	border-collapse: collapse;
	border-spacing:0}
ul {list-style:none}
q:before, q:after,
blockquote:before, blockquote:after {
	content: ""}
:focus {outline:0}
html{
width:100%;
height:100%}
   body{
	text-align:center;
	margin:0 auto;
	height:100%}

So I decided to give it a try and rewrite the code using our beloved css, the jquery library (only for the alpha effects) and the ie7.js script for our less beloved IE6. Let me say first that my menu just works fine with the css and the ie7.js only but I wanted to use the jquery library to make it similar to the one you find in thr Porsche website.

The menu is free to use, if you like just drop me a line telling me where you used it.

This is the final result.
Download the .zip file: menu_porsche

Internet e il ruolo del web designer.

Il web designer senior ha una notevole esperienza nel settore dell’IT e conoscenze approfondite nello sviluppo di siti web con particolare attenzione agli standard web proposti dal W3C, xhtml e css e all’usabilità; sviluppa soluzioni tableless e pagine ottimizzate sia per i motori di ricerca che per le diverse piattaforme (mac/pc e relativi browser- Safari, IE6, IE7, IE8, Firefox).

Competenze acquisite negli anni come web designer.

Design di siti web in Xhtml/Css e in Flash, banner (gif e flash), newsletter, temi per WordPress e Myspace, ottimizzazione per i motori di ricerca, produzione di filmati flash, musica e video.

Di che cosa si occupa in generale il web designer e cos’è il web design?

Il termine webdesign, di derivazione anglosassone, sta ad indicare tutto l’insieme di attività che confluiscono nella progettazione grafica di un sito internet; il webdesigner di conseguenza deve possedere svariate competenze tecniche che gli permettano di creare un sito internet secondo alti standard qualitativi.
In particolare il web designer:

1. deve essere in possesso di buone doti di comunicazione che confluiscono poi alla finalizzazione del design della pagina web;
2. deve avere spiccate doti di creatività;
3. deve conoscere i principi fondamentali dell’utilizzo del colore, del contrasto e della disposizione degli elementi all’interno di una pagina web;
4. deve conoscere i principi fondamentali dell’usabilità e dell’accesibilità di un sito;
5. deve conoscere i linguaggi di markup più diffusi nel web (html, xhtml);
6. deve saper strutturare i siti mantenendo il più possibile separata  la struttura dallo stile e dunque far uso dei fogli di stile (css);
7. deve far in modo che le pagine web da lui prodotte risultino valide e in linea con quanto riportato dalle direttive del W3C
8. deve assicurarsi che la pagina risulti compatibile con i diversi sistemi operativi e i diversi browser (Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Safari);
9. deve mantenersi costantemente aggiornato.

Quali sono gli strumenti che utilizza il web designer per progettare pagine web?

Per quanto riguarda la progettazione grafica di un sito internet, è indispensabile la conoscenza di un programma di grafica e/o fotoritocco come ad esempio Photoshop. Valide alternative sono Fireworks o The Gimp.
Dal punto di vista dell’impaginazione invece,  un buon web designer deve saper scrivere il codice senza l’ausilio di editor WYSIWYG – anche il semplice Blocconote di Microsoft potrebbe andar bene. Almeno all’inizio è fondamentale capire come funziona il markup html e come deve essere impaginato un sito con i css.

Skill aggiuntive per web designer

Ulteriore plus che va ad arricchire le skill del web designer è sicuramente l’utilizzo di Flash e del relativo linguaggio di programmazione noto come Actionscript e giunto ormai alla terza versione.

Flash (software distribuito dalla Adobe) permette di creare animazioni complesse e multimediali ed rappresenta ormai uno standard per la creazione di contenuti animati ed interattivi.

Risorse per web designer

Principali siti di riferimento per l’aggiornamento del web designer:

• cssmania.com – per quanto riguarda gli ultimi trend del web design;
• smashingmagazine.com – tutorial e articoli sul mondo del web design;
• googlewebmastercentral.com – articoli e tutorial sul più famoso motore di ricerca: Google