Drop down menu forsvinder bag indhold

karindams · Indlæg af **karindams** » 7. aug 2014, 19:15

Jeg har downloadet navigationsbar fra java-script kurset og lagt det ind på min hjemmeside. Menuen fungerer fint bortset fra at den delvist forsvinder bag indholdet på siden. Jeg har implementeret navigationsbaren ved at include den i min index.php. Jeg har ikke ændret i CSS-filen CSSnav.css.

Kode: Vælg alt

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Velkommen til karindams.dk</title>
        <link rel="stylesheet" href="CSSstyle.css" type="text/css"/>
   
    
    </head>
    <body>
       
        
        <div id="wrapper">
            <?php
                include("Top.php");
            ?>
            <div id="navbar">
                <?php
                    include("navigationsbar.html");
                ?>
            </div>
            <div id="content">
                <?php
                    
                if(!isset($_GET['side']))
                    {
                        $_GET['side']='Frontpage.php';
                    }
                    else {
                        $_GET['side'].='';
                    }
                    include("cont/".$_GET['side']);
                    
                ?>
            </div>
                <?php
                    include ("Footer.php");
                    ?>
        </div>
        
    </body>
</html>

Indlæg af **ThomasI** » 9. aug 2014, 15:27

Det kan godt være idt svært at arbejde med den JavaScript menu, og jeg vil faktisk anbefale dig at lave en med CSS og HTML udelukkende. Det er en del mere simpelt og nemt at arbejde med. Se f.eks her:

http://www.nemprogrammering.dk/gtuts/ar ... ml_css.php

karindams · Indlæg af **karindams** » 9. aug 2014, 18:38

Foreløbig tak. Det ser mere overskueligt ud, men når jeg klikker på de overordnede links eller holder musen over, sker der absolut ingenting...

Indlæg af **ThomasI** » 10. aug 2014, 12:50

Når jeg sætter det ind i CSSdesk så virker det fint nok.

Se her: http://www.cssdesk.com/uvbUd

Får du indkluderet CSS´en korrek?

karindams · Indlæg af **karindams** » 10. aug 2014, 14:40

Nu har jeg ikke så meget erfaring med inkludering af filer, men jeg vil mene, at den er inkluderet korrekt.
Den er inkluderet i min index.php få flg. måde

Kode: Vælg alt

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Velkommen til karindams.dk</title>
        <link rel="stylesheet" href="CSSstyle.css" type="text/css"/>
        <link href="DropDownMenu.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
       
        
        <div id="wrapper">
            <?php
                include("Top.php");
            ?>
            <div id="navbar">
                <?php
                include("DropDownMenu.html");
                ?>
            </div>
            <div id="content">
                <?php
                    
                if(!isset($_GET['side']))
                    {
                        $_GET['side']='Frontpage.php';
                    }
                    else {
                        $_GET['side'].='';
                    }
                    include("cont/".$_GET['side']);
                    
                ?>
            </div>
                <?php
                    include ("Footer.php");
                    ?>
        </div>
        
    </body>
</html>

I min CSS-fil (ikke DropDownMenu.css) har 'navbar' flg. "egenskaber":

Kode: Vælg alt

#navbar{
    top:150px;
    left:0px;
    position:absolute;
}

Indlæg af **Daniel** » 11. aug 2014, 18:21

Du har ikke din side lagt ud på nettet nogen steder, så er det lidt nemmere for os at lege med fejlen.

Ellers hvordan ser din DropDownMenu.html ud?

Indlæg af **cristian** » 11. aug 2014, 19:07

Prøv at give elementerne i din menu z-index: 100 og se om det hjælper.
Den skal sættes på de elementer som forsvinder bag indholdet.

karindams · Indlæg af **karindams** » 12. aug 2014, 14:22

Problemet varierer alt efter hvilken browser jeg benytter. I firefox og chrome ligger menuen ude i venstre side og nogle af undermenuerne kommer frem som de skal. Andre bliver skjult bag navigationsbaren. I IE ligger menuen øverst, og undermenuerne kommer slet ikke frem.
Filerne er uploaded på www.karindams.dk

Min DropDownMenu.html ser således ud:

Kode: Vælg alt

<html>
    <head>
        <title>DropDownMenu</title>
        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="DropDownMenu.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="navMenu">
            <ul>
                <li><a href="index.php?side=Frontpage.php">Forside</a></li>
            </ul>
            
            <ul>
                <li><a href="#">Geocaching</a>
                    <ul>
                        <li><a href="index.php?side=geo.php">Kort om geocaching</a></li>
                        <li><a href="index.php?side=firstgeo.php">Den f&oslash;rste skattejagt</a></li>
                        <li><a href="index.php?side=aeroe.php">Geotur til &AElig;r&oslash;</a></li>
                    </ul>
                </li>
            </ul>

            <ul>
                <li><a href="#">H&aring;ndarbejde</a>
                    <ul>
                        <li><a href="index.php?side=Needlework.php">S&aring;dan startede jeg</a></li>
                        <li><a href="index.php?side=patchwork.php">Patchwork</a></li>
                        <li><a href="index.php?side=haekling.php">H&aelig;kling</a></li>
                    </ul>
                </li>
            </ul>

            <ul>
                <li><a href="#">Bordtennis</a>
                    <ul>
                        <li><a href="index.php?side=btungdom.php">Ungdomsspiller</a></li>
                        <li><a href="index.php?side=btsenior.php">Seniorspiller</a></li>
                        <li><a href="index.php?side=btmental.php">Den mentale udfordring</a></li>
                        <li><a href="index.php?side=btudstyr.php">Udstyr</a></li>
                    </ul>
                </li>
            </ul>

            <ul>
                <li><a href="#">Diverse</a>
                    <ul>
                        <li><a href="index.php?side=wishlist.php">&Oslash;nskeseddel</a></li>
                        <li><a href="index.php?side=Links.php">Links</a></li>
                    </ul>
                </li>
            </ul>

            <ul>
                <li><a href="index.php?side=formular.php">Kontakt</a></li>
            </ul>
            
        <br class="clearFloat" />

        </div> <!--End navMenu div-->
    </body>
</html>

Indlæg af **Daniel** » 12. aug 2014, 21:20

Du kan ikke bruge position: absolute; på #navMenu, der er du nødt til at bruge position: relative;, ellers vil den lave det nummer som du oplever her.
Samtidig for at få det hele til at virke helt igennem, så skal du tilføje z-index: 100; til #navMenu, ellers vil du få samme problem med at indholdet på din side, skjuler undermenuerne.

Indlæg af **cristian** » 12. aug 2014, 21:38

Aaaaaaaaaaaaaaaaaaa okey jeg kan se hvad der sker her.

Der er nogle elementer du lige skal svinge lassoen om og få styr på.

#1 Du sætter ingen doctype i dit dokument
#2 Du har to head elementer
#3 Du har en wrapper div, men du kommer indholdet udenfor denne og uden for hele body & html elementet.
#4 Du har lavet en container element, men kommer ikke dette ind i din wrapper.
#5 du har flere body elementer

Dette er hvad du har nu

Kode: Vælg alt

<html>
    <head>
        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Velkommen til karindams.dk</title>
        <link rel="stylesheet" href="CSSstyle.css" type="text/css"/>
        <link href="DropDownMenu.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
       
        
        <div id="wrapper">
            
            <div id="top">
                <table><tr><td><img src="pics/logo.JPG" height="140px"/></td>
                        <td><h1>karindams.dk</h1></td></tr></table>
            </div><html>
    <head>
        <title>DropDownMenu</title>
        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="DropDownMenu.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="navMenu">
            <ul>
                <li><a href="index.php?side=Frontpage.php">Forside</a></li>
            </ul>
            
            <ul>
                <li><a href="#">Geocaching</a>
                    <ul>
                        <li><a href="index.php?side=geo.php">Kort om geocaching</a></li>
                        <li><a href="index.php?side=firstgeo.php">Den f&oslash;rste skattejagt</a></li>
                        <li><a href="index.php?side=aeroe.php">Geotur til &AElig;r&oslash;</a></li>
                    </ul>
                </li>
            </ul>

            <ul>
                <li><a href="#">H&aring;ndarbejde</a>
                    <ul>
                        <li><a href="index.php?side=Needlework.php">S&aring;dan startede jeg</a></li>
                        <li><a href="index.php?side=patchwork.php">Patchwork</a></li>
                        <li><a href="index.php?side=haekling.php">H&aelig;kling</a></li>
                    </ul>
                </li>
            </ul>

            <ul>
                <li><a href="#">Bordtennis</a>
                    <ul>
                        <li><a href="index.php?side=btungdom.php">Ungdomsspiller</a></li>
                        <li><a href="index.php?side=btsenior.php">Seniorspiller</a></li>
                        <li><a href="index.php?side=btmental.php">Den mentale udfordring</a></li>
                        <li><a href="index.php?side=btudstyr.php">Udstyr</a></li>
                    </ul>
                </li>
            </ul>

            <ul>
                <li><a href="#">Diverse</a>
                    <ul>
                        <li><a href="index.php?side=wishlist.php">&Oslash;nskeseddel</a></li>
                        <li><a href="index.php?side=Links.php">Links</a></li>
                    </ul>
                </li>
            </ul>

            <ul>
                <li><a href="index.php?side=formular.php">Kontakt</a></li>
            </ul>
            
        <br class="clearFloat" />

        </div> <!--End navMenu div-->
    </body>
</html>
            
            <div id="content">
                <h1>Velkommen til karindams.dk</h1>

<p>karindams.dk er prim&aeligrt et site, hvor jeg kan &oslashve mig i at programmere hjemmesider. I indholdet 
   på sitet fort&aeligller jeg lidt om mine interesser, som sp&aelignder vidt; lige fra h&aringndarbejde til 
geocaching og bordtennis.</p><br/>
<p>Som sagt er sitets form&aringl f&oslashrst og fremmest tr&aeligning i programmering af hjemmesider, s&aring;
    informationerne på sitet har n&aeligppe almen interesse, men du skal alligevel v&aeligre velkommen til at kigge
    dig lidt omkring og hvis du har ris, ros, forslag mv., m&aring du ogs&aring gerne kontakte mig - brug kontaktformularen.</p><br/>
    
<p>Endnu engang velkommen.<br/><br/>
<i>Karin</i></p><br/>            </div>
                <div id="footer">
<p>&COPY; Karin Dam S&oslash;rensen</p>
   
Tirsdag 12. august 2014
</div>        </div>
        
    </body>
</html>

Ændre det til dette i første omgang

Kode: Vælg alt

<!DOCTYPE html>
<html>

    <head>
        
		<title>Velkommen til karindams.dk</title>
		
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="CSSstyle.css" type="text/css"/>
        <link href="DropDownMenu.css" rel="stylesheet" type="text/css" />
    
    </head>
	
    <body>
       
        
        <div id="wrapper">
            
            <div id="top">
                <table>
					<tr>
						<td>
							<img src="pics/logo.JPG" height="140px"/>
						</td>
                        <td>
							<h1>karindams.dk</h1>
						</td>
					</tr>
				</table>
				
			<div id="navMenu">
				<ul>
					<li><a href="index.php?side=Frontpage.php">Forside</a></li>
				</ul>
				
				<ul>
					<li><a href="#">Geocaching</a>
						<ul>
							<li><a href="index.php?side=geo.php">Kort om geocaching</a></li>
							<li><a href="index.php?side=firstgeo.php">Den f&oslash;rste skattejagt</a></li>
							<li><a href="index.php?side=aeroe.php">Geotur til &AElig;r&oslash;</a></li>
						</ul>
					</li>
				</ul>

				<ul>
					<li><a href="#">H&aring;ndarbejde</a>
						<ul>
							<li><a href="index.php?side=Needlework.php">S&aring;dan startede jeg</a></li>
							<li><a href="index.php?side=patchwork.php">Patchwork</a></li>
							<li><a href="index.php?side=haekling.php">H&aelig;kling</a></li>
						</ul>
					</li>
				</ul>

				<ul>
					<li><a href="#">Bordtennis</a>
						<ul>
							<li><a href="index.php?side=btungdom.php">Ungdomsspiller</a></li>
							<li><a href="index.php?side=btsenior.php">Seniorspiller</a></li>
							<li><a href="index.php?side=btmental.php">Den mentale udfordring</a></li>
							<li><a href="index.php?side=btudstyr.php">Udstyr</a></li>
						</ul>
					</li>
				</ul>

				<ul>
					<li><a href="#">Diverse</a>
						<ul>
							<li><a href="index.php?side=wishlist.php">&Oslash;nskeseddel</a></li>
							<li><a href="index.php?side=Links.php">Links</a></li>
						</ul>
					</li>
				</ul>

				<ul>
					<li><a href="index.php?side=formular.php">Kontakt</a></li>
				</ul>

			</div> <!--End navMenu div-->
			
			<div id="content">
				<h1>Velkommen til karindams.dk</h1>

				<p>karindams.dk er prim&aeligrt et site, hvor jeg kan &oslashve mig i at programmere hjemmesider. I indholdet 
				på sitet fort&aeligller jeg lidt om mine interesser, som sp&aelignder vidt; lige fra h&aringndarbejde til 
				geocaching og bordtennis.</p><br/>
				<p>Som sagt er sitets form&aringl f&oslashrst og fremmest tr&aeligning i programmering af hjemmesider, s&aring;
				informationerne på sitet har n&aeligppe almen interesse, men du skal alligevel v&aeligre velkommen til at kigge
				dig lidt omkring og hvis du har ris, ros, forslag mv., m&aring du ogs&aring gerne kontakte mig - brug kontaktformularen.</p>

				<p>Endnu engang velkommen.</p>
					 
			</div><!--Content div ends-->

			<div id="footer">
				<p>&COPY; 2014 Karin Dam S&oslash;rensen</p>
			</div>
			
		</div>
		
    </body>
	
</html>

Det er ikke sikkert at det ville se rigtigt ud på din side endnu, men det er et skridt i den rigtige retning i forhold til struktur.

Hvor meget erfaring har du i forhold til hjemmesider? Så kan jeg måske bedre forklare nogle områder hvor det går skævt.

karindams · Indlæg af **karindams** » 13. aug 2014, 18:52

Så har jeg ændret i #navMenu i CSS og det virker

Jeg har også ændret i strukturen i koden.

Jeg takker mange gange for hjælpen. Mht. min erfaring i programmering af hjemmesider, så er den meget begrænset og jeg har derfor meget at lære. Derfor synes jeg også, at det er rart, at der kommer en masse konstruktiv kritik.

De fleste ændringer i strukturen gav meget god mening for mig, men jeg ved ikke hvorfor <!DOCTYPE=html> skal stå der...?

Karin

Indlæg af **cristian** » 13. aug 2014, 19:19

karindams skrev: Så har jeg ændret i #navMenu i CSS og det virker
Jeg har også ændret i strukturen i koden.
Karin

Så lange så godt

De fleste ændringer i strukturen gav meget god mening for mig, men jeg ved ikke hvorfor <!DOCTYPE=html> skal stå der...?

Med hensyn til <!DOCTYPE html>

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.

Hvad er det du engang skal have på hjemmesiden?

Må jeg også foreslå dig at bruge CSS script til at nulstille de forskellige elementer.
Dette gør dem nemmere at arbejde med da forskellige browsere giver elementer forskellige værdier som standard. Hvilket ikke er ens for alle browsere.
Dette bruger jeg f.eks selv.

Kode: Vælg alt

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*Added by cristian*/
main {
    display: block;
}

karindams · Indlæg af **karindams** » 14. aug 2014, 03:56

Tak. Har kæmpet lidt med at forskellige browsere giver forskelligt output, så dette ser ud til at være en fin løsning på det problem.

Hjemmesiden skal på sigt bruges til at fortælle hvordan psykisk sygdom kan påvirkes positivt og negativt af forskellige aktiviteter, medicin mv.

Drop down menu forsvinder bag indhold

Re: Drop down menu forsvinder bag indhold

Re: Drop down menu forsvinder bag indhold

Re: Drop down menu forsvinder bag indhold

Re: Drop down menu forsvinder bag indhold

Re: Drop down menu forsvinder bag indhold

Re: Drop down menu forsvinder bag indhold

Re: Drop down menu forsvinder bag indhold

Re: Drop down menu forsvinder bag indhold

Re: Drop down menu forsvinder bag indhold

Re: Drop down menu forsvinder bag indhold

Re: Drop down menu forsvinder bag indhold

Re: Drop down menu forsvinder bag indhold

Office

CMS

Webudvikling

Udvikling

Adobe

Andet

Online Markedsføring

App- og spiludvikling