CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede haastrup Novice
25. juli 2010 - 18:37 Der er 14 kommentarer og
1 løsning

Hvordan "genbruger" jeg denne menu med SSI på hele mit site?

Hejsa Eksperter,

Jeg har fundet mig en fin drop-down menu, som måske desværre er en kende kompliceret (FOR kompliceret?) for jeg kan ikke lige få det til at virke med en simpel include.

Måske gør jeg det helt forkert, og derfor skal jeg bruge din hjælp.

Menuen ligger i sin infantile tilstand nu på http://tjenpengeonline.dk/e-handel

Det er denne menu jeg gerne vil genbruge.

Problemet er at der er vedhæftet et stylesheet til den, og en anden style kommando, som ligger i <head> (for at omgå IE7).

Kan denne menu overhovedet bruges med SSI til "genbrug" eller skal jeg finde en anden?

Jeg har prøvet at lave en include men fik det som sagt ikke til at virke.

Kan du se en løsning, eller har du et forslag til en alternativ drop down menu?

Glæder mig til at høre fra dig.

Mange Hilsener
Allan
Avatar billede keysersoze Guru
25. juli 2010 - 23:21 #1
Der findes ikke én korrekt løsning til dette - men en løsning kunne være at benytte 2 includes; en til selve HTML-delen af menuen og en til hvad der skal ligge i head.
Avatar billede haastrup Novice
08. august 2010 - 20:35 #2
Hej Keysersoze,

Jeg er lidt blank på hvordan jeg lige skiller tingene ad.

Hvordan laver jeg:

<style type="text/css">@import url("menuh.css");</style>

Om til en fil som jeg kan lave include på?

Eller er det mig der misforstår?
Avatar billede keysersoze Guru
08. august 2010 - 20:46 #3
Ikke forstået?
Avatar billede haastrup Novice
08. august 2010 - 21:02 #4
Hehe, vi snakker vist forbi hinanden.

Du foreslår at jeg smider det der skal ligge i head om i en anden include fil.

Det der ligger der er to henvisninger til CSS.
Hvilken type fil skal det laves til?

Håber jeg formår at forklare mig korrekt. :-)
Avatar billede haastrup Novice
08. august 2010 - 21:04 #5
Men umiddelbart virker det som en ret kringlet menu. Du kender ikke tilfældigvis til en lignenden drop-down menu med en lidt simplere sammensætning? Har kigget lidt rundt på nettet men kan ikke lige lokalisere noget som er til at gå til med mit begrænsede kendskab til html/css/ssi
Avatar billede keysersoze Guru
09. august 2010 - 11:14 #6
din kode i #2 er ganske almindelig klient-kode, så der er ingen forskel på om du skal inkludere den del i head vha SSI eller den kode selve menuen består af; http://www.html.dk/tutorials/ssi/

Hvis du allerede har forsøgt det men det bare ikke virker, så prøv at kom med noget kode.
Avatar billede haastrup Novice
09. august 2010 - 12:25 #7
Ok, det lyder som en god idé, lad os starte fra starten :-)

Min kode ser originalt ud som nedenstående.

Ved siden af har jeg et css dokument (menuh.css) som styrer menuen. (http://www.tjenpengeonline.dk/e-handel/menuh.css)

Her er koden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<html>
<head>
<link rel="shortcut icon" href="profteam.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Begin Grab This - You'll need this external CSS file and the IE Statement below -->
<style type="text/css">@import url("menuh.css");</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->
<!-- End Grab This -->


</head>

<body>

    <!-- Begin CSS Horizontal Popout Menu -->

        <div id="menuh-container">   
            <div id="menuh">
       
                <ul>
                    <li><a href="#" class="top_parent">Hjem</a>
                    </li>
                </ul>

           
                <ul>
                    <li><a href="#" class="top_parent">Forretning</a>
                    <ul>

                        <li><a href="#">Sub 2:1</a></li>
                        <li><a href="#" class="parent">Sub 2:2</a>
                            <ul>
                            <li><a href="#">Sub 2:2:1</a></li>

                            <li><a href="#">Sub 2:2:2</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Sub 2:3</a></li>
                        <li><a href="#" class="parent">Sub 2:4</a>
                            <ul>
                            <li><a href="#">Sub 2:4:1</a></li>

                            <li><a href="#">Sub 2:4:2</a></li>
                            </ul>
                        </li>

                        <li><a href="#" class="parent">Sub 2:5</a>
                            <ul>
                            <li><a href="#">Sub 2:5:1</a></li>
                            <li><a href="#">Sub 2:5:2</a></li>

                            <li><a href="#">Sub 2:5:3</a></li>
                            <li><a href="#">Sub 2:5:4</a></li>

                            <li><a href="#">Sub 2:5:5</a></li>
                            </ul>
                        </li>
                    </ul>
                    </li>

                </ul>
           
                <ul>
                    <li><a href="#" class="top_parent">Butik</a>

                    <ul>
                        <li><a href="#" class="parent">Sub 3:2</a>
                            <ul>
                            <li><a href="#">Sub 3:2:1</a></li>

                            <li><a href="#">Sub 3:2:2</a></li>
                            <li><a href="#">Sub 3:2:3</a></li>
                            <li><a href="#">Sub 3:2:4</a></li>

                            </ul>
                        </li>
                        <li><a href="#" class="parent">Sub 3:3</a>

                            <ul>
                            <li><a href="#">Sub 3:3:1</a></li>
                            <li><a href="#">Sub 3:3:2</a></li>
                            <li><a href="#">Sub 3:3:3</a></li>

                            <li><a href="#">Sub 3:3:4</a></li>
                            </ul>

                        </li>
                        <li><a href="#" class="parent">Sub 3:4</a>
                            <ul>
                            <li><a href="#">Sub 3:4:1</a></li>
                            <li><a href="#">Sub 3:4:2</a></li>

                            <li><a href="#">Sub 3:4:3</a></li>

                            <li><a href="#">Sub 3:4:4</a></li>
                            <li><a href="#">Sub 3:4:5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub 3:5</a></li>
                    </ul>

                    </li>

                </ul>
               
                <ul>
                    <li><a href="#" class="top_parent">FAQ</a>
                    <ul>
                        <li><a href="#">Sub 4:1</a></li>
                        <li><a href="#" class="parent">Sub 4:2</a>

                            <ul>

                            <li><a href="#">Sub 4:2:1</a></li>
                            <li><a href="#">Sub 4:2:2</a></li>
                            <li><a href="#">Sub 4:2:3</a></li>
                            <li><a href="#">Sub 4:2:4</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Sub 4:3</a></li>
                        <li><a href="#" class="parent">Sub 4:4</a>
                            <ul>
                            <li><a href="#">Sub 4:4:1</a></li>
                            <li><a href="#">Sub 4:4:2</a></li>
                            <li><a href="#">Sub 4:4:3</a></li>

                            <li><a href="#">Sub 4:4:4</a></li>
                            <li><a href="#">Sub 4:4:5</a></li>
                            <li><a href="#">Sub 4:4:6</a></li>
                            <li><a href="#">Sub 4:4:7</a></li>
                            <li><a href="#">Sub 4:4:8</a></li>
                            <li><a href="#">Sub 4:4:9</a></li>

                            </ul>
                        </li>
                    </ul>
                    </li>
                </ul>
                <ul>
                    <li><a href="#" >Links</a>
                </ul>

<ul>
                    <li><a href="#" class="top_parent">Nyheder</a>
                    <ul>
                        <li><a href="#">Sub 4:1</a></li>
                        <li><a href="#" class="parent">Sub 4:2</a>

                            <ul>
                            <li><a href="#">Sub 4:2:1</a></li>

                            <li><a href="#">Sub 4:2:2</a></li>
                            <li><a href="#">Sub 4:2:3</a></li>
                            <li><a href="#">Sub 4:2:4</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Sub 4:3</a></li>

                        <li><a href="#" class="parent">Sub 4:4</a>
                            <ul>
                            <li><a href="#">Sub 4:4:1</a></li>
                            <li><a href="#">Sub 4:4:2</a></li>
                            <li><a href="#">Sub 4:4:3</a></li>

                            <li><a href="#">Sub 4:4:4</a></li>

                            <li><a href="#">Sub 4:4:5</a></li>
                            <li><a href="#">Sub 4:4:6</a></li>
                            <li><a href="#">Sub 4:4:7</a></li>
                            <li><a href="#">Sub 4:4:8</a></li>
                            <li><a href="#">Sub 4:4:9</a></li>

                            </ul>

                        </li>
                    </ul>
                    </li>
                </ul>
<ul>
                    <li><a href="#" class="top_parent">Kontakt</a>
                    <ul>
                        <li><a href="#">Sub 4:1</a></li>

                        <li><a href="#" class="parent">Sub 4:2</a>

                            <ul>
                            <li><a href="#">Sub 4:2:1</a></li>
                            <li><a href="#">Sub 4:2:2</a></li>
                            <li><a href="#">Sub 4:2:3</a></li>
                            <li><a href="#">Sub 4:2:4</a></li>

                            </ul>
                        </li>

                        <li><a href="#">Sub 4:3</a></li>
                        <li><a href="#" class="parent">Sub 4:4</a>
                            <ul>
                            <li><a href="#">Sub 4:4:1</a></li>
                            <li><a href="#">Sub 4:4:2</a></li>

                            <li><a href="#">Sub 4:4:3</a></li>

                            <li><a href="#">Sub 4:4:4</a></li>
                            <li><a href="#">Sub 4:4:5</a></li>
                            <li><a href="#">Sub 4:4:6</a></li>
                            <li><a href="#">Sub 4:4:7</a></li>
                            <li><a href="#">Sub 4:4:8</a></li>

                            <li><a href="#">Sub 4:4:9</a></li>

                            </ul>
                        </li>
                    </ul>
                    </li>
                </ul>

            </div>

        </div>
           
        <!-- End CSS Horizontal Popout Menu -->   


</body>
</html>
Avatar billede keysersoze Guru
09. august 2010 - 14:19 #8
Hvordan ser det så ud når du benytter SSI?
Avatar billede haastrup Novice
09. august 2010 - 14:31 #9
Det jeg har prøvet er at fjerne selve HTML delen og så lave et include på det. Det virkede ikke. Derfor kom jeg herhen og spurgte hvordan det kunne/skulle gøres :-)

Der kommer ikke noget frem på skærmen, hvis jeg blot laver en include på selve HTML delen.

Du skriver så at jeg skal dele det op, og det er her jeg går lidt i hårknude, for hvilke dele kan jeg smide over i andre dokumenter og kalde via SSI, og hvordan skal det opbygges?
Avatar billede keysersoze Guru
09. august 2010 - 15:04 #10
Der er absolut intet forskel på en almindelig HTML-side og HTML-sider med includes det er derfor jeg ikke kan forstå hvor det går galt for dig - og jeg kan desværre ikke forklare sammenhængen meget bedre end den tutorial jeg henviser til.

Det eneste du skal sikre dig mellem en SSI-side og ikke-SSI er, at SSI skal være understøttet på serveren og så skal siden, der inkludere andre sider hedde .shtml i stedet for .html/.htm. Dokumentet du inkluderer er et almindeligt .html/.htm dokument med den eneste forskel at der kun skal være specifikt den kode der er behov for bliver inkluderet - du skal altså ikke have fx DOCTYPE heri såfremt den ligger på det inkluderende dokument.
Avatar billede haastrup Novice
09. august 2010 - 23:36 #11
Ah, ok nu forstår jeg.

Det var lige den sammenhæng jeg ikke havde fået ud af den ellers meget fine tutorial på html.dk

(Tror jeg har læst den for hurtigt)

Går lige til arbejdsbordet igen og melder tilbage, forhåbentlig med masser af fremskridt. :-)
Avatar billede haastrup Novice
10. august 2010 - 00:49 #12
Hej Keyserzose,

Efter din meget indgående forklaring så faldt 10-øren.

Tak for din tålmodighed og din gode pædagogiske måde at forklare det på.

Fik det til at virke bare med include til selve menuen. Nu vil jeg prøve at se om jeg kan komme frem til at få det til at virke på det IE statement også.

Smid lige et svar så du kan blive så rigt belønnet som jeg kan herinde :-)

Mange Hilsener
Allan
Avatar billede haastrup Novice
10. august 2010 - 02:40 #13
Hmm, det virker ikke lige med det statement, som jo egentlig (eller hvad) bare er lidt css i forklædning?

Koden:

<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>

Laver jeg det til et css dokument og henter det ind i <head> gør det at selve menuen skrumper ind til en mindre størrelse.

både med
<style type="text/css">@import url("ie7.css");</style>
og
<style type="text/css" media="screen">@import url("ie7.css");</style>

Giver det samme resultat.

Men ok, den stump kode er ikke noget der skal ændres på (medmindre MS går amok og ændrer helt vildt på standarderne og deres browser, men den tid den glæde).

Så igen takker jeg mange gange for din assistance.
Avatar billede keysersoze Guru
10. august 2010 - 11:24 #14
Det er i langt højere grad udviklerens og ikke browseren skyld at en side ikke vises som forventet - dette primært pga manglende doctype og/eller invalid kode. Ingen tvivl om at de gamle versioner af IE havde mange fejl, men IE7 og slet ikke IE8 bør ikke være noget problem at få til at fungere i hvert fald så længe man er opmærksom på hver browsers særheder (og jo, FF har bestemt også særheder). Det er iøvrigt heller ikke MS, der sætter standarderne men derimod W3 (som Microsoft dog er en del af ligesom Mozilla også er).

Omkring din kode kan jeg ikke umiddelbart se hvad der skulle gå galt - som nævnt er der ingen forskel på om du benytter SSI til at inkludere HTML eller CSS-filer til at inkludere stylesheets. Du kan, hvis du ikke allerede gør, evt benytte Firebug til Firefox eller Developer Toolbar til IE for at se koden og se om der evt er styles der uventet overskriver andre styles mod forventning og også live redigere både HTML og CSS.
Avatar billede haastrup Novice
10. august 2010 - 14:06 #15
Ok, der må være nogle finurligheder i koden som jeg nærstuderer efterhånden som jeg opbygger mere erfaring med både CSS og SSI.

Endnu en gang 1000 tak for din store hjælp.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Programmeringssprog kurser
Kurser inden for grundlæggende programmering
Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel Indlæg Oprettet Seneste aktivitet
Trim tekst i batch script Af Dan Elgaard i Andet programmering 5 05/09/202411:08 10/09/202415:29
ASP Classic fil fra subfolder Af bsn i Andet programmering 3 07/05/202416:14 08/05/202401:00
Session Variable Af bsn i Andet programmering 3 01/05/202409:44 02/05/202409:29
Modifyed Field for all Records in Access Af ingeman i Andet programmering 2 29/04/202416:05 30/04/202407:19
Delphi - Parser JSON Fil Af juzas i Andet programmering 4 25/02/202407:13 28/02/202420:56
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 14:48 Datoformat ved eksport til Excel Af dane022 i PHP
I går 10:01 Tæl celle hvis baggrundsfarve er blå Af MichaelBS i Excel
16/0921:30 gendan Iphone 13 Af lurup i Mobiltelefoner
16/0920:34 Wifi 6 eller Wifi 7 Af skolevej321 i Routere & Switches
16/0919:54 Billede fastlåst til celle Af Tom K. i Excel
White papers
Flere white papers »


Premium
Teaser billede
Microsoft lukker kæmpe-aftale: Sælger 68.000 Copilot-licenser med et pennestrøg
Læs mere »
Her er EU's nye tech-kommissær: Se de 19 konkrete punkter, som hun får til opgave at arbejde efter
Nvidias GPU'er knuser Moores lov - så stærkt går udviklingen med AI
Efter hård kritik: Opstramning på vej i kontrollen af de danske bankers it-sikkerhed
Se alle »
Computerworld
Teaser billede
Apple ændrer grundlæggende om på den måde, som din iPhone skal opdateres på
Læs mere »
Guide: Sådan wiper du dine harddrev og andre medier, så ingen kan læse dem – nogensinde
Test: Det kan ikke gå helt galt med B&O-lyd til under 1.000 kroner
Et af verdens største it-sikkerhedsselskaber ramt af hackerangreb – hackere har haft adgang til kundedata
Se alle »
CIO
Teaser billede
Dansk top-CIO går i rette med professor: Vi kan altså ikke undvære it-afdelingerne - vil være helt forkert beslutning at afvikle dem
Læs mere »
Nu kommer næste store version af Copilot
Tre måneder efter sin tiltræden har Nilfisk-CIO Anders Liechti lagt sin it-strategi - her er de fem store punkter
Søstrene Grene skifter Microsoft ud med SAP og rykker for første gang i clouden i stor ERP-transformation
Se alle »
Job & Karriere
Teaser billede
Pludselig exit fra Schultz kom som en overraskelse for Merete Søby: Derfor stoppede samarbejdet
Læs mere »
Merete Søby fratræder med omgående virkning som CEO for Schultz efter blot tre måneder på posten
Professor: "Det er på høje tid at opløse virksomhedernes it-afdelinger"
Kom tæt på Danmarks nye digitaliserings-minister: 33-årige Caroline Stage Olsen er tidligere tobaks-lobbyist - har været aktiv i politik siden hun var helt ung
Se alle »
White paper
Teaser billede
Har du styr på dine data? Bliv klar til ambitiøse AI-projekter
Læs mere »
Sådan får du overblik og beskytter dine cloudapplikationer
Sådan gør du: Elektronisk dokumentudveksling i praksis
Få mere ud af din cloudinfrastruktur og gør op med de konstant stigende omkostninger
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »