Anordnung von DIV-Containern für Webseite - Hilfe benötigt

vertigo · 24. Januar 2017

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

JR Cologne · 24. Januar 2017

Wie sehen denn deine bisherigen Versuche aus? Poste mal bitte deinen Code. Dann kann man dir leichter helfen.

vertigo · 27. Januar 2017

Hallo,

ich hatte im Netz eine Vorlage mit Felxbox gefunden und versucht diese anzupassen...

html:

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>&nbsp;</p>
  	<p>&nbsp;</p>
  	<p>&nbsp;</p>
  	<p>&nbsp;</p>
  	<p>&nbsp;</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">&nbsp;</td>
      	<td bgcolor="#00FF00">&nbsp;</td>
      	<td bgcolor="#00FFFF">&nbsp;</td>
      	<td bgcolor="#FFFF00">&nbsp;</td>
    	</tr>
    	<tr>
      	<td bgcolor="#FF0000">&nbsp;</td>
      	<td bgcolor="#00FF00">&nbsp;</td>
      	<td bgcolor="#00FFFF">&nbsp;</td>
      	<td bgcolor="#FFFF00">&nbsp;</td>
    	</tr>
    	<tr>
      	<td bgcolor="#FF0000">&nbsp;</td>
      	<td bgcolor="#00FF00">&nbsp;</td>
      	<td bgcolor="#00FFFF">&nbsp;</td>
      	<td bgcolor="#FFFF00">&nbsp;</td>
    	</tr>
    	<tr>
      	<td bgcolor="#FF0000">&nbsp;</td>
      	<td bgcolor="#00FF00">&nbsp;</td>
      	<td bgcolor="#00FFFF">&nbsp;</td>
      	<td bgcolor="#FFFF00">&nbsp;</td>
    	</tr>
    	<tr>
      	<td bgcolor="#FF0000">&nbsp;</td>
      	<td bgcolor="#00FF00">&nbsp;</td>
      	<td bgcolor="#00FFFF">&nbsp;</td>
      	<td bgcolor="#FFFF00">&nbsp;</td>
    	</tr>
  	</table>
	</aside>
 	<aside id="sidebar2">(5) Sidebar2
  	<table width="100%" border="0" cellspacing="0" cellpadding="0">
    	<tr>
      	<td bgcolor="#FF0000">&nbsp;</td>
      	<td bgcolor="#00FF00">&nbsp;</td>
      	<td bgcolor="#00FFFF">&nbsp;</td>
      	<td bgcolor="#FFFF00">&nbsp;</td>
    	</tr>
    	<tr>
      	<td bgcolor="#FF0000">&nbsp;</td>
      	<td bgcolor="#00FF00">&nbsp;</td>
      	<td bgcolor="#00FFFF">&nbsp;</td>
      	<td bgcolor="#FFFF00">&nbsp;</td>
    	</tr>
    	<tr>
      	<td bgcolor="#FF0000">&nbsp;</td>
      	<td bgcolor="#00FF00">&nbsp;</td>
      	<td bgcolor="#00FFFF">&nbsp;</td>
      	<td bgcolor="#FFFF00">&nbsp;</td>
    	</tr>
    	<tr>
      	<td bgcolor="#FF0000">&nbsp;</td>
      	<td bgcolor="#00FF00">&nbsp;</td>
      	<td bgcolor="#00FFFF">&nbsp;</td>
      	<td bgcolor="#FFFF00">&nbsp;</td>
    	</tr>
    	<tr>
      	<td bgcolor="#FF0000">&nbsp;</td>
      	<td bgcolor="#00FF00">&nbsp;</td>
      	<td bgcolor="#00FFFF">&nbsp;</td>
      	<td bgcolor="#FFFF00">&nbsp;</td>
    	</tr>
  	</table>
	</aside>
  </div>
  <footer id="footer">(6) Footer</footer>
</div>
</body>
</html>

Alles anzeigen

css:

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;
	}

Alles anzeigen

Danke schonmal im Voraus...

Lupus_III · 27. Januar 2017

Mit einer Tabelle in der Sidebar komme ich nicht klar. Normal arbeitet man mit main/ article/aside/section (semantischer Aufbau)und steuert das Ganze mit CSS. Ich habe eine solche website --> http://www.erich-wolf.de Wenn du willst, kannst du den Code haben.

JR Cologne · 27. Januar 2017

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.

vertigo · 27. Januar 2017

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

JR Cologne · 27. Januar 2017

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...

Lupus_III · 28. Januar 2017

Zitat von vertigo

@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?

Das hast du richtig erkannt und das ist in meinem Fall auch so gewollt und in der CSS-Datei so gesteuert. Natürlich kann man die Sidebar in der verkleinerten Version für Smartphone und Tablet-PC's entweder vor oder nach dem Hauptcontainer erscheinen lassen. Das ist ja der Vorteil der CSS-Steuerung. Ich halte übrigens auch die Flexbox-Version für zielführender und moderner. Du solltest dich zu diesen Themen mal gründlich einlesen. Literaturvorschlag: http://little-boxes.de/ von Peter Müller

vertigo · 31. Januar 2017

Hallo Zusammen,

ich habe mich mal ein wenig mit Flexbox auseinandergesetzt, und bin bis hierhin gekommen:

Testseite

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

JR Cologne · 31. Januar 2017

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?

vertigo · 31. Januar 2017

genau das war meine Idee. Geht das? Wie gesagt, wäre nur für die Desktopansicht...

JR Cologne · 1. Februar 2017

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

<!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>&nbsp;</td>
	          <td>&nbsp;</td>
	        </tr>
	        <tr>
	          <td>&nbsp;</td>
	          <td>&nbsp;</td>
	        </tr>
	      </tbody></table>
	      <p>&nbsp;</p>
	    </aside>
	    <aside id="sidebar2">Sonstiges</aside>
		</div>
  </div>
  <footer id="footer"> Footer</footer>
</div>




</body></html>

Alles anzeigen

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.

vertigo · 4. Februar 2017

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.

vertigo · 6. Februar 2017

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

JR Cologne · 6. Februar 2017

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?

vertigo · 7. Februar 2017

genau so ist das gedacht!

JR Cologne · 7. Februar 2017

Hier ist wieder der Code:

HTML

<!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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>

Alles anzeigen

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.

vertigo · 8. Februar 2017

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

JR Cologne · 8. Februar 2017

Die Tabelle selber ist nicht das Problem. Das Problem liegt bei der Verwendung von alten HTML-Attributen wie z.B. align. Das Styling erfolgt mittlerweile komplett über CSS und nicht über HTML.

Tut mir leid, wenn ich mich da ein wenig irreführend ausgedrückt habe.

vertigo · 12. Februar 2017

Achso. Danke für den Hinweis, werde das dann beim Ausarbeiten mit berücksichtigen...

Anordnung von DIV-Containern für Webseite - Hilfe benötigt

Jetzt mitmachen!

Teilen