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

Status
Nicht offen für weitere Antworten.
Wende die display:block-Eigenschaft auf die Grafikelemente an, damit im IE der größere Abstand zum unteren Rand des Eltern-DIVs verringert wird. Der Grund hierfür sind die Zeilenumbrüche im HTML-Code zwischen <div> ... </div> und den img-Tags.

Das "Footer-Problem" solltest du mit dem padding-bottom-Wert des Wrapper-DIVs in den Griff kriegen, indem du ihm die Footer-Höhe gibst.
 
Ich verstehe das nicht ganz - wie meinst du display:block anwenden, wohin anwenden? auf alle Grafiken in der Seite. Muss ich das, oder nur auf die enthalten in den betroffenen DIVs?

Und das mit dem Footer haut auch nicht recht hin. Das Padding verstellt nichts. Da bleibt alles gleich.

Und welchen Wert muss ich jetzt eingeben damit ich zum Beispiel den Footer etwas niedriger machen kann?


Steh grad sehr auf der Leitung, sorry..
 
Folgende CSS-Regel musst du derzeit auf alle Grafikelemente in dem Dokument anwenden, da sie alle im IE einen größeren Abstand zum nachfolgenden Element besitzen:

Code: 
img { display: block; }

Was den Footer betrifft, probier es mal mit diesem Stylesheet:

Code: 
div.footer {
position:relative;
z-index:20;
width: 750px;
margin: -24px auto 0 auto;
padding: 0px;
height: 24px;
background: white;
text-align:center;
color:#666666;
background-image:url(fileadmin/img/bottomline.gif);
background-repeat:repeat-x;
}
Wenn du den Footer niedriger haben möchtest, muß der height- und margin-top-Wert dementsprechend editiert werden.
 
Ich hab mal das CSS-Konzept etwas "verfeinert", da in den modernen Browsern (Firefox, Mozilla, Netscape, Opera, SeaMonkey) Probleme auftreten, wenn der Inhalt im DIV .centerCol größer wird, als der vertikale Viewport -> der Footer wandert nicht nach unten und die linke Hintergrundgrafik (verticallinedown.gif) wird unterhalb des unteren Fensterrandes nicht wiederholt.

Aus diesem Grund habe ich den Footer im DIV .wrapper am unteren Elementrand positioniert, sowie den linken und rechten gepunkteten Rahmen für das DIV .centerCol in einer Grafik (centerCol_bgImage.png) vereint, um sicher zu stellen, daß er auch auf beiden Seiten bis zum Footer runter reicht.

Den Vorschlag hänge ich hier als ZIP-Datei an.
 

Anhänge

  • 27086attachment.zip
    35,2 KB · Aufrufe: 25
Puhh... also jetzt wollte ich gerade das Problem beschreiben das wenn der Text zu lang is...

Danke, schau ich mir gleich an!

EDIT: So, die Menüleiste centerCol wird eigentlich nie so lange... Ich habe jetzt eine überarbeitete Version angehängt in der ich

den Inhalt vom centerCol minimiert habe
Im CSS img {display:block} für IE
Contentbezogene DIVs im rigthCol
Contentbezogene CSS Anweisungen für die Contentbezogenen DIVs

Die upgeloadete Version templateDemo_bearb.htm zeigt das "einspaltige Design"
Die upgeloadete Version templateDemo2_bearb.htm zeigt das "zweispaltige Design"

Bei beiden wird die centerCol, sofern rightCol größer wirdnicht bis zum Schluss gezogen.
Bie der zweispaltigen Version habe ich das Problem das der blaue Balken nicht bis hinunter geht.
 
Zuletzt bearbeitet:
Nach kurzer Begutachtung der beiden Dokumente kann ich schon mal so viel sagen, daß sich das Problem mit den gleichhohen Spalten wohl nur mit einer entsprechenden Hintergrundgrafik in den Griff kriegen lässt, die im DIV .wrapper eingesetzt wird.

Ansonsten sehe ich da keine Möglichkeit, wie sich eine benachbarte Spalte nach unten "verlängert", wenn der Inhalt in der daneben liegenden Spalte zunimmt.
 
OK, das habe ich mir auch schon gedacht bzw. dir auch in der PN geschrieben.

Ich werde mal weiterversuchen...

Außerdem finde ich das ich das zweispaltige Design sicherlich auch mit Tabellen gestalten kann im rightCol3.

Danke jedenfalls, bin dann. :)
 
SO, ich habe im div.centerCol die Backgroundgrafik weggenommen.
Im leftCol und rightCol habe ich die Hintergrundfarbe entfernt da sie eh von .wrapper bzw von dem Hg-Bild weis wird.

Im div.wrapper habe ich

HTML: 
background-image:url(fileadmin/img/HgTrick2.gif);
background-position:top;

hinzugefügt.

fileadmin/img/HgTrick.gif ist eine 2 Pixel hohe Grafik.
fileadmin/img/HgTrick2.gif ist eine 2000 Pixel hohe Grafik bei der die ersten 75 Pixel an der Oberseite weis sind, weil sonst auch der eigentliche Header der Seite mit vertikalen Linien verseht wird, was das Design zerstört. Oder gibt es eine andere Möglichkeit den div.header nicht mit der Backgroundgrafik zu versehen. Naja, evtl. den div.header aus div.wrapper entfernen?


FAZIT: Im Internetexplorer ist die HG-Grafik von div.wrapper bis ganz zum Schluss zu sehen was mir den Footer etwas zerstört. Im FF 2.0 zeigt die Hintergrundgrafik (HgTrick2.gif) wieder nur die angezeigte Höhe des Browsers. Damit meine ich, dass wenn ich weiter runterscrolle die HG Grafik nicht gezeigt wird und die Linien einfach aus sind.

Im Anhang die bearbeiteten Files inkl. HgTrick.gif und HgTrick2.gif

EDIT: Im Anhang ist auch noch ein Screenshot wie ich das zweispaltige Design jetzt erstelle. Sofern im Menü ###NAVBOX### INhalt ist, verschiebt sich der Verlauf nach unten. SOmit muss der blaue Blaken nicht bis runter gehen, und sieht irgendwie besser aus. Mit Tabellen zu realisieren wäre es kein Problem. Ich habs jetzt mit DIVs probiert und muss sagen das es im IE nicht gut aussieht (2. Grafik im Anhang). Die Verlaufsgrafik ist noch nicht im ZIP-File
 

Anhänge

  • 27089attachment.zip
    39,3 KB · Aufrufe: 19
  • 27092attachment.zip
    43,9 KB · Aufrufe: 20
  • 27095attachment.jpg
    27095attachment.jpg
    134 KB · Aufrufe: 23
  • 27096attachment.jpg
    27096attachment.jpg
    64,7 KB · Aufrufe: 22
  • 27097attachment.png
    27097attachment.png
    11,3 KB · Aufrufe: 26
Zuletzt bearbeitet:
Hab mal aus der "aktuellen" ZIP-Datei das Dokument templateDemo_bearb.htm überarbeitet:

Code: 
<!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:url(fileadmin/img/shadowLiRe.gif) center top repeat-y;
}

div.wrapper {
position:relative;
width: 750px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
border-left: 0px solid #000;
border-right: 0px solid #000;
padding:5px 5px 0px 5px;
background:#fff url(fileadmin/img/HgTrick2.gif) left top repeat-y;
}

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

div.leftCol {
width: 25px;
float: left;
margin-right: 0 !important;
margin-right: -3px;
padding: 0px 0 0px 0px;
vertical-align:top;
}

div.rightCol {
width: 571px;
float: right;
margin-left: 0 !important;
margin-left: -3px;
padding: 0;
}

div.centerCol {
width: 150px;
margin-left: 27px !important;
margin-left: 24px;
padding: 0 0 10px 0;
vertical-align:top;
}

div.centerCol p {
margin: 0;
padding: 3px;
}

div.footer {
clear: both;
position:relative;
bottom: 0px;
z-index:20;
width: 750px;
height: 20px;
margin: -20px auto 0 auto;
padding: 0px;
text-align:center;
color:#666666;
background: #fff url(fileadmin/img/bottomline.gif) repeat-x;
}

div.leftCol1 {
height: 150px;
width: 25px;
}
div.rightCol1 {
height: 150px;
width: 571px;
}
div.rightCol2 {
width: 571px;
height: 15px;
background:url(fileadmin/img/tableTop.gif);
margin-top: 1px;
}
div.leftCol2 {
width: 25px;
height: 15px;
background:url(fileadmin/img/tableTop.gif);
margin-top: 1px;
}
/*Typo3 Template selector einspaltig */
div.rightCol3S1 {
width: 571px;
padding: 5px 0px 20px 0px;

}
div.rightColBreadS1 {
width: 571px;
height: 14px;
text-align:right;
padding: 0px 0px 10px 0px;
}
div.rightColContentS1 {
clear:both;
width: 510px;
padding: 15px 5px 20px 35px;
}

/* IE Images BRs wegmachen */
img { display: block; }

/* CONTENT Überschriften definieren */
h1 {
font-size: 15px;
color:#005B78;
font-weight: bold;
}
h2 {
font-size: 14px;
color:#005B78;
font-weight: bold;
}
h3 {
font-size: 13px;
color:#005B78;
font-weight: bold;
}
h4 {
font-size: 12px;
color:#005B78;
font-weight: bold;
}
h5 {
font-size: 11px;
color:#005B78;
font-weight: bold;
}
/*Content Ps definieren */
div.rightColContentS1 p, div.rightColContentS2 p {
margin: 0px 0px 8px 2px;
text-decoration:none;
font-size:10px;
}
-->
</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">
                   <div class="leftCol1">
                   <img src="fileadmin/img/image_home_left.jpg" alt="Stimmungsbild links" />
                   </div>
                  <div class="leftCol2">
                  </div>
     </div>
     <div class="rightCol">
                   <div class="rightCol1">
                   <img src="fileadmin/img/image_home_right.jpg" alt="Stimmungsbild rechts" />  </div>
                  <div class="rightCol2">
                  </div>
                                  <!-- Typo3 Template-Selector einpaltig START -->
                                  <div class="rightCol3S1">
                                          <div class="rightColBreadS1">###BREADCRUMB###</div>
                                        <div class="rightColContentS1"><h1>Überschrift H1</h1>
                     <p>Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext.Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext.</p>
                     <p>Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext.</p>
                     <p>Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext.</p>
                     <h2>Überschrift H2</h2>
                     <p>Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext.</p>
                     <h3>Überschrift H3</h3>
                     <p>Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext.Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext.Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext.</p>
                     <h4>Überschrift H4</h4>
                     <h5>Überschrift H5</h5>
                     <p>Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. Dies ist ein Beispieltext. Mit Wörtern, welche aus Buchstaben bestehen. </p></div>
                                  </div>
                                  <!-- Typo3 Template-Selector einpaltig START -->
     </div>
     <div class="centerCol">
                  <p>Hier kommt<br />das Menü<br />
                  Die senkrechten<br />
gehn auch noch<br />
nicht ganz runter. asfd asdf asdf asdf asd fasd fas dfas df<br />
Hier kommt<br />das Menü<br />
                  Die senkrechten<br />
gehn auch noch<br />
nicht ganz runter.<br />
Hier kommt<br />das Menü<br />
                  Die senkrechten<br />
gehn auch noch<br />
nicht ganz runter.<br />
Hier kommt<br />das Menü<br />
                  Die senkrechten<br />
gehn auch noch<br />
nicht ganz runter.<br />
Hier kommt<br />das Menü<br />
                  Die senkrechten<br />
gehn auch noch<br />
nicht ganz runter.<br />
Hier kommt<br />das Menü<br />
                  Die senkrechten<br />
gehn auch noch<br />
nicht ganz runter.<br />
<br />
                  </p>



<p>- END</p>

     </div>
     <div style="clear:both;font-size:1px;">&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>
 
JA perfekt! Was denkst du zum zweispaltigen Layout? Sollte ich es mit Tabellen realisieren? Oder kann man das irgendwie auch hinbiegen? So ganz ohne Barrieren...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück