✔ Umstellung von TABLE-Design auf CSS-Design - Einige Denkfehler?

Status
Nicht offen für weitere Antworten.
Um die Frage eindeutig beantworten zu können, müsste ich erstmal sehen, wie du das empfohlene Beispiel für deine Zwecke verwendest und ggfs. "umgeschrieben" hast. Denn in meinem Beispiel besitzt das Wrapper-DIV ja schon eine Hintergrundgrafik.
 
Irgendwie will das nicht! Die Wrapper-DIV macht die Seite auf 100%.

Aber die 3 Spalten dehnen sich nicht mit aus. Und ich benötige das aber, da ja in den ersten beiden Spalten 2 senkrechte Linien bis zum Footer immer gehn sollen.

http://www.josdesign.at/kunden/vbvk/


HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Volleylions.at CSS-Design</title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-image:url(fileadmin/img/linksrechts.gif);
}

div.wrapper {
width: 750px;
min-height: 100%;
margin: 0 auto;
border-left: 0px solid #000;
border-right: 0px solid #000;
background-color:#FFFFFF;
padding:5px 5px 0px 5px;
}

* html div.wrapper { /* Für IE */
height: 100%;
}

div.header {
width: 750px;
height: 66px;
background: white;
margin: 0px 0px 5px 0px;
}

div.leftCol {
width: 25px;
float: left;
padding: 0px 2px 0px 0px;
background-color:white;
background-image:url(fileadmin/img/verticallinedown.gif);
background-position:right;
background-repeat:repeat-y;
}

div.rightCol {
width: 571px;
float: right;
padding: 0;
background-color:white;
}

div.centerCol {
margin: 0px 571px 0px 21px;
padding: 0;
background-image:url(fileadmin/img/verticallinedown.gif);
background-position:right;
background-repeat:repeat-y;
}

div.clear {
clear: both;
margin: 0;
padding: 0;
height: 1;
line-height: 0;
font-size: 0;

}

div.footer {
width: 750px;
margin: -26px auto 0 auto;
padding: 0;
height: 24px;
background: #fff;
background-image:url(fileadmin/img/bottomline.gif);
background-position:top;
background-repeat:no-repeat;
text-align:center;
color:#666666;
}

-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="header">
          <img src="fileadmin/img/vbv_header1.gif" alt="Volleylions.at" width="750" height="66" />	     </div>
     <div class="leftCol">
          leftCol
     </div>
     <div class="rightCol">
          rightCol
     </div>
     <div class="centerCol">
          centerCol
     </div>
     <div class="clear">&nbsp;</div>
</div>
<div class="footer">USC Raiffeisen Krumbach Sektion Volleyball | Tel. +43 (0)664/380 292 0 | e-mail: volleylions@gmx.at | by josDesign.at</div>

</body>
</html>
 
Zuletzt bearbeitet:
Der Trick liegt darin, daß die drei Spalten durch eine Hintergrundgrafik "generiert" werden, die im Wrapper-DIV senkrecht wiederholt wird.

Schau dir einfach nochmal das empfohlene Beispiel und die dazugehörige Grafik (3cols.png) an ;)
 
OK, das ist dann aber nicht das was ich brauchen kann.
Ich habe nämlich versch. "hintergründe"
gibt es eine Möglichkeit diese trotzdem auszuweiten?

2 Beispiele: (laufenden NON-CSS Version)
http://www.josdesign.at/kunden/vbvk/58.0.html
http://www.josdesign.at/kunden/vbvk/56.0.html

Dabei tauscht mir eine Extension von Typo3 automatisch den Bereich rechts unten.

Das heißt ich würde im neuem DIV.rightCol weiteres Divs haben. (rightCol1, rightCol2) Im rightCol2 würde ich dann je nach Seitentyp einen anders aussehenden Container platzieren.

Hmmmmm...

EDIT: Gut, ich könnte es als Kompromiss mit blauen Hintergrund machen. Denn dann ist halt bei Inhalten die mit ganzer Breite als keinen Blauen Rahmen haben links zum Schluss nachher immer blau...
 
Zuletzt bearbeitet:
Ich habe es jetzt nochaml upgedatet.

http://www.josdesign.at/kunden/vbvk/

Im Internet Explorer kann ich durch Angabe der Höhe der leftCol und centerCol (height = 90%) die gestrichelten Linien, also den gesamten DIV vergrößern nach unten.

Aber beim Firefox geht dies nicht.
 
Zuletzt bearbeitet:
josDesign hat gesagt.:
Im Internet Explorer kann ich durch Angabe der Höhe der leftCol und centerCol (height = 90%) die gestrichelten Linien, also den gesamten DIV vergrößern nach unten.

Aber beim Firefox geht dies nicht.
Zum Vergrößern anklicken....

Probier mal folgendes:

Code: 
div.wrapper {
width: 750px;
height: 100%;
margin: 0 auto;
border-left: 0px solid #000;
border-right: 0px solid #000;
background-color:#FFFFFF;
padding:5px 5px 0px 5px;
}

div.leftCol {
width: 25px;
float: left;
padding: 0px 2px 0px 0px;
background-color:white;
background-image:url(fileadmin/img/verticallinedown.gif);
background-position:right;
background-repeat:repeat-y;
min-height: 90%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 90%; /* IE */
vertical-align:top;
}

div.centerCol {
margin: 0px 572px 0px 21px;
padding: 0;
background-image:url(fileadmin/img/verticallinedown.gif);
background-position:right;
background-repeat:repeat-y;
min-height: 90%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 90%; /* IE */
vertical-align:top;
}
Der "Star-HTML-Hack" für den IE kann somit aus dem Stylesheet entfernt werden:

Code: 
* html div.wrapper { /* Für IE */
height: 100%;
}
 
Du mußt die beiden Grafiken in einer einzigen Grafik vereinen und diese in einem übergeordneten Element (Wrapper-DIV oder body) in der Vertikalen wiederholen.

P.S. Und bitte benutze zukünftig den "Ändern"-Button deines Postings, wenn du noch etwas nachreichen willst, und erstelle hier nicht im Minutentakt neue Beiträge. Vielen Dank ;)
 
Danke, habe ich gemacht! Ich hatte mit dieser Idee schon angefangen bzgl. Hintergrundgrafik. Danke!

Noch 2 kleine Frage: Wenn man genau hinsieht merkt man dies auch:

Im IE ist unter dem rechtem Stimmungsbild 2 Pixel frei zum blauen DIV
Im Firefox ist es hingegen richtig dargestellt mit 1 Pixel Abstand. kann man dass auch noch irgendwie hinbiegen?

Habe schon statt margin mal einen weißen (also nicht sichtbaren) border gemacht, hilft aber nicht.


-----------------

Und die linke senkrechte Linie von leftCol schaut in den Footer hinein. Wie man sieht habe ich schon versucht indem ich den z-index vom footer raufschraube zu verändern, da tut sich aber nichts? Im IE passt hier jedoch wieder alles.


Hast du vielleicht noch einen kleinen Tipp für mich? :)


MIT BESTEM Dank im Vorraus,
jos
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück