Beiträge von JR Cologne
-
-
Sieht auf den ersten Blick nicht schlecht aus. Vieles bieten zwar auch schon die Standard-Browser, aber manche Dinge könnten echt nicht schlecht sein.
Ich schaue es mir mal an.

-
Am besten geht das mit JS, indem du dann einfach die weiteren Form-Elemente hinzufügst.
Alternativ könntest du das mit PHP und einer Session umsetzen. Dann wäre jeder Schritt halt eine neue Seite.
-
Jo, irgendwas in die Richtung wird's sein.
-
Hm, ok. Es gibt vielleicht schon eine Möglichkeit, aber das wäre dann etwas sinnfrei, da es ja schon zwei sehr gut geeignete Funktionen dafür gibt.
-
-
-
Äh, ja. Das habe ich anscheinend übersehen, aber das geht ganz schnell und dann gehört das auch der Vergangenheit an.

Edit: Es sollte jetzt behoben sein, allerdings konnte ich das Problem bei mir nicht nachvollziehen...
Welcher Browser bzw. welche Version ist das?
-
Hm, jetzt bin ich ein wenig verwirrt.

Antwort kommt gleich...
Edit: So...
ZitatMit deinem Vorgehen bringst du mehrere Problemfelder zusammen:
a) margin-top mit %-Werten
b) dazu display: flex
c) dazu display: inline-block
d) dazu collapsing-marginsDas mit dem inline-block hatte ich überhaupt nicht in Erinnerung. Das scheint auch der Grund des sehr kleinen Abstandes zu sein. Die Lösung war display: block und ein clearfix.
Jetzt habe ich wirklich gar kein margin-top und -bottom mehr.
Collapsing-Margins: Verstehe ich das richtig, dass dadurch das margin von meinem main-Element mit dem margin vom #content_wrap zusammengefasst wird und dadurch das #content_wrap keinen margin hat, bekommt das main-Element auch keinen?
Dann frage ich mich, warum Chrome und der IE dieses Prinzip der collapsing-margins nicht verfolgen. Oder übersehe ich da irgendwas?
ZitatAm sinnvollsten ist es bei margin-top und margin-bottom grundsätzlich auf %-Werte zu verzichten. Hier spielt zum Beispiel die seit Jahren eingeführte Einheit rem ihre Vorteile aus.
Warum sollte man rem für margin benutzen. Das halte ich für falsch, denn dann würden sich jegliche Abstände ja auf die Schriftgröße beziehen.
Musst du mir mal genauer erläutern, wo da der Vorteil liegen soll, außer das man keine Probleme mit collapsing-margins hat...
kanufrosch Was heißt denn, dass es bei dir in einem begrenzten Rahmen funktioniert hat?
Also, um dieses Problem mit dem margin zu beheben, könnte ich natürlich einfach dem #content_wrap ein margin-top und -bottom von 1.5% geben. Dann hätte ich mein gewünschtes Ergebnis. Das Problem dabei ist allerdings, dass ich in Chrome dann den doppelten Abstand hätte, was nicht so wirklich zielführend wäre.
Ich bräuchte also irgendeine Möglichkeit, nur bestimmte Browser anzusprechen.
Zum Beispiel -moz- davor zu setzen, habe ich schon versucht. Das geht nicht.
Gibt es mit HTML/CSS noch irgendeine Möglichkeit?
Ansonsten müsste ich wohl auf JS zurückgreifen...
Edit 2: Habe Folgendes gefunden: http://browserhacks.com/
Dort gibt es auch HTML-/CSS-Lösungen. Aber das scheint mir doch sehr "hacky" zu sein.

JS wäre dann vermutlich besser.
Edit 3: Ok, die Lösung lag auf der Hand, aber ich habe sie nicht gesehen.
#content_wrap bekommt ein padding von 1.5% und 0,
main bekommt ein margin von 0 2.5%.Jetzt passt es in jedem Browser. Danke euch für die Hilfe.

-
Das margin ist bei dem unteren Bild deutlich größer als bei den oberen Bildern.
Das soll möglichst gleich sein.
Falls die Bilder nicht helfen, kannst du es dir ja auch live im Browser anschauen.
-
Hallo zusammen,
habe ein kleines Problem im Firefox und Edge. Das margin funktioniert nicht richtig.
Seht selbst...
Firefox 49.0.2:
[Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/unbenannt34s0xifj9wl.png]
Edge 14.14393:
[Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/unbenannt4kl3ufmat5h.png]
Chrome 53.0.2785.143 m (64-bit):
[Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/unbenannt530fcbvl1og.png]
Hat jemand eine Idee, warum das so ist und wie ich das beheben kann?
Das letzte Bild zeigt, wie es sein sollte.
Falls ihr es selber testen wollt: http://jr-cologne.16mb.com/webdesign-jr/
Danke schon mal!

Gruß
JR Cologne -
Ich möchte mich ja jetzt nicht auch noch unbedingt unbeliebt machen, aber dein Beitrag ist ziemlich unnötig. Hast du dich ernsthaft hier angemeldet, um ein Thema, das mehrere Jahre vergangen ist, wieder auszugraben, wo was gesagt wird, was dir nicht ganz passt?!

Nun, ja. Blinkende Texte sind weiterhin nicht zu empfehlen, aber oben wurde ja eine JS-Lösung gepostet. Dementsprechend müsstest du eigentlich nicht weitersuchen...

-
-
-
-
-
Bei mir wird Folgendes angezeigt:
[Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/unbenannt78noimsupq.png]
[Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/unbenannt2qwjt2mbda0.png]
Unter Antwort ist folgender Code:
CSS
Alles anzeigenhtml, body { margin:0; padding:0; border:0; background: transparent; font-size:12px; } div, span, article, aside, footer header, hgroup, nav, section, h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, table, tr, th, tbody, thead { margin:0; padding:0; border:0; background: transparent; vertical-align: baseline; } img { margin:0; padding:0; border:0; } table, tr, th, td, tbody, tfoot, thead { margin:0; padding:0; border:0; background: transparent; vertical-align: baseline; } table { border-collapse: collapse; border-spacing: 0; } input, select, textarea, from, fieldset { margin:0; padding:0; border:0; } article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; } h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { font-family: Arial, Helvetica, sans-serif; font-size:100%; font-weight:normal; font-style:normal; line-height:100%; text-indent:0; text-decoration:none; text-align:left; color:#000; } ol, ul { list-style:none; } html{} body{background-color:#eeeeee;} h1, h2, h3, h4, h5, h6 { font-weight:bold; color:#000; } h1 { font-size:24px; } h2 { font-size:20px; } h3 { font-size:16px; } h4 { font-size:14px; } h5 { font-size:14px; } h6 { font-size:14px; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin:0; } #wrapper {width:900px; margin:0px auto; background-color:#FFFFFF;} #top {background-color:#666666; width:100%; padding:20px 0; overflow:hidden;} #title {} #title p {color:#FFFFFF; font-size:50px; margin: 20px 0 0 200px;} #logo {margin:0 0 0 10px; float:left;} #menu {font-size:16px; float:left; width:900px; height:40px; background-color:#AC0000;} #menu ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px;} #menu li.topmenu {float:left;} .topmenu a {float:left; text-align:center; width:100px;} .topmenu ul {display:none;} .topmenu a, .submenu a {padding:12px 20px; border-collapse:collapse; color:#FFFFFF; font-weight:bold; text-decoration:none; background-color:#AC0000; margin:0;} .submenu a {font-size:12px; width:100px; position:relative; clear:both;} #menu a:hover, .topmenu.on a {color:#4C4C4C; background-color:#ffddbb !important;} .topmenu:hover ul {display:block; z-index:500;} #banner {} #leftside {width:180px; float:left;} #leftside h2 {padding:15px 10px 10px 10px;} #leftside hr {width:160px; height:1px;} #leftside ul li {padding:10px 0 0 10px; font-size:13px;} #rightside {width:180px; float:right;} #rightside h2 {padding:15px 10px 10px 10px;} #rightside hr {width:160px; height:1px;} #rightside ul li {padding:10px 10px 0 10px;} #rightside img {padding:10px 0 0 12px;} #footer {clear:both; background-color:#000000; padding:10px 0;} #footer ul li {display:inline; color:#FFFFFF; padding:0 10px 0 10px} #footer a:link {color:#FFFFFF;} #footer a:visited {color:#FFFFFF;} #footer a:active {color:#FFFFFF;} #footer a:hover {color:#FF0000;} #footer a:focus {color:#FFFFFF;} Warning: Cannot modify header information - headers already sent by (output started at /mnt/web013/c1/42/56970742/htdocs/css/styles_index.php:1) in /mnt/web013/c1/42/56970742/htdocs/css/includes_css/variablen.php on line 2 #main {min-height:800px; height:auto !important; background-color:#999999;} #rightside a:link {color:#0000FF;} #rightside a:visited {color:#0000FF;} #rightside a:active {color:#0000FF;} #rightside a:hover {color:#FF0000;} #rightside a:focus {color:#0000FF;} #content {width:540px; min-height:800px; background-color:#CCCCCC; margin:0 0 0 180px;} #content h2 {padding:15px 10px 10px 10px;} #content hr {width:520px; height:1px;} #content table tr td {padding:10px 10px 0 10px;} #content h3 {padding:10px 10px 0 10px; text-decoration:underline;} #content img {float:left; margin:10px 10px 10px 10px;} #content p {padding:10px 10px 10px 10px; line-height:normal;} #content a:link {color:#0000FF;} #content a:visited {color:#0000FF;} #content a:active {color:#0000FF;} #content a:hover {color:#FF0000;} #content a:focus {color:#0000FF;}Hast du vielleicht noch ein Leerzeichen o.ä. vor dem PHP-Block?
Das verwirrt mich gerade ziemlich:
-
Kann das vielleicht hiermit zusammenhängen?
https://developer.mozilla.org/en-US/docs/Web…nt-Type-Options
Also, dass dieser Header auf nosniff gesetzt wurde und es deswegen blockiert wird?
Hm, kann eigentlich auch nicht sein. Gerade gesehen, dass text/css nicht geblockt wird.
-
-