nicht angemeldet
box soll aus box ragen. Position, abolute?
Gunnar Bittersmann
robertroth
TabellenkalkIch habe einen Textrahmen, Box.
#inhalt{width:100%;background:#FF0000;}
#inhalt .wrapper{margin:0 auto;max-width:500px; background:#fff;}
in dieser ist mein Text, schön in der Mitte der Seite. nun will ich nach einem Teil des Inhaltes einen Balken einfügen der aber quer über den ganzen Monitor geht, bzw. des Inhalt Bereiches.
#balken {background:#000; width:100%;position:absolute;left:0;}
#balken .wrapper{margin: 0 auto; max-width: 500px; padding:60px 0 40px 0;}
jetzt habe ich aber das Problem, das es scheinbar funktioniert, aber der Inhalt der nach dem Balken kommen soll, schon unter dem Balken eingeblendet wird.
? Kann mir da jemand auf die Sprünge helfen?
Michi
-
Hallo,
ich verstehe deine Frage leider nicht. Hast du mal einen Link zum Quelltext? Vielleicht hilft der ja.
Gruss
MrMurphy
-
Hi,
der Link steht neben meinem Namen, ist irgendwie anders als ich mir gedacht habe. Es ist nur ein Symbol geworden. Aber hier ist er nochmal:
https://jsfiddle.net/f1keh6mp/
-
Hallo,
den Link hatte ich nicht gesehen, normalerweise stehen dort die Links zur Homepage des Besuchers.
In deinem Quelltext befinden sich leider einige Fehler und Unsauberkeiten. Die Namen der id und class gehören in Anführungszeichen. Text sollte nie direkt in Containern stehen sondern in geeigneteren Elementen wie h1 bis h6, p, li u.s.w.
Ich habe mal eine Lösung erstellt, wie sie mir nach deinen bisherigen Infos vorschwebt:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>Trennbalken im Text</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="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></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; } p { } * { margin: 0; } #inhalt { width: 100%; background: #FF0000; } #inhalt .wrapper { margin: 0 auto; } #inhalt .balken { background-color: black; width: 100%; } #inhalt .wrapper h2 { background: #fff; line-height: 2; max-width: 500px; margin: 0 auto; } #inhalt .wrapper p { background: #fff; max-width: 500px; margin: 0 auto; } </style> </head> <body> <div id="inhalt"> <div class="wrapper"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo liguladio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio.</p> <div class="balken"> <h2>Dies ist im Balken</h2> </div> <p>HIER BEGINNT DER ZWEITE TEIL Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui.</p> </div> </div> </body> </html>Gruss
MrMurphy
-
@@MrMurphy1
Die Namen der id und class gehören in Anführungszeichen.
Alle Attributwerte in Anführungszeichen zu setzen ist good practise; von „gehören“ kann aber keine Rede sein.
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>Modern sein wollen, aber
language="javascript"schreiben (was noch nie sinnvoll war)?type="text/javascript"kann auch weg.-moz-box-sizing: border-box;<div id="inhalt">
<div class="wrapper">Noch so einer. Wie es ohne Wrapper geht, hab ich ja schon gezeigt.
LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
Hallo,
ich habe meine Lösung noch mal überarbeitet und verschlankt:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>Trennbalken im Text</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="//html5shim.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 { margin: 0; } main { background: #FF0000; } h2, h2 span, p { margin: 0 auto; } h2 { background-color: black; line-height: 2; } h2 span { display: block; } h2 span, p { background: #fff; max-width: 500px; } </style> </head> <body> <main> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo liguladio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est.</p> <h2><span>Dies ist im Balken</span></h2> <p>HIER BEGINNT DER ZWEITE TEIL Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p> </main> </body> </html>Gruss
MrMurphy
-
@@MrMurphy1
ich habe meine Lösung noch mal überarbeitet und verschlankt:
Nicht den Containern, sondern deren Block-Inhalten (
p, …) die Breite und den weißen Hintergrund zu geben hat den Charme, dass die Container bis zum Viewportrand reichen. Aber den Nachteil, dass man nicht für alle Inhalte (ul,ol,table,blockquote,figure, …) gewappnet ist.LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Hallo,
Nicht den Containern, sondern deren Block-Inhalten (
p, …) die Breite und den weißen Hintergrund zu geben hat den Charme, dass die Container bis zum Viewportrand reichen. Aber den Nachteil, dass man nicht für alle Inhalte (ul,ol,table,blockquote,figure, …) gewappnet ist.Stimmt. Am besten ist es zudem Inhalt und Layout strikt zu trennen, also auch keine unnötigen HTML-Elemente nur für das Layout hinzuzufügen.
Deshalb habe ich jetzt folgende Lösung erdacht, die das alles berücksichtigt:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>Trennbalken im Text</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="//html5shim.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: 100%; } body { background: #FF0000; padding: 0.01rem; margin: 0; } main { background-color: white; max-width: 500px; margin: 0 auto; } p { padding: 0.5rem; margin-top: 0; margin-bottom: 0.3rem; } p:last-child { padding-bottom: 0.5rem; margin-bottom: 0; } h2 { background-color: black; line-height: 2; background: #fff; display: block; border-top: 1rem solid silver; border-bottom: 1rem solid silver; box-shadow: 20rem 0px 0px black, 40rem 0px 0px black, 60rem 0px 0px black, -20rem 0px 0px black, -40rem 0px 0px black, -60rem 0px 0px black; } </style> </head> <body> <main> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo liguladio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est.</p> <h2>Dies ist im Balken</h2> <p>HIER BEGINNT DER ZWEITE TEIL Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> <h2>Dies ist im Balken</h2> <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p> </main> </body> </html>Gruss
MrMurphy
-
-
-
-
Liebe Mitdenker, liebe Wissende, liebe Neugierige,
ich verstehe deine Frage leider nicht. Hast du mal einen Link zum Quelltext? Vielleicht hilft der ja.
Eine Skizze, wie es aussehen soll, würde wohl besser helfen. Denn was willst Du mit einem Quelltext (bzw zweien: HTML und CSS), die sowieso von falschen Annahmen ausgehen?
Spirituelle Grüße
Euer Robert
robert.r@online.de--
Möge der wahre Forumsgeist ewig leben!-
Eine Skizze, wie es aussehen soll, würde wohl besser helfen. Denn was willst Du mit einem >Quelltext (bzw zweien: HTML und CSS), die sowieso von falschen Annahmen ausgehen?
http://up.picr.de/21791617sz.jpghttp
Also im Bereich in der Mitte soll der Text sein, und dann soll der Balken über dem text setehen. aber der text soll nicht n ur überblendet werden, sonder, anschliessend ohne verlusst wieder weiter gehen.
Ich habe es hier auch online gestellt:
-
Liebe Mitdenker, liebe Wissende, liebe Neugierige,
Eine Skizze, wie es aussehen soll, würde wohl besser helfen. Denn was willst Du mit einem >Quelltext (bzw zweien: HTML und CSS), die sowieso von falschen Annahmen ausgehen?
http://up.picr.de/21791617sz.jpg
Also im Bereich in der Mitte soll der Text sein, und dann soll der Balken über dem text setehen. aber der text soll nicht n ur überblendet werden, sonder, anschliessend ohne verlusst wieder weiter gehen.
Ich habe es hier auch online gestellt:
Und was soll passieren, wenn der Viewport verkleinert oder vergrößert wird?
Soweit ich das verstanden habe, ist der im ersten Moment größer als der "Textkasten"?Spirituelle Grüße
Euer Robert
robert.r@online.de--
Möge der wahre Forumsgeist ewig leben!-
Und was soll passieren, wenn der Viewport verkleinert oder vergrößert wird?
Soweit ich das verstanden habe, ist der im ersten Moment größer als der "Textkasten"?Der Kasten in der Mitte soll immer in der Mitte sein. der Balken soll immer die ganze seite ausfüllen, un der Bereich im Balken, wo der Text hin soll, hat die gleichen Daten wie der Katen der in der Mitte steht, also müsste er somit auch immer gleich gross ein. Nur da wo der Rahemn aus dem Kasten ragen soll, der soll sich je nachdem anpassen.
-
-
-
Liebe Mitdenker, liebe Wissende, liebe Neugierige,
ich verstehe deine Frage leider nicht. Hast du mal einen Link zum Quelltext? Vielleicht hilft der ja.
Eine Skizze, wie es aussehen soll, würde wohl besser helfen. Denn was willst Du mit einem Quelltext (bzw zweien: HTML und CSS), die sowieso von falschen Annahmen ausgehen?
Das ist jetzt nur ein Test für das neue ForumSpirituelle Grüße
Euer Robert
robert.r@online.de--
Möge der wahre Forumsgeist ewig leben!
-
-
-
@@Michi
Ich habe einen Textrahmen, Box.
#inhalt{width:100%;background:#FF0000;} #inhalt .wrapper{margin:0 auto;max-width:500px; background:#fff;}Du hast
<html id="inhalt"> <head>…</head> <body class="wrapper">…</body> </html>? Ansosten: Wozu die Container?
jetzt habe ich aber das Problem, das es scheinbar funktioniert, aber der Inhalt der nach dem Balken kommen soll, schon unter dem Balken eingeblendet wird.
? Kann mir da jemand auf die Sprünge helfen?
Absolut positionierte Elemente sind „aus dem Fluss“ genommen, d.h. nachfolgende Elemente werden so plaziert als wären die absolut positionierten gar nicht da.
LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Gunnar Bittersmann
Absolut positionierte Elemente sind „aus dem Fluss“ genommen, d.h. nachfolgende Elemente werden so plaziert als wären die absolut positionierten gar nicht da.
Um der Frage zuvorzukommen, was man da tun kann:
-
Wenn du die Höhe des Balken kennst: dem nachfolgenden Element entsprechenden Abstand nach oben zum vorherigen Element geben. Aber die Höhe von Elementen kennt man im Allgemeinen nicht.
-
Nicht absolut positionieren.
Die Farbe des Balken kann ja auch
bordersein, der genügend groß gewählt wird und der Inhalt mit entsprechendem negativenmarginwieder an Ort und Stelle plaziert wird.Damit’s keinen horizontalen Scrollbalken gibt:
html { overflow-x: hidden }Zu Risiken und Nebenwirkungen …Das Unschöne daran: Was heißt „genügend groß“?
Nachtrag: Wie du siehst, kommt das Ganze ohne irgendwelche Wrapper-
divs aus.LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Hallo Gunnar,
erst mal danke.
Ich habe es jetzt mit deiner Hilfe so gelöst:
https://jsfiddle.net/f1keh6mp/1/
abe rich habe eine Frage, bitte spring mir aber nicht in den Rücken.
margin: 0 -100em; padding: 50px 0 50px 0; border: solid black; border-width: 0 100em;
Was genau habe ich da gemacht?
margin: 0 -100em; // Abstand aber em??? border ??? Heisst das mein Schwarzen Balken ist komplett eine Border? border-width: 0 100em; // breite
Wäre toll, wenn du mir das noch erklären könntest.
Super Danke
Michi
-
@@Michi
Was genau habe ich da gemacht?
margin: 0 -100em; // Abstand aber em???
Dem Ding Abstand gegeben, in dem dann der schwarze Rahmen zu liegen kommt[^1]. Erste Zahl: oben/unten, zweite Zahl: links/rechts.
Ja, em. Ich weiß nicht mehr, was px ist. Muss ich auch nicht.
border ??? Heisst das mein Schwarzen Balken ist komplett eine Border?
So isses.
border-width: 0 100em; // breite
Erste Zahl: oben/unten, zweite Zahl: links/rechts.
LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) [^1]: Berliner Deutsch-
... in dem dann der schwarze Rahmen zu liegen kommt[1].
Warum wurden die Berliner eigentlich nach Deutschland eingemeindet? Ich dachte immer, deutsch sind die die die gleiche Sprache sprechen.
Was ist daran deutsch, wenn Box aus Box ragt und ein Rahmen auf dem Bildschirm zu liegen kommt?
Berliner Deutsch ↩︎
-
Hallo,
Warum wurden die Berliner eigentlich nach Deutschland eingemeindet?
Weil die meisten Deutschen tolerant sind. Selbst Bayern ist nach Deutschland eingemeindet.
Ich dachte immer, deutsch sind die die die gleiche Sprache sprechen.
Ja, aber deutsch ist relativ.
Gruß
Kalk
-
-
-
-