/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS - Placering af en menu ?
Fra : SpookiePower


Dato : 30-11-07 23:44

Jeg har problemer med at få samme resultat i
Firefox 2.0 og IE 7.

Køre man denne side i IE, så står menuen rigtigt
oven over boxen.
http://www.activewebsite.dk/help/index.asp

Køre man sammen side i Firefox, ja så ligger menuen
inden i boxen. Jeg har prøvet alt nu, så nu håber
jeg i kan hjælpe mig. Jeg ville jo gerne have det
til at virke i begge browsere.

Mine 3 filer kan i se her -
http://www.activewebsite.dk/help/index.txt
http://www.activewebsite.dk/help/dropdown.txt
http://www.activewebsite.dk/help/stylesheet.txt

 
 
Jørgen Farum Jensen (01-12-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 01-12-07 00:04

SpookiePower skrev:
> Jeg har problemer med at få samme resultat i
> Firefox 2.0 og IE 7.
>
> Køre man denne side i IE, så står menuen rigtigt
> oven over boxen.
> http://www.activewebsite.dk/help/index.asp
>


Det kan har nok noget at gøre med at du afslutter
din side før tekst'en.

Det er ikke for at være fræk, men det er altså
stadigvæk en god idé at tjekke sin kode i en
validator før man be'r om gode råd. Det forøger
jo din chance for selv at finde eventuelle
fejl.

Jeg synes måske også at menukoden virker en smule
altmodisch. Jeg kan ikke lige se, hvorfor du
skal bruge JavaScript til at folde menuen
ud. De argumenter, der findes på den side,
hvorfra du har hentet koden, holder kun,
hvis du vil bruge onclick event handler'en.


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

SpookiePower (01-12-2007)
Kommentar
Fra : SpookiePower


Dato : 01-12-07 13:01

Jørgen Farum Jensen wrote:

> Det kan har nok noget at gøre med at du afslutter
> din side før tekst'en.

Det vil jeg undersøge.

> Det er ikke for at være fræk, men det er altså
> stadigvæk en god idé at tjekke sin kode i en
> validator før man be'r om gode råd. Det forøger
> jo din chance for selv at finde eventuelle
> fejl.

Det var jeg ikke klar over at man kunne, så
det er jeg kun glad for du fortæller mig.

> Jeg synes måske også at menukoden virker en smule
> altmodisch.

Det udtryk kender jeg desværre ikke, men det virker
ikke som et positivt udtryk :)

> Jeg kan ikke lige se, hvorfor du
> skal bruge JavaScript til at folde menuen
> ud. De argumenter, der findes på den side,
> hvorfra du har hentet koden, holder kun,
> hvis du vil bruge onclick event handler'en.

Grunden til at jeg valgte den, var at det var en
af de få menu'er jeg kunne få til at virke. Ikke
fordi den bruger java.


Philip Nunnegaard (01-12-2007)
Kommentar
Fra : Philip Nunnegaard


Dato : 01-12-07 15:50

>> Jeg synes måske også at menukoden virker en smule
>> altmodisch.
>
> Det udtryk kender jeg desværre ikke, men det virker
> ikke som et positivt udtryk :)

Jeg går ud fra, at det betyder "gammeldags" på tysk.
Han hentyder nok til, at det er gammeldags at lave dynamiske menuer med
javascript, fordi man efterhånden kan det meste med css i dag, og dét er
mere søgemaskinevenligt (og tilmed nemmere at lave).


Jørgen Farum Jensen (01-12-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 01-12-07 16:51

SpookiePower skrev:

> Grunden til at jeg valgte den, var at det var en
> af de få menu'er jeg kunne få til at virke. Ikke
> fordi den bruger java.
>

Det er nu ikke Java programmeringssproget,
men JavaScript som er et fortolket script-sprog,
lige som Basic, VBScript og hvad ved jeg.

Det eneste det script gør er at sørge
for at folde undermenuerne ud og ind.
Bruger man JavaScript til en sådan menu er
det som regel for at arbejde med onclick, tidsforsinkelser
og forskellige grafiske effekter, som ikke kan
laves med HTML og CSS alene.

Jeg har skrevet en del del om, hvordan du laver
sådan en menu alene med CSS - se artiklen:
http://webdesign101.dk/www/cssmenu/dropdownmenu.php

Obs at disse løsninger beror på CSS :hover
tilstanden på nogle li-elementer - i dit tilfælde vist
nogle dt-elementer. Det er den lille hage ved
det at IE<7 kun forstår denne tilstand på
aktive elementer. Det er derfor nødvendigt at
tage særlige forholdsregler over disse browsere.

Det skriver jeg om i artiklen, men det er min
erfaring at mange overser dette og derfor
ikke kan få mine eksempler til at virke i
disse browsere.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

SpookiePower (04-12-2007)
Kommentar
Fra : SpookiePower


Dato : 04-12-07 09:24

Jørgen Farum Jensen wrote:

> Jeg har skrevet en del del om, hvordan du laver
> sådan en menu alene med CSS - se artiklen:
> http://webdesign101.dk/www/cssmenu/dropdownmenu.php
>
> Obs at disse løsninger beror på CSS :hover
> tilstanden på nogle li-elementer - i dit tilfælde vist
> nogle dt-elementer. Det er den lille hage ved
> det at IE<7 kun forstår denne tilstand på
> aktive elementer. Det er derfor nødvendigt at
> tage særlige forholdsregler over disse browsere.
>
> Det skriver jeg om i artiklen, men det er min
> erfaring at mange overser dette og derfor
> ikke kan få mine eksempler til at virke i
> disse browsere.

Jeg har faktisk kigget meget på dine sider -
vidste ikke det var dig som havde skrevet dem.
Men jeg har ikke kunne få dine eksempler til
at virker, hverken i Firefox eller IE. Jeg
får ikke vist selve dropdown menuen, men
jeg får vist teksten fra de forskellige links
i menu'en. Jeg må prøve at kigge på det igen.

SpookiePower (04-12-2007)
Kommentar
Fra : SpookiePower


Dato : 04-12-07 09:46

Jeg har kigget din hjælp igennem igen,
og det vil stadig ikke virke. Hvor jeg
går galt i byen er jeg ikke klar over.

Jeg benytter Dreamweaver CS3 til at lave mine
dokumenter med. Jeg benytter en del aspkode
så jeg har valgt at starte med et asp-dokument.
Jeg har også prøvet at starte med et html
dokument, men der var ingen forskel.

Du kan se den side jeg har lavet ud fra din side her -
http://www.activewebsite.dk/help/menu03.asp

og selve koden her -
http://www.activewebsite.dk/help/menu03.txt



Jørgen Farum Jensen (04-12-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 04-12-07 10:46

SpookiePower skrev:
> Jeg har kigget din hjælp igennem igen,
> og det vil stadig ikke virke. Hvor jeg
> går galt i byen er jeg ikke klar over.
>
> Jeg benytter Dreamweaver CS3 til at lave mine
> dokumenter med. Jeg benytter en del aspkode
> så jeg har valgt at starte med et asp-dokument.
> Jeg har også prøvet at starte med et html
> dokument, men der var ingen forskel.
>
> Du kan se den side jeg har lavet ud fra din side her -
> http://www.activewebsite.dk/help/menu03.asp
>
> og selve koden her -
> http://www.activewebsite.dk/help/menu03.txt
>
>
Du ku' jo for eksempel starte med at
formatere din HTML-kode med et stylesheet,
der vedrører samme HTML-kode:

Din HTML-kode er
<ul id="navpanel">
....
</ul>

mens dit stylesheet formaterer en div,
der indeholder en ul:
<div id="navbar">
<ul>...</ul>
</div>

Jeg tror du er kommet for skade
at kopiere stylesheet fra én eksempel-
side og HTML-kode fra en anden.

BTW er erklæringen
* div#navbar { /* Sætter samme skrift og
størrelse på alle elementer
i navbar'en */
font-size:80%;
font-family:arial,sans-serif;
font-weight:bold; }

forkert. Det skal være
div#navbar *
eller blot div#navbar

Min fejl - jeg har først opdaget det for nylig.
--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

SpookiePower (04-12-2007)
Kommentar
Fra : SpookiePower


Dato : 04-12-07 11:13

Jørgen Farum Jensen wrote:

> Jeg tror du er kommet for skade
> at kopiere stylesheet fra én eksempel-
> side og HTML-kode fra en anden.

Ja, det tror jeg du har ret i.
Men det var fordi du skrev at denne CSS-kode
http://webdesign101.dk/www/cssmenu/dropdownmenu/eks09.html
passer til html-koden. Men jeg kan godt se nu,
at der er forskel på navbar og navpanel

Jeg vil prøve mig frem. Tak for hjælpen.

SpookiePower (04-12-2007)
Kommentar
Fra : SpookiePower


Dato : 04-12-07 11:55

Jørgen Farum Jensen wrote:

Jeg giver desværre snart fortabt. Jeg tror
jeg har stirreret mig blind på dine eksempler,
eller også er jeg midt i en total forvirring.

> Du ku' jo for eksempel starte med at
> formatere din HTML-kode med et stylesheet,
> der vedrører samme HTML-kode:

Ja, jeg kan godt se der ikke er nogle sammenhæng,
i den CSS-kode og html-kode jeg har fundet. De
skal have samme navn formoder jeg. Som feks navnpanel
eller navbar

> Jeg tror du er kommet for skade
> at kopiere stylesheet fra én eksempel-
> side og HTML-kode fra en anden.

Men jeg kan ikke finde den CSS-kode, som passer
til din HTML-kode i eksemple 1 -
http://webdesign101.dk/www/cssmenu/dropdownmenu/eks01.html
Den som hedder navpanel.

Tager jeg CSS-Kode i eksemple 9 -
http://webdesign101.dk/www/cssmenu/dropdownmenu/eks09.html
Er jeg fyldstændig blank mht til at få CSS-kode og
html-kode til at passe sammen.

Jeg har prøvet mig frem i blinde med -

HTML-kode
<ul id="navpanel">
....
</ul>

CSS-kode
<div id="navpanel">
<ul>...</ul>
</div>




Jørgen Farum Jensen (04-12-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 04-12-07 16:09

SpookiePower skrev:

> Men jeg kan ikke finde den CSS-kode, som passer
> til din HTML-kode i eksemple 1 -
> http://webdesign101.dk/www/cssmenu/dropdownmenu/eks01.html
> Den som hedder navpanel.

Eksempel 1 er
http://webdesign101.dk/www/cssmenu/dropdownmenu/eks01.html

Der er ikke nogen CSS-kode til menuen, men kun
til sidens layout. Menuen har helle ingen id, og
er heller ikke indsat i sin egen div (bortset fra
fra #leftcol).

Det er fordi dette eksempel er /udgangspunktet/ for
ale artiklens forklaringer på, hvordan du laver
disse indlejrede lister om til hhv. et menupanel
(en lodretstillet menu) og en navigationsbjælke
(en vandretstillet menu).

Artiklen, der forklarer alle ting, er
http://webdesign101.dk/www/cssmenu/dropdownmenu.php

> Tager jeg CSS-Kode i eksemple 9 -
> http://webdesign101.dk/www/cssmenu/dropdownmenu/eks09.html
> Er jeg fyldstændig blank mht til at få CSS-kode og
> html-kode til at passe sammen.
>
> Jeg har prøvet mig frem i blinde med -

Frem for at prøve sig frem i blinde er det altså
bedre at prøve at sætte sig ind i, hvad det handler
om, for eksempel ved hjælp af min bog, som er
nævnt i signaturen. (Kan evt. lånes på biblioteket).

Men her er en ultrakort forklaring på sammenhængen
mellem CSS formdeklarationer og HTML-kode:

ul#navbar {
....}

er en /selektor/, der bestemmer hvordan HTML-elementet

<ul id="navbar">
....
</ul>

skal udformes.

div#navbar ul {
....
}

er en selektor, der bestemmer hvordan elementet

<div id="navbar">
<ul>
....
</ul>
</div>

skal udformes.

For så vidt angår mine eksempler er den bedste
fremgangsmåde at kopiere det hele og så file
på det indtil det ser ud som det passer én.
På de mails jeg får kan jeg se, at de fleste
bærer sig sådan ad. Og det er derfor mine
eksempler altid har CSS-koden i head-delen af
siden.

Men af og til er det også nødvendigt at læse
den artikel, eksemplerne hører til. Der hører
et print stylesheet til de fleste af mine artikler,
då det skulle være ret uproblatisk at skrive dem
ud, hvis man ikke bryder sig at læse lange artikler
på skærmen.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

SpookiePower (04-12-2007)
Kommentar
Fra : SpookiePower


Dato : 04-12-07 20:36

Mange tak for din grundige hjælp.
Jeg vil kigge den igennem imorgen.

SpookiePower (01-12-2007)
Kommentar
Fra : SpookiePower


Dato : 01-12-07 13:52

Jørgen Farum Jensen wrote:

> Det kan har nok noget at gøre med at du afslutter
> din side før tekst'en.

Mener du, at fordi der i min dropdownmenu er disse tags
</body></html>, som jo bliver inkluderet i mine index.asp
side, så har jeg disse lukke tags stående to gange på samme
side ? Jeg har slette dem i min dropdownmenu, men det hjalp
ikke.

> Det er ikke for at være fræk, men det er altså
> stadigvæk en god idé at tjekke sin kode i en
> validator før man be'r om gode råd. Det forøger
> jo din chance for selv at finde eventuelle
> fejl.

Jeg får 4 fejl, og jeg må nok indrømme at jeg er temmelig
blank mht til fejlbeskrivelsem.

Hvis jeg validere forsiden -
http://www.activewebsite.dk/help/index.asp

Får jeg i den første fejl, denne besked.

-------------
# Error Line 3, Column 60: document type does not allow element "link"
here.

<link href="stylesheet.css" rel="stylesheet" type="text/css">
✉

The element named above was found in a context where it is not allowed.
This could mean that you have incorrectly nested elements -- such as a
"style" element in the "body" section instead of inside "head" -- or two
elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML
documents. Due to HTML's rules of implicitly closed elements, this error
can create cascading effects. For instance, using XHTML's "self-closing"
tags for "meta" and "link" in the "head" section of a HTML document may
cause the parser to infer the end of the "head" section and the
beginning of the "body" section (where "link" and "meta" are not
allowed; hence the reported error).
------------

Jeg kan forstå den er forkert placeret, den linie der inkludere
mit CSS. Og så står der at jeg har Style elements i min body sektion.
Kan det skyldes at den dropdownmenu jeg inkludere som indeholde
style elementer, inkludere jeg i body og på den måde tager style
elementer ind i body sektionen ? Det er et vildt gæt, men det tætteste
jeg kan komme ?


Philip Nunnegaard (01-12-2007)
Kommentar
Fra : Philip Nunnegaard


Dato : 01-12-07 16:02

> # Error Line 3, Column 60: document type does not allow element "link"
> here.
>
> <link href="stylesheet.css" rel="stylesheet" type="text/css">

Denne linie skal flyttes ned mellem <head> og </head>
Da du i din doctype-erklæring har valgt XHTML, skal den desuden afsluttes,
så det bliver til:

<link href="stylesheet.css" rel="stylesheet" type="text/css" />

SÃ¥ har vi allerede klaret 2 af de 3 fejl, jeg kan se via Firefox' HTML-Tidy.
Den sidste fejl er rigtigt nok, at du har smidt dit <style type="text/css">
nede i body-delen.
Det skal også op mellem <head> og </head>.
Så er alle 3 fejl væk.

Hvis jeg var dig, ville jeg måske tilmed klippe hele <style>-blokken ud og
lægge ind i dit eksisterende stylesheet (stylesheet.css).


Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste