zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Elemente nebeneinander (Float)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.06.2015, 17:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.06.2015
Beiträge: 2
JiniBla befindet sich auf einem aufstrebenden Ast
Standard 3 Elemente nebeneinander (Float)

Hallo

Zunächst: Ich bin noch ein ziemlicher Anfänger, aber lernwillig!

Ich möchte gerne drei Elemente nebeneinander in einer Reihe haben. Dass das grds durch float geht weiß ich, aber ich bekomme es nicht hin.

Zum Beispiel sollte es so aussehen:

-----------------------------------------IMPRESSUM--------------------------------

Mein Code dazu:

Code:
<hr style="float: left; border: solid #00ffff 3px; background-color: #0060a2; height: 10px; width: 500px; text-align: left;" />

<div class="float:left;">
<div class="uberschrift">IMPRESSUM</div>
</div>

<hr style="float: left; border: solid #00ffff 3px; background-color: #0060a2; height: 10px; width: 500px; text-align: left;" />
Die ersten zwei Elemente sind brav nebeneinander. Aber die zweite Linie (also das Dritte Element) ist in der Reihe darunter. Je nachdem ob ich float left oder right eingebe halt rechts oder links.

Wie bekomme ich das nach oben in die gleiche Reihe?

Gibt es außerdem eine Möglichkeit eine Art Abstandhalter zwischen die einzelnen Elemente zu packen? Wenn ich zB 1cm Luft immer dazwischen haben möchte?

Ich bedanke mich bereits jetzt vielmals für eure Antworten!
Viele Grüße

Janine
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.06.2015, 17:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

die Linien links und rechts des Textes sind reine Layoutelemente. Deshalb gehören sie nicht in den body-Bereich sondern werden per CSS erzeugt.

Außerdem sollten sie keine feste Breite haben sondern sich flexibel anpassen.

Eine Lösung könnte zum Beispiel folgendermaßen aussehen:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Text in Linie</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>
      /* 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;
      }
      h1 {
        text-align: center;
        width: 90%; 
        margin-left: auto;
        margin-right: auto;
        display: table;
        border-collapse: collapse;
        white-space: nowrap;
      }
      h1::before, h1::after {
        content: "";
        display: table-cell;
        width: 50%;
        background-image: linear-gradient(to right, black 50%, transparent 50%);
        background-position: 0 50%;
        background-repeat: repeat-x;
        background-size: 0.5rem 0.1rem;
      }
      h1::before {
        border-right: 1.5rem solid transparent;
      }
      h1::after {
        border-left: 1.5rem solid transparent;
      }
      p {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
      }
   </style>
</head>
<body>
   <article>
      <h1>Impressum</h1>
      <p>Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!</p>
      <h1>Kurz</h1>
      <p>Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören.</p>
      <h1>Was auch immer lang</h1>
      <p>Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag. Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte: Anscheinend gab es keinen anderen Ausweg aus diesem kleinen Hof als den Durchgang, durch den er gekommen war. Die Schritte wurden lauter und lauter, er sah eine dunkle Gestalt um die Ecke biegen. Fieberhaft irrten seine Augen durch die nächtliche Dunkelheit und suchten einen Ausweg. War jetzt wirklich alles vorbei?</p>
   </article>
</body>
</html>
Einfach den gesamten Quelltext in eine Datei kopieren und mit der Endung html abspeichern.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.06.2015, 18:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.06.2015
Beiträge: 2
JiniBla befindet sich auf einem aufstrebenden Ast
Standard

Erstmal Danke für deine schnelle Antwort

Ich arbeite mit WP, aber wenn ich das richtig verstanden hab, dann muss ich jetzt das ganze in meiner CSS Datei definieren und es dann einfach damit einfügen?

Also zB

imu {
...........
}

Und dann definiere ich durch imu::before und imu::after was davor und dahinter sein soll?

Einfügen bei WP in meinen Code Block tue ich dann nur:

<imu>IMPRESSUM</imu>

Ist das so richtig? (Kann es gerade leider nicht direkt ausprobieren, daher erst die theoretische Frage )
Mit Zitat antworten
  #4 (permalink)  
Alt 19.06.2015, 18:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

ja, das scheint richtig zu sein. Endgültig lässt sich das natürlich nur im richtigen Quelltext beurteilen.

Gruss

MrMurphy
Mit Zitat antworten
Antwort

Stichwörter
float

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 16:43
CSS von Plugin beisst! expand CSS 0 28.09.2012 18:44
joomla template wrock CSS 2 06.04.2012 20:24
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12
Webseite für Smartphones Optimieren. Cybertronic CSS 8 25.08.2011 12:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:09 Uhr.