Druckbare Version
Hallo liebe Contao-Community,
ich momentan dabei, folgende Website zu erstellen: www.j-rupp.net
Wenn ich nun dort teile des Textes unter der grünen Überschrift markiere,
so geht diese Markierung nicht nur über die Breite des DIVs, in dem sich der text befindet,
sondern auch darüber hinaus über die gesamte Breite.
Anhang 8126
Woran kann das liegen bzw. wie behebe ich das?
Schon mal vielen Dank vorab,
JoRu1407
Ich wollte das Problem gerade nachvollziehen, bei mir sieht's aber richtig aus:
Anhang 8127
In welchem Browser taucht denn dein Problem auf (ich bin im FF13)?
Ich benutze Chrome.
Habe das ganze gerade mal im Internet Explorer ausprobiert, und auch da funktioniert alles einwandfrei.
Mals schauen, was ich da mit Chrome mache...
Hab eben mal meine Browsersamlung durchgetestet: Das Problem tritt im Chrome und im Safari auf (also beides Webkit).
Eventuell hängt es damit zusammen:
Ich kann mich dunkel erinnern, dass damit nicht alle Browser klarkommen, kann mich aber irren.Zitat:
* {
padding: 0;
}
Daran liegt es leider nicht - Ich habs gerade ausprobiert...
Hat noch jemand eine Idee?
Die Hervorhebung des markierten Text ist im webkit so breit wie sein BFC.
Contao hält dafür die Klasse block bereit. Ihr wird normalerweise overflow:hidden; gegeben um ein BFC zu schaffen. Das ist bei dir nicht so, vielleicht aus gutem Grund.
Ich würde diese kleine Macke ignorieren, Chrome-Benutzer sind dieses Verhalten von anderen Webseiten gewohnt.
Hallo plastico,
ich verwende zwar nicht das standardmäßige Contao-Framework,
allerdings benutze ich overflow:hidden aus gutem Grund nicht: Das Logo in der Kopfzeile ragt über die eigentliche Seite hinaus.
#logo ist kein Kind von .block. overflow: hidden; für .block würde #logo nicht abschneiden.
Es gibt aber auch andere Möglichkeiten einen BFC zu schaffen.
Z.B float für #header .inside:
Die Markierung sollte dann nur noch so breit sein wie #header .inside.Code:/* bfc für #header .inside */
#header .inside {
float: left;
width: 100%;
}
/* float einschließen */
#header:after {
content: ".";
display: block;
clear: both;
font-size: 0;
height: 0;
visibility: hidden;
}