Hey, vielen Dank. Dann habe ich scheinbar doch alles richtig gemacht, nur Dreamweaver bzw. die Browser-Vorschauen wollten irgendwie nicht...?
Wie auch immer, damit kann ich jetzt weiterarbeiten 
Zu dem anderen Problemfall Menü/Header komme ich dann später mal auf Euch zu... 
Ja, komischerweise jetzt auch bei mir. Nichtsdestotrotz sind die beiden Sidebars in der mobilen Ansicht nicht wie gewollt auch 500px, sondern wie ursprünglich 300px. Kann man das ändern? oder die wenigstens zentrieren?
hallo Zusammen,
nun ist ein Jahr rum und ich soll die Webseite www.blazebayley.net mal wieder überarbeiten. Die Startseite ist grundsätzlich gleich, nur sollen diesesmal die beiden Boxen der Sidebar (Tourdaten und Info) nicht untereinander neben dem Facebookfeed stehen sondern alle drei nebeneinander. Das Endresultat soll dem Aufbau von http://www.sabaton.net ähneln. Wie ich das mit dem Header und dem Menü hinbekomme weiß ich auch noch nicht. Aber dazu dann später...
Also habe ich das weiter oben bereits angeführten Beispiel bearbeitet, scheitere jedoch an der mobilen Ansicht. Die Boxen sollen nämlich auf dem Desktop feste Breiten haben (500/300/300 Pixel), in der mobilen Ansicht (aus optischen Gründen alle gleich breit, 500px wegen dem Facebook-iFrame). Eine Zuweisung von entsprechenden Breiten in den Mediaqueries bleibt ohne Effekt...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testeite</title>
<link href="css/test_3.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<p>Das ist der Header</p>
</header>
<nav>
<p>Das ist die Navigation</p>
</nav>
<div id="content_wrap">
<main>
<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. 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. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</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. 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. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</main>
<aside id="sidebar_1" class="col">
<p>Das ist die erste Sidebar</p>
</aside>
<aside id="sidebar_2" class="col">
<p>Das ist die zweite Sidebar</p>
</aside>
</div>
<footer>
<p>Das ist der Footer</p>
</footer>
</body>
</html>@charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
display: flex;
flex-direction: column;
font-size: 100%;
font-family: Calibri, sans-serif;
}
header {
background-color: red;
color: #fff;
}
nav {
background-color: green;
color: #eee;
}
#content_wrap {
/* [disabled]width: 100%; */
margin-left: auto;
margin-right: auto;
display: flex;
flex: 1 0 auto;
}
main {
background-color: gray;
order: 1;
width: 500px;
display: flex;
flex-direction: column;
flex: 1 0 auto;
}
#sidebar_1 {
background-color: aqua; width: 300px;
order: 2;
}
#sidebar_2 {
background-color: darkgoldenrod;
width: 300px;
order: 3;
}
footer {
background-color: #0000FF;
color: #eee;
}
@media screen and (max-width: 750px) {
#content_wrap {
flex-direction: column;
}
main {
order: 1;
width: 500px;
}
#sidebar_1 {
order: 2;
width: 500px;
}
#sidebar_2{
order: 2;
width: 500px;
}
}Könntet Ihr mir da vielleicht einen Tipp geben?
Vielen Dank im Voraus!
Gruß, Marco
@all: Danke für die Infos: PHP ist keine Option, ich habe inzwischen einen recht einfachen Weg gefunden, das iframe responsiv zu machen. Wen es interessiert... klick mich!
Hallo Zusammen,
ich habe da mal wieder eine Frage: Ich möchte in meiner Homepage eine externe Webseite einbinden bzw. anzeigen lassen. Folgende Ausgangssituation: Auf www.blazebayley.net/test/default.htm (noch nicht fertig) befindet sich im Menü der Punkt "Reviews". Der Inhalt dieser Seite wird von jemand anderem gestaltet und separat woanders online gestellt (geht derzeit nicht anders). Wie kann ich den Inhalt dieser Seite bei mir einbinden? Einfachste Lösung wäre natürlich ein iFrame, aber der ist ja nicht responsive, oder?
Für ein paar Ideen und Denkanstöße wäre ich sehr dankbar...
Danke und Gruß, Marco
Achso. Danke für den Hinweis, werde das dann beim Ausarbeiten mit berücksichtigen...
Danke! das ist es... 
Aber schon ein bisschen peinlich, wenn man den Wald vor lauter Bäumen nicht sieht. Das mit dem eigenen Container für die beiden Sidebar-Boxen hätte mir auch selbst einfallen können... 
Was mich nur wundert, das mit der Breite hatte ich genauso getestet, hat aber nicht geklappt. Egal, nun kann ich das Ganze jetzt fertig machen.
Wegen der Tabellen: Die sind ja nur für den Inhalt. Werde mich aber später noch einmal schlau machen, woe man das Layout ohne Tabellen hinbekommt.
Nochmal Danke für die viele Hilfe. Ich war bestimmt nicht das letzte Mal hier... 
Cheers, Marco
genau so ist das gedacht!
JR Cologne: ich habe den Code mal ausprobiert. Du hast Recht, das sieht mal ziemlich unschön aus. Ich habe mich nunmehr entschieden, das Ganze doch wie ursprünglich vorzusehen.
Ich habe hierzu mal etwas vorbereitet... Testseite und würde gern folgende Dinge umsetzen:
1. Der mittlere Bereich, wo hier das iFrame mit Facebook drinsitzt soll immer eine Breite von 520 px haben (500px iFrame + je 10px Padding). Das muss ich so machen, da das Plugin (noch) nicht responsive arbeitet. Beide Sidebars sollen dann die Restbreite vom Container übernehmen.
2. Die linke Sidebar (Tourdaten) soll ggf. rechts unter Sidebar 2 angeordnet werden.
Lässt sich sich das realisieren? Und wenn ja wie?
Schonmal vielen Dank im Voraus...
Gruß, Marco
Hi,
Danke für die Hilfe, werde das gleich mal austesten. Das ist übrigens nicht meine Idee, ich bin nur ausführendes Organ. Aber Blaze hat inzwischen auch noch andere Ideen rausgehauen, ich muss mal sehen, was das nun schlussendlich werden soll. Ich muss den wohl mal ausbremsen... 
Der CSS-Code ist aktuell nur drin, da sich dann leichter arbeiten lässt. Der wird nachher dann ausgelagert, da ja die anderen Seiten auch drauf zugreifen werden.
genau das war meine Idee. Geht das? Wie gesagt, wäre nur für die Desktopansicht...
Hallo Zusammen,
ich habe mich mal ein wenig mit Flexbox auseinandergesetzt, und bin bis hierhin gekommen:
Das Ganze funktioniert auch soweit recht gut, auch das Umschalten auf mobile Ansichten. Soweit so gut. Nun habe ich natürlich wieder ein paar Ideen, wo ich Euch mal fragen wollte, ob das machbar ist:
1. In der Desktopansicht soll der Container maximal die Bildschirmhöhe annehmen. Das klappt ja auch. Gibt es eine Möglichkeit, hier einen sticky footer einzubauen, so dass nur der Bereich zwischen Header und Footer scrollt, wenn dieser größer ist?
2. Wie bekomme ich den schmalen Abstand zwischen dem Header-Image und dem Content weg?
3. Im Content soll u.a. auch das Facebook Seiten-Plug-In implementiert werden. Dieses ist ja nicht wirklich responsive. Ich habe mir zwar diverse Seiten angeschaut, wo workarounds benannt sind, aber die verstehe ich irgendwie nicht.
Fragen über Fragen, ich hoffe, der Eine oder Andere mag mir auf die Sprünge helfen.
Gruß, Marco
Hallo Zusammen!
Erstmal Danke für die Antworten.
@Lupo: Danke für das Angebot. Deine Seite entspricht ja in etwa meinen Vorstellungen. Nur Deine beiden Boxen rechts werden beim Verkleinern gar nicht mehr angezeigt?
DIe Tabellen sind nur als Platzhalter zum Füllen. Ok, dann machen wir das mal konkret...
Diese Webseite hier soll auf aktuellen Stand hinsichtlich Coding gebracht werden. Wie Ihr sehen könnt, ist sie noch mit Tabellen layoutet worden, was für Desktops noch funktionieren mag, für mobile Devices aber nicht. Die Grundstruktur soll erhalten bleiben, nur dass bei kleineren Bildschirmen die beiden Boxen rechts dann unter dem Hauptinhalt verschoben werden. wobei dann erst die untere (Tourdaten) angezeigt werden soll dann die obere.
Das Ganze soll dann aus Designgründen dann nicht zentriert, sondern rechts angeordnet werden (hängt mit dem neuen Hintergrundbild zusammen).
Hilft das evtl. ersteinmal weiter?
Die nächste Frage wäre dann, wie ich die Tourdaten-Box ohne Tabellen so hinbekomme, aber dazu dann später...
Danke und Gruß,
Marco
Hallo,
ich hatte im Netz eine Vorlage mit Felxbox gefunden und versucht diese anzupassen...
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>CSS Flexbox</title>
<link href="flexbox.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<nav id="nav-main">(2) Navi</nav>
<header> <img src="header.jpg">
</header>
<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 Lornbmhnbvbvcb</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>cvbcvbem
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 et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
</article>
<aside id="sidebar">(5) Sidebar
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FF0000"> </td>
<td bgcolor="#00FF00"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
<tr>
<td bgcolor="#FF0000"> </td>
<td bgcolor="#00FF00"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
<tr>
<td bgcolor="#FF0000"> </td>
<td bgcolor="#00FF00"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
<tr>
<td bgcolor="#FF0000"> </td>
<td bgcolor="#00FF00"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
<tr>
<td bgcolor="#FF0000"> </td>
<td bgcolor="#00FF00"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
</table>
</aside>
<aside id="sidebar2">(5) Sidebar2
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FF0000"> </td>
<td bgcolor="#00FF00"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
<tr>
<td bgcolor="#FF0000"> </td>
<td bgcolor="#00FF00"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
<tr>
<td bgcolor="#FF0000"> </td>
<td bgcolor="#00FF00"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
<tr>
<td bgcolor="#FF0000"> </td>
<td bgcolor="#00FF00"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
<tr>
<td bgcolor="#FF0000"> </td>
<td bgcolor="#00FF00"> </td>
<td bgcolor="#00FFFF"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
</table>
</aside>
</div>
<footer id="footer">(6) Footer</footer>
</div>
</body>
</html>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(back03.jpg);
background-repeat: no-repeat;
background-position: center center;
margin: 0;
padding: 0;
}
#container {
width: 90%;
background: white;
margin: 0 auto;
padding: 0px;
max-width:960px;
min-width:320px;
}
#container * { padding: 0px; }
#nav-main {
background-color: rgba(151,162,170,0.5);
}
#content {margin-left: 10px;}
#main { background: white; }
#sidebar { background: #f0f3f5; }
#footer {
background: #353535;
color: white;
}
@media screen and (min-width:800px) {
body {margin:20px; }
#content {
display:-webkit-flex;
display:flex;
}
#main {
-webkit-flex:3;
flex:3;
-webkit-order:2;
order:2;
}
#sidebar {
-webkit-flex:1;
flex:1;
-webkit-order:3;
order:3;
}
}#container #content #sidebar table tr td {
color: rgba(255,0,0,1);
}
img {
max-width: 100% !important;
}Danke schonmal im Voraus...
Hallo Zusammen,
nachdem ich schon einige Zeit im Web und auch hier verbracht habe, habe ich mich nun doch mal angemeldet um Euch um Hilfe für mein Problem zu bitten.
Ich habe eine Webseite, die derzeit noch ganz altmodisch, wenn nicht sogar veraltet, mit Tabellenlayout arbeitet. Dieses soll nun, auch im Hinblick auf mobile Geräte, auf aktuellen Stand gebracht werden.
Folgende Situation: Ich benötige eine Seite, welche aus optischen Gründen nur die rechte Hälfte des Bildschirms einnehmen soll, diese besteht aus Header - Navigation - links eine Box mit dem Hauptinhalt - rechts daneben zwei Boxen mit zusätzlichem Inhalt, untereinander angeordnet - Footer. Die Elemente sollen zueinander und zum Rand den gleichen Abstand haben. Ich scheitere als erstes schon an der Positionierung der zwei kleinen Boxen neben der Großen.
Da das Ganze auch noch responsive funktionieren soll, ist die gewünschte Reihenfolgen bei entsprechenden kleinen Bildschirmen wie folgt: Header - Navigation - Hauptinhalt - Box 2 (die untere!) - Box 1 - Footer
Ich habe das Ganze mit Flexbox versucht, aber wie gesagt, das haut nicht hin. Daher wäre ich für Hilfestellungen sehr dankbar, vielleicht mag mir auch jemand das passende Gerüst zur Verfügung stellen?
Vielen Dank im Voraus!
Gruß, Marco