Ausrichtungsprobleme von Listenelemente

Mirsch0 · 29.01.2023

Hey Leute,
ich habe Ausrichtungsprobleme. Wenn das Fenster groß ist, ist alles in Ordnung aber wenn ich es kleiner mache ist es nicht mehr in Position. Was kann ich dagegen tun?
MfG Mirko

scatello · 30.01.2023

Hähä, schöne "Screenshots"!

Wie kommt man auf die Idee den Bildschirm abzufotografieren?
Poste deinen HTML- und CSS-Code, mit den Fotos kann man nichts anfangen.

basti1012 · 31.01.2023

Da ich kein Link sehe und kein Code kann man nur raten.
1. Css anpassen
2. Html anpassen , weil denke mal das der Fehlerhaft ist.
3. @mediaqueries benutzen

scatello · 31.01.2023

@Mirsch0
Anstatt nur die Fotos zu löschen, hättest du mal den Quellcode posten sollen. So ist dieser Thread jetzt sinnlos.

Mirsch0 · 31.01.2023

Hallo zusammen, wie gewünscht:
Css:
#li1{
color: rgb(255, 255, 255);
background-color: rgba(0, 47, 255, 0.068);
margin-right: 2%;
padding: 40px;
margin-left: 5%;
display: grid;
font-size: 30px;
display: inline-block;
}
#li2{
color: rgb(255, 255, 255);
background-color: rgba(0, 47, 255, 0.068);
display: grid;
padding: 40px;
font-size: 30px;
display: inline-block;
margin-right: 2%;
padding: 40px;
}
#li3{
color: rgb(255, 255, 255);
background-color: rgba(0, 47, 255, 0.068);

display: grid;

font-size: 30px;
display: inline-block;
margin-right: 2%;
padding: 40px;

}
#li4{
color: rgb(255, 255, 255);
background-color: rgba(0, 47, 255, 0.068);

display: grid;

font-size: 30px;
display: inline-block;
margin-right: 2%;
padding: 40px;

}
#li5{
color: rgb(255, 255, 255);
background-color: rgba(0, 47, 255, 0.068);
display: grid;
font-size: 30px;
display: inline-block;
margin-right: auto;
padding: 40px;
--------------------------------------------------------------------
HTML:
<div id="li1">
<ul>
<li>...</li>
<li>... </li>
<li>...</li>
</ul>
</div>
<div id="li2">
<ul>
<li>....</li>
<li>...</li>
<li>....</li>
</ul>
</div>
<div id="li3">
<ul>
<li>....</li>
<li>...</li>
<li>...l.</li>
</ul>
</div>
<div id="li4">
<ul>
<li>...</li>
<li>...</li>
<li>...t</li>
</ul>
</div>

MfG Mirko

Mirsch0 · 01.02.2023

Also die Sache ist die, dass sich die Listenelemente beim verkleinern des Browsers ungeordnet verschieben. Ich hätte gerne das wenn der Browser klein ist das sich die Liste... schön untereinander ordnen so das es eben gut ausschaut. Würde mir da jemand helfen? MfG Mirko

Sempervivum · 01.02.2023

Das kannst Du sehr gut mit CSS-Grid und auto-fit erreichen:

Code:

        body {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

        }

Übrigens: Dein CSS wiederholt sich, wahrscheinlich ist es ausreichend, es ein Mal für alle Listen zu definieren. Außerdem kannst Du wahrscheinlich auf die div-Container verzichten. Würde dann so aussehen:

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Grid Align Lists</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        body {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        }

        ul {
            color: rgb(255, 255, 255);
            background-color: rgba(0, 47, 255, 1);
            margin-right: 2%;
            padding: 40px;
            margin-left: 5%;
            font-size: 30px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <ul>
        <li>...</li>
        <li>... </li>
        <li>...</li>
    </ul>
    <ul>
        <li>....</li>
        <li>...</li>
        <li>....</li>
    </ul>
    <ul>
        <li>....</li>
        <li>...</li>
        <li>...l.</li>
    </ul>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...t</li>
    </ul>
</body>

</html>

Und: Code besser in Codetags posten: Das Menüsymbol rechts neben dem Landschaftssymbol und dann </>.

Mirsch0 · 01.02.2023

Sempervivum, vielen Danke es schaut schon sehr gut aus!
ich habe als Hintergrund jetzt nur noch eine durchgezogene Line in blau, die würde ich auch so behalten wollen nur eben sollte die Line (in blau) wie jeder einzelne Inhalt von dem Block sein. Also wenn es z.B. wenn es drei Wörter sind sollen die blau hinterlegt sein und dann ein Abstand zum den andern Blöcken mit wieder drei Wörter... weißt du grob wie ich das meine?

Sempervivum · 01.02.2023

Ich versuche, es zu verstehen: Meinst Du, dass zwischen einem Block mit jeweils drei Elementen ein kleiner Zwischenraum sein soll? Etwa so:

Mirsch0 · 01.02.2023

Ps: zu Vorstellungen

Mirsch0 · 01.02.2023

Es sollte als dreier Blöcke dargestelt werden so das alle Blöcke mit blau gleich groß sind wie so Boxen

Sempervivum · 01.02.2023

Jetzt kann ich dir irgend wie nicht folgen: Auf deinen beiden Bildern sehe ich Dreierblöcke aber die sind alle untereinander, nichts zu erkennen von einem Gitter?

Mirsch0 · 01.02.2023

hmm.... ja?

Code:

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,[email protected],300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
    <link rel="stylesheet"href="stylesheet.css">
  
    <style>
        ul {
        list-style-image: url("icons8-check-25.png");
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        }

    
    </style>

</head>
<body>
  
    <div class="img_container">
        <img class="Logo" src="Logoweiß.png" alt="">
    </div>

    <div class="navbar">

        <div>
          
            <a href="#1">Sartseite</a>
            <a href="2">Leistungen</a>
            <a href="3">Unser Team</a>
            <a href="4">Häufige Fragen</a>
            <a href="5">Jobs</a>
            <a href="#6">Ihr Weg zu uns</a>
            <a href="7">Kontakt</a>
          
        </div>

    </div>

  

    <div class="Headline">
... </H1>
    </div>
    <div class="Text">
        <H3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est, dolorem? Atque debitis aspernatur temporibus doloremque libero dicta quaerat corrupti, ex aliquid natus neque ipsa eaque doloribus magni quas sint maxime? </H3>
        <H3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est, dolorem? Atque debitis aspernatur temporibus doloremque libero dicta quaerat corrupti, ex aliquid natus neque ipsa eaque doloribus magni quas sint maxime? </H3>
        <H3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est, dolorem? Atque debitis aspernatur temporibus doloremque libero dicta quaerat corrupti, ex aliquid natus neque ipsa eaque doloribus magni quas sint maxime? </H3>
        <H3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est, dolorem? Atque debitis aspernatur temporibus doloremque libero dicta quaerat corrupti, ex aliquid natus neque ipsa eaque doloribus magni quas sint maxime? </H3>
    </div> 
 

   <h2 id="Headline2">Wir sind für Sie da, wenn andre an ihre Gränzen kommen!</h2>
 
    <h2 id="Leistungen">Unsere Leistungen auf einen Blick</h2>
  
    <ul>
        <li>sdfsdf</li>
        <li>gegge</li>
        <li>hrhrh4</li>
    </ul>
    <ul>
        <li>3rggg</li>
        <li>rterttrt</li>
        <li>fdgdfgdg</li>
    </ul>
    <ul>
        <li>fgdfgdg</li>
        <li>htytjyj</li>
        <li>utyutu</li>
    </ul>
    <ul>
        <li>fdsdfsdf</li>
        <li>sdvsdvsdv</li>
        <li>qwd32r2r</li>
    </ul>
  
    </body>
</html>
----------------------------------------------------------------------
css:
body{
    font-family: 'Open Sans', sans-serif;
    background-color: rgba(0, 136, 248, 0.603);
    padding-Left: 0px;
    padding-right: 0px;
    padding-top: 0px;
  
}
.H1{
    display: block;
    margin: auto;
    width: 100%;
    height: auto;
    padding: 0px;
    margin-top: 0px; 
}
.Logo{
    display: block;
    margin: auto;
    width: 35%;
    height: auto;
    padding: 0px;
    margin-top: 0px; 
}

.Headline{
    color: rgb(7, 4, 155);
    font-size: x-large;
    background-color: rgba(1, 18, 255, 0.144);
    display: flex;
    justify-content: center;
    align-items: center ;
    padding: auto;
    margin-top: auto;
}
.Text{
    color: rgb(255, 255, 255);
    font-size: x-large;
    background-color: rgba(1, 18, 255, 0.144);
    display: flex;
    justify-content: center;
    align-items: center ;
    padding: auto;
    margin-top: auto;
}
.Bild1{
    display: block;
    margin: auto;
    width: 100%;
    height: auto;
    padding: 0px;
    margin-top: 0px;
}
#Headline2{
    color: rgb(0, 0, 0);
    font-size: x-large;
    background-color: rgba(0, 26, 255, 0.356);
    display: flex;
    justify-content: center;
    align-items: center ;
    padding: auto;
    margin-top: auto;
    padding-top: auto;
}
#Leistungen{
    color: rgb(255, 254, 254);
    text-align: center;
    background-color: rgba(0, 47, 255, 0.068);
    font-size: xx-large;
}
#Entlastung{
    color: rgb(252, 252, 252);
    background-color: rgb(0, 47, 255, 0.068);
    text-align: center;
}
#Entlastung2{
    color: rgb(243, 243, 243);
    text-align: center;
}
#Dienstleistungen{
    color: rgb(252, 252, 252);
    text-align: center;
    background-color: rgb(85, 61, 226);
}
ul {
    color: rgb(255, 255, 255);
    background-color: rgba(0, 47, 255, 1);
    margin-right: 2%;
    padding: 40px;
    margin-left: 5%;
    font-size: 30px;
    display: inline-block;
}

.img_container{
  
    padding-bottom: 0px;
    padding-top: 0px;
    margin-top: 0px;   
}
.navbar{
  
    background-color: rgba(0, 136, 248, 0.603);
    display: flex;
    justify-content: center;
    align-items: center ;
    padding: 15px;
    margin-top: 0px; 
}
a{
    color: rgb(255, 255, 255);
    text-decoration: none;
    margin-left: 50px;
    font-weight: 900;
    font-size: large;
  
}
a:hover{
  
    text-overflow: ellipsis;
  
}


#Weg{
    background-color: rgb(0, 47, 255, 0.068);
    color: rgb(255, 255, 255);
    text-align: center;
}
#map{
    display: block;
    margin: auto;
    width: 30%;
    height: auto;
    padding: 0px;
    margin-top: 0px;
  
}

Sempervivum · 01.02.2023

OK, ich habe mir das angesehen. Es sind jeweils Dreierblöcke aber alle untereinander. Möchtest Du, dass diese Blöcke auf einem breiten Bildschirm nebeneinander angeordnet werden?

Mirsch0 · 01.02.2023

jaa mit einem schönen Abstand und wenn der Browser kleiner wird sollen sie alle untereinander sein

Mirsch0 · 01.02.2023

Würdest du mir das hinzaubern? ca. 4 x 3 Blöcke wenn Browser aufist, alle horizontal Browser zu senkrecht und immer ein kleiner Abstand dazwischen

Sempervivum · 01.02.2023

Mehr als 2 bekomme ich aber nicht nebeneinander, denn weil die Schrift ziemlich groß ist, nimmt eine Gruppe schon 600px horizontal ein.
Lege einen Wrapper um die Listen:

Code:

    <div id="wrapper-list">
        <ul>
            <li>sdfsdf</li>
            <li>gegge</li>
            <li>hrhrh4</li>
        </ul>
        <ul>
            <li>3rggg</li>
            <li>rterttrt</li>
            <li>fdgdfgdg</li>
        </ul>
        <ul>
            <li>fgdfgdg</li>
            <li>htytjyj</li>
            <li>utyutu</li>
        </ul>
        <ul>
            <li>fdsdfsdf</li>
            <li>sdvsdvsdv</li>
            <li>qwd32r2r</li>
        </ul>
    </div>

Und dann dieses CSS:

Code:

        ul {
            list-style-image: url("icons8-check-25.png");
            display: flex;
            justify-content: space-between;
        }

        ul li {
            list-style-position: inside;
        }

        #wrapper-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
        }

Mirsch0 · 01.02.2023

Hajaa cool und wenn man die dreier Liste im Block jetzt den Inhalt untereinander macht würde das wahrscheinlich passen oder. Also genau sie wie es ist nur der Inhalt von jedem Dreierblock doch untereinander oder?

Mirsch0 · 01.02.2023

Was mir noch aufgefallen ist

Sempervivum · 01.02.2023

Erst Mal untereinander. Ändere das CSS so:

Code:

        ul {
            list-style-image: url("icons8-check-25.png");
            display: flex;
            flex-direction: column;
            /* justify-content: space-between; */
        }

        ul li {
            list-style-position: inside;
        }

        #wrapper-list {
            display: grid;
            /* grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); */
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }

Ausrichtungsprobleme von Listenelemente

Mirsch0

Member

scatello

Well-known member

basti1012

Well-known member

scatello

Well-known member

Mirsch0

Member

Mirsch0

Member

Sempervivum

Well-known member

Mirsch0

Member

Sempervivum

Well-known member

Anhänge

Mirsch0

Member

Anhänge

Mirsch0

Member

Sempervivum

Well-known member

Mirsch0

Member

Sempervivum

Well-known member

Mirsch0

Member

Mirsch0

Member

Sempervivum

Well-known member

Mirsch0

Member

Mirsch0

Member

Anhänge

Sempervivum

Well-known member

Ausrichtungsprobleme von Listenelemente