Avatar billede NielsErikP Mester
23. december 2010 - 13:36 Der er 8 kommentarer og
1 løsning

HTML/CSS... Hjælp.

Hej...
Jeg kan ikke få følgende menu i CSS til at blive i samme linje og gå med ud af skærmen, når jeg scalerer vinduet.
Nogen der kan se, hvad der er galt..??

Her er HTML/CSS...:
-----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
 
 
<html>
<head>
    <title>Mit udkast til en hjemmeside</title>
        <meta http-equiv="content-type"
              content="text/html;charset=utf-8" />
             
<style "text/css" >
* {
    list-style-type: none;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}
html {
    margin-top: 0px;
    margin-left: 400px;

body {
    background-color: #000000;
    color: #008000;
   
}
ul#menu li {
    background-color: #c4c5c7;
    text-align: center;
    position: relative;
    float: left;
    display:block;
    width: 120px;
    height: auto;
    line-height: 30px;
    border: 1px dotted #008000;
    font-size: 22px;
}
ul#menu li ul {
    display: none;
    width: 20px;
    height: 20px;
}
ul#menu li:hover {
    display: block;
    background-color: #ff00ff;
}
ul#menu li:hover ul li:hover {
    background-color: #ff00ff;
}
ul#menu li:hover ul {
    display: block;
}
img {
    margin-left: 115px;
}
</style>
</head>


<body>
<img src="\Users\Bilka\desktop\Min Hjemmeside\Images\NielsGjern10.gif"> </img> 
<div>
    <ul id="menu">
        <li><a href="#">Forsiden </a> </li>    
        <li><a href="#">Interesser </a>
            <ul id="submenu">
                <li><a href="#" >Emne1 </a> </li>
                <li><a href="#" >Emne2 </a> </li>
                <li><a href="#" >Emne3 </a> </li>
                <li><a href="#" >Emne4 </a> </li>
            </ul>
        </li>
        <li> <a href="#">Galleriet </a>
            <ul>
                <li><a href="#" >Emne1 </a> </li>
                <li><a href="#" >Emne2 </a> </li>
                <li><a href="#" >Emne3 </a> </li>
                <li><a href="#" >Emne4 </a> </li>
            </ul>
        </li>
        <li> <a href="#">KontaktSiden </a>
            <ul>
                <li><a href="#" >Emne1 </a> </li>
                <li><a href="#" >Emne2 </a> </li>
                <li><a href="#" >Emne3 </a> </li>
                <li><a href="#" >Emne4 </a> </li>
            </ul>
        </li>
        <li class="noborder"><a href="#">Om </a>
            <ul>
                <li><a href="#" >Emne1 </a> </li>
                <li><a href="#" >Emne2 </a> </li>
                <li><a href="#" >Emne3 </a> </li>
                <li><a href="#" >Emne4 </a> </li>
            </ul>
        </li>

    </ul>
</div>
</body>
</html>
----------------------------------------------------------------

Påforhånd tak..!!
Avatar billede webweaver Praktikant
23. december 2010 - 17:02 #1
Det er fordi at din <div> ikke har en bredde.

<div style="width: 700px">

Fortsat god jul :-)
Avatar billede NielsErikP Mester
23. december 2010 - 19:39 #2
Hej...weaver
Tak..det var lige det jeg skulle bruge...åbenbart noget jeg ikke forstår helt ved <div>'s endnu.
Du skal få dine point..
Er det ok, da jeg har fornemmelsen at du  er en af dem der ved noget.. er det så ok jeg spørger dig om et par tilægsspørgsmål
Hvis jeg nu til sætter følgende efter min menu...:
---------------------------------------------------------------
<div style="width: 610px; height : auto;">
    <p>
    Dette er noget tekst.. Dette er noget tekst..
        Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    </p>
</div>
<br /> <br />
<br /> <br />
<br /> <br />
<br /> <br />
<br /> <br />
<br /> <br />
<br /> <br />
<br /> <br />

<div id="marquee" style="margin-left: 0%; margin-right: 42%;font-size:23px";><marquee width=" 100%" >
    Vi elsker dem ikke fordi, de er smukke...Vi syntes de er smukke, fordi vi elsker dem.
</div>
---------------------------------------------------------------
Og så hover min menu, så falder dropdownen ned men teksten ."Dette er noget tekst.." og min marquee..Flytter sig efter dropdown menuen, hvorledes får man den tekst, og marqueen til at blive stående på sin oprindelige plads uafhængig af at menuen falder ned.

Mit animerede "NielsGjern10.gif" vises i IE,SAFARI,CHROME...Men i Mozilla Firefox... er der ingen gang et kryds. hvad skyldes det firefox ikke kan vise det animerede gif.

Tak og rigtigt glædelig jul til dig..!!
Avatar billede webweaver Praktikant
23. december 2010 - 21:11 #3
Hej igen NielsErikP.

Tak for point :-)

Selvfølgelig er det i orden at du har lidt tillægsspørgsmål.

Grunden til at din marquee flytter sig, er fordi at du positionerer den ud fra resten af sidens indhold. Det udvider sig naturligvis, når du har musen indeover din dropdown menu, og dermed skubber indholdet nedaf.

Du løser det ved at benytte dig af position: absolute; hvilket er en funktion som beholder den samme position, uafhængigt af omkring-liggende elementer.

Fjern alle dine breaks. <br />

og indsæt istedet følgende;

<div id="marquee" style="position: absolute; right: 42%; top: 600px; font-size:23px">
<marquee width="100%">Vi elsker dem ikke fordi, de er smukke...Vi syntes de er smukke, fordi vi elsker dem.</marquee>
</div>


Nu bliver det stående på samme linie. Det kan være at du skal have noget margin på som før, afhængig af hvor den skal køre og så videre ...

Angående din .gif fil, så ved jeg det ikke helt. Mozilla Firefox viser umiddelbart fint animerede gif's. Det er bare en ganske normal animation? Når du tester om det virker, er det så lokalt eller ude på en hjemmeside?
Avatar billede NielsErikP Mester
24. december 2010 - 00:26 #4
Hej..Igen weawer.
Ja så gjorde du det igen..
Kom til at se ud som følger efter menuen..:
---------------------------------------------------------------
<div style="width: 610px; height : auto;">
    <p  style="position:absolute; left:28%; right:30%; top:150px;">
    Dette er noget tekst.. Dette er noget tekst..
        Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    </p>
</div>
   
<div id="marquee" style="position:absolute; left: 30%; right:32%; top:550px; font-size:23px";><marquee width=" 100%" >
    Vi elsker dem ikke fordi, de er smukke...Vi syntes de er smukke, fordi vi elsker dem.
</div>
----------------------------------------------------------------
Som du kan se, prøvede jeg også at bruge position:absolute i <p>.. Det fik godt nok teksten "Dette er noget tekst..2 til at blive stående som jeg ønsker, men nu falder menuen ned under teksten sådan at "Emne 1,Emne 2, Emne 3 og Emne 4" ikke kunne vælges. Dette er mit næste problem.. og ved ikke hvad det hedder det jeg skal søge efter for at finde en løsning på problemet.
Marqueen funger, så det er fint..Tak for det Weawer.

I Mozilla Firefox prøver jeg at åbne en fil og åbner så images "NielsGjern10.gif"..Der viser den det fint, men når jeg åbner min HTML fil...Er der ingen gif, menuen er trukket helt op til top, sådan der ikke engang er lavet plads til den animerede gif "NielsGjern10.gif".
"NielsGjern.gif" er et logo,hvor der står "NielsGjern" med flammende bogstaver. Jeg har ingen domæne, så alt er vist på computeren.

Glædelig jul-...Håber du scorer en masse gadget i gaver ;)
Avatar billede webweaver Praktikant
24. december 2010 - 01:06 #5
Jamen så kan jeg jo lige gøre det igen (hihi)

For at løse dit problem med hvilket lag som skal være øverst,
er det bare at rokere lidt rundt på rækkefølgen. Det er lidt som er læse en bog. Det som den læser sidst husker den "bedst" og det ligger sig oven på det første. Så for at løse dit problem, bytter vi om på det :)

<body>
<img src="\Users\Bilka\desktop\Min Hjemmeside\Images\NielsGjern10.gif"> </img>

<div style="width: 610px; height : auto">
    <p  style="position:absolute; left:28%; right:30%; top:150px;">
    Dette er noget tekst.. Dette er noget tekst..
        Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    Dette er noget tekst.. Dette er noget tekst..
    </p>
</div>

<div style="width: 700px">
    <ul id="menu">
        <li><a href="#">Forsiden </a> </li>   
        <li><a href="#">Interesser </a>
            <ul id="submenu">
                <li><a href="#" >Emne1 </a> </li>
                <li><a href="#" >Emne2 </a> </li>
                <li><a href="#" >Emne3 </a> </li>
                <li><a href="#" >Emne4 </a> </li>
            </ul>
        </li>
        <li> <a href="#">Galleriet </a>
            <ul>
                <li><a href="#" >Emne1 </a> </li>
                <li><a href="#" >Emne2 </a> </li>
                <li><a href="#" >Emne3 </a> </li>
                <li><a href="#" >Emne4 </a> </li>
            </ul>
        </li>
        <li> <a href="#">KontaktSiden </a>
            <ul>
                <li><a href="#" >Emne1 </a> </li>
                <li><a href="#" >Emne2 </a> </li>
                <li><a href="#" >Emne3 </a> </li>
                <li><a href="#" >Emne4 </a> </li>
            </ul>
        </li>
        <li class="noborder"><a href="#">Om </a>
            <ul>
                <li><a href="#" >Emne1 </a> </li>
                <li><a href="#" >Emne2 </a> </li>
                <li><a href="#" >Emne3 </a> </li>
                <li><a href="#" >Emne4 </a> </li>
            </ul>
        </li>

    </ul>
</div>

<div id="marquee" style="position: absolute; right: 42%; top: 600px; font-size:23px">
<marquee width="100%">Vi elsker dem ikke fordi, de er smukke...Vi syntes de er smukke, fordi vi elsker dem.</marquee>
</div>

</body>
</html>


Det er lidt mystisk med dit billede.
Prøv at rette img linien,

<img src="\Users\Bilka\desktop\Min Hjemmeside\Images\NielsGjern10.gif"> </img> 

til

<img src="\Users\Bilka\desktop\Min Hjemmeside\Images\NielsGjern10.gif" alt="">

Der er ikke noget som heder </img>.
Har det gjort en forskel?

Mange tak og en rigtig glædelig jul til dig også :)
Jeps, det håber jeg også :D
Avatar billede NielsErikP Mester
24. december 2010 - 09:40 #6
Hej..
Ja..det var jo ligedet man skal...tak for lærdommen "Læst sidst Husket Bedst". Det virker.tak.

Det med <img src="........." alt="NielsGjern">
Den viser ikke gif'en, men skriver NielsGjern. Underligt.Underligt. Den vil squ godt vise det hvis jeg åbner selve NielsGjern10.gif. Det forstår jeg ikke en brik af.
Avatar billede webweaver Praktikant
24. december 2010 - 12:00 #7
Men lige som en note, kan jeg tilføje at man godt med CSS kan rokere rundt på synligheden af elementer på en hjemmeside, uden at det står i den rækkefølge i koden nødvendigvis, hvor det sidste er øverst. Der findes nogle funktioner som fx z-index der bestemmer, hvilket lag som skal ligge øverst. Men uden noget CSS, så er det "Læst sidst Husket Bedst" princippet :)

Ja. Pas. Det er desværre svært at arbejde videre med, da jeg ikke selv kan teste, om det kun er i din browser det driller.

Det kan tænkes da du måske med en indstilling i Firefox, har fået slået animationer fra. (ved ikke om der findes sådan en indstilling)

Kan du se andre animerede .gif filer på nettet igennem Mozilla Firefox?
Avatar billede NielsErikP Mester
27. december 2010 - 00:27 #8
Hej..Weawer..
Undskyld ventetiden, men kom til jul et sted uden netforbindelse.
Nu er jeg tilbage.
Ja...Okay,,ja har læst lidt om Z-index... Men aldrig kommet til at bruge det endnu...Er jo som sagt lidt ny inden for HTML/CSS..Men er jo i "Lære mode".
Jeg vil prøve at tjekke min mozilla firefox indtillling. Nej..jeg har ikke prøvet andre animerede GIF'S

Men ihvertfald tak for hjælpen webweawer.. som altid en fornøjelse, når du svarer på mine spørgsmål...Det får man da noget ud af.

Take Care..!!
Avatar billede webweaver Praktikant
27. december 2010 - 00:33 #9
Hej NielsErikP.

Det er selvfølgelig helt i orden. Det skal der også være plads til. Vi alle har vidst holdt jul :-)

Og det var så lidt. Glad for at jeg kan hjælpe og at du får noget ud af det! :)

Tak og i lige måde :)
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
Kurser inden for grundlæggende programmering

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.

Du kan også logge ind via nedenstående tjenester