Hjælpeforum til Ludvigs Hjørne

Lige som jeg troede, at nu virker alt som det skal, ville jeg teste siden i Explorer 6.0, og opdager at kun linket til "contact" siden virker, og logoet er placeret højere end de andre menupunkter!
Hvad er der gået galt? Alle links mm. fungerer fint i Firefox.

http://www.john-nielsen.com

Jeg vil lige tilføje, at alt også virker fint i Safari 2.0.4.

Du bruger negative marginer, og det er Internet Explorer åbenbart ikke så glad for. Prøv følgende ændringer i css-editoren:

I stilklassen john, fanen Boks, vælg venstre i rullemenuen Flyd.

I stilklassen news, slet -30 pt fra Margin, Top. Angiv i stedet en passende afstand i Indrykning, Top.

Gentag med de andre menupunkter.

Tak for hjælpen igen Kim, når de negative marginer fjernes, fungerer linksene i IE. Udfordringen er nu, at få boksene til at stå på linje, UDEN at bruge negative marginer!

Jeg tror, du er bedre stillet med at starte forfra med menuen. Afstanden kan ganske vist rettes op ved at bruge Indrykning og flyd venstre, men det er kun en lappeløsning.

Prøv lige at uploade din seneste version af siden, giv besked her, og lad så være med at ændre noget, før du atter hører fra mig.

Hej Kim, jeg har netop uploadet siden. Du har ret i, at det er noget rod. Menuens venstrekant er nu forskellig i firefox og IE, men til gengæld virker linksene.

http://www.john-nielsen.com

Ok, det er nemmest at klippe/kliste i Notesblok, så luk KompoZer, og åbn index.html i Notesblok (gem en kopi først). Jeg har ikke tjekket i Internet Explorer, men det burde virke i alle browsere.

Find denne kode, og slet den:

Kode: Vælg alt

<div class="john"><a href="index.html"><img style="border: 0px solid ; width: 166px; height: 38px;" alt="" title="design" src="johnnielsendesign.jpg" align="top"></a><br>&nbsp;&nbsp;</div><div class="news"><a href="news.html"><img style="border: 0px solid ; text-decoration: none; width: 64px; height: 38px;" alt="" title="news" src="news.jpg"></a></div><div class="design"><a href="design.html"><img style="border: 0px solid ; width: 74px; height: 38px;" alt="" title="design" src="designmenu.jpg"></a><a href="design.html"><br></a></div><div class="architecture"><a href="architecture.html"><img style="border: 0px solid ; text-decoration: none; width: 116px; height: 38px;" alt="" title="architecture" src="architecturemenu.jpg"></a></div><div class="about"><a href="about.html"><img style="border: 0px solid ; width: 68px; height: 38px;" alt="" title="about" src="aboutmenu.jpg"></a></div><div class="contact"><a href="contact.html"><img style="border: 0px solid ; width: 82px; height: 38px;" alt="" title="contact" src="contactmenu.jpg"></a></div>

I stedet skal du indsætte dette på samme sted:

Kode: Vælg alt

<div class="menu">
<ul class="menuliste">
<li><a href="index.html"><img style="width: 166px; height: 38px;" alt="forside" title="design" src="johnnielsendesign.jpg"></a></li>

<li><a href="news.html"><img style="width: 64px; height: 38px;" alt="news" title="news" src="news.jpg"></a></li>


<li><a href="design.html"><img style="width: 74px; height: 38px;" alt="design" title="design" src="designmenu.jpg"></a></li>

<li><a href="architecture.html"><img style="width: 116px; height: 38px;" alt="architecture" title="architecture" src="architecturemenu.jpg"></a></li>

<li><a href="about.html"><img style="width: 68px; height: 38px;" alt="about" title="about" src="aboutmenu.jpg"></a></li>

<li><a href="contact.html"><img style="width: 82px; height: 38px;" alt="contact" title="contact" src="contactmenu.jpg"></a></li>
</ul>
</div>

Gem og luk filen. Åbn nu filen stilark.css i Notesblok (lav en kopi først). Indsæt følgende:

Kode: Vælg alt

.menu {
}
ul.menuliste {
  padding-left: 0px;
}
ul.menuliste li {
  padding-left: 10px;
  float: left;
  list-style-type: none;
}
ul.menuliste li a {
  text-decoration: none;
}
.menuliste img {
  border:  none;
}

Du kan slette dette, da det ikke længere skal bruges:

Kode: Vælg alt

.john {
  height: 40px;
  z-index: 1;
  padding-top: 40px;
  width: 163px;
  float: left;
  margin-left: 41px;
}
.news {
  z-index: 2;
  top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  float: left;
  width: 59px;
  padding-top: 40px;
  margin-left: 2px;
  height: 40px;
}
.design {
  height: 40px;
  padding-left: 0px;
  z-index: 3;
  float: left;
  width: 67px;
  margin-left: 2px;
  padding-top: 40px;
}
.architecture {
  height: 40px;
  z-index: 4;
  float: left;
  width: 110px;
  margin-left: 2px;
  padding-top: 40px;
}
.about {
  height: 40px;
  z-index: 5;
  float: left;
  width: 62px;
  margin-left: 2px;
  padding-top: 40px;
}
.contact {
  height: 40px;
  z-index: 6;
  float: left;
  width: 100px;
  margin-left: 2px;
  padding-top: 40px;
}

Gem og luk filen. Du kan nu skrue på placeringen af menupunkterne ved at ændre på indrykning på ul.menuliste li. Indrykningen fra venstre kant i browseren kan ændres med indrykning på ul.menuliste. Afstand fra toppen kan reguleres med margin, top på stilklassen .menu.

Hej Kim, jeg er i tvivl om hvor det nye afsnit i stilark.css. skal placeres. Er det efter:

/* Generated by KompoZer */
* {
margin: 0;
padding: 0;
}

?

Ja, det vil være fint. Du kan også bare placere det allersidst i filen.

Hej Kim, nu er alt testet og fungerer perfekt, også i Internet Explorer, og du skal have tusind tak for din hjælp!
Jeg har et sidste spørgsmål, og det er, om man kan ændre (formindske) afstanden mellem menu-punkterne?

mvh john

Du kan ændre afstanden i ul.menuliste li. Du har en indrykning, venstre på 10px, prøv at formindske den værdi.

Endnu engang tak for din store hjælp, nu er det op til mig, at få fyldt rammerne ud på en flot måde.
mvh john