Ankündigung

Einklappen
Keine Ankündigung bisher.

3 divs nebeneinander - aber nur 2 Floats

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 3 divs nebeneinander - aber nur 2 Floats

    Hi, ich will hier kein Thema aufgreifen was schon in google in Massen zu finden wäre. Mit floaten und clearfix arbeite ich auch zuverlässig - aber hier habe ich etwas, was scheinbar nicht geht.

    und zwar LINKS ein Bild - RECHTS ein Bild - und in der Mitte ein <h1>-Text.

    Ich habe versucht den <h1>-Text in ein eigenes Div zu packen und zu floaten ... aber dann steht der nicht mehr mittig.
    Dann hab ich versucht ALLES in ein eigenes Div zu packen ... geht genauso wenig.
    Hab also schon einige Variationen hinter mir.

    Aber was geht nicht?
    Links das Bild muss mit bottom und einem Minuswert positioniert werden ... Ok ...
    dann kommt der Textteil ... und der ist ja nicht gefloatet
    und deshalb kommt das float-rechts-bild unterhalb des bottom mit seinem Top - oder wie man das auch immer erklären soll:


    HTML-Code:
    #header {
        width: 100%;
        height: 20%;
        max-height: 150px;
        overflow: hidden;
    }
    
    #header .headerinfotext {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: auto;
    }
    
    #header h1{
        display: inline-block;
        font-size: 2.3em;
        color: #FF0000;
        margin-top: 40px;
    }
    
    #header .headerimage img {
        float: left;
        height: 100%;
        max-height: 100px;
        margin-left: 80px;
        position: relative;
        bottom: -45px;
    }
    
    
    #header .logo img {
        height: 100%;
        float: right;
        max-height: 150px;
        margin-right: 40px;
        position: relative;
        top: -90px;
    }


    Der nachfolgende Teil ist eigentlich relativ egal, weil ich hier schon etliche Variationen durchgespielt habe. So funktioniert er jedenfalls am besten.
    Ich habe auch schon ein Div um alles gelegt ... genauso sch....

    HTML-Code:
      <div id="header">
    
    <div>
        <div class="headerimage"><img src="<?php print(BILDERPFAD.'/header/baerli1.gif');?>"></div>
    
        <div class="headerinfotext">
                <h1>Hier steht eine Zeile mit Bla und Blubb ... <br/> und hier was für Gummibärchen, die auch blubbern ...  </h1>
        </div>
    
    
        <div class="logo"><img src="<?php print(BILDERPFAD.'/header/header-logo.png');?>"></div>
    </div>
    </div>

    Vielleicht fällt ja jemandem was auf ... (ausser meine Rechtschreibfehler )

    Eine schöne Programmiernacht an alle!





  • #2
    Vielleicht fällt ja jemandem was auf
    HTML-Code:
    <div id="header"> <div id="header"> ...
    Eine id darf es nur einmal geben.
    The string "()()" is not palindrom but the String "())(" is.

    Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
    PHP.de Wissenssammlung | Kein Support per PN

    Kommentar


    • #3
      Ne, Sorry ... das hab ich scheinbar nur hier 2x reinkopiert. Mit PHP Storm kopiert er mir keine Formatierungen, da hab ich das in Notepad - und hier nochmal überschreiben. Hab da wohl nicht richtig angesetzt beim überschreiben.
      Habs gleich geändert, damit nicht nochmal jemand auf den Falschen weg geführt wird

      Kommentar


      • #4
        Wenn es keine Rolle spielt würde ich alles in eine div packen mit position: absolute und die anderen Divs drinnen mit position: relative positionieren. Könnte man vielleicht noch probieren, wenn alle Stricke reißen. Ich mein damit müsste man auch ein Responsive Design hinbekommen.

        Kommentar


        • #5
          Flexbox eignet sich auch sehr gut dafür.

          HTML-Code:
          .flexbox {
          display: flex; justify-content: space-between; flex-wrap: wrap;
          }
          HTML-Code:
          <div class="flexbox">
          <img src="bild.jpg" alt="bild">
          <h1>Mitte</h1>
          <img src="bild.jpg" alt="bild">
          </div>

          Kommentar


          • #6
            Geht leider auch nicht ... sch... drauf - ich hab die Schn.... voll. Ich mach das alles in ein Bild über 1000px Breite und lass das einfach prozentual anpassen.
            Thema erledigt - technisch nicht möglich. Ich sitz jetzt 2 Tage um 3 Divs nebeneinander zu bekommen ... was soll denn das bitte ....
            Der Sch... dr... will einfach nicht nebeneinander stehen ... jetzt ist schluss ...
            Gute Nacht an alle ...

            Kommentar


            • #7
              Hi,
              ich denke mal die flexbox ist genau der richtige Ansatz,
              musste mich auch mal ein wenig spielen aber das klappt bei mir mal und tut das du glaub ich willst
              HTML-Code:
              <div style="display: flex;">
                  <div style="width: 33%;">
                      <img src="http://lorempixel.com/400/200/" style="max-width:100%;">
                  </div>
                  <div style="width: 33%; text-align: center;">
                      <h1>Hier steht eine Zeile mit Bla und Blubb </h1>
                  </div>
                  <div style="width: 33%; text-align: right;">
                      <img src="http://lorempixel.com/400/200/" style="max-width:100%;">
                  </div>
              </div>

              Kommentar


              • #8
                Hallo,

                für die Anordnung sind float oder Flexbox geeignet.

                float ist ausgereifter, aber die Möglichkeiten sind sehr eingeschränkt.

                Flexbox zickt in einigen Browsern noch rum, ist aber zukunftsträchtiger, da es viel mehr Möglichkeiten unterstützt, die grade in Zeiten von Responsive Design bei Smartphones und Tablets sinnvoll sind.

                Auch wenn float ähnlich wie früher Tabellen zum Layouten verwendet wird, ist es überhaupt nicht dafür gedacht. Es gab halt nichts besseres, deshalb musste man zum sinnvollsten Notnagel greifen. Flexbox ist hingegen direkt für ein flexibles Layout mit Responsive Design entwickelt worden.

                Von daher ist es meiner Ansicht nach sinnvoller Layouts mit Flexbox zu erstellen. Wobei float nicht gleich schlecht oder böse ist, sondern im Prinzip einfach anders.

                Ich biete mal jeweils eine Lösung in extra Beiträgen an, da die Textlänge im Forum wohl beschränkt ist.

                Wobei ich HTML5 / CSS3 verwende und den Inhalt und das Layout wie heutzutage sinnvoll so weit wie möglich trenne.

                Gruss

                MrMurphy

                Kommentar


                • #9
                  Hallo

                  mit Flexbox könnte die Lösung folgendermaßen aussehen:

                  HTML:

                  Code:
                  <header>
                     <div>
                        <img src="http://lorempixel.com/160/100/sports/">
                     </div>
                     <div>
                        <h2>Header flexbox</h2>
                     </div>
                     <div>
                        <img src="http://lorempixel.com/160/100/nature/">
                     </div>
                  </header>
                  Wobei der div um die Überschrift auch entfernt werden kann, wenn im Mittelteil keine zusätzlichen Elemente eingefügt werden sollen.

                  Das entscheidende CSS könnte dann folgendermaßen aussehen:

                  Code:
                        header {
                           display: flex;
                           justify-content: space-between;
                        }
                        header :nth-child(1)
                        header :nth-child(3) {
                           flex: 0 0 160px;
                        }
                  Kurz und übersichtlich.

                  Da grade Anfänger immer wieder Schwierigkeiten haben eine korrekte komplette Webseite zu erstellen noch der komplette Inhalt einer Webseite mit zusätzlichen erforderlichen und sinnvollen Angaben:

                  Code:
                  <!DOCTYPE html>
                  <html lang="de">
                  <head>
                     <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
                     <title>Header anordnen 01</title>
                     <meta name="description" content="HTML5, CSS3">
                     <meta name="viewport" content="width=device-width, initial-scale=1.0">
                     <!-- Um alte IE HTML5-tauglich zu machen -->
                     <!--[if lt IE 9]>
                        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                     <![endif]-->
                     <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
                     <style>
                     @media all {
                        /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
                        header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
                           display: block;
                        }
                        * {
                           box-sizing: border-box;
                        }
                        html {
                           font-size: 120%;
                        }
                        body {
                           padding: 0;
                        }
                        header {
                           display: flex;
                           justify-content: space-between;
                        }
                        header img {
                           display: block;
                           max-width: 100%;
                        }
                        header :nth-child(1)
                        header :nth-child(3) {
                           flex: 0 0 160px;
                        }
                     }
                     /* Vorlage zum Kopieren für Media-Query */
                     @media only screen and (max-width: 0px) {
                     }
                     </style>
                  </head>
                  <body>
                  <header>
                     <div>
                        <img src="http://lorempixel.com/160/100/sports/">
                     </div>
                     <div>
                        <h2>Header flexbox</h2>
                     </div>
                     <div>
                        <img src="http://lorempixel.com/160/100/nature/">
                     </div>
                  </header>
                  </body>
                  </html>
                  Gruss

                  MrMurphy

                  Kommentar


                  • #10
                    Hallo

                    mit float könnte die Lösung folgendermaßen aussehen:

                    Das HTML ist genau das gleiche wie bei der Flexbox-Lösung:

                    Code:
                    <header>
                       <div>
                          <img src="http://lorempixel.com/160/100/sports/">
                       </div>
                       <div>
                          <h2>Header float</h2>
                       </div>
                       <div>
                          <img src="http://lorempixel.com/160/100/nature/">
                       </div>
                    </header>
                    Wobei der div um die Überschrift auch entfernt werden kann, wenn im Mittelteil keine zusätzlichen Elemente eingefügt werden sollen.

                    Das entscheidende CSS ist aber schon viel aufwändiger:

                    Code:
                          header:before,
                          header:after,
                          .clearfix:before,
                          .clearfix:after {
                             content: "";
                             display: table;
                          }
                          header:after,
                          .clearfix:after {
                             clear: both;
                          }
                          header>* {
                             float: left;
                          }
                          header h2 {
                             text-align: center;
                          }
                          header :nth-child(1)
                          header :nth-child(3) {
                             width: 160px;
                             margin: 0;
                          }
                          header :nth-child(2) {
                             width: calc(100% - 320px);
                          }
                    Da grade Anfänger immer wieder Schwierigkeiten haben eine korrekte komplette Webseite zu erstellen noch der komplette Inhalt einer Webseite mit zusätzlichen erforderlichen und sinnvollen Angaben:

                    Code:
                    <!DOCTYPE html>
                    <html lang="de">
                    <head>
                       <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
                       <title>Header anordnen 02</title>
                       <meta name="description" content="HTML5, CSS3">
                       <meta name="viewport" content="width=device-width, initial-scale=1.0">
                       <!-- Um alte IE HTML5-tauglich zu machen -->
                       <!--[if lt IE 9]>
                          <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                       <![endif]-->
                       <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
                       <style>
                       /* Clearfix - für Float, falls erforderlich */
                       @media all {
                          header:before,
                          header:after,
                          .clearfix:before,
                          .clearfix:after {
                             content: "";
                             display: table;
                          }
                          header:after,
                          .clearfix:after {
                             clear: both;
                          }
                       }
                       @media all {
                          /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
                          header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
                             display: block;
                          }
                          * {
                             box-sizing: border-box;
                          }
                          html {
                             font-size: 120%;
                          }
                          body {
                             padding: 0;
                          }
                          header>* {
                             float: left;
                          }
                          header h2 {
                             text-align: center;
                          }
                          header img {
                             display: block;
                             width: 160px;
                          }
                          header :nth-child(1)
                          header :nth-child(3) {
                             width: 160px;
                             margin: 0;
                          }
                          header :nth-child(2) {
                             width: calc(100% - 320px);
                          }
                       }
                       /* Vorlage zum Kopieren für Media-Query */
                       @media only screen and (max-width: 0px) {
                       }
                       </style>
                    </head>
                    <body>
                       <header>
                          <div>
                             <img src="http://lorempixel.com/160/100/sports/">
                          </div>
                          <div>
                             <h2>Header float</h2>
                          </div>
                          <div>
                             <img src="http://lorempixel.com/160/100/nature/">
                          </div>
                       </header>
                    </body>
                    </html>
                    Gruss

                    MrMurphy

                    Kommentar


                    • #11
                      Hi, danke für Deinen Beitrag ....
                      mit der Bildvariante konnte ich mich nicht anfreunden und habe einfach nochmal eine Nacht drüber geschlafen.
                      Vor etwa 30 Min. hab ich den gesamten Headerbereich gelöscht und neu aufgebaut. Ohne Probleme. Wo das Problem schlussendlich gelegen ist kann ich nicht sagen,
                      aber so bin ich es gewohnt.

                      Hier der funktionierende Code:

                      HTML-Code:
                      #header {
                          width: 100%;
                          height: 25%;
                          max-height: 150px;
                          overflow: hidden;
                      }
                      
                      #header .headerbox {
                          width: 33%;
                          max-height: 100%;
                          float: left;
                          /*position: relative;*/
                      }
                      
                      #header .headerimage img {
                          margin-left: 20%;
                          height: 100%;
                          max-height: 150px;
                          /*position: absolute;
                          bottom: 0;*/
                      }
                      
                      #header .headerinfotext {
                          margin-left: auto;
                          margin-right: auto;
                          text-align: center;
                          z-index: 1000;
                      }
                      
                      #header h1{
                          display: inline-block;
                          font-size: 2.1em;
                          color: #999933;
                          margin-top: 7%;
                      }
                      
                      #header .logo img {
                          float: right;
                          height: 100%;
                          max-height: 150px;
                          margin-right: 20%;
                      }
                      und hier das html dazu:

                      HTML-Code:
                      <div id="header">
                          <div class="headerbox"><div class="headerimage"><img src="<?php print(BILDERPFAD.'/header/k_logos/'.$kleineheaderlogos[0]);?>"></div></div>
                          <div class="headerbox"><div class="headerinfotext"><h1>Überschrift 1 ... bla Blubb<br/>und noch ein Text darunter... bla blubb</h1></div></div>
                          <div class="headerbox"><div class="logo"><img src="<?php print(BILDERPFAD.'/header/logo/header-logo-'.$cssfarbwahl.'.png');?>"></div></div>
                      </div>
                      Also alles wieder im grünen Bereich

                      Manchmal ist es besser alles komplett neu aufzubauen als Tagelang einen Fehler zu suchen!

                      Na dann einen sonnigen heute Wird ja wieder ein Wetter zum schmelzen!

                      Kommentar

                      Lädt...
                      X