Drei DIV-Boxen nebeneinander?

Hallo, ich möchte meine Webseite übersichtlicher machen indem ich zwischen zwei Balken einen Text haben möchte, leider gelingt es mir nicht eine 3. Box hineinzubekommen, nur für die Schrift. Das erste Bild ist der jetzige Stand, das zweite Bild soll zeigen wie die Webseite aussehen sollte, das dritte ist mein php code. box_2 linke box mit den Balken, box_3 die rechte.

2 Antworten

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML

10.12.2017, 19:40

Der Quellcode ist nicht PHP sondern CSS.

Für das was Du erreichen willst brauchst Du auch CSS. PHP spielt für die Gestaltung keine Rolle. Leider hast Du keinen HTML-Code gepostet, der wäre noch relevant gewesen.

So kann ich dir nur pauschal folgenden Tipp geben:

HTML

<div class="links">inhalt link</div>
<div class="rechts">inhalt rechts</div>
<div class="mitte">inhalt mitte</div>

CSS

.links { float: left; }
.rechts { float: right; }
.mitte {}

Dadurch wird das was in der Mitte steht von den beiden anderen umgeben. Weitere Gestaltung und Inhalte sind völlig dir überlassen.

Alternative dazu: Flexbox oder CSS-Table. Siehe: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Woher ich das weiß:Berufserfahrung – mit dem Internet verbunden seit 1993

Andi1111111

Beitragsersteller

10.12.2017, 20:04

sry meinte auch css lol danke

tavkomann

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

10.12.2017, 19:34

Kannst du bitte ein lauffähiges Beispiel bei JSFiddle erstellen?

Andi1111111

Beitragsersteller

10.12.2017, 20:14

Es geht schon danke

Ähnliche Beiträge

div-class auf bestimmten Seiten ein-/ausblenden?

Ich möchte gerne mit einem php-script das die div-Box Info nur auf der Seite index.php angezeigt wird und auf allen anderen Seiten ausgeblendet wird. Wiederum möchte ich die box Breadcrumbs auf allen Seiten angezeigt haben, außer auf der index.php Seite, wie bekommen man sowas hin?

...zum Beitrag

Wie macht man eine HTML Webseite responsive?

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?

...zum Beitrag

HTML DIV Box von externer Webseite in eigene einfügen?

Ist es möglich, dass ich eine DIV Box von einer anderen Webseite z.B. von YouTube in meiner Webseite einbinde??

Vielleicht mit dem Tag "include" oder "iframe" aber damit kenne ich mich leider nicht aus.

Danke für eure Hilfe!

...zum Beitrag

Javascript geht nicht in einem von XMLHttpRequest geladenen Div?

Hallo ich versuche gerade mit XMLHttpRequest einen Div auf meiner Webseite zu aktuallisieren soweit geht das auch nur wenn ich versuche in der datei die geladen werden soll etwas mit Javascript auszuführen wird dies nicht getan. Ich habe aber überprüft das die datei geladen wird. Das was ich in JS geschrieben habe wird auch in den Div geladen nur nicht ausgeführt..
Hier meine Datei die den Div läd:

  <script language="javascript" type="text/javascript">
    function getData() {
      var xhr = new XMLHttpRequest();                 // Create XMLHttpRequest object
    
      xhr.onload = function() {                       // When response has loaded
        // The following conditional check will not work locally - only on a server
        if(xhr.status === 200) {                       // If server status was ok
          document.getElementById('load').innerHTML = xhr.responseText; // Update
        }
      };
      
      xhr.open('GET', 'sql/load.php', true);        // Prepare the request
      xhr.send();                                 // Send the request
    }
    
    setInterval(getData, 1000);
</script>

<div id='load'></div>

Hier meine Load.php

<?php
session_start();
require_once "config.php";
require_once "link_user.php";
        //Check new messages
        $test = "false";
        $sql = "SELECT * FROM msg WHERE touser='$user_name' AND readmsg='$test' LIMIT 1";
        $query = mysqli_query($db_link, $sql) or die (mysqli_error());
        $num = mysqli_num_rows($query);
        while ($row = mysqli_fetch_array($query)) {
            $chat_id = $row["chat_id"];

        }
        if($num == 1){
            
echo "<script>
var notification = new Notification('Notification title', {
    icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    body: 'Hey there! You\'ve been notified!',
   });</script>
";
        }
?>

...zum Beitrag

Von xamp auf HostEurope - Seite wird nicht korrekt dargestellt?

Guten Tag,

folgendes Problem:

Habe eine Webseite mit PHP, Bootstrap, CSS und Co. geschrieben, allerdings wurde sie jetzt nach dem Umzug von xamp auf einen Host Europe Server nicht mehr richtig angezeigt.

Es ist alles weiß mit schwarzer Schrift, Dateien wie Bilder werden nicht abgerufen. Ich dachte, es liegt vielleicht am Dateipfad. Der ist immer ungefähr "assets/css/custom.css", "assets/images/logo.png" etc, also habe ich es mit SITE_ROOT vorneweg probiert. Wieder nichts. Ich glaube, ich habe einen Denkfehler.

Könnt ihr mir vielleicht einen Rat geben?

Ich habe nur einen ftp Zugang, dementsprechend kann ich an den Einstellungen des Servers nichts ändern oder Daten einsehen.

...zum Beitrag

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.

...zum Beitrag

HTML/CSS unter Webseite riesen weißer Balken entfernen?

Hallo ich habe ein Problem bei meiner Webseite.

Ich habe unter meiner Webseite einen riesen weißen Balken der sich nicht entfernen lässt. Ich habe jeglichen Befehl probiert jedoch finde ich keine Lösung und nichts funktioniert. Hätte vielleicht jemand eine Idee wie ich den entfernen kann?

...zum Beitrag

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

...zum Beitrag

Objekte sollen die Div-Box nicht verlassen. (CSS)

Hallo!

Wie schaffe ich es, das es Objekte (Text, Bilder, etc...) nicht ihre Div-Box verlassen (also formatiert bzw. kleiner werden, wenn ich zum Beispiel das Fenster verkleiner, oder die Webseite auf dem Handy öffne.

Schonmal vielen Dank im Vorrau :)

Lg mono

...zum Beitrag

Balken in html/css hinbekommen?

Wie mache ich diese verschiedenen Balken diese weiße dunkelblau und schwarze balken?

Das ist ein bild von einer anderen webseite. Das würde ich auch gerne so für ein schulprojekt machen

...zum Beitrag

Übersichtlicher programmieren?

Ich lerne gerne wie man programmiert, bei Minecraft Plugins (in Java) bekomme ich es auch gut hin, nur bei Webseiten (HTML, CSS, JS und PHP) komme ich schnell in Schwierigkeiten da ich mit dem Code durcheinander komme und es irgendwie viel unübersichtlicher ist als bei den Minecraft Plugins wo ich mehr von der Umgebung unterstützt werde, hätte eventuell jemand einen Tipp für mich?

...zum Beitrag

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

...zum Beitrag

html: wie div boxen neben- und untereinander?

Hallo, in meiner Website sollen dienstleistungen aufgelistet werden.
Für die PC Ansicht, sollen diese (insgesamt 6) nebeneinander stehen.
Für die Tablet und Handy Ansicht sollen diese dann so umbrechen, das genug Platz ist, um sie noch zu lesen und sie nicht ineinander verschwimmen.
Ich habe jetzt hier versucht fürs Tablet drei Boxen nebeneinander und somit dann zwei Spalten zu haben, allerdings ist in jeder Ansicht jetzt alles untereinander und man muss auch noch zur Seite scrollen um den ganzen Text zu lesen (dies soll aber nicht sein).
Im Folgenden ist der Teil meiner CSS Datei:

.leistung {

padding: 15px;

margin: 15px;

}

.leistung-container {

display: flex;

flex-direction: column;

}

/* Layout für Tablet (teilweise nebeneinander, teilweise untereinander) */

@media (min-width: 25em) and (max-width: 45em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(50% - 2em);

/* Zwei Boxen nebeneinander */

}

/* Layout für PC (nebeneinander) */

@media (min-width: 45em) and (max-width: 65em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(33.33% - 2em);

/* Drei Boxen nebeneinander */

}

@media (min-width: 65em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(33.33% - 2em);

/* Drei Boxen nebeneinander */

}

Ist da irgendwas falsch?
Könnt mir da jemand helfen?
Dankeschön

...zum Beitrag

Mehrere Divs nebeneinander ohne Überlappen (HTML)

Hallo Zusammen

Ich würde gerne in meiner Webseite ein Div mit einem Inhalt links der Seite, sowie der Hauptinhalt in einem anderen Div rechts der Seite anzeigen lassen.

Das habe ich soweit auch hingekriegt. Jetzt kommt das Problem:

Bei Verkleinerung des Browserfensters überlappen sich die einzelnen Divs und ich möchte fragen wie man diese dazu zwingt sich nebeneinander einzureihen...

Freue mich auf Ratschläge,

Liebe Grüsse

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen