Supportnet Computer Supportnet Games Supportnet Kochen Explipedia
Login: guestBesucher online: 156
Supportnet Computerforum
SUPPORT
Home
Forum
Tipps & Infos
Blitz Angebote
Members
Hilfe
Video

TOP THEMEN
SSD Test
Alles über SSDs

Android Tipps
iPad Tipps
Google Tipps
Windows 8 FAQ
Windows 7 FAQ
E-Mail FAQ
Netzwerk FAQ
Festplatten FAQ
Datenrettung FAQ
Bildbearbeitung FAQ

Top iPhone Apps
Computer Einsteiger
Die 5 besten...
Explipedia
Themen
Direktlinks

Neue Einträge
News einsenden News einschicken
Tipps einsenden Tipp einschicken

SN-LINKS

Suche
Befreundete Seiten
Top Seiten

Supportnet/Forum/Webseiten/HTML



Supportnet/Forum/Webseiten/HTML
von Zaine vom 11.09.2017, 12:48 Diese Seite den Supportnet Favoriten hinzufügen  Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden


ul li ul li wird nicht richtig untereinader angezeigt

 (2118 Hits)

Hallo zusammen, ich habe folgenden HTML5 code:

<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">SK</span> Homepage</h1>
</div>
<nav>
<ul>
<li class="current"><a href="Home.php">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="downloads.php">Services</a>
<ul>
<li><a>Dokumente</a></li>
<li><a>Dienste</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>

und folgenden CSS3 code:

ul li ul li{
display: none;
}

ul li:hover ul li{
display: inline-block;
list-style-type: none;
}

das Ziel ist, dass die liste in Services, untereinander angezeigt wird, aber im Moment stehen "Dokumente" und "Dienste" nebeneinander unter Home, About und Services. Wie bekomme ich das hin ,dass beim hovern Dokumente und Dienste unter Services untereinander stehen?

Habe mal ein Screenshot gemacht:

https://picload.org/view/dgrdogpr/problem.png.html

Vielen Dank schon mal im Voraus!

VG
Zaine


Antwort schreiben 50 Bonuspunkte

Antworten...
Antwort 1 von computerschrat vom 11.09.2017, 13:41 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Hallo Zaine,

wenn ich das HTML bei mir starte, stehen "Dokumente" und "Dienste" als Unterpunkte unter "Services". Jeweils etwas eingerückt aber in getrennten Zeilen. Ich habe allerdings, weil es mir zu viel Tipparbeit war :-) das CSS File nicht eingebunden.

Vielleicht hilft es aber, wenn du den Listenpunkt "Servicess noch schließt. Dort fehlt das </li>

Gruß
computerschrat


Antwort noch nicht bewertet Als gute Antwort bewerten
Diese Antwort hat mein Problem gelöst
Antwort 2 von Zaine vom 11.09.2017, 14:09 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Hallo Computerschrat,

seltsam, weil bei mir steht es halt echt nebeneinander und das ergibt irgendwie keinen Sinn.

Ne das li wird über der letzten ul geschlossen, weil sonst werden ja Services und Dienste dauerhaft angezeigt.

Naja vielleicht hast du oder jemand anderes noch ne Idee dazu, ansonsten probiere ich einfach ein bisschen rum, wird irgendwann ja klappen.

Trotzdem erst mal Danke für die Antwort.

VG

Zaine


Antwort noch nicht bewertet
Antwort 3 von Zaine vom 11.09.2017, 14:41 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Hallo Computerschrat,

Ich hab die php und die css Datei mit dem gesamten code in meine Dropbox geladen. Wenn du möchtest und Zeit hast,kannst du dir das ja mal anschauen. Es scheint an der css zu liegen, aber ich finde den Fehler nicht.

Dropbox link: https://www.dropbox.com/sh/icn7k7wj7a1wou6/AADx-4ekSiI6wtnRBWx9Avu...

Vielen Dank und VG

Zaine


Antwort noch nicht bewertet
Antwort 4 von computerschrat vom 11.09.2017, 15:22 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Hallo Zaine,

bist du sicher, die richtigen Files hochgeladen oder verlinkt zu haben?
In den beiden Files finde ich die von dir in der Frage zitierten Texte nicht und ich finde auch nirgends eine Referenz auf style.css, demnach würde die Datei gar nicht eingebunden werden.

Gruß
computerschrat


Antwort noch nicht bewertet Als gute Antwort bewerten
Diese Antwort hat mein Problem gelöst
Antwort 5 von Zaine vom 11.09.2017, 15:51 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Hallo Computerschrat,

sorry, habe ich nicht bedacht.

Ich schicke dir den Link zu meinem OneDrive, da findest du die Komplette Ordnerstruktur. Am besten lädts du einfach den Projektordner runter dann müsste alles stimmen.

https://simonklein-my.sharepoint.com/personal/simon_klein_simonklei...

VG

Zaine


Antwort noch nicht bewertet
Antwort 6 von computerschrat vom 11.09.2017, 22:22 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Hallo Zaine,

ich habe jetzt mal deinen Code geladen und dann in die index.php noch einen Link auf die Home.php gesetzt, damit ich die aufrufen kann.

Egal mit welchem Browser ich es versuche, sobald ich den Mauszeiger auf Dienste lege, erscheinen Dokumente und Angebote darunter, jedes in einer eigenen Zeile.

Das funktioniert hier mit dem Internet Explorer, Firefox, Chrome und avast-SafeZone Browser.

Allerdings ändert sich beim Hovern die Formatierung, so dass die drei Überschriften "Home" "About" und "Dienste" etwas nach links rutschen und der gesamte Seiteninhalt ab der roten horizontalen Linie nach unten rutscht, weil die beiden Zeilen Dokumente und Angebote eingefügt werden.

Vielleicht hilft es, wenn du mal den Cache des Browserl löschst. Oft werden neue CSS-Anweisungen erst dann tatsächlich übernommen und zur Anzeige gebracht.

Gruß
computerschrat


Antwort noch nicht bewertet Als gute Antwort bewerten
Diese Antwort hat mein Problem gelöst
Antwort 7 von Zaine vom 12.09.2017, 08:24 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Hallo Computerschrat,

erst mal Danke und, ja hab gestern noch mal alles geschlossen gehabt und dann neu gastartet dann war es untereinander.

Hast du noch ne Idee, wie ich verhindern kann das es nach links rutscht?

VG

Zaine


Antwort noch nicht bewertet
Antwort 8 von computerschrat vom 12.09.2017, 11:48 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Hallo Zaine,

wenn die beiden Unterpunkte eingeblendet werden, wird die Anzeige breiter.

Durch die Formatierung float:right für den Headerbereich nav rutscht dann das ganze Paket nach links.

Ich habe versuchsweise im css die fragliche Zeile herauskommentiert:
header nav{
/*  float:right; */
  margin-top:10px;
}


Dann rutscht zwar der ganze Bereich nach links, aber die Position bleibt meim Hovern über den Link konstant.
Jetzt rutscht nur noch der Seitenihnalt nach unten. Da musst du einfach etwas mehr Platz für den Header vorsehen und die Seite etwas tiefer anfangen lassen.

Gruß
computerschrat


Antwort noch nicht bewertet Als gute Antwort bewerten
Diese Antwort hat mein Problem gelöst
Antwort 9 von Zaine vom 12.09.2017, 15:39 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Hallo computerschrat,

okay werde ich später mal ausprobieren.

Vielen Dank für deine Hilfe!

VG

Zaine


Antwort noch nicht bewertet
Antwort 10 von Friedel vom 13.09.2017, 21:25 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Ich habe das ganze nicht nach gebaut, aber wenn die CSS-Datei korrekt eingebunden ist, müssen die Punkte Dokumente und Dienste natürlich nebeneinander stehen, wenn sie sichtbar sind. Normalerweise sind sie dank
ul li ul li{
display: none;
}
nicht sichtbar. Sie erscheinen dank
ul li:hover ul li{
display: inline-block;
...
}
sobald die Maus über irgend einem Punkt der äußeren Liste ist. Und zwar als Inline-Block &#8213; also nebeneinander.

Ich vermute mal, dass die beiden Punkte nur erscheinen sollen, wenn die Maus über dem Listenpunkt Services steht. Dazu würde ich
<li><a href="downloads.php">Services</a>
zu
<li id="Services"><a href="downloads.php">Services</a>
verändern. Dann in der CSS
ul li:hover ul li{
display: inline-block;
...
}
zu
#Services:hover ul li{
display: block;
...
}
ändern.

Damit die innere Liste in ihrem li der äußeren Liste bleibt, würde ich die li der äußeren Liste relativ positionieren und die innere Liste absolut. Dann ist die innere ul linksbündig im li der äußeren Liste.


Antwort noch nicht bewertet Als gute Antwort bewerten
Diese Antwort hat mein Problem gelöst
Antwort 11 von Friedel vom 13.09.2017, 21:35 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

@computerschrat: Das li mit Services ist doch korrekt geschlossen. Genau so muss es sein. (Ich habe die beiden zusammengehörenden Tags fett gemacht.)

Zitat:
[pre]<ul>
<li class="current"><a href="Home.php">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="downloads.php">Services</a>
<ul>
<li><a>Dokumente</a></li>
<li><a>Dienste</a></li>
</ul>
</li>
</ul>[/pre]


Ich rücke meine Quelltexte immer so ein, dass alles übersichtlich bleibt. dann sieht man die Verschachtelung auf den ersten Blick und kann nie vergessen ein Element zu schließen.

<header>
  <div class="container">
    <div id="branding">
      <h1><span class="highlight">SK</span> Homepage</h1>
    </div>
    <nav>
      <ul>
        <li class="current"><a href="Home.php">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="downloads.php">Services</a>
          <ul>
            <li><a>Dokumente</a></li>
            <li><a>Dienste</a></li>
          </ul>
        </li>
     </ul>
    </nav>
  </div>
</header>


Antwort noch nicht bewertet Als gute Antwort bewerten
Diese Antwort hat mein Problem gelöst
Antwort 12 von computerschrat vom 13.09.2017, 21:52 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

@Friedel: Ja, das ist richtig. Ich hatte das schließende </li> übersehen.

Das Hauptproblem in Zaines Webseite liegt darin, dass die eingeblendeten Listenelemente den Textblock breiter machen. Damit rutscht alles nach links, weil der Block rechtsbündig gesetzt ist.
Als Versuch hebe ich dann einfach mal die rechtsbündige Formatierung entfernt. Nicht weil das sie Lösung sein sollte, sondern nur um zu sehen, ob es wirklich daran liegt. Damit rutschte natürlich alles nach links, aber das Verschieben des Blocks beim Hovern über den Menüpunkt ist verschwunden.

Gruß
computerschrat


Antwort noch nicht bewertet Als gute Antwort bewerten
Diese Antwort hat mein Problem gelöst
Antwort 13 von Friedel vom 13.09.2017, 23:28 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Die ganzen li haben alle ein float:left;. Das macht die Probleme. Das wird doch gar nicht gebraucht. Als inline-block werden sie doch eh so dargestellt. Ohne das float:left; sind die Punkte der inneren Liste untereinander. Aber natürlich nicht unter dem Punkt Services. Das erreicht man, indem man die li der äußeren Liste zum Bezugspunkt für die innere Liste macht. Dazu ergänzt man in die li der äußeren Liste einfach position: relative;.

Jetzt muss nur noch die Vertikale Ausrichtung korrigiert werden. dazu würde ich, wie oben schon erwähnt, noch
      ul li ul {
          position: absolute;
      }
ergänzen. Damit die sichtbar werdende innere Liste nicht abgeschnitten wird, muss aus dem container das overflow:hidden; verschwinden. Oder du ergänzt beim li der äußeren Liste eben overflow:visible;. Dann brauchst du natürlich noch eine Hintergrundfarbe für die li der inneren Liste...


Antwort noch nicht bewertet Als gute Antwort bewerten
Diese Antwort hat mein Problem gelöst
Antwort 14 von Friedel vom 13.09.2017, 23:35 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

P.S. Außerdem würde ich in so einem Fall die inneren Listenpunkte nicht mit display:none unsichtbar machen. Ich würde sie von vorn herein mit display:block formatieren und mit visibility:hidden unsichtbar machen. Dann sind sie ohne hover zwar unsichtbar, der Platz für sie ist aber trotzdem belegt. Dadurch verändert sich die Größe des umgebenden li nicht durch das Einblenden. Allerdings verändert sich die Größe bei dir zusätzlich durch die Schriftformatierung bei hover.

Antwort noch nicht bewertet Als gute Antwort bewerten
Diese Antwort hat mein Problem gelöst
Antwort 15 von Zaine vom 22.09.2017, 10:56 Mißbrauch, Beleidigungen und Blödsinn den Moderatoren melden

Hallo zusammen,

habe jetzt erst nochmal reingeschaut. Tatsächlich hat das mit

ul li ul{

positon: absolute;
}

das Problem gelöst. :)

Vielen dank für die hilfe!!

VG

Zaine


Antwort noch nicht bewertet




Antwort schreiben
    Bitte einen 'Nickname' wählen.
Nickname:*
    (eMail-Adresse wird nicht veröffentlicht.)
eMail:
Nachricht: Ich möchte bei Antworten benachrichtigt werden.
    Hilfe zur Beitragsformatierung gibts [hier]
                   
Antwort:*
  Die Nutzungsbedingungen habe ich gelesen und akzeptiert.

MACHEN SIE IHRE WEBSITE ATTRAKTIVER
Sie haben eine eigene Website und wollen Ihre Besucher auf den Supportnet-Service aufmerksam machen? Kopieren Sie einfach den Quellcode in Ihre Seite und jeder Besucher Ihrer Seite kann direkt auf die Supportnet-Datenbank zugreifen.

My Supportnet


SUCHE

Gruppen im Forum
Betriebsysteme
Software
Hardware
Netzwerk
Programmierung
Sonstiges

Impressum © 1997-2015 SupportNet
Version: supportware 1.8.230E / 18.10.2010, Startzeit:Sun Nov 12 22:19:35 2017