css da verticale ad orizzontale

**ferrate** · 07-11-2005, 13:36

Ciao a tutti...
premetto che di CSS veramente nn ci capisco una mazza...

allora vediamo se riuscite a darmi una mano...
ho scaricato un piccolo codice in javascript ( in html.it )
che mi crea un menu...
mi funziona tutto bene.. però questo menù mi compare con le voci in modalità verticale...
presumo che dipenda dal CSS impostarlo in modalità orizzontale..

vi posto la porzione di codice inerente a questo CSS :

vi posto anche come visualizzo ad oggi il menu... ( vedere allegato )
le voci principali del menu ( login, areaclienti etc etc ) vorrei predisporle orizzontalmente...

ciao e un grazie in anticipo a chi mi darà un aiuto

<STYLE TYPE="text/css">

/* Make the menu float to the left of the text. */

#menu {float:center; width:50pt; background:lightgrey;

border:1px white outset; cursor:default}

/* Hide the pop-up menus initially. */

#menu .popup {position:absolute; display:none;

background:lightgrey; border:1px white outset;

width:135pt; margin:1pt}

#menu P {margin-top:0pt; margin-bottom:0pt}

.over {color:navy; font-weight:bold}

</STYLE>

**ferrate** · 07-11-2005, 13:58

vi posto tutto il codice completo :

STYLE TYPE="text/css">

/* Make the menu float to the left of the text. */

#menu {float:center; width:50pt; background:lightgrey;

border:1px white outset; cursor:default}

/* Hide the pop-up menus initially. */

#menu .popup {position:absolute; display:none;

background:lightgrey; border:1px white outset;

width:135pt; margin:1pt}

#menu P {margin-top:0pt; margin-bottom:0pt}

.over {color:navy; font-weight:bold}

</STYLE>

<SCRIPT LANGUAGE="JavaScript">

var curPop = null;

function clearCurrent() {

// Hide the pop-up menu that is currently displayed.

if (null != curPop)

curPop.style.display = "";

curPop = null;

}

function popup() {

var el = event.srcElement;

clearCurrent();

// Display a new menu option.

if (("P" == el.tagName) &&

("menu" == el.parentElement.id)) {

// Position and display the pop-up menu.

var elpop = document.all[el.sourceIndex + 1];

elpop.style.pixelLeft = document.all.menu.offsetLeft +

document.all.menu.offsetWidth - 7;

elpop.style.pixelTop = el.offsetTop +

document.all.menu.offsetTop;

elpop.style.display = "block";

curPop = elpop;

}

event.cancelBubble = true;

}

function highlight() {

// Highlight the menu options.

if (null != event.fromElement)

if ((event.fromElement.tagName == "P") &&

(event.fromElement.parentElement.id == "menu"))

event.fromElement.className = "";

if (null != event.toElement)

if ((event.toElement.tagName == "P") &&

(event.toElement.parentElement.id == "menu"))

event.toElement.className = "over";

}

</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF" ONCLICK="clearCurrent()" link="#000000" vlink="#000000" alink="#000000">
<FONT face="arial" size="1">

<DIV ID="menu" ONCLICK="popup()" ONMOUSEOVER="highlight()"

ONMOUSEOUT="highlight()" style="width: 165; height: 30">

<P align="left">LOGIN

<DIV CLASS="popup" style="width: 70; height: 10">

[img]GESTIONALE_HOMI/IMAGE/arancio1.bmp[/img] Login

</DIV>

<P align="left">AREA CLIENTI

<DIV CLASS="popup" style="width: 100; height: 20">

[img]GESTIONALE_HOMI/IMAGE/arancio1.bmp[/img] Aggiungi Cliente

[img]GESTIONALE_HOMI/IMAGE/arancio1.bmp[/img] Vedi Clienti

</DIV>

<P align="left">AREA FORNITORI

<DIV CLASS="popup" style="width: 110; height: 20">

[img]GESTIONALE_HOMI/IMAGE/arancio1.bmp[/img] Aggiungi Fornitore

[img]GESTIONALE_HOMI/IMAGE/arancio1.bmp[/img] Vedi Fornitore

</DIV>

<P align="left">AREA MAGAZZINO

<DIV CLASS="popup" style="width: 120; height: 20">

[img]GESTIONALE_HOMI/IMAGE/arancio1.bmp[/img] Gestione Magazzino

[img]GESTIONALE_HOMI/IMAGE/arancio1.bmp[/img] Vedi DDT

</DIV>

<P align="left">GESTIONE CLIENTI

<DIV CLASS="popup" style="width: 110; height: 50">

[img]GESTIONALE_HOMI/IMAGE/arancio1.bmp[/img] Modulo Assistenza

[img]GESTIONALE_HOMI/IMAGE/arancio1.bmp[/img] Vedi Assistenza

[img]GESTIONALE_HOMI/IMAGE/arancio1.bmp[/img] Scheda Cliente

[img]GESTIONALE_HOMI/IMAGE/arancio1.bmp[/img] Vedi Schede

[img]GESTIONALE_HOMI/IMAGE/arancio1.bmp[/img] Report

</DIV>

</div>

</font>

</body>

</html>

Discussione: css da verticale ad orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

css da verticale ad orizzontale

Permessi di invio