Gut, freut mich, dass ich helfen konnte. ![]()
Beiträge von JR Cologne
-
-
Ja, leider ist der IE schon nicht gerade der modernste Browser und hängt in den meisten Fällen ein wenig hinterher. Insofern kann ich deine Enttäuschung durchaus nachvollziehen.
Sass ist auf jeden Fall einen Blick wert, insbesondere, da es nicht nur Variablen, sondern noch viel mehr bietet.
Alternativ gibt es natürlich noch Less und Stylus, um mal die bekanntesten Präprozessoren genannt zu haben, aber letzendlich ist Sass doch noch am verbreitetsten, auch wenn es hauptsächlich eine Glaubensfrage ist, welchen man besser findet.
-
Naja, an der Unterstützung von CSS-Variablen kann man die Qualität eines Browsers jetzt nicht wirklich fest machen.
War gerade nämlich sogar ziemlich überrascht, dass die meisten anderen Browser das schon so gut unterstützen.

Da tut man sich bei manchen anderen Features deutlich schwerer...
-
Hier ist wieder der Code:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>Offcial Blaze Bayley 2017</title> <style type="text/css"> * { padding: 0; margin: 0; } body { -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; background-attachment: fixed; background-image: url(images/back05.jpg); background-repeat: no-repeat; background-position: center center; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } td { padding: 5px; } #container { background: white; margin: 0 auto; padding: 0px; max-width: 960px; float: right; } #content { } .t_border { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(0,0,0,1); } #nav-main { background-color: rgba(0,255,0,0.5); padding: 10px; } #main { background-color: white; padding: 10px; } #sidebar_wrap { display: flex; flex-direction: column; flex: 1; } #sidebar { background-color: #CCCCCC; padding: 10px; } #sidebar2 { background-color: #999999; padding: 10px; } #footer { background-color: #353535; color: white; padding: 10px; } @media screen and (min-width:800px) { body { margin: 20px; } #content { display: -webkit-flex; display: flex; } #main { max-width: 520px; } #sidebar { -webkit-flex: 1; flex: 1; -webkit-order: 2; order: 2; } #sidebar2 { -webkit-flex: 1; flex: 1; -webkit-order: 1; order: 1; } } img { max-width: 100% !important; display: block; } } </style> </head> <body> <div id="container"> <nav id="nav-main">Navi</nav> <header> <img src="images/header08.jpg"> </header> <div id="content"> <article id="main" align="center"> <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fofficialblazebayley%2F&tabs=timeline%2C%20events&width=500&height=600&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=true&appId" width="500" height="600" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> </article> <div id="sidebar_wrap"> <aside id="sidebar">Upcoming Tourdates <table width="100%" border="0" cellpadding="10" cellspacing="0"> <tr> <td width="50%" align="left" valign="middle" class="t_border">11 Feb</td> <td width="50%" align="right" valign="middle" class="t_border"><img src="images/flags/malta.png" alt="Malta" height="16"></td> </tr> <tr> <td width="50%" align="left" valign="middle"> </td> <td width="50%" align="right" valign="middle">Gzira</td> </tr> <tr> <td width="50%" align="left" valign="middle" class="t_border">18 Feb</td> <td width="50%" align="right" valign="middle" class="t_border"><img src="images/flags/uk.png" alt="United Kingdom"></td> </tr> <tr> <td width="50%" align="left" valign="middle"> </td> <td width="50%" align="right" valign="middle">Ballymena</td> </tr> <tr> <td width="50%" align="left" valign="middle" class="t_border">25 Feb</td> <td width="50%" align="right" valign="middle" class="t_border"><img src="images/flags/uk.png" alt="United Kingdom"></td> </tr> <tr> <td width="50%" align="left" valign="middle"> </td> <td width="50%" align="right" valign="middle">Wolverhampton</td> </tr> <tr> <td width="50%" align="left" valign="middle" class="t_border">1 Mar</td> <td width="50%" align="right" valign="middle" class="t_border"><img src="images/flags/uk.png" alt="United Kingdom"></td> </tr> <tr> <td width="50%" align="left" valign="middle"> </td> <td width="50%" align="right" valign="middle">Glasgow</td> </tr> <tr> <td width="50%" align="left" valign="middle" class="t_border"><p>2 Mar</p></td> <td width="50%" align="right" valign="middle" class="t_border"><img src="images/flags/uk.png" alt="United Kingdom"></td> </tr> <tr> <td width="50%" align="left" valign="middle"> </td> <td width="50%" align="right" valign="middle">Newcastle</td> </tr> </table> </aside> <aside id="sidebar2">Sidebar 2</aside> </div> </div> <footer id="footer">Footer</footer> </div> </body> </html>Mehr als die beiden Sidebars in einen extra Container zu packen und ein wenig die order sowie die Breite des main-Containers zu begrenzen, habe ich nicht gemacht...
Edit: Deine Tabelle ist weiterhin veraltet. Kann dir nur dazu raten, deine Tabelle mit CSS3 und HTML5 zu gestalten bzw. dich daran zu halten.
Wundert mich, dass das bisher noch nicht für Konflikte/Probleme gesorgt hat. In Verbindung mit Flexbox kann das eigentlich nicht gut gehen.

-
Der Grund ist die Browser-Unterstützung. (siehe caniuse.com) Leider gibt es dementsprechend keine Möglichkeit, es in diesen Browsern zum Laufen zu bekommen.
Stattdessen kannst du nur einen CSS-Präprozessor wie z.B. Sass nutzen, um Variablen verwenden zu können.
-
Selbstverständlich ist das möglich.
Ich gehe mal davon aus, dass du mit Punkt 2 meinst, dass in der Desktop-Ansicht die beiden Sidebars rechts und untereinander platziert werden und dann links dementsprechend der aktuell noch mittlere Container.
In der mobilen Ansicht wird dann alles untereinander dargestellt.
Stimmt das so?
-
Ich habe zwar keine Ahnung von SEO, aber eins kann ich dir garantieren. So schnell geht das nicht!

Habe Geduld, verbessere deine Website in der Zeit, beschäftige dich weiter mit SEO, usw...
-
Joa, werde dir das nachher vielleicht mal zukommen lassen.
Wirklich benutzerfreundlich ist das allerdings nicht. Aber gut, musst du wissen, ob dir das gefällt.
Edit: Hier ist es...
Habe im Prinzip nur sehr wenig dafür verändern müssen. Schau es dir einfach mal an.
HTML
Alles anzeigen<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Blaze Bayley Official 2017</title> <style type="text/css"> * { padding: 0; margin: 0; } body { -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; background-attachment: fixed; background-image: url(back01.jpg); background-repeat: no-repeat; background-position: center center; margin: 0; padding: 0; } #container { background-color: rgba(255,0,0,1); margin: 0; padding: 25px; max-width: 900px; min-height: calc(100vh - 50px); float: right; display: flex; flex-direction: column; } #nav-main { background-color: #97a2aa; } #content { padding: 0; } #main { background-color: white; padding: 10px; } #sidebar { background-color: #CCCCCC; padding: 10px; } #sidebar2 { background-color: #999999; padding: 10px; } #footer { background-color: #353535; padding: 10px; color: white; } #footer * { padding: 15px; } img { max-width: 100% !important; display: block; } @media screen and (min-width:800px) { #container { height: calc(100vh - 50px); } #scroll { overflow-y: scroll; } #content { display: -webkit-flex; display: flex; flex: 1 0 auto; } #main { -webkit-flex: 3; flex: 3; -webkit-order: 2; order: 2; } #sidebar { -webkit-flex: 1; flex: 1; -webkit-order: 1; order: 1; } #sidebar2 { -webkit-flex: 1; flex: 1; -webkit-order: 3; order: 3; } } </style> </head> <body> <div id="container"> <nav id="nav-main">Menü</nav> <header id="header"> <img src="./Blaze Bayley Official 2017_files/header.jpg"> </header> <div id="scroll"> <div id="content"> <article id="main"> <p>(3) Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores</p> <p>(3) Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores</p> </article> <aside id="sidebar"> <p>Tourdaten</p> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td align="left" valign="middle">23</td> <td align="right" valign="middle"><img src="./Blaze Bayley Official 2017_files/germany.png"></td> </tr> <tr> <td align="left" valign="middle">Apr</td> <td align="right" valign="middle">Hamburg</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody></table> <p> </p> </aside> <aside id="sidebar2">Sonstiges</aside> </div> </div> <footer id="footer"> Footer</footer> </div> </body></html>Deinen Code könntest du übrigens auch ein wenig besser formatieren und z.B. den CSS-Code auslagern.
Habe diesbezüglich einfach mal meine Finger von gelassen und lediglich die nötigen Änderungen vollzogen.

-
Schon mal zur 2:
Ein einfaches display: block bei dem Bild sollte helfen.
Edit:
Bei Nr. 3 kann ich dir leider nicht helfen und bei 2 ist mir nicht ganz klar, was du damit meinst.
Soll der Footer immer den gleichen Abstand zum Bildschirmrand haben, wie oben das Menü, und für den Content-Bereich gibt's dann einen extra Scrollbalken?
Oder wie soll man das verstehen?
-
Nur ein bestimmtes Div aktualisieren oder alle 9 gleichzeitig?
Ich liege doch richtig mit der Annahme, dass deine 9 Divs bei jedem Reload der Seite neu zusammengestellt werden, oder?
Alle gleichzeitig könntest du dementsprechend mit einem einfachen JS-Reload der Seite aktualisieren, wenn auf den Button geklickt wird.
-
Achso, ne. Die Tabelle kannst du für Daten ruhig nutzen. Das musst du sogar.
Aber für Designzwecke nutzt man eben keine Tabellen.
Wenn du stattdessen Flexbox nutzt, bist du auf alle Fälle gut dabei.
Edit: Am besten wäre es, wenn du auf einem Testserver deinen aktuellen Stand hochladen würdest. Dann könnte man sich das näher anschauen...
-
vertigo Das ist ja hochinteressant. Du verwendest veraltete Technologie wie Tables fürs Design, aber gleichzeitig auch Flexbox.
Das muss man auch erstmal schaffen...

Ich kann dir nur empfehlen, komplett auf HTML5 und CSS3 zu setzen.
Für den Fall, dass du mit Flexbox arbeiten möchtest, ist hier ein Beispiel für einen möglichen Grundaufbau deiner Seite.
Ansonsten wäre es für Hilfestellungen einfacher, wenn du konkrete Fragen/Probleme vorlegen würdest. Mehr als Beispiele können wir sonst nämlich nicht posten.
-
Ja, es ist auch eine Kurzform. Verwenden sollte man aber trotzdem die Langform.
Soweit ich weiß, unterstützt PHP7 die Kurzformen, oder zumindest bestimmte davon, nämlich nicht mehr.
-
Wie die Fehlermeldungen dir auch verraten, fehlen Parameter.
Um die benötigten Parameter nachzuschlagen, kannst du mal bei den folgenden zwei Links , die zur PHP-Dokumentation führen, vorbeischauen:
- http://de2.php.net/manual/de/mysqli.query.php
- http://de2.php.net/manual/de/mysqli.error.php -
Naja, wenn man's so nimmt, wäre deine erste Variante eigentlich die beste.
Damit kann man eigentlich gar nichts falsch machen.
Ich habe aber eben genau die Variante mit absoluter Positionierung und transform: translate() gewählt, weil die Äußerung des TOs sich danach anhörte.
Denn mit transform: translate(-50%, -50%) wirkt man ja genau gegen das Problem, dass es anhand der Seiten und nicht anhand des Mittelpunkts zentriert wird.
-
Das wäre eine Möglichkeit.
Besser wäre aber eine Lösung mit PHP.
Aber kommt natürlich auch darauf an, was du bisher überhaupt beherrschst.
-
Ja, gibt es. Ein Beispiel wäre die absolute/relative Positionierung einer Box kombiniert mit einem transform: translate(), um die Box zu zentrieren.
So sieht das dann im Code aus:
-
Wie sehen denn deine bisherigen Versuche aus? Poste mal bitte deinen Code. Dann kann man dir leichter helfen.
-
Ja, so sollte es auch gehen:
CSS
Alles anzeigenhtml { width:100%; height:100%; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-attachment: fixed; } html.bg1 { background-image: url(../images/jpg/001-Rabe_1984x992.jpg); } html.bg2 { background-image: url(../images/jpg/001-RabeDunkel_1984x992.jpg); } -
Na, ich würde mal sagen 2000px.
