HTML/CSS Hilfe - zwei Textfelder mit Bild nebeneinander?

Wie löse ich das Problem? Oben mein derzeitiger Stand - unten der Wunschzustand :)

HTML

<div id="main2">
   <div class="col1">
      <h3>Vivamus nec</h3>
      <img src="UE05/pic1.jpg" alt="spring flowers"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   </div>
   <div class="col2">
      <h3>Lorem ipsum</h3>
      <img src="UE05/pic1.jpg" alt="spring flowers"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
   </div>

Wie würdet ihr das mit CSS lösen?

Bild zum Beitrag

1 Antwort

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, CSS

31.01.2022, 13:36

Indem du das ganze in HTML mithilfe von <div>s wie folgt unterteilst:

Bild zum Beitrag

Um dann die zwei grün markierten Divs nebeneinanderzubekommen, kannst du dem Eltern-Element die CSS-Eigenschaft

display: flex;

geben.

Ausserdem brauchen die Kinder (#main2 > div bzw. .col1, .col2) dann noch

width: 50%;

oder

flex: 1;

Selbiges, um die zwei gelben Sachen nebeneinanderzubekommen, da braucht dann das hellblaue div die flex-Eigenschaft. Wobei da vielleicht auch ein display: inline-block; bei den zwei gelben Elementen reichen könnte.

HTML:

<div id="main2">
   <div class="col1">
      <h3>Vivamus nec</h3>
      <div class="colElement">
        <img src="UE05/pic1.jpg" alt="spring flowers">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      </div>
   </div>
   <div class="col2">
      <h3>Lorem ipsum</h3>
      <div class="colElement">
        <img src="UE05/pic1.jpg" alt="spring flowers">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
       </div>
   </div>
</div>

CSS:

#main2 {
  display: flex;
}
.col1, .col2 {
  flex: 1;
}
.colElement {
  display: flex;
}

regex9

31.01.2022, 21:15

Nur eine Ergänzung / ein Tipp von meiner Seite:

Sofern der Text im Paragraph das Bild beschreibt (bzw. sich darauf bezieht), würde es sich für eine bessere Semantik lohnen, die Boxen zu figure-Elementen umzugestalten.

Hierzu nur einmal das Markup:

<figure class="colElement">
  <img src="UE05/pic1.jpg" alt="spring flowers">
  <figcaption>Lorem ipsum ...</figcaption>
</figure>

So lange sich die Beschreibung nicht noch einmal in Text und kleiner Unterschrift unterteilt, würde ich wohl auf den Paragraph verzichten.

MrAmazing2

31.01.2022, 21:17

@regex9

Ah, kannte ich noch nicht, vielen Dank!

So lange sich die Beschreibung nicht noch einmal in Text und kleiner Unterschrift unterteilt

Und wenn dem doch so ist, dann kann man an der Stelle im Figure-Element einfach ein div verwenden, dass die beiden Sachen beinhaltet, oder?

regex9

31.01.2022, 21:19

@MrAmazing2

Ja, genau. Oder einfacher:

<figcaption>
  <h4>Some title</h4>
  <p>Lorem ipsum</p>
</figcaption>

Lisahuuu

Fragesteller

01.02.2022, 19:27

Vielen lieben Dank für die Antwort!! Könntest du mir eventuell noch weiter helfen? Stehe derzeit so da:

HTML:

<div id="main2">
   <div class="col2">
      <h3>Vivamus nec</h3>
      <img src="pic1.jpg" alt="spring flowers">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   </div>
   <div class="col2">
      <img src="pic1.jpg" alt="spring flowers">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   </div>
   <div class="col2">
      <img src="pic1.jpg" alt="spring flowers">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   </div>
</div>
<div id="main3">
   <div class="col3">
      <h3>Vivamus nec</h3>
      <img src="pic1.jpg" alt="spring flowers">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   </div>
   <div class="col3">
      <img src="pic1.jpg" alt="spring flowers">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   </div>
   <div class="col3">
      <img src="pic1.jpg" alt="spring flowers">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   </div>
</div>

CSS:

#main2 {
    text-align-all: left;
    width: 442px;
}

#main2 h3 {
    display: flex;
    color: yellowgreen;
    font-size: 20px;
}

#main2 .col2 p {
    color: #414141;
    line-height: 150%;
    margin-left: 15px;
    font-size: 9px;
}

#main2 .col2{
    margin-left: 35px;
}

#main2 .col2 img {
    display: flex;
    float: left;
    border: 5px yellowgreen;
    border-style: solid;
    margin-right: 15px;
}


#main3 {
    width: 442px;
}

#main3 h3 {
    display: flex;
    color: yellowgreen;
    font-size: 20px;
}

#main3 .col3 p {
    color: #414141;
    line-height: 150%;
    margin-left: 15px;
    font-size: 9px;
}

#main3 .col3{
    margin-left: 35px;
}

#main3 .col3 img {
    display: flex;
    float: right;
    border: 5px yellowgreen;
    border-style: solid;
    margin-right: 15px;
}

Aussehen tut es aber so: (kann kein bild einfügen also kommt eine Skizze)

Bild + Text

H3 (Main3)

Bild + Text

Also untereinander und nicht nebeneinander

MrAmazing2

01.02.2022, 19:59

@Lisahuuu

Pack die zwei mains (#main2 und #main3) in einen weiteren Container, und gib diesem

display: flex;

und den beiden mains

flex: 1;

MrAmazing2

01.02.2022, 20:02

@Lisahuuu

display: flex ist übrigens immer für den Parent gedacht. Die Kinder werden dann nebeneinander dargestellt, sofern dazu der Platz reicht.

Deinem h3 oder img display: flex zu geben macht also wenig Sinn.

Das ganze funktioniert bei dir nur soweit, weil du die Sachen floatest, aber float solltest du eher vermeiden.

MrAmazing2

01.02.2022, 20:06

@Lisahuuu

Ausserdem solltest du dein h3 Element nicht in das .col3-Element miteinfügen.

MrAmazing2

01.02.2022, 20:23

@Lisahuuu

Hier:

HTML:

<div id="content">
  <div class="col col1">
     <h3>Vivamus nec</h3>
     <div class="row">
        <img src="pic1.jpg" alt="spring flowers">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
     </div>
     <div class="row">
        <img src="pic1.jpg" alt="spring flowers">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
     </div>
     <div class="row">
        <img src="pic1.jpg" alt="spring flowers">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
     </div>
  </div>
  <div class="col col2">
     <h3>Vivamus nec</h3>
     <div class="row">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        <img src="pic1.jpg" alt="spring flowers">
     </div>
     <div class="row">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        <img src="pic1.jpg" alt="spring flowers">
     </div>
     <div class="row">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        <img src="pic1.jpg" alt="spring flowers">
     </div>
  </div>
</div>

CSS:

#content {
  display: flex;
}
.col {
   flex: 1;
   width: 442px;
}
.col h3 {
    color: yellowgreen;
    font-size: 20px;
}
.row {
    display: flex;
}
.row p {
    color: #414141;
    line-height: 150%;
    font-size: 9px;
}

.row img {
  border: 5px yellowgreen;
  border-style: solid;
  margin-right: 30px;
}

.col2 .row img {
  margin-right: 0px;
  margin-left: 30px;
}

Siehe: https://jsfiddle.net/fwcr85vn/

Wie schreibe ich auf englisch, dass ich Gymnasium X besucht habe?:

EDUCATION

School Name, Location — Degree

MONTH 20XX - MONTH 20XX

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

...zur Frage

Wie kann man in css box shadowing nur oben und unten erhalten?

Hallo

Ich mache gerade eine Website und habe das Problem, dass ich das box shadowing Attribute in css immer auf alle vier Seiten des Containers erhal, ich will es aber nur oben und unten.

Hier der HTML-Code:

<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>

Und hier der CSS-Code :

.content {

background-color: #48cae4;

padding: 5%;

box-shadow: inset 0 0 10px #132124;

}

...zur Frage

Bootstrap Column Anordnung ändern (mobile)?

Hallo liebe Community,

ich arbeite gerade an einem Webshop und erstelle die Startseite selbst mit HTML und CSS und dem Bootstrap Grid Layout. Nun habe ich Bilder und Texte welche auf dem Desktop jeweils abwechselnd und untereinander kommen.

Also jeweils Bild und Text in einer "row" und dann entweder der Text oder das Bild als erstes. So ergibt sich in der Reihenfolge: Text-Bild, Bild-Text.

Für die Desktopansicht ist das auch genau so gewünscht, allerdings hätte ich gerne wenn die Columns beim Smartphone untereinander rutschen, dass nicht zwei Bilder nacheinander kommen, sondern: Text-Bild, Text-Bild.

Wie lässt sich das realisieren?

Hier mal ein bisschen Code, sehr reduziert.

Doppelter Content und ein/ausblenden über "hidden" ist für mich nicht möglich aus SEO-Gründen.

Danke :)

  <div class="container">

    <div class="row">
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor.</p>
      </div>
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor sit.</p>
      </div>
    </div>

  </div>

...zur Frage

Komischer Text?

Hallo, also mein Lehrer hat in meine Abgabe für mein Layout einen komischen Lateinischen Text geschrieben, er lautet "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." Ist das eine Bewertung? Warum auf Latein?? Google Übersetzer gibt nichts Sinnvolles. Ich hatte nie Latein.

...zur Frage

Brauche dringend eine Übersetzung zu einem lateinischen Text!

Guten Abend liebe GF Community

Ich wollte eine Seite auf tumblr duplizieren und auf einmal erschien ein total komischer text auf latein. Ich kann mir überhaupt nicht erklären wieso und finde es sehr eigenartig. Jetzt möchte ich unbedingt wissen was in diesem text drin steht, leider beherrsche ich kein bisschen latein und google konnte mir nicht helfen. Hier der Text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae luctus nisi. Donec accumsan vehicula tempor. In volutpat condimentum justo nec volutpat. Ut imperdiet laoreet pharetra. Quisque vitae luctus ligula, ut tristique turpis. Quisque aliquam orci quis ipsum iaculis vestibulum. In placerat nibh tellus, tincidunt dapibus felis fermentum sed. Praesent non nisl lorem. Nam commodo nunc eget nunc suscipit lobortis. Vestibulum non ornare libero. Praesent pharetra feugiat tortor, sit amet mattis elit malesuada non. Vestibulum pretium vehicula venenatis. Nullam consectetur turpis vel tincidunt tempor. Praesent fringilla dui lorem, eu molestie justo aliquet vel. Ut nibh tortor, malesuada et sapien consectetur, auctor scelerisque ante. Etiam adipiscing purus eu ultricies consectetur.

Integer sed nulla est. Duis consectetur luctus felis tempus mollis. Quisque nec posuere mi. Sed scelerisque vestibulum justo. Vivamus faucibus porta metus id ultricies. Curabitur scelerisque nulla eget ipsum cursus fermentum. Aenean cursus at nunc quis laoreet. Cras sodales sapien et feugiat laoreet. Proin semper varius augue, vitae consequat nunc sollicitudin sit amet. Vivamus porta egestas odio, non ultricies arcu ultrices et. Nunc gravida luctus lobortis. Sed mi justo, eleifend sed dolor vitae, congue semper massa. Ut sit amet lobortis tortor. Nullam sed nunc sit amet ligula rutrum porta.

Integer vitae arcu nec justo feugiat consectetur sit amet quis neque. Pellentesque viverra massa vel velit faucibus lacinia. Cras ante risus, malesuada quis luctus vel, sodales eu risus. Morbi quis dictum lacus, consequat molestie turpis. Nunc et lacus facilisis, mattis neque quis, auctor ipsum. Etiam ac velit elit. Fusce ut accumsan sem, non pharetra augue.

...zur Frage

Kann jemand diesen lateinischen Text (Lorem Ipsum ) übersetzen?

Hallo! hier der Text:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Vielen Dank für jede sinnvolle Übersetzung schon mal im Vorhinein!

...zur Frage

Js Funktion funktioniert nicht?

Ich bekomme immer diese Fehlermeldung: Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

at OnClick ((Index):16:25)

at HTMLButtonElement.onclick ((Index):33:33)

Code:

<!DOCTYPE html>

<head>

<title>Document</title>

const TextElement = document.getElementById("text");

function OnClick() {

TextElement.setAttribute('style', 'color: red;');

}

</script>

<style>

#text {

color: black;

}

</style>

</head>

<body>

<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, et placeat, asperiores reprehenderit praesentium esse possimus quia sed tempore, unde autem illo. Illum, voluptate laboriosam. Doloribus unde mollitia necessitatibus dicta?</div>

<button onclick="OnClick()">button</button>

</body>

</html>

Danke

...zur Frage

Warum ist bei Templates oft als Platzhalter ein Text auf Latein?

"Hier fängt Ihr Text an. Klicken Sie hier und fangen Sie an zu tippen. Porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci."

Um ein Beispiel zu nennen. Habe ich bereits in vielen Vorlagen für PowerPoint, Homepage etc gesehen...

...zur Frage

Wie kann ich mit css die zwei div container untereinander mit Abstand dazwischen anzeigen lassen?

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style>
         .haupt {
         margint top: 50px;
         }
         .b1 {
         float: left;
         width: 400px;
         padding: 20px 0;
         color: #01DF01;
         border-bottom-width: 3px;
         border-style: solid;
         width: 50;
         height: 30;
         background-color: #fff;
         }
         .b2 {
         float: both;
         width: 400px;
         padding: 20px 0;
         color: #01DF01;
         border-bottom-width: 3px;
         border-style: solid;
         width: 50;
         height: 30;
         background-color: #fff;
         }
      </style>
   </head>
   <body>
      <div class="haupt">
         <div class="b1">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
            sed diam nonumy eirmod tempor invidunt ut labore et<br>
            dolore magna aliquyam erat, sed diam voluptua.<br>
            At vero eos et accusam et justo duo dolores et
         </div>
         <div class="b2">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
            sed diam nonumy eirmod tempor invidunt ut labore et<br>
            dolore magna aliquyam erat, sed diam voluptua.<br>
            At vero eos et accusam et justo duo dolores et
         </div>
      </div>
   </body>
</html>

...zur Frage

wie ist mein HTML Projekt?

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

</style>

<body>

<H1>Willkommen auf meiner ersten Seite</H1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, minima rem maiores molestiae possimus sunt aperiam blanditiis. Veritatis impedit rerum, corrupti debitis veniam maxime deleniti, atque earum, aspernatur iure voluptate. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam tenetur ratione mollitia velit, quasi blanditiis ipsa amet magnam doloremque quam quod porro voluptatibus. Voluptate ipsa ratione maxime labore quo veniam?</p>

<button>login</button>

<h1>Was erwartet sie hier auf der seite?</h1>

<p>Auf dieser seite erhalten sie hilfe von unseren Fachleuten aus der pychologie <hr>wir arbeiten seit 30 Jahren mit unseren team und haben menschen aus der

Krise geholfen

</p>

<p>in unserer 1 stunden Therapie versuchen wir auf den grund ihre schweren <br>depression zu finden</p>

<hr>

<a class="mylink" href="#">Impressum</a>

<a class="mylink" href="#">Kontakt</a>

<a class="mylink" href="#">Datenschutz</a>

</footer>

</body>

</html>

...zur Frage

Wie bekomme ich es hin, das die Kästen beim verkleinern des Fensters über die gesamte Länge geht?

Ich habe bisher das:

und verkleinert sieht es so aus:

Aussehen soll es aber so:

Hier mein Code:

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
      <style>
         header {
         text-align: center;
         font-size: 3em;
         padding: 5px;
         color: #fff;
         background-color: #FFBF00;
         }
         .wrapper { display:flex }
         @media screen and (max-width:620px) {
         .wrapper {display:block }
         }
         nav {
         width:15%;
         text-align: center;
         font-size: 2em;
         padding-right: 60px;
         color: #fff;
         background-color: #819FF7;
         margin-right: 10px;
         margin-bottom: 150px;
         }
         a {color: #fff }
         li {list-style: none }
         article {
         width:70%;
         color: #BDBDBD;
         }
         aside {
         color: #fff;
         width: 15%
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #01DFD7;
         margin-bottom: 150px;
         }
         footer {
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #D8D8D8;
         color: #A4A4A4;
         }
      </style>
   </head>
   <body>
      <header><h2>Header</h2></header>
      <div class="wrapper">
           <nav>
            <ul>
               <li><a href="" target="_blank">Link 1</a></li>
               <li><a href="" target="_blank">Link 2</a></li>
               <li><a href="" target="_blank">Link 3</a></li>
               <li><a href="" target="_blank">Link 4</a></li>
            </ul>
         </nav>
         <article>
            <h3>Lorem Ipsum</h3>
               <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
               sed diam nonumy eirmod tempor invidunt ut labore et dolore
               magna aliquyam erat, sed diam voluptua. At vero eos et
               accusam et justo duo dolores et ea rebum. Stet clita kasd
               gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
               amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
               sed diam nonumy eirmod tempor invidunt ut labore et dolore
            magna aliquyam.</p>
         </article>
         <aside>
            <h2>About</h2>
            <p>Lorem ipsum dolor<br>
               sit ametr,<br>
               consecteteuer<br>
               adipiscing elit.
            </p>
         </aside>
      </div>
      <footer>
         <p>&copy; </p>
      </footer>
   </body>
</html>

...zur Frage

Automatische Zeilenumbrüche bei HTML verhindern?

Hoi, bin mit HTML Zugange und möchte einen Text verfassen. Er soll mit h1 Anfangen, wie auf dem Bild zB "01/", und dann direkt dahinter in h3 "Lorem Ipsum", oder dann der Titel des Services. Allerdings direkt dahinter und ohne Zeilenumbruch. Wie geht das?

...zur Frage

HTML Mailto Betreff und mehrere Empfänger?

Hallo zusammen,
ich habe Probleme mit einem mailto tag in html.

Eigentlich sollte ein Empfänger 1 und 2 nach dem Aktivieren dort stehen, so wie ein Betreff und Text.

<a href="mailto:__senderaddress__,?cc=newsletter@test.de?subject=Newsletter_unsubscribe;?body=Lorem%20Ipsum,%0D%0A%0D%0Adolor%20sat.">Aktivieren</a>

Mir wird nur die ganze Zeit alles flasch gesetzt

__senderadress__ ist ein Platzhalter der im Finalen verschicken durch das System ersetzt wird.

Bei dem Empfänger Feld steht gerade __senderadress__ das wird im Test auch richtig ersetzt.

Im CC Feld jedoch das "newsletter@test.de?subject=Newsletter_unsubscribe; ?body=Lorem Ipsum,; dolor sat."

Ich stehe glaube ich ein wenig auf dem Schlauch...

...zur Frage

Drupal Zeilenumbruch

Hallo Leute,

bin gerade dabei mit Drupal eine Homepage zu gestalten. Das Problem ist halt, dass wenn ich einen Text auf die Startseite schreibe dann hat er keinen Zeilenumbruch.

Beispiel:

Ist: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."

Soll: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."

Bin noch ein totaler Anfänger und habe schon gegooglet aber leider nichts gefunden.

Vielen Dank für eure Hilfe!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen