• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Darstellungsproblem - 2 Spalten mit Kopfzeile

M

macbig2k1

Neues Mitglied
Hallo,

ich befasse mich nun schon seit gut einer Woche mit CSS (mehr oder weniger intensiv), um genauer zu sein, mit dem Thema DIV's.

Nun war ein älterer Beitrag schon eine riesige Hilfe, aber zu dem endgültigen Ergebnis wie ich es gerne hätte bin ich noch nicht gelangt.

Die kurze Hintergrundgeschichte:
Ich betreibe seit 2006 einen kleinen Onlineshop mit Motorradersatzteilen und habe die Seite komplett selbst Programmiert. Nur das Frame- und Farbgrundgerüst stammt aus einer Vorlage.

Nun habe ich mich dazu entschlossen auf ein durch CSS "kontrolliertes" Design umzusteigen.
Die Gründe hierfür:
- die "veraltete" Frame-Struktur will ich hinter mir lassen
- wenn die Seite durch Google übersetzt wird, dann gibt es mit Verlinkungen Probleme, die 2 Frames gleichzeitig ändern.
Code: 
<script type="text/javascript" language="JavaScript">
<!--

function FrameAendern (URI, Framename) {
  parent[Framename].location.href = URI;
}

//-->
</script>


Das Grundgerüst des 2 zweispaltigen Layouts mit einer Kopfzeile funktioniert erst einmal so wie gewollt.
Durch den Wrapper ist eine Mindestbreite von 800px gegeben und soll die komplette Fensterbreite nutzen.
Das scrollen in der Kopfzeile in der Ebene funktioniert und das Ausblenden der Scrollbar in der vertikalen funzt auch (Tip hier gefunden, irgendwo).


Jetzt kommt aber der etwas schwierigere Teil bei dem ich so meine Probleme habe. Es geht um das 2 Spalten Design (2 unterschiedliche Hintergrundfarben).

Die Navigationsleiste (links)
- wird in der kompletten Größe dargestellt, also der Inhalt bestimmt die Größe des DIV's, d.h. die komplette Seite muss gescrollt werden und nicht der DIV-Container.
Das ist richtig so und damit bin ich zufrieden.

Der Inhaltsbereich (Mitte)
Der Inhalt dieses DIV-Containers soll mittig im verbliebenen Rest der Fensterbreite angezeigt werden.
Dank des float left in der Navigation funktioniert das auch.
Soweit so gut, aber da gibt es nun Probleme.
1. Wenn nun aber wenig Text da ist, dann wird der DIV-Container kleiner und der X-Scrollbalken rutscht hoch. Dieser soll aber auf der selben Position sein, wie der x-Scrollbalken der Navi-Leiste.
2. Wenn der Text so lang ist, dass der Navi-DIV-Container kürzer ist als der Inhalts-DIV-Container, dann gibt einen unschönen sich hervorhebenden farbigen Kasten.

Somit ist die Frage an sich:
Wie bekomme ich es hin, dass der Inhalts-DIV-Container immer genau so groß ist, wie der Navi-Div-Container????
Eine feste Höhenangabe in px ist KEINE Anternative.

Hier nun die Quelltexte (mit dem worauf es ankommt):
PHP: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>tw-parts.com - Der Online-Shop mit Tuning-, Zubehör- und Ersatzteilen für die Yamaha TW125, 200 und 225</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="design.css" />

</head>

<body style="width:100%; height:100%">

<!--Wrapper Beginn-->
<div id="wrapper">

<!--BilderOben Beginn-->
<div id="BilderOben">
BILDER
</div>
<!--BilderOben Ende-->

<!--Navigation Beginn-->
<div id="Navigation">
<?php
require("menu_div.php");
?>

</div>
<!--Navigation Ende-->


<div id="Inhalt">

<?php
switch ($inhalt)
{
  case "news":
  require("news_div.php");
  break;
  case "artikel":
  require("artikel_div.php");
  break;
  default:
  case "home":
  require("home_div.php");
}
 
?>

</div>
<!--Wrapper Ende-->

</body>
</html>

Und hier die CSS Deklarationen
Code: 
body {
    background-color: #FFFFFF;
    scrollbar-face-color: #A0410D;
    scrollbar-shadow-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #A0410D;
    scrollbar-darkshadow-color: #A0410D;
    scrollbar-track-color: #ffffff;
    scrollbar-arrow-color: #000000
}

div#wrapper{
    width: 100%;
    height: 100%;
    min-width: 800px;
    margin: 0;
    text-align: left;
}

div#BilderOben {
    height: 106px;
    overflow: scroll;
    overflow-y: hidden;
    background-color: #A0410D;
    scrollbar-base-color: #A0410D;
    scrollbar-face-color: #A0410D;
    scrollbar-shadow-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #A0410D;
    scrollbar-darkshadow-color: #A0410D;
    scrollbar-track-color: #ffffff;
    scrollbar-arrow-color: #000000;
}

div#Navigation {
    width:186px;
    height:100%;
    overflow: scroll;
    overflow-y: hidden;
    float: left;
    background-color: #A0410D;
    scrollbar-base-color: #A0410D;
    scrollbar-face-color: #A0410D;
    scrollbar-shadow-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #A0410D;
    scrollbar-darkshadow-color: #A0410D;
    scrollbar-track-color: #ffffff;
    scrollbar-arrow-color: #000000;
}

div#Inhalt {
    height:100%;
    overflow: scroll;
    background-color: #FFFFFF;
    scrollbar-base-color: #A0410D;
    scrollbar-face-color: #A0410D;
    scrollbar-shadow-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #A0410D;
    scrollbar-darkshadow-color: #A0410D;
    scrollbar-track-color: #ffffff;
    scrollbar-arrow-color: #000000;
}

Hier kann man sich den derzeitigen Entwicklungsstand ansehen:
http://www.tw-parts.com/index_div.php
Und hier geht's direkt zur kompletten CSS-Datei:
http://www.tw-parts.com/design.css

Ich danke euch bereits im Voraus für eure Hilfe.
Beste Grüße aus dem (im Moment) leicht verschneiten Sachsen,
macbig2k1


PS: Gibt es die Möglichkeit, dass bei dem Click auf einen Link in der Navigation, dass dann nur der DIV-Container mit dem Inhalt neu geladen wird und nicht die komplette Seite?
Also im Prinzip so, wie es beim Frame Design ist.
 
Was Du suchst kann man aktuell auf 2 Wegen erreichen:

a) Definiere für die beiden nebeneinander liegenden Element, die die gleiche Höhe erreichen sollen, die Eigenschaft "display: table-cell;". Das geht jedoch nicht in älteren Browsern wie dem IE7 (falls dich das interessiert
icon_wink.gif
).
b) Schau dir die Methode "faux columns" an, womit man das genauso erreichen kann. Das klappt dann sogar in älteren Browser.

PS: Gibt es die Möglichkeit, dass bei dem Click auf einen Link in der Navigation, dass dann nur der DIV-Container mit dem Inhalt neu geladen wird und nicht die komplette Seite?
Also im Prinzip so, wie es beim Frame Design ist.
Zum Vergrößern anklicken....




So etwas kannst Du mit AJAX erreichen. Das Wort "Frame" solltest Du dir gleich abgewöhnen
icon_wink.gif


Und Du solltest bevor Du weitermachst erst noch den HTML-Code aufräumen:
[Invalid] Markup Validation of http://www.tw-parts.com/index_div.php - W3C Markup Validator
 
Hallo,

sorry für die kleine Verspätung.
Danke für die schnelle sowie kompetente Antwort. Ich werde mich ran machen und zu versuchen es mit der "faux columns"-Methode umzusetzen.
Ich möchte eine Kompatibilität nach unten soweit wie möglich zu erhalten.

AJAX????
Das Thema wird komplett neu für mich. Aber dafür bin ich hier, damit ich mir etwas anlernen kann und nicht auf veralteten Wissen hängen bleibe.

Ja, ich weiß schon, dass "Frame" in diesem Zusammenhang nicht passend war, mir ist einfach keine bessere Wort-Kombination eingefallen.

Hmmm......ich hab den Quell-Code bei Dreamweaver 5.5 durch die W3C-Überprüfung laufen lassen, da kamen diese Fehlermeldungen nicht.
Das find ich dann doch irgendwie merkwürdig.


Trotzdem, danke nochmal.
Wenn sich ein weiteres Problem auftut, dann melde ich mich.

Grüße, Sebastian
TW-Parts.com
 
Hallo nochmal,


so, das Aufräumen ging dann doch etwas schneller als Gedacht. Die meisten Probleme waren durch das ersetzen des & durch ein &amp; gelöst.

Was mir aber hier wieder eingefallen ist, ist ein Problem mit der ToggleMe Funktion zum ein- und ausblenden eines DIV's.

Wenn ich die DIV's einfach nur durchnummeriert (durch eine Schleife, davor $i_menu = 0 und in der Schleife $i_menu++) sind, dann klappt alles ohne Probleme.
Allerdings erhalte ich dann den Fehler, dass eine DIV-ID nicht mit einer Zahl beginnen darf.

Diesen Fehler habe ich beseitigt, indem ich vor die Zahl eine Buchstabenkombination gesetzt habe:
Code: 
$i_menu++;
$nummer_menu = 'menu_'.$i_menu;

Ein paar Zeilen weiter geht es dann mit:
Code: 
echo '<a class="Navigation" onClick="return toggleMe('.$nummer_menu.')" href="javascript:void(0)">Eine Überschrift</a><br />
<div id="'.$nummer_menu.'" style="display:none">
Irgend ein Text
</div>';
So wie es aussieht klappt das Durchnummerieren mit dem angefügten Text problemlos, ABER das ein- und ausblenden funktioniert nicht mehr.

Heißt das jetzt nun, dass ToggleMe nur mit Zahlen funktioniert?
Oder habe ich da einen Fehler, den ich nicht sehe?


Ich weiß schon, dass diese Frage nicht in den CSS Berich gehört, aber wegen dieser Kleinigkeit, wollte ich keinen extra Thread eröffnen.


Vielen dank schon mal im Voraus.
Beste Grüße und gute Nacht,
Sebastian
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben