✔ ... und wieder mal Column

Papi62 · 28. Juni 2007

... und wieder mal Column, Teil 1

Achtung, dies wird ein 2-teiliger langer Post - Sorry.
Bin kurz vorm durchdrehen "bll bll bll"

Ich habe mich genau an die Anleitung von "Equal-Height CSS Columns - Keeping it tall - redmelon.net" gehalten (wurde hier schon oft empfohlen), mein ich zumindest, aber trotzdem sind meine Spalten nicht gleich lang wie die längste.

Zudem ziehts im IE 6 das ganze noch in die Breite, Firefox zeigt es korrekt an.
Ich find den Fehler nicht und die Nächte werden immer kürzer. HILFE

layout_sa2.css

Code:

/*----------Allgemeine Einstellungen----------*/
* {padding: 0; margin: 0;}
option {padding-left: 0.4em}
html {height: 100%}
/*----------General page style----------*/
body
{
        min-height: 101%;
        font-size: 100.01%;
        position: relative;
        background-color: #660000;
        padding: 10px;
}
/*----------------------------------------------------*/
fieldset, img {border: 0;}
select, input, textarea {font-size: 99%}
a img {display:block;}
/*----------border line and background colour round the page----------*/
#bodyline
{
	background-color: #000000;
	border: 1px #E5DC67 solid;
	padding: 10px;
	min-width: 600px;
}
/*----------Header----------*/
#header
{
	height: 170px;
	width: 100%;
	background: url(images/bg_sw_50.gif);
	background-position: center;
	z-index: 3;
	margin-bottom: 30px;
	min-width: 600px;
}
/*----------Head_left----------*/
#head_left
{
        float: left;
        margin-right: 0 !important; margin-right: -3px;
        z-index: 4;
	height: 170px;
	width: 374px;
}
/*----------Head_right----------*/
#head_right
{
        float: right;
        margin-left: 0 !important; margin-left: -3px;
        z-index: 4;
	height: 170px;
	width: 164px;
}
/*----------Head_center----------*/
#head_center
{
        z-index: 4;
	height: 170px;
        margin-left: 371px;
	margin-right: 161px;
	background: url(images/bord_center.gif);
}
/*----------Column Wrapper----------*/
.col_wrap
{
	width: 100%;
	border: 1px solid black;
        margin: 0 -1px;
        min-width: 600px;
}
/*----------Column Outer----------*/
.col_outer
{
        height: auto !important; /* moderne Browser */
        height:100%; /* IE */
        width: auto !important; /* moderne Browser */
	width: 100%; /* IE */
        background-color: #000000;
       	border-left: 180px #000000 solid;  /* left column width */
	border-right: 180px #000000 solid; /* right column width */
	z-index: 10;
}
/*----------Column inner----------*/
.col_inner
{
        margin: 0; width: 100%;
}
/*--------- Mozilla code ---------*/
.col_outer > .col_inner { border-bottom: 1px solid transparent; }
.col_left { margin-right: 1px; }
.col_right { margin-left: 1px; }
.col_center { margin: 0 -3px 0 -2px; }
/*----------Column left----------*/
.col_left
{
        float: left;
        position: relative;
        width: 180px;              /* left column width */
	margin-left: -180px;       /* _negative_ left column width */
	background-color: #660000;
        z-index: 10;
}
/*----------Column right----------*/
.col_right
{
        float: left;
        position: relative;
        width: 180px;              /* right column width */
	margin-right: -180px;      /* _negative_ right column width */
        background-color: #660000;
	z-index: 11;
}
/*----------Column center----------*/
.col_center
{
        float: left;
        position: relative;
        width: 100%;
	background-color: #660000;
	z-index: 12;
}
/*----------Blasc----------*/
#blasc
{
        margin-top: 30px;
        padding-left: 40px;
        padding-right: 40px;
        float: left;
        z-index: 13;
}
/*----------Freier Bund----------*/
#freierb
{
        margin-top: 20px;
        padding-left: 8px;
        padding-right: 8px;
        float: left;
        z-index: 13;
}
/*----------Seitentitel----------*/
#titel
{
        margin: 0px 0px 20px 50px;
	z-index: 13;
}
/*----------Inhalt H1----------*/
.inhalt_h1
{
	margin: 0px 0px 10px 0px;
	text-align: justify;
        color: #E5DC67;
	background: #660000;
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
        font-weight: bold;
	border-top: 5px #000000 solid;
	padding-top: 10px;
        z-index: 13;
}
/*----------Inhalt----------*/
.inhalt
{
	margin: 0px 0px 10px 0px;
	text-align: justify;
	color: #E5DC67;
	background: #660000;
	position: relative;
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	z-index: 13;
}
.inhalt UL {list-style-type: disc; list-style-position:inside; text-indent: 0px;}
.inhalt a {color: #E5DC67; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
.inhalt a:visited {color: #E5DC67; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
.inhalt a:hover {color: #FFA448; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
.inhalt a:active {color: #E5DC67; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
.inhalt a:focus {color: #E5DC67; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
/*----------Footer----------*/
#footer
{
	height: 50px;
	width: 100%;
	background: url(images/footer_hg.gif);
	background-position: center;
	z-index: 20;
	min-width: 600px;
	margin-top: 20px;
}
/*----------Footer left----------*/
#footer_left
{
        float: left;
        margin-right: 0 !important; margin-right: -3px;
        z-index: 21;
	height: 50px;
	width: 300px;
}
/*----------Footer right----------*/
#footer_right
{
        float: right;
        margin-left: 0 !important; margin-left: -3px;
        z-index: 21;
	height: 50px;
	width: 300px;
}
/*----------Footer center----------*/
#footer_center
{
        z-index: 21;
	height: 50px;
        margin-left: 297px;
	margin-right: 297px;
	background: url(images/footer_center.gif);
}
/*----------clear----------*/
.clear {clear: both;}

SA_Test2.php hier zum angucken online

Code:

<!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" xml:lang="de" lang="de">
<head>
<title>Smokin´Aces - eine World of WarCraft Gilde</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="language"    CONTENT="de">
<META NAME="author"      CONTENT="René Appert">
<META NAME="publisher"   CONTENT="René Appert">
<META NAME="copyright"   CONTENT="René Appert">
<META NAME="description" CONTENT="Gilden Homepage der Smokin´Aces aus World of WarCraft">
<META NAME="keywords"    CONTENT="World of WarCraft, WoW, Smokin´ Aces, Smocking Aces, Smokin Aces, Gilde, Clan, Forum, Rexxar, Allianz">
<META NAME="page-topic"  CONTENT="Spiele,Games,Computer,MMORPG">
<META NAME="page-type"   CONTENT="Homepage,Fanpage,Gildenpage,Clanpage">
<META NAME="audience"    CONTENT="Fans,Spieler,Gamer,Alle">
<META NAME="robots"      CONTENT="index,follow">

<link href="layout_sa2.css" rel="stylesheet" type="text/css">
<link href="navigation.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="bodyline"><!---öffnen der schwarzen Hintergrundbox--->

  <div id="header"><!---Header - Platzhalter für die nachstehenden "div"--->

    <div id="head_left"><img src="http://www.tutorials.de/forum/images/bord_left.gif" alt="" border="0" width="374" height="170"></div>
    <div id="head_right"><img src="http://www.tutorials.de/forum/images/bord_right.gif" alt="" border="0" width="164" height="170"></div>
    <div id="head_center"></div><!---Bild im CSS als Hintergrung deklariert--->

  </div><!---Header schliessen--->
  
  <div class="col_wrap">
  <div class="col_outer">
  <div class="col_inner">

    <div class="col_left">
    
      <div class="menu">
       <ul>
       <li><a href="http://smokinaces.r-appert.ch/index.php">Home (News)</a></li>
       <li><a href="http://smokinaces.r-appert.ch/screens/screens.html">Screenshots</a></li>
       <li><a href="#">
       <b>»</b>unsere Gilde
       <!--[if IE 7]>
       <!--></a>
       <!--<![endif]-->
       <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
             <ul>
             <li><a href="http://smokinaces.r-appert.ch/aces/chars.html">Charaktere</a></li>
             <li><a href="http://smokinaces.r-appert.ch/aces/mobs.html">Gildenfortschritt</a></li>
             <li><a href="http://smokinaces.r-appert.ch/aces/ranks.html">Gildenränge</a></li>
             </ul>
             <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
       </li>
       <li><a href="http://smokinaces.r-appert.ch/phpBB/index.php">Forum</a></li>
       <li><a href="http://smokinaces.r-appert.ch/g_buch/gb.php">Gästebuch</a></li>
       <li><a href="mailto:smokinaces@r-appert.ch?subject=Feedback,_blank">Kontakt</a></li>
       <li><a href="#">
       <b>»</b>Gameinfos
       <!--[if IE 7]>
       <!--></a>
       <!--<![endif]-->
       <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
             <ul>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Geschichte</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Charakterklassen</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Berufe</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Patch Notes</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Skills</a></li>
             </ul>
             <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
       </li>
       <li><a href="#">
       <b>»</b>Anleitungen
       <!--[if IE 7]>
       <!--></a>
       <!--<![endif]-->
       <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
             <ul>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Berufs Quests</a></li>
             </ul>
             <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
       </li>
       <li><a href="#">
       <b>»</b>Gegenstände
       <!--[if IE 7]>
       <!--></a>
       <!--<![endif]-->
       <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
             <ul>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Waffen</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Munition</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Rüstungen</a></li>
             </ul>
             <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
       </li>
       <li><a href="#">
       <b>»</b>Downloads
       <!--[if IE 7]>
       <!--></a>
       <!--<![endif]-->
       <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
             <ul>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Karten</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Wallpapers</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Videos</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Patches (Link)</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Tools</a></li>
             </ul>
             <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
       </li>
       </ul>
       </div>

      <div id="blasc">
        <link rel="stylesheet" type="text/css" href="http://www.buffed.de/snipplet-1.css">
        <form action="http://www.buffed.de" method="post" style="margin:0;" target="_blank">
        <table border="0" cellpadding="0" cellspacing="0" width="100" height="44" background="http://www.buffed.de/images/snipplet-small-1-background.gif">
          <tr>
	    <td height="17" colspan="2"><a href="http://www.buffed.de" target="_blank"><img src="http://www.buffed.de/images/snipplet-small-1-blasc-logo.gif" width="100" height="17" border="0"></a></td>
          </tr>
          <tr>
	    <td height="27" width="68" align="center"><input type="text" name="f" value=" Suchen" class="small-snipplet1-input" onfocus="if(this.value==' Suchen') this.value=''"></td>
            <td height="27" width="34"><input type="image" src="http://www.buffed.de/images/snipplet-small-1-input-ok.gif"></td>
          </tr>
          </table>
          </form>
       </div>
       

       <div id="freierb">
       <style type="text/css">
        div.fb_mg_outer   { background-image:url(http://wow.freierbund.de/pics/mg_ext_back.jpg);
        background-repeat:no-repeat;width:165px;height:61px; }
        div.fb_mg_outer * { font-family: verdana, helvetica, sans-serif; font-size:8pt; }
        div.fb_mg_inner   { padding:7px;margin:0;white-space:nowrap;text-align:center; }
        input.fb_mg_text, input.fb_mg_button
        { border: 1px solid rgb(76, 119, 182); background-color:#FFDE94; color:#000; padding:1px; width:120px; margin:0 }
        input.fb_mg_button { width:auto; padding:0; }
        </style>
        <div class="fb_mg_outer">
        <form action="http://wow.freierbund.de/index.php?pID=16" method="post">
        <div class="fb_mg_inner">
        <input class="fb_mg_text"
            type="text" name="s"
            onfocus="javascript:this.value = '';"
            value="Suchbegriff..." />
        <input class="fb_mg_button"
            type="submit" name="search"
            value="&raquo;" />
        </form>
        </div>
        </div>
        </div>
       
       </div>
    
    <div class="col_center">

      <div id="titel"><img src="http://www.tutorials.de/forum/images/titel_news.jpg" alt="" border="0" width="143" height="80"></div>
      <div class="inhalt_h1">Sonntag, 24.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Einige kleine &Auml;nderungen am Layout durchgef&uuml;hrt.</li>
        <li>Die Seite Gildenr&auml;nge eingebaut.</li>
        <li>Bin grad dabei das Layout der Homepage vollst&auml;ndig zu &uuml;berarbeiten. <a href="http://smokinaces.r-appert.ch/test/SA_Test.php" target="_blank">Testseite kann man hier sehen.</a></li>
        </ul>
      </div>
      <div class="inhalt_h1">Samstag, 16.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Gästebuch ist eingebaut, nun kann sich hier jeder verewigen :-).</li>
        </ul>
      </div>
      <div class="inhalt_h1">Freitag, 15.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Gilden-Mitglieder können nun Bilder hochladen. Anleitung im Forum unter "Ankündigungen intern / Bilder hochladen".</li>
        <li>Einige hundert Avatare und grosse animierte Smilies hinzugefügt.</li>
        </ul>
      </div>
      <div class="inhalt_h1">Donnerstag, 14.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Das Forum ist nun konfiguriert und online, ready to go.</li>
        </ul>
      </div>
      <div class="inhalt_h1">Mittwoch , 13.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Die Seiten "unsere Gilde / Charaktere" und "unsere Gilde / Gildenfortschritt" sind erstellt.</li>
        <li>Layout geringfügig geändert.</li>
        </ul>
      </div>
      <div class="inhalt_h1">Dienstag, 12.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Der erste Entwurf unserer Gilden-Page geht online. Die Site wird nach und nach ausgebaut, habt also etwas Geduld.</li>
        </ul>
      </div>
      <div class="inhalt_h1">Montag, 11.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Unsere Gilde wurde gegründet, die "Smokin´Aces", fast ausschliesslich bestehend aus ehemaligen Mitgliedern der "Old Crusaders". Wir sind eine Allianz-Gilde auf dem Realm "Rexxar".</li>
        </ul>
      </div>

    </div>
    
    <div class="col_right">
    Bla Blub
    </div>
    
    <div class="clear"></div>

  </div>
  </div>
  </div>
  
  <div id="footer">
  
    <div id="footer_left"><img src="http://www.tutorials.de/forum/images/footer_left.gif" alt="" border="0" width="300" height="50"></div>
    <div id="footer_right"><img src="http://www.tutorials.de/forum/images/footer_right.gif" alt="" border="0" width="300" height="50"></div>
    <div id="footer_center"></div><!---Bild im CSS als Hintergrung deklariert--->

  </div>

</div><!---schliessen der schwarzen Hintergrundbox--->

</body>
</html>

Teil 2 folgt im nächsten Beitrag.

Papi62 · 28. Juni 2007

Hier nun Teil 2.

Lieber hätt ich allerdings wenn die gleichlangen Spalten mit folgendem Layout funktionieren würden.
Dieses Layout wird auch vom IE 6 richtig interpretiert.

layout_sa.css

Code:

/*----------Allgemeine Einstellungen----------*/
* {padding: 0; margin: 0;}
option {padding-left: 0.4em}
html {height: 100%}
/*----------General page style----------*/
body
{
        min-height: 101%;
        font-size: 100.01%;
        position: relative;
        background-color: #660000;
        padding: 10px;
}
/*----------------------------------------------------*/
fieldset, img {border: 0;}
select, input, textarea {font-size: 99%}
a img {display:block;}
/*----------border line and background colour round the page----------*/
#bodyline
{
	background-color: #000000;
	border: 1px #E5DC67 solid;
	padding: 10px;
	min-width: 600px;
}
/*----------Header----------*/
#header
{
	height: 170px;
	width: 100%;
	background: url(images/bg_sw_50.gif);
	background-position: center;
	z-index: 3;
	margin-bottom: 30px;
	min-width: 600px;
}
/*----------Head_left----------*/
#head_left
{
        float: left;
        margin-right: 0 !important; margin-right: -3px;
        z-index: 4;
	height: 170px;
	width: 374px;
}
/*----------Head_right----------*/
#head_right
{
        float: right;
        margin-left: 0 !important; margin-left: -3px;
        z-index: 4;
	height: 170px;
	width: 164px;
}
/*----------Head_center----------*/
#head_center
{
        z-index: 4;
	height: 170px;
        margin-left: 371px;
	margin-right: 161px;
	background: url(images/bord_center.gif);
}
/*----------Column all----------*/
#col_all
{
        height: auto !important; /* moderne Browser */
        height:100%; /* IE */
	width: 100%;
        background-color: #000000;
	z-index: 10;
	min-width: 600px;
}
/*----------Column left----------*/
#col_left
{
        float: left;
	height: 100%px;
	width: 180px;
	background-color: #660000;
	border: 1px #E5DC67 solid;
	padding-bottom: 10px;
	min-width: 180px;
        z-index: 10;
}
/*----------Column right----------*/
#col_right
{
        float: right;
	height: 340px;
	width: 180px;
	background-color: #660000;
	border: 1px #E5DC67 solid;
	min-width: 180px;
	z-index: 10;
}
/*----------Column center----------*/
#col_center
{
        margin-left: 193px;
	margin-right: 193px;
	height: 100%;
	background-color: #660000;
	border: 1px #E5DC67 solid;
	padding: 10px 10px 0px 10px;
	z-index: 10;
}
/*----------Navigation----------*/
#navigation
{
        z-index: 10;
}
/*----------Blasc----------*/
#blasc
{
        margin-top: 30px;
        padding-left: 40px;
        padding-right: 40px;
        float: left;
        z-index: 10;
}
/*----------Freier Bund----------*/
#freierb
{
        margin-top: 20px;
        padding-left: 8px;
        padding-right: 8px;
        float: left;
        z-index: 10;
}
/*----------Seitentitel----------*/
#titel
{
        margin: 0px 0px 20px 50px;
	z-index: 10;
}
/*----------Inhalt H1----------*/
.inhalt_h1
{
	margin: 0px 0px 10px 0px;
	text-align: justify;
        color: #E5DC67;
	background: #660000;
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
        font-weight: bold;
	border-top: 5px #000000 solid;
	padding-top: 10px;
        z-index: 10;
}
/*----------Inhalt----------*/
.inhalt
{
	margin: 0px 0px 10px 0px;
	text-align: justify;
	color: #E5DC67;
	background: #660000;
	position: relative;
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	z-index: 10;
}
.inhalt UL {list-style-type: disc; list-style-position:inside; text-indent: 0px;}
.inhalt a {color: #E5DC67; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
.inhalt a:visited {color: #E5DC67; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
.inhalt a:hover {color: #FFA448; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
.inhalt a:active {color: #E5DC67; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
.inhalt a:focus {color: #E5DC67; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
/*----------Footer----------*/
#footer
{
	height: 50px;
	width: 100%;
	background: url(images/footer_hg.gif);
	background-position: center;
	z-index: 20;
	min-width: 600px;
	margin-top: 20px;
}
/*----------Footer left----------*/
#footer_left
{
        float: left;
        margin-right: 0 !important; margin-right: -3px;
        z-index: 21;
	height: 50px;
	width: 300px;
}
/*----------Footer right----------*/
#footer_right
{
        float: right;
        margin-left: 0 !important; margin-left: -3px;
        z-index: 21;
	height: 50px;
	width: 300px;
}
/*----------Footer center----------*/
#footer_center
{
        z-index: 21;
	height: 50px;
        margin-left: 297px;
	margin-right: 297px;
	background: url(images/footer_center.gif);
}
/*----------clear----------*/
.clear {clear: both;}

SA_Test.php Auch hier wieder zum angucken online

Code:

<!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" xml:lang="de" lang="de">
<head>
<title>Smokin´Aces - eine World of WarCraft Gilde</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="language"    CONTENT="de">
<META NAME="author"      CONTENT="René Appert">
<META NAME="publisher"   CONTENT="René Appert">
<META NAME="copyright"   CONTENT="René Appert">
<META NAME="description" CONTENT="Gilden Homepage der Smokin´Aces aus World of WarCraft">
<META NAME="keywords"    CONTENT="World of WarCraft, WoW, Smokin´ Aces, Smocking Aces, Smokin Aces, Gilde, Clan, Forum, Rexxar, Allianz">
<META NAME="page-topic"  CONTENT="Spiele,Games,Computer,MMORPG">
<META NAME="page-type"   CONTENT="Homepage,Fanpage,Gildenpage,Clanpage">
<META NAME="audience"    CONTENT="Fans,Spieler,Gamer,Alle">
<META NAME="robots"      CONTENT="index,follow">

<link href="layout_sa.css" rel="stylesheet" type="text/css">
<link href="navigation.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="bodyline"><!---öffnen der schwarzen Hintergrundbox--->

  <div id="header"><!---Header - Platzhalter für die nachstehenden "div"--->

    <div id="head_left"><img src="images/bord_left.gif" alt="" border="0" width="374" height="170"></div>
    <div id="head_right"><img src="images/bord_right.gif" alt="" border="0" width="164" height="170"></div>
    <div id="head_center"></div><!---Bild im CSS als Hintergrung deklariert--->

  </div><!---Header schliessen--->
  
  <div id="col_all"><!---Column all - Platzhalter für die nachstehenden "div"--->

    <div id="col_left">
      <div id=""navigation">
      <div class="menu">
       <ul>
       <li><a href="http://smokinaces.r-appert.ch/index.php">Home (News)</a></li>
       <li><a href="http://smokinaces.r-appert.ch/screens/screens.html">Screenshots</a></li>
       <li><a href="#">
       <b>»</b>unsere Gilde
       <!--[if IE 7]>
       <!--></a>
       <!--<![endif]-->
       <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
             <ul>
             <li><a href="http://smokinaces.r-appert.ch/aces/chars.html">Charaktere</a></li>
             <li><a href="http://smokinaces.r-appert.ch/aces/mobs.html">Gildenfortschritt</a></li>
             <li><a href="http://smokinaces.r-appert.ch/aces/ranks.html">Gildenränge</a></li>
             </ul>
             <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
       </li>
       <li><a href="http://smokinaces.r-appert.ch/phpBB/index.php">Forum</a></li>
       <li><a href="http://smokinaces.r-appert.ch/g_buch/gb.php">Gästebuch</a></li>
       <li><a href="mailto:smokinaces@r-appert.ch?subject=Feedback,_blank">Kontakt</a></li>
       <li><a href="#">
       <b>»</b>Gameinfos
       <!--[if IE 7]>
       <!--></a>
       <!--<![endif]-->
       <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
             <ul>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Geschichte</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Charakterklassen</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Berufe</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Patch Notes</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Skills</a></li>
             </ul>
             <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
       </li>
       <li><a href="#">
       <b>»</b>Anleitungen
       <!--[if IE 7]>
       <!--></a>
       <!--<![endif]-->
       <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
             <ul>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Berufs Quests</a></li>
             </ul>
             <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
       </li>
       <li><a href="#">
       <b>»</b>Gegenstände
       <!--[if IE 7]>
       <!--></a>
       <!--<![endif]-->
       <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
             <ul>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Waffen</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Munition</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Rüstungen</a></li>
             </ul>
             <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
       </li>
       <li><a href="#">
       <b>»</b>Downloads
       <!--[if IE 7]>
       <!--></a>
       <!--<![endif]-->
       <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
             <ul>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Karten</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Wallpapers</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Videos</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Patches (Link)</a></li>
             <li><a href="http://smokinaces.r-appert.ch/basteln.html">Tools</a></li>
             </ul>
             <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
       </li>
       </ul>
       </div>

      <div id="blasc">
        <link rel="stylesheet" type="text/css" href="http://www.buffed.de/snipplet-1.css">
        <form action="http://www.buffed.de" method="post" style="margin:0;" target="_blank">
        <table border="0" cellpadding="0" cellspacing="0" width="100" height="44" background="http://www.buffed.de/images/snipplet-small-1-background.gif">
          <tr>
	    <td height="17" colspan="2"><a href="http://www.buffed.de" target="_blank"><img src="http://www.buffed.de/images/snipplet-small-1-blasc-logo.gif" width="100" height="17" border="0"></a></td>
          </tr>
          <tr>
	    <td height="27" width="68" align="center"><input type="text" name="f" value=" Suchen" class="small-snipplet1-input" onfocus="if(this.value==' Suchen') this.value=''"></td>
            <td height="27" width="34"><input type="image" src="http://www.buffed.de/images/snipplet-small-1-input-ok.gif"></td>
          </tr>
          </table>
          </form>
       </div>
       

       <div id="freierb">
       <style type="text/css">
        div.fb_mg_outer   { background-image:url(http://wow.freierbund.de/pics/mg_ext_back.jpg);
        background-repeat:no-repeat;width:165px;height:61px; }
        div.fb_mg_outer * { font-family: verdana, helvetica, sans-serif; font-size:8pt; }
        div.fb_mg_inner   { padding:7px;margin:0;white-space:nowrap;text-align:center; }
        input.fb_mg_text, input.fb_mg_button
        { border: 1px solid rgb(76, 119, 182); background-color:#FFDE94; color:#000; padding:1px; width:120px; margin:0 }
        input.fb_mg_button { width:auto; padding:0; }
        </style>
        <div class="fb_mg_outer">
        <form action="http://wow.freierbund.de/index.php?pID=16" method="post">
        <div class="fb_mg_inner">
        <input class="fb_mg_text"
            type="text" name="s"
            onfocus="javascript:this.value = '';"
            value="Suchbegriff..." />
        <input class="fb_mg_button"
            type="submit" name="search"
            value="&raquo;" />
        </form>
        </div>
        </div>
        </div>
       
       </div>
    </div>
    
    <div id="col_right">
    </div>
    
    <div id="col_center">

      <div id="titel"><img src="images/titel_news.jpg" alt="" border="0" width="143" height="80"></div>
      <div class="inhalt_h1">Sonntag, 24.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Einige kleine &Auml;nderungen am Layout durchgef&uuml;hrt.</li>
        <li>Die Seite Gildenr&auml;nge eingebaut.</li>
        <li>Bin grad dabei das Layout der Homepage vollst&auml;ndig zu &uuml;berarbeiten. <a href="http://smokinaces.r-appert.ch/test/SA_Test.php" target="_blank">Testseite kann man hier sehen.</a></li>
        </ul>
      </div>
      <div class="inhalt_h1">Samstag, 16.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Gästebuch ist eingebaut, nun kann sich hier jeder verewigen :-).</li>
        </ul>
      </div>
      <div class="inhalt_h1">Freitag, 15.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Gilden-Mitglieder können nun Bilder hochladen. Anleitung im Forum unter "Ankündigungen intern / Bilder hochladen".</li>
        <li>Einige hundert Avatare und grosse animierte Smilies hinzugefügt.</li>
        </ul>
      </div>
      <div class="inhalt_h1">Donnerstag, 14.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Das Forum ist nun konfiguriert und online, ready to go.</li>
        </ul>
      </div>
      <div class="inhalt_h1">Mittwoch , 13.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Die Seiten "unsere Gilde / Charaktere" und "unsere Gilde / Gildenfortschritt" sind erstellt.</li>
        <li>Layout geringfügig geändert.</li>
        </ul>
      </div>
      <div class="inhalt_h1">Dienstag, 12.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Der erste Entwurf unserer Gilden-Page geht online. Die Site wird nach und nach ausgebaut, habt also etwas Geduld.</li>
        </ul>
      </div>
      <div class="inhalt_h1">Montag, 11.Juni 2007</div>
      <div class="inhalt">
        <ul>
        <li>Unsere Gilde wurde gegründet, die "Smokin´Aces", fast ausschliesslich bestehend aus ehemaligen Mitgliedern der "Old Crusaders". Wir sind eine Allianz-Gilde auf dem Realm "Rexxar".</li>
        </ul>
      </div>

    </div>

  </div><!---Column all schliessen--->
  <div class="clear"></div>
  
  <div id="footer">
  
    <div id="footer_left"><img src="images/footer_left.gif" alt="" border="0" width="300" height="50"></div>
    <div id="footer_right"><img src="images/footer_right.gif" alt="" border="0" width="300" height="50"></div>
    <div id="footer_center"></div><!---Bild im CSS als Hintergrung deklariert--->

  </div>

</div><!---schliessen der schwarzen Hintergrundbox--->

</body>
</html>

Ich bedanke mich schonmal für Eure Bemühungen.

Maik · 28. Juni 2007

Hi,

du hast in der layout_sa2.css im Selektor .col_outer vergessen, die min-height-Eigenschaft für die modernen Browser zu notieren, sowie die Rahmenfarbe von #000000 auf #660000 umzustellen. Wenn du dann noch die Breitenangabe width:100% rausnimmst, streckt der IE die Box nicht mehr über den horizontalen Viewport hinaus.

Code:

.col_outer
{
        min-height: 100%; /* moderne Browser */
        height: auto !important; /* moderne Browser */
        height:100%; /* IE */
        /*width: auto !important;*/ /* auskommentiert = deaktiviert */
        /*width: 100%;*/ /* auskommentiert = deaktiviert */
        background-color: #000000;
        border-left: 180px #660000 solid;  /* left column width */
        border-right: 180px #660000 solid; /* right column width */
        z-index: 10;
}

Dein Vorhaben, in der zweiten Variante die Spaltenhöhen automatisch anzugleichen und zusätzlich mit einem umlaufenden Rahmen zu versehen, der dann eine 100%-Höhe besitzt, lässt sich in dieser Form nicht umsetzen.

Hierfür wäre die "Faux-Columns-Technik" zu empfehlen - nur lässt sich diese auf ein Layout anwenden, das eine feste Breite besitzt.

Papi62 · 28. Juni 2007

michaelsinterface hat gesagt.:
Hi,

du hast in der layout_sa2.css im Selektor .col_outer vergessen, die min-height-Eigenschaft für die modernen Browser zu notieren, sowie die Rahmenfarbe von #000000 auf #660000 umzustellen. Wenn du dann noch die Breitenangabe width:100% rausnimmst, streckt der IE die Box nicht mehr über den horizontalen Viewport hinaus.

Ok, das hab ich hinbekommen, danke erst mal. Nun weiss ich wenigstens wie das funktioniert.

michaelsinterface hat gesagt.:
Dein Vorhaben, in der zweiten Variante die Spaltenhöhen automatisch anzugleichen und zusätzlich mit einem umlaufenden Rahmen zu versehen, der dann eine 100%-Höhe besitzt, lässt sich in dieser Form nicht umsetzen.

Hierfür wäre die "Faux-Columns-Technik" zu empfehlen - nur lässt sich diese auf ein Layout anwenden, das eine feste Breite besitzt.

Ohne die Rahmen bin ich nicht wirklich glücklich und eine feste Breite kommt auch nicht in Frage sonst muss ich das ganze Konzept übern Haufen schmeissen.
Ich versuch mal mit Hintergrundbildern die Rahmen zu simulieren. Ansonsten bleibt mir wahrscheinlich nur ein Tabellenlayout ?!

Maik · 28. Juni 2007

Wenn du die Rahmen mit Hintergrundbildern simulieren willst, läuft es ja auf die empfohlenen Faux-Columns hinaus, nur lassen die sich eben auf ein fixes Layout anwenden, und da dies für dich nicht in Frage kommt, ist es auch mit dem Hintergrundbild "Asche", da ja nur ein Hintergrundbild zum Einsatz käme, das die äußeren Rahmenflanken erzeugt.

Papi62 · 28. Juni 2007

Jup, hab ich grad festgestellt

. Da ich ja einem Border kein Hintergrundbild geben kann (das wär mal ein Feature ^^) werde ich wohl oder übel eine grosse Tabelle machen müssen, schade.
Ist es überhaupt möglich z.B. in einer 3-spaltigen Tabelle nur die mittlere Spalte in der Breite flexibel zu machen und die 2 äusseren fix lassen?
Ich wart mal schnell auf Deine Antwort bevor ich da wieder verzweifel

.

Das mit der Tabelle scheint zu funktionieren.
Dann wurschtel ich weiter und bedanke mich mal wieder, bis zum nächsten Mal

.

Einen hab ich noch ^^.
Gehört zwar nicht in dieses Forum aber vieleicht kannst Du mir das beantworten.
Ich arbeite mit "tsWebEditor 2.1.2.45" und die Voransicht (durch temp. Datei) funktioniert für Firefox super aber beim IE wird mir der Quellcode anstatt der Seite angezeigt.
Falls Du mir da nicht grad so aus dem Ärmel nen Tip geben kannst versuch ichs damit im HTMl-Forum

.

im Anhang: Screenshot der Einstellungen

Maik · 28. Juni 2007

Tut mir leid, aber zum Problem mit dem Webeditor kann ich nichts sagen, da ich ihn nicht nutze.

Von daher wirst du die Frage mal ins Forum für HTML-Editoren stellen müssen.

Papi62 · 28. Juni 2007

Kein Problem, nochmal Danke an dieser Stelle und bis zum nächsten Mal *winke*.

✔ ... und wieder mal Column

Papi62

Mitglied

Papi62

Mitglied

Maik

Papi62

Mitglied

Maik

Papi62

Mitglied

Maik

Papi62

Mitglied

Neue Beiträge