horizontales Menü (display:inline) funktioniert nicht!

alexA320 · 30.09.2008, 18:26

Hallo!

Ich zweifel langsam an mir selber

Die Browser (Firefox 3 , IE7) wollen das Menü nicht horizontal darstellen, egal was ich mache, die Menüpunkte bleiben untereinander!

Hier der Code:

Code:

  ul#top {
    font-size: 0.83em;
    float: left; width: 120px;
    margin: 0 0 1.2em; padding: 0;

  }

  ul#top li {
    display:inline ;
    list-style: none;
    margin: 0; padding: 0.0em;
    list-style-type: none;
  }
  
ul#top a {
     display: block;
    padding: 0.2em;
    font-weight: bold;
    
  }
  
  ul#top h2 {
 font-size: 1em;
    margin: 1.1em 0 0;   padding: 0.2em;
    border-color: #FDDBA5;
    color: #9C7E4D; background-color: #FDDBA5;
  }

und das zugehörige html-file

HTML-Code:

<body>
    
<img src="styles/alexpage/banner.jpg" alt="banner"> 
<ul id="top">
<li><h2>Menue:</h2></li> 
<li><a href="/bla.html">Bla</a></li>  
</ul>
<table class="noborder"  style="border-width:0px; table-layout:fixed ; border-style:none">
// usw..

Vielleicht überseh ich irgendwas grundlegendes aber ich komm zur Zeit einfach nicht weiter...

danke für die Hilfe!

Alex

zAPPEL · 30.09.2008, 20:46

Hi,

ich weiß leider nicht genau was, aber irgendwo hast einen Hund drinnen. Der folgende Code funktioniert problemlos:

HTML-Code:

<html>
<head>
<style type="text/css">
<!--
#nav li {
    display:inline;
}
-->
</style>

</head>
<body>
<ul id="nav">
    <li><a href="/menu2.html">Menu1</a></li> 
    <li><a href="/bla.html">Bla</a></li>  
</ul>
</body>
<html>

Und das H2 im <li> ist nicht schön

[edit]
Uhh... wenn du die <a> innerhalb der <li> auf display:block setzt dann kann es nicht funktionieren!

lg

alexA320 · 01.10.2008, 14:43

hm also auch ohne das display:block im <a> Teil ist es noch nicht in einer Linie

lg

zAPPEL · 01.10.2008, 16:49

Also wie gesagt, <h2> innerhalb der li ist nicht gut, warum hast du das?

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#top {
    font-size: 0.83em;
    float: left; width: 120px;
    margin: 0 0 1.2em; padding: 0;

  }

  #top li {
    display:inline ;
    list-style: none;
    margin: 0; padding: 0.0em;
    list-style-type: none;
  }
  
#top a {
    padding: 0.2em;
    font-weight: bold;
    
  }
  
h2 {
 font-size: 1em;
    margin: 1.1em 0 0;   padding: 0.2em;
    border-color: #FDDBA5;
    color: #9C7E4D; background-color: #FDDBA5;
  }-->
</style>
</head>

<body>
<h2>Menue:</h2>
<ul id="top">
<li><a href="/bla.html">Bla</a></li>  
<li><a href="/bla.html">Bla</a></li>  
<li><a href="/bla.html">Bla</a></li>  
</ul>

</body>
</html>

Wie soll das ganze denn am Schluss aussehen?
Menü: Menü1 Menü2 Menü3 ?

alexA320 · 02.10.2008, 13:33

Ja genau so.

Hab es jetzt aber anders gelöst, ohne <li>

Aber danke für deine Hilfe!

zAPPEL · 02.10.2008, 15:20

Warum ohne <li> ? <li>s sind gut für Menüs, und es ist auch kein Problem das mit css entsprechend anzupassen.
Hast jetzt einfach <a>Link1</a> <a>Link2</a> .. etc? Wennst mir genau sagst was du willst kann ich dir schnell zeigen wie das mit css möglich ist.

lg

30.09.2008, 18:26	#1
alexA320 Veteran Registriert seit: 25.03.2005 Alter: 34 Beiträge: 429	horizontales Menü (display:inline) funktioniert nicht! Hallo! Ich zweifel langsam an mir selber Die Browser (Firefox 3 , IE7) wollen das Menü nicht horizontal darstellen, egal was ich mache, die Menüpunkte bleiben untereinander! Hier der Code: Code: ul#top { font-size: 0.83em; float: left; width: 120px; margin: 0 0 1.2em; padding: 0; } ul#top li { display:inline ; list-style: none; margin: 0; padding: 0.0em; list-style-type: none; } ul#top a { display: block; padding: 0.2em; font-weight: bold; } ul#top h2 { font-size: 1em; margin: 1.1em 0 0; padding: 0.2em; border-color: #FDDBA5; color: #9C7E4D; background-color: #FDDBA5; } und das zugehörige html-file HTML-Code: <body> <img src="styles/alexpage/banner.jpg" alt="banner"> <ul id="top"> <li><h2>Menue:</h2></li> <li><a href="/bla.html">Bla</a></li> </ul> <table class="noborder" style="border-width:0px; table-layout:fixed ; border-style:none"> // usw.. Vielleicht überseh ich irgendwas grundlegendes aber ich komm zur Zeit einfach nicht weiter... danke für die Hilfe! Alex ____________________________________ <--Gruß Alex--> Cargo motzt nicht, Cargo kotzt nicht! http://status.ivao.aero/147360.png

30.09.2008, 20:46	#2
zAPPEL Inventar Registriert seit: 07.11.2001 Ort: Perchtoldsdorf Alter: 45 Beiträge: 2.085 Mein Computer	Hi, ich weiß leider nicht genau was, aber irgendwo hast einen Hund drinnen. Der folgende Code funktioniert problemlos: HTML-Code: <html> <head> <style type="text/css"> <!-- #nav li { display:inline; } --> </style> </head> <body> <ul id="nav"> <li><a href="/menu2.html">Menu1</a></li> <li><a href="/bla.html">Bla</a></li> </ul> </body> <html> Und das H2 im <li> ist nicht schön [edit] Uhh... wenn du die <a> innerhalb der <li> auf display:block setzt dann kann es nicht funktionieren! lg ____________________________________ „Das menschliche Gehirn ist eine großartige Sache. Es funktioniert vom Moment der Geburt an – bis zu dem Zeitpunkt, wo du aufstehst, um eine Rede zu halten.“ Mark Twain "Windle shook his head sadly. Four exclamation marks, the sure sign of an insane mind" Reaper Man, Terry Pratchett Geändert von zAPPEL (30.09.2008 um 20:50 Uhr).

01.10.2008, 14:43	#3
alexA320 Veteran Registriert seit: 25.03.2005 Alter: 34 Beiträge: 429	hm also auch ohne das display:block im <a> Teil ist es noch nicht in einer Linie lg ____________________________________ <--Gruß Alex--> Cargo motzt nicht, Cargo kotzt nicht! http://status.ivao.aero/147360.png

02.10.2008, 13:33	#5
alexA320 Veteran Registriert seit: 25.03.2005 Alter: 34 Beiträge: 429	Ja genau so. Hab es jetzt aber anders gelöst, ohne <li> Aber danke für deine Hilfe! ____________________________________ <--Gruß Alex--> Cargo motzt nicht, Cargo kotzt nicht! http://status.ivao.aero/147360.png

02.10.2008, 15:20	#6
zAPPEL Inventar Registriert seit: 07.11.2001 Ort: Perchtoldsdorf Alter: 45 Beiträge: 2.085 Mein Computer	Warum ohne <li> ? <li>s sind gut für Menüs, und es ist auch kein Problem das mit css entsprechend anzupassen. Hast jetzt einfach <a>Link1</a> <a>Link2</a> .. etc? Wennst mir genau sagst was du willst kann ich dir schnell zeigen wie das mit css möglich ist. lg ____________________________________ „Das menschliche Gehirn ist eine großartige Sache. Es funktioniert vom Moment der Geburt an – bis zu dem Zeitpunkt, wo du aufstehst, um eine Rede zu halten.“ Mark Twain "Windle shook his head sadly. Four exclamation marks, the sure sign of an insane mind" Reaper Man, Terry Pratchett

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)