li - Liste über 2 Zeilen?

Hallo, ist es in HTML möglich, eine li-liste über zwei Zeilen zu erstrecken? Ich meine dass man zum Beispiel die ersten 5 Glieder einer Liste in die erste Zeile und die zweiten 5 Glieder in die 2. Zeile packt. In etwa so (siehe Anhang). Wäre super wenn mir jemand sagen könnte wie man das machen kann. (Ich meine dabei nicht mit ul zu arbeiten, da die Website auch responsive nutzbar sein soll) Danke und MfG Croghs

Quellcode: http://jsfiddle.net/42es4vvq/

Liste über 2 Zeilen - (Internet, HTML, CSS)

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Steffile

28.11.2015, 20:18

Natuerlich kannst du auch responsiv mit ul li arbeiten. Tabellen sind die, die problematisch sind.

Du kannst die < li > nach links floaten und Zeilenumbruch mit dem pseudo element nth-child erzwingen.

Z.B. wenn du nach jedem 5ten Element eine neue Reihe anfangen willst:

li {width:200px; float:left;}
li:nth-child(5n+1) {clear:left;}

Je nach Fall koenntest du auch jedes < li > mit 20% Breite angeben, und Media Queries einbauen, sodass die Breite auf kleinen Bildschirmen z.B. 50% ist, sodass sich die Links in Zweiergruppen anordnen.

Croghs

Fragesteller

28.11.2015, 20:22

Ja, so in etwa meinte ich das, allerdings sieht es bei mir jetzt so aus:

https://gyazo.com/ba83387f4c1b4e80f9b5d81a53d386d3

updated Link: http://jsfiddle.net/6f4Lugg2/

Steffile

28.11.2015, 20:36

@Croghs

Das ist, weil .cell border hat, das tut nochmal 2px zu jedem 20% Breite dazu, versteht du?

Du kannst mit calc() arbeiten, das funktioniert allerdings auf alten Browsern nicht:

.cell { 
text-align: center;    
border: 1px solid #fff;    
border-bottom: none;    
height: 199.5px !important;    
display: table-cell;    
width: calc(20% - 2px);}

Oder eigentlich besser mit boxshadow:

.cell {
text-align: center;    
/*border: 1px solid #fff; */    
border-bottom: none;    
height: 199.5px !important;    
display: table-cell;    
width: 20%;    
-webkit-box-shadow: 0 0 0 1px #FFFFFF;    
box-shadow: 0 0 0 1px #FFFFFF;}

Croghs

Fragesteller

28.11.2015, 20:42

@Steffile

Dankeschön! Jetzt funktioniert es!

Steffile

28.11.2015, 20:45

@Croghs

Viel Erfolg :)

Ichmagdichsarah

28.11.2015, 18:15

Mit width sollte es doch gehen, oder? ^^

Croghs

Fragesteller

28.11.2015, 18:17

Wie meinst du das? Mein container ist 1140px breit, aber die Liste geht noch darüber hinaus... http://jsfiddle.net/42es4vvq/

Ichmagdichsarah

28.11.2015, 18:22

Mache die einzelnen Listenpunkte breiter. Mit padding.

Croghs

Fragesteller

28.11.2015, 18:31

@Ichmagdichsarah

Dann kommt es aber immer noch nicht zum zeilenumbruch sondern nur zu einem Wirrwar. Und wenn ich das padding auf 12px stelle, habe ich trotzdem alle 10 Elemente in einer Zeile.

Ichmagdichsarah

28.11.2015, 18:32

Also, ich kann mir die Seite gerade leider nicht anschauen, da ich am handy bin. Hast du position absolute oder fixed?

Croghs

Fragesteller

28.11.2015, 18:57

@Ichmagdichsarah

keins von beiden, funktioniert aber bei beiden nicht.

Hallöchen,

wie schon im Titel steht, werden bei meiner ul-Liste die Bullet-Points nicht angezeigt. Höchstwahrscheinlich liegt es an der CSS-Datei, da ohne sie die Punkte sichtbar sind.

In anderen Foren habe ich meistens gelesen, dass man das Problem mit padding-left oder margin-left lösen kann. Hat aber bei mir nicht funktioniert.

Woran liegt es dann?

Falls ihr den kompletten Quelltext sehen wollt hier die URL:

https://meisterbetrieb-mathias-schiller.de/

Ansonsten hier die relevanten Quellcode-Ausschnitte:

Übrigens: Ich hatte auch die Einstellung "list-style-position: inside;" ausprobiert, da konnte man die Punkte sehen. Allerdings sieht das aber nicht schön aus.

In der HTML-Datei:
<section>
  <ul>
    <li>1. Punkt</li>
    <li>2. Punkt</li>
  </ul>  

</section>

In der CSS-Datei: section ul { padding-left: 3em; }

section li { padding-bottom: 0.5em; width: 95%; }

...zur Frage

Punkte bei einer ul in html mittig formatieren?

Ich habe mehrere li in einer ul. Ich habe aber den Text mittig formatiert, nur sind die Punkte noch rechts, von der unordered list, der Text aber mittig. Wie bekomm ich die Punkte auch in die Mitte?

...zur Frage

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

...zur Frage

Kann ich einer Aufzählung ul eine class oder eine id geben?

Hallo Leute, ich weiß gerade irgendwie nicht weiter. Ich arbeite gerade an einer Website mit HTML und CSS. Ich habe eine Liste gemacht mit ul und li. Mit CSS habe ich dieser Liste ein paar Eigenschaften gegeben. Bei einer anderen Liste wollte ich diese Eigenschaften jedoch nicht und hab versucht nach dem ul, der diese Eigenschaften besitzen soll"ID="h"Oder"class="h'" Zu schreiben und hab bei CSS dementsprechend "#h(list-style:none" oder ".h(list-style":none)" das angepasst, aber irgendwie funktioniert beides nicht. Dann besitzt diese ul aufeinmal nicht mehr diese Eigenschaften aus CSS. Ich bitte um hilfe. Muss ich noch was anderes hinschreiben oder wie würdet ihr es hinschreiben?

Ich danke schon mal im voraus:)

...zur Frage

[C++] Cout Zeile mit Farbe -> KURZ!

Hallo liebe Helfer/Helferinnen, ich interessiere mich wirklich sehr für C++ und lese grade ein Buch darüber! Doch ich bin Mal wieder ein Perfektionist und muss alles super sauber und übersichtlich haben. Also beschloss ich mich dazu die Konsolen Zeilen mit unterschiedlichen Farben zu gliedern, dennoch verstehe ich nicht wie. Nur eine Sache:

ICHMÖCHTE KEINEN ZEILENLANGEN CODEBLOCK IN MEINER SOURCE! Außerdem möchte ich auch nichts zu großes, da ich auch verstehen will was ich da stehen habe!

Also -> bitte was sehr kurzes und knackiges oder gar nichts ;)

ich hatte sowas ähnliches schonmal gefunden aber habe es LEIDER wieder vergessen und finde es nicht mehr! UND JETZT KOMMT BITTE NICHT MIT DEM WWW.LMGTFU.COM KRAM! Danke, denn das habe ich schon versucht und nur diese riesen Codeblocks gefunden :(!

BILD VON MEINER SOURCE IM ANHANG! (Ich möchte verschiedene Datentypen mit Farbe gliedern.)

Danke und ein frohes Fest! :)

...zur Frage

Kann ich eine Indexseite auch mit index.php erstellen?

Hallo Zusammen,

Mir ist klar die Frage hört sich blöd an, was ich meine ist, wenn ich keine index.php/html auf meinem webserver habe dann kommt ja wie unten im Beispiel so eine Indexlistenseite, wenn ich jedoch die index.php/html im Verzeichnis habe, ist die Indexliste nicht mehr da sondern die normale seite. Gibt es aber eine möglichkeit trotz index.php/html eine indexliste zu bekommen? Vielleicht sogar dass ich, wenn ich die seite indexliste.php öffne diese liste kommt? Ich hoffe ich konnte es verständlich erklären.

Kurzgefasst:
Neben meiner Webseite (index.php) würde ich gerne noch eine Indexliste wie im Bild zu sehen haben. Ist sas Möglich?

Lg
Biolaxy

...zur Frage

Footer Hintergrundfarbe ändert sich nicht?

Hallo,

ich habe hier ein ganz einfachen Footer mit HTML und CSS. Das Problem ist, dass sich die Hintergrundfarbe des Footers einfach nicht ändert und ich keine Ahnung hab, woran das liegt. Habe schon alles versucht, was mir so bekannt ist.

Ich zweifle gerade ziemlich an mir selbst.

HTML:

<footer>   
        <section class="section_footer">
        <div class="social">
            <a href="https://facebook.com" target=”_blank”><i class="fab fa-facebook"></i></a>
            <a href="https://instagram.com" target=”_blank”><i class="fab fa-instagram"></i></a>
        </div>
        <ul class="list">
            <li><a href="Impressum.html">Impressum</a></li>
            <li><a href="datenschutz.html">Datenschutz</a></li>
            <li><a href="kontakt.php">Kontakt</a></li>
            <li><a href="credits.html">Credits</a></li>
        </ul>
        <p class="footer_text">
            Lorem Ipsum
        </p>
        <p> <a href="#top"><i class="fas fa-arrow-up"></i></a></p>
    </section>
    </footer>

CSS:

footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    background-color: whitesmoke;
}
.section_footer {
    padding: 40px 0px;
}
.social {
    text-align: center;
    padding-bottom: 25px;
    color:gray;
    display: flex;
    justify-content: space-between;
    padding: 0 850px;
    font-size: 50px;
}
.social a {
    font-size: 25px;
    color: inherit;
    width: 40px;
    height: 40px;
    line-height: 48px;
    display: inline-block;
    text-align: center;
    margin: 0 8px;
    opacity: 0.75;
}
.social a:hover {
    opacity: 0.9;
}
footer ul {
    margin-top: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
}
footer ul li a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}
footer ul li {
    display: inline-block;
    padding: 0 15px;
}
footer ul li a:hover {
    opacity: 1;
}
footer section p {
    margin-top: 15px;
    text-align: center;
    font-size: 30px;
    color: #aaa;
}
footer  a i {
    display: flex;
    justify-content: center;
    align-items: center;
}

Danke im Vorraus!

...zur Frage

Navigation ausklappbar <html/CSS>?

Hallo,

ich möchte eine Navigation bauen, die wenn man hovert noch Unterpunkte anzeigt. Ich habe es so gemacht und komme leider nicht mehr weiter, wenn sich die Navigation ausklappt soll es ganz oben angezeigt werden. Ich habe einen Button unter der Navigation und als ich es selbst versucht hatte, zeigte es mir das Ausgeklappte hinter dem Button.

HTML:

    <header>
        <nav>
            <ul>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
            </ul>
        </nav>


    </header>

CSS:

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkblue;
  height: 1.5cm;
  
}


header li {
  float: left;
}


header li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


header li a:hover:not(.active) {
  background-color: rgb(195, 251, 255);
  color: black;
  height: 29px;
  font-weight: bolder;
}


header .active {
  background-color: #00e1ff;
  height: 21px;
  height: 29px;
  font-weight: bolder;
  color: darkblue;
}

Ich hoffe, dass mir irgendjemand helfen

Danke im voraus

Ps.: Das "Hallo" ist ein Platzhalter.

...zur Frage

HTML/Jquery/Javascript - Teilnehmer hinzufügen?

Hallo zusammen :)
Habe folgendes PRoblem

Eine Liste an gesamte Studenten auf der Rechten Seite bei der es möglich sein soll, eine einzelne Zeile auszuwählen, auf das Plus zu klicken und den Teilnehmer in der linke Spalte einzublenden: Wie selektier ich die Optionen als Child Element und lasse sie Hilden und shown?

Ich brauch echt keinen Code, also wär natürlich cool aber eine kurze Erklärung wie ich an die Sache rangehen soll wäre mega! DANKE!!

Fotos von Code und HTML im Anhang:

...zur Frage

Programmieren eines Vokabeltrainer in JAVA

Also ich habe folgende Aufgabe bekommen: ** Programmiere einen kleinen Vokabeltrainer. Er soll aus einer Textdatei deutsche und englische Vokabeln in zwei getrennte Listen einlesen und zu einer zufällig ausgegebenen Vokabel drei Lösungsmöglichkeiten zum Anklicken anzeigen.**

Mein Problem finde ich leider nicht so richtig. Habe eine Textdatei eröffnet und immer Deutsch englisch abwechselnd die Vokabeln eingetragen. z.B. gehen nächste Zeile go.

Das ist mein Quellcode:

package kapitel8;

import javax.swing.*;

import java.awt.*; import java.awt.event.*; import java.util.*; import java.io.*;

public class Aufgabe2 extends JFrame implements ActionListener, AdjustmentListener {

// Attribute
private JButton button1, button2;
private JLabel anzeige;
private JRadioButton[] option = new JRadioButton[3];
private ButtonGroup gruppe;
private Box top, bottom, middle, buttons, auswahl, bigBox;
final String dateiname = "Vokabeln.txt";
private int MAX = 0, nr = 0;
private ArrayList deutsch = new ArrayList();
private ArrayList englisch = new ArrayList();

// Vokabeln einlesen
public void readDiagnoseText() {
    try {
        BufferedReader Datei = new BufferedReader(new FileReader(dateiname));
        boolean dateiende = false;
        while (!dateiende) {
            String zeile = Datei.readLine();
            if (zeile == null)
                dateiende = true;
            else
                deutsch.add(zeile);
            zeile = Datei.readLine();
            if (zeile == null)
                dateiende = true;
            else
                englisch.add(zeile);
            nr++;
        }
        Datei.close();
    } catch (IOException x) {
        JOptionPane.showMessageDialog(null, "Kann keine Daten laden!");
        System.exit(0);
    }
    MAX = nr - 2;
}

// Buttons erzeugen und Buttons mit Ereignissen verknüpfen
public void createComponents() {
    button1 = new JButton("Neue Vokabel");
    button2 = new JButton("Prüfen");
    anzeige = new JLabel("Drücke auf Neue Vokabel");
    gruppe = new ButtonGroup();
    auswahl = Box.createVerticalBox();
    for (int i = 0; i < 3; i++) {
        option[i] = new JRadioButton("***");
        option[i].addActionListener(this);
        gruppe.add(option[i]);
        auswahl.add(option[i]);
    }
    top = Box.createHorizontalBox();
    bottom = Box.createHorizontalBox();
    middle = Box.createHorizontalBox();
    buttons = Box.createHorizontalBox();
    bigBox = Box.createVerticalBox();
    button1.addActionListener(this);
    button2.addActionListener(this);
}

// Die Form einstellen
public void setFormLayout() {
    button1.setFont(new Font("Arial", Font.BOLD, 20));
    button2.setFont(new Font("Arial", Font.BOLD, 20));
    anzeige.setFont(new Font("Arial", Font.CENTER_BASELINE, 25));
    for (int i = 0; i < 3; i++) {
        option[i].setFont(new Font("Arial", Font.ITALIC, 20));
    }
    top.setPreferredSize(new Dimension(430, 20));
    bottom.setPreferredSize(new Dimension(380, 10));
    middle.setPreferredSize(new Dimension(430, 10));
    auswahl.setPreferredSize(new Dimension(380, 100));
    bigBox.setPreferredSize(new Dimension(450, 200));
    bigBox.setBorder(BorderFactory.create

...zur Frage

Spotify API Get Methode Blocked?

Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js

const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";

function searchSong() {
    let songName = document.getElementById("song-name").value;

    fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
        headers: {
            "Authorization": `Bearer ${ACCESS_TOKEN}`
        }
    })
    .then(response => response.json())
    .then(data => {
        let songResults = data.tracks.items;

        if (songResults.length > 0) {
            let songList = document.createElement("ul");

            for (let i = 0; i < songResults.length; i++) {
                let song = songResults[i];

                let songItem = document.createElement("li");
                songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;

                songList.appendChild(songItem);
            }

            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "";
            songResultsDiv.appendChild(songList);
        } else {
            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "Sorry, no songs found.";
        }
    })
    .catch(error => {
        const errorMessage = document.getElementById("error-message");
        errorMessage.innerText = error;
    });
}

function selectSong(songId) {
    fetch("db.php", {
        method: "POST",
        body: JSON.stringify({songId: songId}),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Song added to the list!");
        } else {
            alert("Error adding song to the list.");
        }
    })
    .catch(error => {
        console.log(error);
    });
}

Hier ist dann noch die Index.html:

 <!DOCTYPE html>
<html>
<head>
    <title>DJ Song Request</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>DJ Song Request</h1>
    <form>
        <label for="song-name">Enter song name:</label>
        <input type="text" id="song-name" name="song-name">
        <button type="submit" onclick="searchSong()">Search</button>
    </form>
    <div id="song-results"></div>
</body>
</html>

Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D

...zur Frage

Wie kann man in HTML einen Wrapper erstellen?

Das ist meine Menüleiste:

* {
  padding: 0px;
  margin: 0px;
}

#menu {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 40px;
  width:100% - 36px;
  background: #2d2d2d;
  padding-top: 2px;
  padding-left: 36px;
}

#menu ul li {
  list-style: none;
  color: #bbbbbb;
  font-size: 10pt;
  font-family: Arial;
  line-height: 27px;
  padding: 0 8px;
  display: inline;
  font-weight: bold;
}

#menu ul li:hover {
  color: #fff;
}

Darunter soll der Wrapper kommen.

...zur Frage

Content in die mitte packen html, css?

Ich arbeite an einem Discord bot Dashboard und ich möchte, dass die Kästchen vom <li></li> nicht untereinenander sind sondern neben einander bis zum bildschirm rand und dann eins runter gehen.

html:

 <ul>
  <li><a class="content"><button onclick='ping()'>Working?</button>   
  </a></li>
  <li><a class="content"><input type="text" id="invite" placeholder="server invite"></a>
  <a class="content"><button onclick="add_invite()">Join</button></a>
  <br></li>
  <li>
</ul>

Css:

html,
body{
    width: 90%;
    color: #FE72F3;


 background: #2B2B2B;
    height: 100%;
}
ul{
    list-style: none;
    width: 100%;
    height: 100%;
}
li{


    width: 320px;
    height: 220px;
    background: #494949;
    border: 2px solid #1d1c1c;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20px;
}
input{
    width: 90%;
    margin: 10px;
    height: 30px;
    border-radius: 5px;


}
button{
    width: 93%;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
    
}

Wie mach ich das?

...zur Frage

Excel-Experte, der mir dringend helfen kann?

Hey Leute, und zwar habe ich ein gaaanz wichtiges Problem, da ich die Tabelle (das Bild im Anhang ist nur ein Beispiel) demnächst unbedingt fertigstellen muss.

Es geht darum, dass ich, wie im Bild dargestellt, diese Tabelle etwas separieren will. Ich will zu jeder Projektnummer, die in Spalte A steht, eine eigene Tabelle haben, wo nur alle Einträge zu dieser einen Projektnummer aufgelistet werden. Ihr seht zum Beispiel, dass das Projekt HL-004121 mehrere Einträge untereinander hat. Diese ganze Liste zu genau diesem Projekt soll in einer anderen Tabelle aufgelistet werden und sobald etwas in der Haupttabelle verändert wird, soll diese Änderung automatisch in die neue Tabelle übernommen werden. Und wenn ich eine neue Zeile hinzufüge, wo ich einen neuen Eintrag zum Projekt HL-004121 einfüge, soll Excel das in der neuen Tabelle auch erkennen und die neue Zeile ebenfalls hinzufügen, da diese zu dem Projekt HL-004121 gehört. Mit welcher Funktion kann ich das machen? Habe versucht eine Verknüpfung zwischen den Tabellen herzustellen, aber dann übernimmt Excel zwar Änderungen in den bereits bestehenden Zellen, übernimmt aber keine neuen Zeilen, die im Nachhinein entstehen. Es soll aber so funktionieren, dass Excel nach der Projektnummer sucht und dazu alle Einträge auflistet, egal wann diese Einträge eingefügt wurden. Also wirklich jede weitere Spalte, die nach A kommt. Ein Suchkriterium, mehrere Ergebnisse.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen