|
|||
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;" /> 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 |
Sponsored Links |
|
|||
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> Gruss MrMurphy |
Sponsored Links |
|
|||
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 ) |
Stichwörter |
float |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |