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

Status
Nicht offen für weitere Antworten.
Wenn du die blaue NavBox meinst, dann würde ich den blauen Hintergrund ebenfalls in der HgTrick2.gif einarbeiten.

Und so wie ich das überblicke, kannst du dann das Grundgerüst (HTML- / CSS-Code) der ersten Variante übernehmen.
 
Habe jetzt eine zweispaltige Version hinbekommen... Mit CSS

Freu, Freu

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: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: 0px 0px 20px 0px;

}
div.rightColBreadS1 {
width: 571px;
height: 14px;
text-align:right;
padding: 5px 0px 10px 0px;
}
div.rightColContentS1 {
clear:both;
width: 526px;
padding: 15px 10px 20px 35px;
}
/*Typo3 Template selector zweispaltig */
div.rightCol3S2 {
width: 571px;
padding: 0px 0px 20px 0px;

}
div.rightColBreadS2 {
width: 571px;
height: 14px;
text-align:right;
padding: 5px 0px 10px 0px;
background-image: url(fileadmin/img/HgZweispaltig.gif);
background-repeat:repeat-y;
}
div.rightColS2Wrapper {
width: 571px;
padding: 0px;
margin: 0px;
}
div.rightColS2Blue {
float:left;
width: 144px;
padding: 0px;
margin: 0px;
background-image:url(fileadmin/img/blauVerlauf.gif);
background-position:bottom;
background-repeat:no-repeat;

}
div.rightColS2ContentWrap {
float: right;
width: 427px;
}
div.rightColContentS2 {
width: 367px;
padding: 15px 10px 20px 50px;
}

/* 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>
                  <!-- Template ZWEISPALTIG START -->
<div class="rightCol3S2">
   <div class="rightColBreadS2">###BREADCRUMB###</div>
   <div class="rightColS2Wrapper">
      <div class="rightColS2Blue">###BLUEBOX###<br /><img src="fileadmin/img/clear.gif" width="1" height="200" />
      <br />
      </div>
	  <div class="rightColS2ContentWrap">
	      <div class="rightColContentS2">###CONTENT###</div>
	  </div>
   </div>
</div>
<!-- Template ZWEISPALTIG ENDE -->
     </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>
 
Hallo Wieder!

Jetzt binde ich das Style gerade mit Typo3 in das Projekt ein und irgendwas gefällt dem IE nicht. Ich habe jetzt 3 Stunden dananch gesucht aber finde nichts was es sein kann. (mit meinen kenntnissen)

Könnte mal jemand einen Blick auf http://www.josdesign.at/kunden/vbvk/ werfen.

Dankeschön
 
Ich kann da im IE 6.0 keine Fehler in der Seitendarstellung feststellen. :confused:

Oder hast du den Fehler im Stylesheet mittlerweile gefunden und korrigiert?
 
Huch, bin gerade draufgekommen. Typo3 macht mir eine Strich durch die Rechnung. Es fügt mir Stylsheets hinzu welche ich erst berabeiten muss...

//edit

Ich habs jetzt nochmal so eingestellt sodass es im IE falsch angezeigt werden sollte. Lösung habe ich noch keine gefunden.

Der Fehler liegt beim Block:

NEUIGKEITEN AUF VOLLEYLIONS.AT
{GRAFIKLINIE}



Wenn diese Grafik nicht wäre, wäre auch das Design iO...
In Opera und FF gehts problemlos...
 
Das Problem mit Typo3 habe ich jetzt endgültig gelöst.

Nur was ich von MItgliedern des Vereins höre, ist dass der Internet Explorer machensmal die Seite so öffnet, dass der Menü-DIV (centerCol) unterhalb des Content (rightCol) ist. Also einfach nach unten verschoben, als hätte der COntent keinen Platz. Nach erneutem Reload der Seite wird sie wieder völlig normal angezeigt.

Jetzt habe ich versucht den centerCol vor rigtCol im Quelltext zu schieben.. aber da steht dann immer der rightCol unterhalb von centerCol.

@michael: meinst du kann man das irgendwie beheben?

mit bestem Dank im Vorraus,
jos
 
Wenn das DIV .centerCol im HTML-Code vor dem DIV .rightCol notiert werden soll, lauten die CSS-Regeln für die drei Blöcke folgendermaßen:

Code: 
div.leftCol {
width: 25px;
float: left;
padding: 0;
vertical-align:top;
}

div.centerCol {
float: left;
width: 150px;
padding: 0 0 10px 0;
vertical-align: top;
}

div.rightCol {
width: 571px;
float: right;
padding: 0;
}
 
Danke vielmals Michael!

Frohe Weihnachten!

//edit

Hmm... irgendwie kommt da auch was falsches raus...

Könntest du vielleicht nach den Weihnachtsfeiertagen mal das ansehen:

http://www.volleylions.at/__erstellung/2/screenWennVerkehrt.png

http://www.volleylions.at/__erstellung/2/galerie0.html

Da wird nämlich dann der RightCol unterhalb von centerCol geschoben. Evtl. könnte man das so hinbekommen das dann gar nicht , auch wenn der Inhalt vielleicht breiter ist von rightCol das trotzdem rechts von centerCol angezeigt wird?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück