Beiträge von Thomas_B

Thomas_B

Zitat von Elvis

Die Schreibweise ist nicht egal.

sorry meinte name, nicht schreibweise

Thomas_B

Ups - doppelt gepostet...

Thomas_B

Zitat von Elvis
HTML
<td class="hauptseite">
wäre aber richtig.

Die Schreibweise der Klasse ist ja egal, meinetwegen auch 'hauptseite':

HTML

<td class="hauptseite">

Code

td.hauptseite {Atribute: Wert; }

müsste aber funktionieren.

Hat der Tipp mit Firebug geholfen?

Thomas_B

Zitat

Mit der id hats aber jetzt geklappt, vielen Dank für den Hinweis, aber trotzdem komisch, dass die classes nicht erkannt werden. Denn meine css-datei ist nun wirklich sehr übersichtlich, vielleicht sind im css-menü ein paar classes, die stören.

Ich könnte mir vorstellen, dass es an der Schreibweise liegt - probier mal 'tdHauptseite' statt 'td.hauptseite'.

Ich nehm zu Testen immer den Firebug - damit kann man ganz schnell herausfinden, welche CSS-Attribute in welcher Reihenfolge ausgelesen werden.

Ansonsten stehen hier nützliche Infos über die Reihenfolge der CSS-Klassen: http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet

Thomas_B

Hier die Beschreibung des Problems und dessen Lösung:
Ich brauche eine Navigationsleiste mit flexibler Höhe und fester Breite. Deswegen habe ich es mit einem Div-Container gelöst. Dabei gibt es einen oberen, mittleren und unteren Div-Bereich. Da ich aber eine recht aufwändige grafische Gestaltung des Randes habe, benötige ich einen Abstand von 4px zum Inhalt.
Diesen hatte ich mit padding beim 'ul'-Tag versucht. Da dann aber bei der zweiten Navigationsebene (mit einem zweiten 'ul') ein weiterer Abstand entsteht, habe ich dies versucht zu verhindern, indem ich die 'ul'-Tags der ersten Ebene und der zweiten Ebene getrennt angesprochen habe. Dies hat beim FF und IE7 funktioniert, nur nicht beim IE6.
Die jetzige Lösung ist weitaus eleganter: der Abstand wir durch einen weiteres Div-Element "naviRandAbstand" erzeugt, in dem lediglich "padding:3px 4px 2px 4px" steht.
Hier das Beispiel: Klick mich!
Nicht wundern, wenn das Beispiel komisch aussieht, diese Version ist für den IE6 optmimiert.
Hier die Html-Datei

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
   <head>
     <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="Styles_IE6.css" />
  <title>Startseite</title> 
 </head>
<body>
<div id="inhalt">
 <div id="wrapper">
 
<div id="navi">
 <div id="naviRandLinksRechts">
  <div id="naviRandOben">
   <div id="naviRandUnten">
    <div id="naviRandAbstand">
     <ul id="menuLevel1">
      <li class="menuLevel1"><a href="/"> Startseite</a><span class="unsichtbar">.</span>
      </li>
      <li class="menuLevel1"><a href="/kanzlei/"> Wir über uns</a><span class="unsichtbar">.</span>
      </li>
      <li class="menuLevel1"><span>HDM leistet</span>
       <ul id="menuLevel2">
        <li class="menuLevel2"><a href="./navi_test.html"> 
        Wir über uns</a><span class="unsichtbar">.</span>
        </li>
        <li class="menuLevel2"><a href="./navi_test2.html"> 
        HDM leistet</a><span class="unsichtbar">.</span>
        </li>
        <li class="menuLevel2"><a href="/leistungen/vereine.php">
        für Vereine</a><span class="unsichtbar">.</span></li>
        <li class="menuLevel2"><a href="/leistungen/arbeitnehmer.php">
        für Arbeitnehmer</a><span class="unsichtbar">.</span></li>
        <li class="menuLevel2"><a href="/leistungen/rentner.php"> 
        für Rentner und Pensionär</a><span class="unsichtbar">.</span></li>
        <li class="menuLevel2"><a href="/leistungen/vermieter.php">
        für Vermieter</a><span class="unsichtbar">.</span></li>
        <li class="menuLevel2"><a href="/leistungen/kapitalanleger.php"> 
        für Kapitalanleger</a><span class="unsichtbar">.</span></li>           
       </ul>
      </li>
      <li class="menuLevel1"><a href="/dienstleistung/"> 
      Zusatzdienstleistungen</a><span class="unsichtbar">.</span>
      </li>
      <li class="menuLevel1"><a href="/faq.php"> 
      FAQ's</a><span class="unsichtbar">.</span>
      </li>
      <li class="menuLevel1"><a href="/service/"> 
      Mandanten Seiten</a><span class="unsichtbar">.</span>
      </li>
     </ul>
    </div>
   </div>
  </div>
 </div>
</div>
</div>
</body>
</html>

Alles anzeigen

Hier die CSS-Datei

Code

body {
font: normal 110.01% Verdana, Arial, Helvetica;
font-family:  Verdana, Arial, Helvetica;
margin:0;
padding:0;
/* background-color:#F9F9F9; */
background: url("img/Design/Verlauf-horizontal.jpg") top left repeat-x  #F9F9F9;
}
/* color:#555555  */
/* ------------------ 1. globale Auzeichnungen ------------------ */
div {
margin:0;
padding:0;
border:0;
}
h1,h2,h3,h4,h5,h6{
margin:0px 20px 10px 220px;
padding:0;
}
h1 {
color: #4e0b54;
font: normal 1.4em Verdana, Arial, Helvetica;
}
 
h2 {
color: #be3783;
margin:0px 20px 10px 220px;
padding:0;
font: normal 1.2em Verdana, Arial, Helvetica;
}
h3 {
color:#be3783;
margin:0px 20px 10px 220px;
padding:0;
font:small-caps 1.1em Verdana, Arial, Helvetica;
}
h4 {
color:#555;
margin:0px 20px 10px 220px;
padding:0;
font:normal 1.0em Verdana, Arial, Helvetica;
}
p, address {
margin:0px 0 10px 220px;
padding:0;
line-height:1.5em;
}
address {
font: normal 1em Verdana, Arial, Helvetica;
}
 
ul {
margin:0px 20px 10px 240px;
padding:0;
list-style:none;
}
 
form {
margin:10px 220px 10px 20px;
padding:0;
} 
 
fieldset {
margin:0;
padding:0;
border:0px solid;
}
label {
font:bold 1em Verdana, Arial, Helvetica;
color:#666;
display:block;
}
a {
color: #b10130;
text-decoration:none;
}
a:hover {
color:#b10130;
padding-bottom:1px;
}
 
a:active, a:focus {
background:#666;
color: #fff;
}
 
img {
border:0;
margin:0;
padding:0;
}
acronym {
cursor: help;
border-bottom: 1px dotted #aaa;
}
abbr {
cursor: help;
border-bottom: 1px dotted #aaa;
}
/* .trenner {
background: url('../img/Design/trenner.gif') no-repeat 0 0;
height:30px;
margin:1em 230px 1em 20px;
} */
/* ausgeblendete Elemente */
.unsichtbar, .reader, a.skip {
position:absolute;
left:-3000px;
top:-2000px;
width:0px;
height:0px;
overflow:hidden;
display:inline;
}
a.skip:focus, a.skip:active {
position:absolute;
left:165px;
top:10px;
width:9em;
height:1.1em;
padding:5px;
border:1px solid #eee;
overflow:visible;
display:block;
font:normal small-caps 1.1em times new roman, serif;
letter-spacing:1px;
}
/* ------------------- Wrapper ---------------------------- */
.wrap {
float:none;
clear:both;
border:1px; 
visibility:hidden; 
margin:0;
padding:0;
height:0;
line-height:1px;
font-size:1px;
}
#logo {
background:#fff;
padding:20px 0 3px 20px;
border-left:1px solid #C0A6BE;
border-right:1px solid #C0A6BE;
}
 
/* -------------------- 2. Die Metanavigation (Kopfzeile) -------------------------- */
#link_aussen {
background: #fff url('img/Design/Verlauf-meta.jpg') repeat-x 0 0; 
padding:5px;
margin:0;
font-size:0.7em;
text-align:right;
height: 17px;
border-left:1px solid #C0A6BE;
border-right:1px solid #C0A6BE;
}
#link_aussen ul {
margin:0 20px 0 0;
}
* html #link_aussen ul {
margin-right:5px;
}
#link_aussen li {
display:inline; */
margin:0;
/* padding:7px 0 2px 0; */
padding: 0 0 2px 0;
text-align:left;
background:none;
width:5.5em;
height: 17px;
}
#link_aussen li a {
color: #666666;
}
#link_aussen li a:focus, #link_aussen li a:active {
color: #505050;
padding: 2px 1px 1px 12px;
}
#link_aussen li a:hover {
color: #fff;
}
 
/* ----------------- 4. Der Bereich mit Logo ------------- */
#logo {
height:70px;
font-size:0.8em;
}
#logo img {
float:left;
}
/* ----------------- Der Inhaltsbereich ------------------ */
#inhalt {
float:left;
width:818px;
text-align: justify;
font-size:12px;
border-bottom:none;
padding:30px 30px 10px 30px;
border-left:1px solid #C0A6BE;
border-right:1px solid #C0A6BE;
background: url('img/Design/Hintergrund.jpg') no-repeat 0 0;
}
#inhalt img {
/* display:block; */
}
 
#inhalt a {
color: #4e0b54; 
text-decoration: underline; 
}
 
a:hover {
color:#4e0b54;
padding-bottom:1px;
}
 
#inhalt ul {
margin:0px 20px 10px 240px;
padding:0;
}
 
#inhalt li {
/* margin:0 0 8px;
padding:0 0 0 15px; */
list-style: disc;
line-height:1.45em; 
}
 
#inhalt .Hinweis {
  background: #c;
  border: 2px #4e0b54 solid;
  text-align: center;
  margin-top: 10px;
  margin-left: 220px;
  margin-right: 10px;
  padding: 10px;
  }
 
/* ------------- Die Inhaltsnavigation Org------------------ */
#navi {
min-height: 300px; */
height: 100%;
float:left;
width:183px;
/* border:1px solid #BCBBB7;*/
margin:0;
filter:alpha(opacity=80);
opacity:.8;
text-align: left;
position:relative; top:0px; left:0px;
}
#naviRandOben {
background-image: url('img/Design/naviRandO.gif');
background-repeat:no-repeat;
height: 6px;
width:191px;
margin: 0;
}
#naviRandLinksRechts {
background:url('img/Design/naviRandLR.gif') top left;
width:4px;
height: auto;
margin: 0;
}
#naviRandRechts {
background-image:url('img/Design/naviRandR.gif') repeat-y top left;
height: 100%;
width:4px;
position:relative; top:0px; left:187px;
}
#naviRandUnten {
background:url('img/Design/naviRandU.gif') left bottom;
background-repeat:no-repeat;
/* height: 6px;
width:191px;
position: relative; top:0px; left: 0px;*/
}
/* Abstandhalter, damit der 4px breite grafische Rand nicht überdeckt wird */
#naviRandAbstand {
 padding:3px 4px 2px 4px;
}
/* gegen 3px-space-bug in our \beloved f***in' IE */
* html #navi {
/* margin-left:-3px;*/
}
#navi ul {
margin:0;
/*padding:4px 4px 2px 4px;   hier wird der abstand von rahmen und inhalt festgelegt*/
}
/* und wieder/normal weiter */
#navi ul li {
margin:0;
padding:0;
background:none;
display:inline;
}
#navi ul li a, #navi ul li span {
color:#4e0b54;
line-height:10px;
display:block;
padding:15px 17px;
border-bottom:1px solid #fff;
background:#E4D9B0; 
text-decoration: none
}
#navi ul li span {
color:#4e0b54;
background: #D6C280;
font-weight:bold;
}
#navi ul li a:visited {
color:#4e0b54;
}
#navi ul li a:hover {
background:#D6C280 ;
}
#navi ul li a:focus, #navi ul li a:active {
background:#D6C280;
color: #fff;
}
#navi li ul a {
background:#D6C280 url('img/Design/pfeil.gif') no-repeat 20px 12px;
}
#navi li ul a, #navi li ul span {
padding:9px 0 9px 35px;
}
#navi li ul li ul a {
background:#f4b4d8;
}
#navi li ul li ul a:hover {
background:yellow;
}
a#jca, a#jca:hover {
margin:0;
padding:0;
background:transparent;
display:block;
}
#navi a.oberlink {
background:#000;
}
 
#wrapper
{
}
 
#container {
background-color: #fffdff;
width: 880px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
} 
/* ----------------- Die Fusszeile --------------------- */
.firmenanschrift {
background: #fff url('/img/Design/Verlauf-unten.jpg') repeat-x 0 0;
clear:left;
font: Verdana, Arial, Helvetica;
font-size: 0.9em;
color: #4e0b54;
/* text-align: center;
vertical-align:middle; */
padding: 5px 0 5px 0;
height: 22px;
border-top: solid 1px #C4C8CB;
border-left: 1px solid #C0A6BE;
border-right: 1px solid #C0A6BE;
border-bottom: 1px solid #C0A6BE;
}
#firmenanschrift ul {
margin:2px 0 0 220px;
}
* html #firmenanschrift ul {
margin-right:5px;
}
#firmenanschrift li {
font-size: 0.8em;
color: #505050;
display:inline;
margin:0;
padding: 0 0 5px 0;
text-align: center;
background: none;
width: 5.5em;
height: 5px;
}
#firmenanschrift li a {
color: #505050;
padding:0 0 3px 0;
/* background: url('../img/Design/pfeil2.gif') no-repeat 0 5px; */
display:inline;
}
#firmenanschrift li a:focus, #link_aussen li a:active {
/* background:#666 url('../img/Design/pfeil2.gif') no-repeat 2px 7px; */
color: #505050;
padding: 2px 1px 1px 12px;
}
#firmenanschrift li a:hover {
padding:0 0 3px 0;
color: #fff;
/* background: url('../img/Design/list.gif') no-repeat 0 5px; */
}
.trenner {
margin: 0 0.5em;
background: none;
color: #505050;
padding: 0 1px 0 1px;
}
/*
#firmenanschrift {
background: #fff url('../img/Design/Verlauf-meta.jpg') repeat-x 0 0;
padding:0;
margin:0;
font-size:0.7em;
color: #505050;
text-align:right;
height:2em;
border-left:1px solid #C0A6BE;
border-right:1px solid #C0A6BE;
*/
 
/*  test */
img {
    border: none;
    }
/* ------------------ Bilder übers CMS --------------- */
.ObjLi
 {
 margin-right: 8px;
 margin-bottom: 4px;
 margin-top: 4px;
 float: left;
 position: relative;
 }
.ObjRe
 {
 margin-left: 20px;
 margin-bottom: 4px;
 margin-top: 4px;
 float: right;
 position: relative;
 }
 
.gerade 
  {
    color: #333333;
    background-color: #fefffa;
  }
.ungerade 
  {
    color: #333333;
    background-color: #f6dbea;
  } 
 
.formularnavigation
   {
   width: 860px;
   border-bottom: 1px #4e0b54 solid ; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   padding: 0px;
   margin-left: 10px;
   }
 
.formulartable
   {
   width: 860px;
   background-color: #f6ecf2;
   border: 1px #4e0b54 solid ; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   padding: 0px;
   margin-left: 10px;
   }
 
.formularform 
  {
  margin:10px 220px 10px 10px;
  padding:0;
  }
 
.formulartd
  {
  background-color: #f6ecf2;
  /* border-right: 1px #2a9e0e solid ; */
  border: none; 
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-variant: normal;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 5px;
  vertical-align:top;
 }
.formularbezeichner
  {
  background-color: #f6ecf2;
  border: none; 
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  font-variant: normal;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 5px;
  vertical-align:top;
 }
.formularth
  {
    color:#209e02;
    border-bottom: 1px #4e0b54 solid ; 
    background-color: #f6dbea;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding: 5px;
 vertical-align:middle;
  } 
 
#ns4
  {
  color: #333333;
  font: 10px Verdana, Arial, Helvetica, sans-serif;
  display: none
  }
 
#service p{
margin:0px 0px 10px 10px;
}
 
#service form {
margin:0px 0px 10px 10px;
padding:0;
} 
 
/* #service table {
border: 1px solid red;
} */
 
#service ul {
margin:10px 0px 10px 37px;
padding:0;
list-style:none;
}
 
#service ol {
margin:10px 0px 10px 37px;
padding:0;
list-style:none;
}
#service ol li {
margin:0 0 8px;
padding:0 0 0 15px;
list-style: decimal;
line-height:1.5em;
}
#service ul li {
margin:0 0 8px;
padding:0 0 0 0px;
line-height:1.5em;
list-style:disc;
}
 
.news_listentrytitle {
 margin: 0em;
}
 
#service h3 {
margin:10px 0px 10px 10px;
padding:0;
}

Alles anzeigen

Nochmals vielen Dank für die freundliche und schnelle Hilfe!!!

Thomas_B

Ich habe es hinbekommen - die Lösung poste ich in Kürze, sobald die Beispiele online sind.
Vielen Dank für die schnelle und freundliche Hilfe! °Thumbs-up°

Viele Grüße
Thomas

Thomas_B

Zitat von sejuma

Ich habe keinen IE 6 zum Testen.
Wozu ist bei #sidebar das "display: inline" gut?

In diesem Fall hat es keine Bedeutung - ich habe es auf allen Browsern gestestet.

Thomas_B

Zitat von sejuma
Sorry, da hatte ich wohl eine falsche Seite erwischt.
Dennoch:
Der IE braucht diesen Doctype um das CSS-Boxmodell richtig darzustellen:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

Dankeschön! Habe ich gleich geändert, aber funktioniert leider immer noch nicht...

Thomas_B

Zitat von Afrael

sejuma meint die neue FF-Version.

Ich hab den 3.0.10, da wirds korrekt dargestellt...

Thomas_B

Hmm... Hab ich eigentlich schon: http://validator.w3.org/check?uri=http…=Inline&group=0
Bist du im richtigen Verzeichnis? http://www.steuerberater-molnar.de/dev/ie6/test/index2.html

Thomas_B

Für den FF und IE7 habe ich bereits eine funktionierende Version: siehe Webseite. Ich will die CSS-Datei mit Conditional Commands einbinden.

Hier der Screenshot der IE6-Darstellung:
[Blockierte Grafik: http://www.steuerberater-molnar.de/dev/ie6/test/images/screenshot.jpg]

Thomas_B

Habe ich - hat sich nix geändert...

Thomas_B

Hallo,

die Navigation einer Webseite wird im IE6 falsch dargestellt: hier das Beispiel. Die Abstände ab dem Navigationspunkt "Wir über uns" sind zu gross, erwünscht ist eine bündige Darstellung.
Hier die Html-Datei:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
   <head>
     <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>IE6 Test</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link href="style.css" rel="stylesheet" type="text/css" media="screen">
 </head>
<body>
<!-- start header -->
<div id="header">
 <h1>Personal </h1>
 <p> design By Free CSS Templates</p>
</div>
<!-- end header -->
<!-- start page -->
<div id="wrapper">
 <div id="page">
    <!-- start content -->
    <div id="content">
     <div class="post">
      <h1 class="title">Welcome To My Website</h1>
      <p class="byline"><small>Posted on August 25th, 2007 by <a href="#">
      admin</a> | <a href="#">Edit</a></small></p>
      <div class="entry">
       <p><strong>Personal </strong> is a free template 
       from <a href="http://freecsstemplates.org/">Free CSS 
       Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">
       Creative Commons Attribution 2.5 License</a>. The 
       flower photo is fromt <a href="http://www.pdphoto.org/">
       PDPhoto.org</a>. You're free to use this template 
       for both commercial or personal use. I only ask that 
       you link back to <a href="http://freecsstemplates.org/">
       my site</a> in some way. Enjoy :)</p>
      </div>
      <p class="meta"><a href="#" class="more">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" 
class="comments">
      Comments</a> (33)</p>
     </div>
     <div class="post">
      <h2 class="title">Praesent Scelerisque</h2>
      <p class="byline"><small>Posted on August 25th, 2007 by <a href="#">
      admin</a> | <a href="#">Edit</a></small></p>
      <div class="entry">
       <p>Pellentesque pede. Donec pulvinar ullamcorper 
       metus. In eu odio at lectus pulvinar mollis. 
       Vestibulum sem magna, elementum ut, vestibulum eu, 
       facilisis quis, arcu. Mauris a dolor. Nulla 
       facilisi. Cum sociis natoque penatibus et magnis dis 
       parturient montes, nascetur ridiculus mus. Sed 
       blandit. Phasellus pellentesque, ante nec iaculis 
       dapibus, eros justo auctor lectus, a lobortis lorem 
       mauris quis nunc. Praesent pellentesque facilisis 
       elit. <br>
       </p>
      </div>
      <p class="meta"><a href="#" class="more">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" 
class="comments">
      Comments</a> (33)</p>
     </div>
    </div>
    <!-- end content -->
    <!-- start sidebar -->
    <div id="sidebar">       
     <div class="wrap">
      <div class="top">
       <div class="btm">
        <ul class="menuLevel1">
         <li class="menuLevel1"><a href="/"> Startseite</a><span class="unsichtbar">.</span>
         </li>
         <li class="menuLevel1"><a href="/kanzlei/"> Wir 
         über uns</a><span class="unsichtbar">.</span>
         </li>
         <li class="menuLevel1"><span>HDM leistet</span>
          <ul class="menuLevel2">
           <li class="menuLevel2"><a href="index.html"> 
           Wir über uns</a><span class="unsichtbar">.</span>
           </li>
           <li class="menuLevel2"><a href="index2.html"> 
           HDM leistet</a><span class="unsichtbar">.</span>
           </li>
           <li class="menuLevel2"><a href="/leistungen/vereine.php">
           für Vereine</a><span class="unsichtbar">.</span></li>
           <li class="menuLevel2"><a href="/leistungen/arbeitnehmer.php">
           für Arbeitnehmer</a><span class="unsichtbar">.</span></li>
           <li class="menuLevel2"><a href="/leistungen/rentner.php"> 
           für Rentner und Pensionär</a><span class="unsichtbar">.</span></li>
           <li class="menuLevel2"><a href="/leistungen/vermieter.php">
           für Vermieter</a><span class="unsichtbar">.</span></li>
           <li class="menuLevel2"><a href="/leistungen/kapitalanleger.php"> 
           für Kapitalanleger</a><span class="unsichtbar">.</span></li>   

          </ul>
         </li>
         <li class="menuLevel1"><a href="/dienstleistung/"> 
         Zusatzdienstleistungen</a><span class="unsichtbar">.</span>
         </li>
         <li class="menuLevel1"><a href="/faq.php"> 
         FAQ's</a><span class="unsichtbar">.</span>
         </li>
         <li class="menuLevel1"><a href="/service/"> 
         Mandanten Seiten</a><span class="unsichtbar">.</span>
         </li>
        </ul>
       </div>
      </div>
     </div>
    </div>
    <!-- end sidebar -->
    <div style="clear:both">&nbsp;</div>
 </div>
</div>
<div id="footer">
 <p>©2007 All Rights Reserved &nbsp;•&nbsp; Design by <a href="http://www.freecsstemplates.org/">
 Free CSS Templates</a> &nbsp;•&nbsp; Icons by <a href="http://www.famfamfam.com/">
 FAMFAMFAM</a>.</p>
</div>
</body>
</html>

Alles anzeigen

Und hier die CSS-Datei:

Code

body {
 margin-top: 20px;
 margin: 0;
 padding: 0;
 background: #fff;
 font-size: 11px;
 text-align: justify;
 color: #000;
}
body, th, td, input, textarea, select, option {
 font-family: "Trebuchet MS", "Times New Roman", Arial, Times, serif;
}
h1, h2, h3 {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-weight: normal;
 color: #000000;
}
h1 {
 letter-spacing: -2px;
 font-size: 3em;
}
h2 {
 letter-spacing: -1px;
 font-size: 2em;
}
h3 {
 font-size: 1em;
}
p, ul, ol {
 line-height: 200%;
}
blockquote {
 padding-left: 1em;
}
blockquote p, blockquote ul, blockquote ol {
 line-height: normal;
 font-style: italic;
}
a {
 color: #FFFFFF;
}
a:hover {
 color: #FFFFFF;
}
hr {
 display: none;
}
#wrapper {
 margin: 0;
 padding: 0;
 /*background: #C0F3FD url(images/img02.jpg) repeat-x left top;*/
}
 
/* Header */
#header {
 width: 800px;
 height: 100px;
 margin: 0 auto;
 padding: 50px 0 0 0;
 font-family: "Trebuchet MS", "Times New Roman", Arial, Times, serif;
 background: url("images/img04.jpg") no-repeat left 20%;
}
#header h1, #header p {
 margin: 0;
}
#header h1 {
 float: left;
 color: #000000;
 font-size: 36px;
 padding-left: 75px;
 height: 70px;
}
#header p {
 float: left;
 padding: 17px 0 0 10px;
 font-size: 12px;
 font-weight: bold;
}
#header a {
 text-decoration: none;
 color: #F79F1A;
}
#banner {
 margin: 0 auto;
 margin-bottom: 15px;
 padding: 0;
 width: 800px;
 height: 250px;
 background: url("images/img01.jpg") no-repeat left top;
}
/* Page */
#page {
 width: 800px;
 margin: 0 auto;
 margin-bottom: 15px;
}
/* Content */
#content {
 float: right;
 width: 505px;
 margin: 0;
 padding: 25px 25px 15px 20px;
}
.post {
 padding: 0px 0 0 0;
}
.title {
 border-left: 6px solid #2E2E2E;
 padding: 0 20px 0 10px;
 font-size: 24px;
}
.title a {
 text-decoration: none;
 color: #FFFFFF;
}
.pagetitle {
}
.byline {
 margin: -25px 20px 0 17px;
 color: #303030;
}
.meta {
 text-align: left;
 color: #17A141;
 padding: 10px 20px 10px 12px;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 12px;
 background: #34CD65;
 border: 3px solid #000000;
}
.meta .more {
 padding-left: 10px;
}
.meta .comments {
 padding-left: 10px;
}
.meta a {
 color: #000000;
}
.navigation {
}
.alignleft {
 float: left;
}
.alignright {
 float: right;
}
.posts {
 margin: 0;
 padding: 0;
 list-style: none;
 line-height: normal;
}
.posts li {
}
.posts h3 {
 margin: 0;
 font-weight: bold;
}
.posts p {
 margin: 0;
 line-height: normal;
}
.posts a {
}
.entry {
 margin: 0;
 padding: 0 0 15px 17px;
}
.last {
 border: none;
}
/* ============================  Navigation  ============================ */
/* ---- Allgemeine Attribute ---- */
#sidebar {
 float: left;
 width: 191px;
 margin-top: -130px;
 padding: 0 0 0 0;
 color: #17A141;
 background-color:#E4D9B0; 
 filter:alpha(opacity=80);
 opacity:.8;
 margin:0;
 display: inline;
 /*position: relative; top:0px; left:0px;*/
}
/* ---- Rahmen mit Bildelementen: Linker und rechter Rand ---- */
#sidebar .wrap {
 background: url('img/Design/naviRandLR.gif') repeat-y left top;
}
/* ---- Rahmen mit Bildelementen: Oberer Rand ---- */
#sidebar .top {
 background: url('img/Design/naviRandO.gif') no-repeat left top;
}
/* ---- Rahmen mit Bildelementen: Unterer Rand ---- */
#sidebar .btm {
 margin: 0;
 padding: 0;
 background: url('img/Design/naviRandU.gif') no-repeat left bottom;
}
#sidebar ul {
 color:#4e0b54;
 margin: 0;
 padding: 4px 4px 2px 4px; 
 list-style: none;
}
#sidebar a {
}
#sidebar a:hover {
 background:#D6C280 ;
}
/* Navigationspunkte mit Links (a) und ohne Links (span) */
#sidebar ul li a, #sidebar ul li span{
 color:#4e0b54;
 text-decoration: none;
 border-bottom:1px solid #fff;
 line-height:25px;
 display:block;
 
 /* height:35px; */
 padding:6px 15px;
}
/* Aktiver Navigationspunkt */
#sidebar ul li span{
 font-weight:bold;
 background:#D6C280 ;
}
/* ------------ 1. Navigationsebene ------------ */ 
.menuLevel1 ul {
 color:#4e0b54;
 margin: 0;
 padding: 0px 0px 0px 0px; 
 list-style: none;
}
/* IE6: Korrektur der falschen Zellenhöhe / Wird im FF falsch dargestellt */
.menuLevel1 li {
 padding: 0px 0px 0px 0px;
 margin: 0;
 height: 0px;
} 
/* Hat Auswirkungen auf die 1.Navigationsebene, trotz des Namens */
#menuLevel2 ul li a {
 height:30px;
}
/* ---- 2. Navigationsebene ---- */ 
#menuLevel2 ul {
 color:#4e0b54;
 margin: 0;
 padding: 0px 4px 2px 4px;
 list-style: none;
}
/* Positionierung des Textes */
#menuLevel1 ul li a{
 padding: 1px 0px 5px 33px;  
 margin: 0;
}
/* war aus 
#menuLevel2 li{
 padding:0px 0 0px 0px;
 /*background-color:#fff;
 margin: 0;
 height: 23px;
}*/
#sidebar li ul li{
 display:block; /* Mouse-Over über die gesamte Button-Fläche */
 text-decoration: none;
 margin: 0 0 0 0; 
}
#menuLevel1 li ul a, #menuLevel2 li ul a  {
 background:#D6C280; 
 /* padding:-14px -4px 0px -4px; */
}
/* Hat Auswirkungen auf die 2.Navigationsebene, trotz des Namens */
#menuLevel1 li ul a {
 background:#D6C280 url('img/Design/pfeil.gif') no-repeat 18px 11px;
 height:20px;
}
/*
#menuLevel2 li li a {
 background:url('img/Design/pfeil2.gif') no-repeat 18px 11px;
 /*padding:35px -4px 0px -4px
 height:20px;
}
/*
#sidebar li li {
 margin: 0 0 0 0px;
 padding: 0 0 0 0px;
 line-height: 0px;
}
*/
/* =========== temp ================ */
/* ausgeblendete Elemente */
.unsichtbar, .reader, a.skip {
position:absolute;
left:-3000px;
top:-2000px;
width:0px;
height:0px;
overflow:hidden;
display:inline;
}
/* -------------- Search ------------------ */
#search input {
 display: none;
}
#search input#s {
 display: block;
 width: 230px;
 padding: 2px 5px;
 border: 1px solid #3DD1FF;
}
#search br {
 display: none;
}
/* Calendar */
#calendar {
}
#calendar h2 {
 margin-bottom: 15px;
}
#calendar table {
 width: 80%;
 margin: 0 auto;
 text-align: center;
}
#calendar caption {
 width: 100%;
 text-align: center;
}
#next {
 text-align: right;
}
#prev {
 text-align: left;
}
/* Footer */
#footer {
 width: auto;
 height: 118px;
 background: url("images/img03.gif") repeat-x left top;
 text-align: center;
 font-size: 10px;
 font-family: Arial, Helvetica, sans-serif;
}
#footer p {
 padding: 50px 0;
}
#footer p a {
}

Alles anzeigen

Hat jemand eine Idee? Dass wäre echt spitze...

Viele Grüße
Thomas

Beiträge von Thomas_B

Externe CSS-Datei

Externe CSS-Datei

Externe CSS-Datei

Externe CSS-Datei

Darstellung im IE6 ist fehlerhaft

Darstellung im IE6 ist fehlerhaft

Darstellung im IE6 ist fehlerhaft

Darstellung im IE6 ist fehlerhaft

Darstellung im IE6 ist fehlerhaft

Darstellung im IE6 ist fehlerhaft

Darstellung im IE6 ist fehlerhaft

Darstellung im IE6 ist fehlerhaft

Darstellung im IE6 ist fehlerhaft