Flexbox auf verschachtelte Listen anwenden?

Hi, ich habe eine verschachtelte Liste und möchte diese mit Flexbox anordnen.

Das funktioniert allerdings nicht nur mit display:flex und flex-direction:row. Wenn ich in Chrome nachschaue wird mir als CSS Eigenschaft display:block angezeigt.

03.08.2022, 20:25

	<div class="skills">
		<ol>
			<li>
				<ul>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
				</ul>
			</li>
			<li>
				<ul>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
				</ul>
			</li>
		</ol>
		<ol>
			<li>
				<ul>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
				</ul>
			</li>
			<li>
				<ul>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
				</ul>
			</li>
		</ol>
		<ol>
			<li>
				<ul>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
				</ul>
			</li>
			<li>
				<ul>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
					<li>Lorem Ipsum</li>
				</ul>
			</li>
		</ol>
	</div>

.skills{
	display: flex;
	flex-direction: row;
}

P05m05

03.08.2022, 20:22

Veröffentliche doch erstmal deinen Code, lade den relevanten Ausschnitt hier hoch und dann können wir dir weiterhelfen

Saibotix07

Fragesteller

03.08.2022, 20:24

Okay

1 Antwort

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Programmieren & Softwareentwicklung

03.08.2022, 18:56

Ein Element mit display:flex richtet nur seine direkten Kindelemente aus. Wenn die Kinder ebenfalls wieder Flex-Boxen sein sollen, musst du das entsprechend definieren. Sie haben dann aber ihren eigenen Fluss und ordnen sich nicht in den der Eltern ein.

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Saibotix07

Fragesteller

03.08.2022, 19:54

Wie definiert man das?

Babelfish

03.08.2022, 21:56

@Saibotix07

Na mit CSS und den passenden Selektoren.

Saibotix07

Fragesteller

03.08.2022, 22:13

@Babelfish

Ja aber so .skills > li? Oder welche Selektoren

Babelfish

03.08.2022, 23:19

@Saibotix07

Das wäre zumindest ein gültiger Selektor. Ich weiß aber nicht, was du erreichen willst und warum du dafür verschachtelte Listen brauchst. Wie ich halt schon schrieb, ist bei verschachtelten Listen jeder Liste ein extra Flexbox-Container und musst entsprechend so behandelt werden.

Ähnliche Fragen

CSS Flex Box 2x2 Layout erzeugen?

Wie bekomme ich mit CSS Flexbox so ein Layout:

...zur Frage

CSS @media Maximum Width überschreiben?

Guten Morgen,

mein Vater hat eine Website auf MyWebsite von IONOS. Er hat dort einen Buchungskalender, der unter 1025 Pixel Weite nicht angezeigt wird aufgrund folgenden CSS Codes;

@media screen and (min-device-width: 1024px) {
            .mediumScreenDisabled { display:block }
            .smallScreenDisabled { display:block }
        }
        @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } }
        @media screen and (max-device-width: 568px) { .smallScreenDisabled { display:none } }
                @media screen and (min-width: 1024px) {
            .mobilepreview .mediumScreenDisabled { display:block }
            .mobilepreview .smallScreenDisabled { display:block }
        }
        @media screen and (max-width: 1024px) { .mobilepreview .mediumScreenDisabled { display:none } }
        @media screen and (max-width: 568px) { .mobilepreview .smallScreenDisabled { display:none } }

Der @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } } -Teil verhindert das Anzeigen des Kalenders und möchte deshalb die maximale width ändern.

Allerdings gibt es auf MyWebsite selbst wohl keine Option dazu und der IONOS Support meint, dass sie für Drittanbieter Snippets keinen Support anbieten (dabei bin ich mir ziemlich sicher, dass das von denen kommt, da der Kalender in einem iframe eingebunden ist).

Gibt es eine Möglichkeit über CSS die Eigenschaft separat nochmal zu überschreiben, wenn ich das Snippet von oben nicht manipulieren kann?

Danke und LG

...zur Frage

Habe ich als Frau mit 29 Jahren noch gute Chancen, programmieren zu lernen und einen Job zu finden?

Hallo Leute,

ich, W29, möchte gern meinen Beruf, den ich aktuell habe, wechseln. Irgendwie wollte ich schon immer programmieren lernen, habe mich aber nie getraut.

Jetzt die Frage: Lohnt es sich noch mit 29 Jahren oder ist es zu spät?

Ich will später als Webentwicklerin arbeiten und würde mit HTML, CSS und JavaScript anfangen.

Glaubt ihr, ich könnte es schaffen bzw. habe ich später gute Chancen als Frau, die erst mit 29 Jahren anfängt, es zu lernen, irgendwann später einen Job zu finden?

Wie lange dauert es ungefähr, bis ich in so einem Job arbeiten kann?

...zur Frage

Flexbox - Inspect-Mode was ist das bei Wordpress Theme?

Hallo zusammen,

ich stehe gerade auf dem Schlauch. Ich habe ein Wordpress Theme installiert und möchte das Layout mittels CSS anpassen. Nun wird mir da flexbox angezeigt, welches in zwei Bereiche aufgeteilt ist, wie auf diesem Bild:

und ich möchte die Headline im Container mittig platzieren. Ich bekomme das aber nicht ausgerichtet und weiß nicht, wie dieser Bereich auf der rechten Seite definiert ist (lt. Flexbox)

Bin gespannt und danke schonmal im Voraus!

Gruß

...zur Frage

30min am Tag programmieren lernen ausreichend?

Was denkt ihr wie lange ich brauche, um eine gutes Grundverständnis aufzubauen, wenn ich täglich nur 30 min "Java" lerne?

bereite mich momentan auf mein Informatik Studium vor und möchte daher schonmal etwas Programmieren können. Zeit habe ich jedoch momentan wegen Jobs ehr weniger.

danke für jegliche Antwort

...zur Frage

Verschachtelte DIV-Container in einer Reihe?

Ich versuche dieses Beispiel wie unten im Bild zu schaffen.

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zur Frage

Positionierung von Pfeilen in Flexboxen?

Hallo,

ich wollte bei meiner Website eine kleine Slideshow einbauen. Dazu habe ich erst einmal Pfeile erstellt. Diese wollte ich nun richtig positionieren. Ich hatte die Idee, eine Flexbox um die Bilder mit den Pfeilen zu erstellen und die Pfeile dann einfach mit align-items zu positionieren. Irgendetwas habe ich allerdings falsch gemacht. Vielleicht fällt euch ja mein Fehler auf. Bin für jeden Tipp dankbar.

html:

<div class="slide">
            <div id="footer2">
                <div id="bilder">
                    <div id="flexbox">
                        <div class="post">
                            <img src="wohnzimmer.png" alt="Wohnzimmer">
                            <div class="post-s">
                                <h2>Einbaumöbel</h2>
                            </div>
                        </div>
                        <div class="post1">
                            <img src="badezimmer.png" alt="Badezimmer">
                            <div class="post1-s">
                                <h2>Badmöbel</h2>
                            </div>
                        </div>
                        <div class="post2">    
                            <img src="einbauschränke.png" alt="Einbauschränke">
                            <div class="post2-s">
                                <h2>Einbauschränke</h2>
                            </div>
                        </div>
                    </div>
                    <div class="post3">
                        <img src="hochbett.png" alt="Hochbett">
                        <div class="post3-s">
                            <h2>Kinderhochbetten in Eichemassivholz</h2>
                        </div>
                    </div>
    
                    </div> 
                    
                </div>
                <a class="pfeil pfeil-links"><span>&#10094;</span></a>
                <a class="pfeil pfeil-rechts"><span>&#10095;</span></a>
            </div> 
        </div>

Css:

.slide{
    display: flex;
    border: solid black;
}
.pfeil {
    position: absolute;
    top: 0px;
    bottom: 0px;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
    
}
.pfeil-links {
    left: 0;
}
.pfeil-rechts {
    right: 0;
}

...zur Frage

Guter Anbieter für Domain und Web Hosting bei dem man mit HTML/CSS und JS selber seine Webseite erstellen kann?

Hallo kennt da jemand ein guter?
Es muss nur so einfach wie möglich sein aber ich will alles selber programmieren mit HTML CSS und JavaScript also sowas wie Wordpress oder ähnliches will ich gar nicht.

...zur Frage

Google Search Console einzelne Unterseiten entfernen lassen?

ich habe eine Website die beispiel.de heisst aber google hat nicht nur beispiel.de indexiert sondern auch /impressum /datenschutz und /AuthorMax.
Einige unschöne Unterseiten die leider auch sehr weit hochrutschen und sogar unter der Hauptseite angezeigt werden.

Welches von den beiden muss ich auswählen und wie soll ich es eintragen ?

Muss Https:// dabei stehen und www ?
Möchte nicht ausversehen beispiel.de und alle dazugehörigen entfernen, nur 3-4 bestimmte.

...zur Frage

Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>

...zur Frage

Gute KI um HTML-, CSS- und JS-Code für eine Webseite zu erstellen?

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...zur Frage

Wie ändere ich das Design (html) des mittleren Mauszeigers (mittlere Maustaste drücken um zu scrollen),den sogenannten scroll cursor für alle Webseitenbesucher?

den normalen Mauszeiger (pointer)/ Pfeil schaffe ich selbst zu verändern in html, aber nicht den Mauszeiger; wenn ich die mittlere Maustaste drücken zum scrollen

dieses Standarddesign für alle Webseitenbesucher in ein individuelles Design ändern:

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen