HTML Texte nebeneinander positionieren?

Ich erstelle zum ersten mal eine Website und bisher ging auch alles gut. Aber jetzt will ich zwei Texte nebeneinander haben. Aber wirklich etwas längere Texte, nicht nur eine Zeile oder so.

Dazu erstellt man doch eigentlich Container (mit div) oder? Ich dachte, dann richtet man den einen einfach nach rechts aus und schon geht das. Stimmt das? Geht das auch einfacher?

Und wie lautet dann der genaue Code/Quelltext?

4 Antworten

qugart

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

PC, Computer

17.07.2018, 13:56

Das geht z.B. so:

https://www.html.de/threads/2-contents-nebeneinander.34564/

paulfragtgf

Fragesteller

17.07.2018, 14:00

Danke. Ich hab von CSS noch nicht viel Ahnung.

Heißt, ich schreibe die ganze Deklaration (Style usw) in <head> und der eigentliche Text kommt dann in den <body>?

qugart

17.07.2018, 14:03

@paulfragtgf

Nimm Posting #5 und erstze jeweils das CONTENT1 und CONTENT2 durch deine Texte.

germanils

17.07.2018, 14:17

Ist machbar, aber technisch veraltet. Sowas macht man heutzutage besser mit CSS flex oder grid.

qugart

17.07.2018, 14:20

@germanils

Jo. EIne sehr schnelle Google-Suche erbrachte halt das als ersten Treffer.

dannyotti

17.07.2018, 19:11

Wenn du generell noch nicht all zu gut bewandert bist, würde ich dir Bootstraps raten. Das ist ein CSS-Framework und macht alles "schöner", ohne dass du viel machen musst.

Bootstraps hat ein Grid system, womit du elemente direkt nebeneinander setzen kannst. Hie rkannst du auch angeben, wann die Elemente, die nebeneinander sind, untereinander angezeigt werden sollen (Handy).

https://getbootstrap.com/docs/4.0/layout/grid/

Ansonsten zählt, übern üben üben;)

Woher ich das weiß:Studium / Ausbildung – Systemadministrator und Softwareentwickler

verreisterNutzer

17.07.2018, 14:04

float braucht man heutzutage nicht mehr nutzen, es gibt bereits einfachere und weitaus mächtigere Methoden, siehe:
https://css-tricks.com/snippets/css/a-guide-to-flexbox (dynamische Layouts)

und

https://css-tricks.com/snippets/css/complete-guide-grid (fixe Layouts)

Bevor du dich direkt mit CSS beschäftigst, solltest du HTML (Tags, Syntax und Semantik) auswendig kennen.

Woher ich das weiß:Berufserfahrung

germanils

17.07.2018, 14:14

Die zwei von mir am häufigsten genutzten CSS-Webseiten :-D

In dem Fall würde aber CSS "columns" wohl ausreichen.

verreisterNutzer

17.07.2018, 14:20

@germanils

Hach, wie ich die Columns immer vergesse :D Danke für die Erinnerung!

germanils

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

17.07.2018, 14:15

Es gibt diverse Möglichkeiten, eine einfache ist die CSS-Anweisung "Columns":

https://css-tricks.com/almanac/properties/c/columns/

Das ist allerdings eher etwas für fortlaufende Texte.

Für 2 getrennte Spalten schau Dir mal die Antwort von [Name entfernt] an.

Woher ich das weiß:Berufserfahrung

Ich habe in einem div Container zwei div Container nebeneinander.

Wenn man die Webseite vom Handy aus öffnet, sollen die zwei div Container welche nebeneinander sind übereinander angezeigt werden, ansonsten sieht der Text echt schlecht aus, wie kriege ich das hin?

...zur Frage

CSS div container neben img in der selben Zeile?

Ich wollte ein Bild neben einem Div-container in der obersten Zeile platzieren, habe jedoch keinen Weg gefunden, kann mir jmd helfen? Danke! :^)

...zur Frage

HTML/CSS 2 Bilder nebeneinander?

Ich würde gerne in HTML mit CSS 2 bilder nebeinander positionieren. Beide sind in einer DIV BOX... Siehe das Bild im Anhang..

...zur Frage

wozu braucht man div? (HTML)

Hallo,

beschäftige mich momentan bisschen mit html. Mir bereiten diese Positions und div container Probleme.

Also meine frage lautet wofür braucht man denn Div container?

man kann eine Webseite doch auch einfach ohne Div container aufbauen. also man setzt für jedes Element die Position absolute und gibt dann mit top und left die genaue Position ein, wo sich ein Element befinden soll.

Hoffe ihr versteht mich.

Danke im voraus

...zur Frage

Wie kann man ein festes Bild über einem div oder header in css anzeigen lassen ohne, dass es sich in diesem Container befindet?

Hallo,

ich bin aktuell dabei meine eigene kleine Website mit HTML und CSS zu gestalten und bin auf ein Problem gestoßen. Ich möchte mein Logo über einem Header oder Div anzeigen wie es unten auf dem Bild auch gezeigt ist. Ich habe versucht das Bild in den Container zu verschieben und dann versucht es mit den Display Typen flex und grid zu positionieren. Leider wird entweder das Bild an eine falsche stelle verschoben oder meine Links werden falsch positioniert (Siehe Bild 2). Hat jemand eventuell eine Lösung wie ich das mache ohne das Bild in den Container zu verschieben oder das Bild obwohl es in dem Container ist statisch zu positionieren, ohne dass es von den Positionen der Links beeinflusst wird.

...zur Frage

Was ist ein div-Tag und welche div-Tags gibt es?

Hallo zusammen,

leider habe ich das div-Tag noch nicht ganz verstanden. Bisher ist mir nur verständlich, dass es sich beim div-Container um eine Art "Box" handelt, in der man Texte und sonstiges hinzufügen kann.

Kann mir jemand erklären, welche div-Tags es noch gibt (z.B. div-class, id, etc.) und was sie bedeuten?

Hat jemand eventuell einen Link zur einer Webseite, in der alle div-Tags und ihre zugehörige Funktionen aufgelistet sind?

Leider habe ich diesbezüglich nicht viel im Internet gefunden.

...zur Frage

Webseiten Aufbau...Div Blöcke nebeneinander?

Hallo

Ich bin dabei eine Seite aufzubauen die aus mehreren Div Blöcken besteht ...Siehe Bild

Ich stehe vor einem Problem ...wie schaffe ich es drei Div Blöcke nebeneinander zu positionieren ....

div.Navigation | div.Content | div.Informationen

...kann mir da jemand helfen

Das ganze mache ich in ASP.NET ...sollte aber eigentlich egal sein weil das ja nur mit HTML und CSS zu tun haben muss

gruß .w.t

...zur Frage

CSS in neue Zeile springen?

Hallo,

ich habe ein html Dokument in folgender Form:

<html>
<head>
</head>
<body>
    <div class="Class1">
        <h1 class=user_caption>Caption</h1>
        <section class="name_liste">
            <div class="name blau">
                <h3>hallo</h3>
            </div>
            <div class="name gelb">
                <h3>hallo1</h3>
        
            </div>
            <div class="name grün">
                <h3>hallo2</h3>
                
            </div>
            <div class="name rot">
                <h3>hallo3</h3>
                
            </div>
            <div class="name pink">
                <h3>hallo4</h3>
                
            </div>
            <div class="name weiß">
                <h3>hallo5</h3>
                <div></div>
            </div>
        </section>
</body>
</html>

nur so grob. ich möchte dass blau gelb und grün in einer reihe angezeigt werden und dann darunter rot pink und weiß. Ich habe schon probiert bei grün ein flex-wrap zu machen, aber egal wo ich den wrap versuche, nirgends klappt es. Habe schon überlegt ob es daran liegt, dass die seite faktisch genug platz hat, alle diese container in einer zeile anzuzeigen aber es ist doch irgendwie möglich, diese 6 elemente in 2x3 aufzuteilen.

habe als basis in css zumindest: name_liste { display: inline-flex }

MfG

...zur Frage

Boostrap: Bild über ganze Breite des Browserfensters strecken?

Es ist vielleicht eine dumme Frage, aber ich kriege es nicht hin (kenne mich nicht aus mit Bootstrap):
Man soll ja laut Bootstrap-Anleitung seine Elemente in ein div stecken, das entweder die Klasse "container" oder "container-flui" hat. Ich wollte die Klasse "container" benutzen, weil ich nicht will, dass meine Texte über die ganze Breite gehen, habe aber gleichzeitig ein paar Bilder, die über die gesamte Breite des Browserfenster gehen sollen, was mit "container" aber nicht zu funktionieren scheint. Mit container-fluid schon, aber dann gehen auch die Texte über die ganze Breite. Und den Texten einfach eine max-width und margin: 0 auto zu geben scheint auch nicht zu funktionieren. Noch eine Info: ich habe den Texten und Bildern col-md-12 gegeben.

Kann mir jemand sagen, wie man das macht? (Mit Bootstrap Bilder über die ganze Breite strecken, aber Texte nicht?)

Vielen Dank im Voraus

...zur Frage

Mit Java eine Website auslesen?

Hallo, Ich suche eine Methode in Java, welche Texte von Internetseiten auslesen kann (z.B. von Zeile xx bis xy) und diese in einem String abspeichert. Das Programm soll aber nicht den Quelltext auslesen, sondern den "fertigen" Text.

...zur Frage

Html div anordnen?

Hallo, ich habe mehrere Container, welche nebeneinander, bzw. untereinander platziert

werden sollten. Das problem liegt darin, dass wenn ein Container zu groß ist werden bei den kleineren Container platz gelassen. Wie kann man das vermeiden?

...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

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

...zur Frage

CSS float left und right?

Ich habe drei Div-Container welche nebeneinander sein sollen. wie mache ich das? gibt ja float right und float left aber kein float center oder so ähnlich.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen