Ankündigung

Einklappen
Keine Ankündigung bisher.

Container und Bild nicht nebeneinander ?

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    Container und Bild nicht nebeneinander ?

    Zuletzt geändert von rootxdefiance; 07.06.2015, 17:36. Grund: Linkänderung zwecks neuem Content
    Hallo,

    ich habe durchaus wenig Html/Css Kenntnisse und habe mir mit relativ viel Aufwand eine sehr schmächtige Seite "zusammen gebastelt". Jedoch bin ich nun auf das Problem gestoßen, dass die Container nur untereinander und nicht sowohl unter, als auch nebeneinander sind. Hier bin ich irgendwie etwas überfragt, wieso dies so ist und wie ich es beheben könnte um ehrlich zu sein.

    Desweiteren sind in dem Container Link-listen, welche nummeriert von 1-x gehen und ein Icon hinter der Zahl, jedoch vor dem Text haben sollte...wobei das Bild zwar da ist, aber der Text ist halt mitten im Icon drin.


    Die Index und CSS Dateien :

    http://codepen.io/Allkind/pen/GJmEOz


    Joar...hoffe mir kann jemand dabei helfen .


    Danke im voraus und Mfg,

    Julian
    Stichworte: -
  • #2
    Hallo

    hoffe mir kann jemand dabei helfen
    Das dürfte schwierig werden.

    Zunächst benutzt du offensichtlich ein Framework wie Bootstrap. Allerdings scheinst du nur Teile daraus zu verwenden und hälst dich beim Rest auch nicht an die Regeln des Frameworks. Sowas geht gar nicht. Wenn du ein Framework verwendest solltest du auch dessen Regeln lernen und anwenden sowie es komplett benutzen. Alles andere ergibt nur einen nicht funktionierenden Murks bei dem auch niemand durchblicken kann. Bei einem Framework sind schließlich alle Vorgaben aufeinander abgestimmt. Also komplett oder gar nicht, grade als Anfänger.

    Ähnliches gilt für Codepen oder ähnliche Angebote. Auch deren Anwendung musst du lernen. In das HTML-Fenser gehören zum Beispiel nur Angaben aus dem body-Bereich. Wenn du dort Angaben aus dem head-Bereich einfügst ergibt das einen fehlerhaften HTML-Code, der schon von sich aus zu Problemen führt. Darauf weist Codepen durch das rot umrandete Ausrufezeichen auch hin, das du offensichtlich ignorierst.

    Und das die Icons überhaupt nicht angezeigt werden solltest du eigentlich selbst sehen. Wie sollen wir dir helfen wenn das Problem aus deinen Angaben überhaupt nicht nachvollziehbar ist?

    Gruss

    MrMurphy

    Kommentar

    • #3
      Ehrlich gesagt finde ich die Vorgehensweise wie manche Ihre Probleme darstellen auch grenzwertig. Hier wird irgendein Framework genommen, per C&P ein Prorgrammbeispiel eingepflanzt und wenn es dann nicht klappt nach Hilfe gerufen.

      Der gepostete Code liegt bei ca. 750 Zeilen, soll man den ohne Vergütung durcharbeiten, hier sind Deine Erwartungen wohl etwas überzogen.

      Wenn bei mir zwei div´s nicht nebeneneinander stehen, breche ich das runter auf 6 zeilen HTML und etwas CSS und versuche es damit, wenn ich es dann nicht schaffe frage ich hier nach und die Lösung wird sicher kurzfristig herbei geführt.

      Im Übrigen weiß ich auch nicht welches icon angezeigt werden sollte, es ist ja kein img definiert.
      • 1 Likes

      Kommentar

      • #4
        Zuletzt geändert von MrMurphy; 07.06.2015, 14:05.
        Hallo,

        da keine konkrete Hilfe möglich ist habe ich als Beispiel mal eine Seite mit aktuellem HTML und CSS erstellt, vielleicht hilft dir die ja weiter.

        Zunächst einmal mit einem Icon-Font, hier Font-Awesome:

        Code:
        <!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Icon in li-Element</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>
      @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
         display: flex;
         flex-wrap: wrap;
      }
      section {
         width: 15rem;
         border: 1px solid #9FD5D0;
         border-radius: 0.5rem  0.5rem 0 0;
         margin: 0.5rem;
      }
      section h3 {
         background-color: #9FD5D0;
         padding: 0.5rem;
         border-radius: 0.5rem  0.5rem 0 0;
         margin: 0;
      }
      li {
         list-style-type: decimal-leading-zero;
         padding-left: 1rem;
      }
      li:before {
         font-family: "FontAwesome";
         content: "\f0ac";
         margin-right: 1rem;
      }
   </style>
</head>
<body>
   <section>
      <h3>Stadt</h3>
      <ol>
         <li>Hamburg</li>
         <li>Bremen</li>
         <li>Cuxhaven</li>
         <li>Kiel</li>
         <li>Flensburg</li>
         <li>Hannover</li>
      </ol>
   </section>
   <section>
      <h3>Land</h3>
      <ol>
         <li>Niederlande</li>
         <li>Schweiz</li>
         <li>Neuseeland</li>
         <li>Kanada</li>
         <li>Deutschland</li>
         <li>Norwegen</li>
      </ol>
   </section>
   <section>
      <h3>Fluss</h3>
      <ol>
         <li>Mississippi</li>
         <li>Elbe</li>
         <li>Donau</li>
         <li>Seine</li>
         <li>Wolga</li>
         <li>Ebro</li>
      </ol>
   </section>
   <section>
      <h3>Obst</h3>
      <ol>
         <li>Birne</li>
         <li>Banane</li>
         <li>Kirsche</li>
         <li>Kiwi</li>
         <li>Mandarine</li>
         <li>Erdbeere</li>
      </ol>
   </section>
</body>
</html>
        Und dann mit einer Hintergrundgrafik:

        Code:
        <!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Icon in li-Element 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>
      @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
         display: flex;
         flex-wrap: wrap;
      }
      section {
         width: 15rem;
         border: 1px solid #9FD5D0;
         border-radius: 0.5rem  0.5rem 0 0;
         margin: 0.5rem;
      }
      section h3 {
         background-color: #9FD5D0;
         padding: 0.5rem;
         border-radius: 0.5rem  0.5rem 0 0;
         margin: 0;
      }
      li {
         list-style-type: decimal-leading-zero;
         padding-left: 1.5rem;
         background-image: url("http://pixabay.com/static/uploads/photo/2013/12/06/19/07/strawberry-224306_640.jpg");
         background-repeat: no-repeat;
         /* Von den folgenden drei Möglichkeiten jeweils die gewünschte als letzte eintragen */
         background-size: 100% 100%; /* Vollbild, aber verzerrt */
         background-size: cover; /* beschnittenes Bild ohne Verzerrung */
         background-size: contain; /* komplettes Bild ohne Verzerrung, aber mit Rand */
      }
   </style>
</head>
<body>
   <section>
      <h3>Stadt</h3>
      <ol>
         <li>Hamburg</li>
         <li>Bremen</li>
         <li>Cuxhaven</li>
         <li>Kiel</li>
         <li>Flensburg</li>
         <li>Hannover</li>
      </ol>
   </section>
   <section>
      <h3>Land</h3>
      <ol>
         <li>Niederlande</li>
         <li>Schweiz</li>
         <li>Neuseeland</li>
         <li>Kanada</li>
         <li>Deutschland</li>
         <li>Norwegen</li>
      </ol>
   </section>
   <section>
      <h3>Fluss</h3>
      <ol>
         <li>Mississippi</li>
         <li>Elbe</li>
         <li>Donau</li>
         <li>Seine</li>
         <li>Wolga</li>
         <li>Ebro</li>
      </ol>
   </section>
   <section>
      <h3>Obst</h3>
      <ol>
         <li>Birne</li>
         <li>Banane</li>
         <li>Kirsche</li>
         <li>Kiwi</li>
         <li>Mandarine</li>
         <li>Erdbeere</li>
      </ol>
   </section>
</body>
</html>
        In der Praxis können den li-Elementen natürlich auch unterschiedliche Icons zugewiesen werden.

        Gruss

        MrMurphy
        • 1 Likes

        Kommentar

        • #5
          also als fiddle
          http://jsfiddle.net/d20s2mto/

          was genau geht nicht?

          Kommentar

          • #6
            Zitat von MrMurphy Beitrag anzeigen
            Zunächst benutzt du offensichtlich ein Framework wie Bootstrap. Allerdings scheinst du nur Teile daraus zu verwenden und hälst dich beim Rest auch nicht an die Regeln des Frameworks. Sowas geht gar nicht.


            Wie gesagt "zusammen gebastelt". Wenn ich es besser könnte hätte ich es gemacht, entschuldigung. Danke im übrigen für die Mühe, dies erschreckender weise so schnell nachzubauen. Jedoch fehlen hier einige Dinge, wie z.B das Scrolling in den Boxen, der Header/Footer usw. Deshalb nichts für ungut, wenn ich sage, dies selbst zu reimplementieren kostet mich entweder zuviel Zeit oder ich schaffe es nicht. Im schlimmsten fall beides.

            Zitat von kaminbausatz Beitrag anzeigen
            Ehrlich gesagt finde ich die Vorgehensweise wie manche Ihre Probleme darstellen auch grenzwertig. Hier wird irgendein Framework genommen, per C&P ein Prorgrammbeispiel eingepflanzt und wenn es dann nicht klappt nach Hilfe gerufen.

            Der gepostete Code liegt bei ca. 750 Zeilen, soll man den ohne Vergütung durcharbeiten, hier sind Deine Erwartungen wohl etwas überzogen.

            Im Übrigen weiß ich auch nicht welches icon angezeigt werden sollte, es ist ja kein img definiert.
            Es ist durchaus nett von dir, dass man(n) sich versucht zu beteiligen, sofern den auch konstruktive Kritik dargelegt wird, wie es z.B MrMurphy in seinem ersten Post getan hat. Grenzwertig finde ich eher, dass Sie mir unterstellen ich hätte bei dem kleinsten Problem hier direkt um hilfe gebeten.

            Ich als blutiger Anfänger habe durchaus einige Stunden damit verbracht, den Fehler selbst zu finden, die CSS und Index Dateien nach Tutorials und oder Code Schnipsel umzuschreiben und zu testen, wie jedoch ersichtlich ohne Erfolg. Im übrigen ja es sind ca. 750 Code Zeilen insgesamt, welche ohne Vergütung durchzusehen wären. Hier steht jedoch jedem frei, ob dieser die Zeit und Lust hat, dies ohne Bezahlung zu tun oder ebend nicht.

            Das Icon wurde über den img src Befehl eingefügt und da dieser nicht richtig funktioniert hat, habe ich diesen vor dem Post wieder entfernt. Aber Sie haben recht, diesen hätte ich vermutlich drin lassen sollen. Entschuldigung.
            Zitat von moma Beitrag anzeigen
            also als fiddle
            http://jsfiddle.net/d20s2mto/

            was genau geht nicht?
            Funktionieren tut es, dies ist jedoch von MrMurphy und nicht von mir. Meins ist erneut mit ein paar von den Kritiken berücksichtigt unter http://codepen.io/Allkind/pen/GJmEOz ersichtlich.

            Kommentar

            • #7
              sorry, hab dich dann wohl verwechselt, war dann ja unnötig -> out.

              Kommentar

              • #8
                Meine letzten 2 Absätze waren durchaus konstruktiver Natur. Ich finde aber gut, dass Du immerhin einige Stunden damit verbracht hast. Andere beschäftigen sich einige Monate damit... Mein Rat, erst Grundlagen lernen, dann Bootstrap...

                Kommentar

                • #9
                  Thread kann geschlossen werden. Habe die Fehler nach einem hin und her selbst gefunden.

                  Kommentar

                  • #10
                    Würdest Du die Fehler bitte auch posten, für den Fall, daß jemand auf der Suche nach einem ähnlichen Problem auf dieses Thread stößt?!
                    Competence-Center -> Enjoy the Informatrix
                    PHProcks! • Einsteiger freundliche Tutorials • PreComposed Packages

                    Kommentar

                    • #11
                      Zitat von Arne Drews Beitrag anzeigen
                      Würdest Du die Fehler bitte auch posten, für den Fall, daß jemand auf der Suche nach einem ähnlichen Problem auf dieses Thread stößt?!
                      bei mir ist auch der ursprüngliche code weg...

                      Kommentar

                      • #12
                        Ja, hat er gestern geändert, zudem noch in einen Link, der ins Leere läuft. Zumindest bei mir...
                        Is' nervig sowas...
                        Competence-Center -> Enjoy the Informatrix
                        PHProcks! • Einsteiger freundliche Tutorials • PreComposed Packages

                        Kommentar

                        Vorherige Weiter
                        Lädt...
                        X