Antworten auf deine Fragen:
Neues Thema erstellen

Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

ichwars83

Noch nicht viel geschrieben

Hi,

ich hab ein schon hier oft aufgetretenes Problem. Und zwar hab ich Darstellungsunterschiede in den Browsern...im IE7 siehts top aus, allerdings im IE8 und FF gibts Darstellungsprobleme. --> Siehe Screen.

Code häng ich bei...

Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" xml:lang="de" >
   <head>
      <meta http-equiv="content-type" content="text/html; UTF-8" />
      
<script type="text/javascript">
<!--
var fontsize=13;
function textSize(dec) {
fontsize+=(dec==1)?1:(-1);
if (fontsize<1) fontsize=1;
document.getElementById("content").style.fontSize=""+fontsize+"px";
}
//-->
</script>
      <title>Filatow-Leipzig.de --&gt; Home</title>
      <style type="text/css" media="screen, projection">
      
         /* reset 
         ----------------------------------------------------------------------------------------*/
         *        { margin: 0; padding: 0; }
         
         a        { text-decoration: none; outline: none; color: #000; }
         a img    { border: 0; }
          
         ol, ul   { list-style: none; }
         q:before, q:after, 
         blockquote:before, blockquote:after { content: ""; }
         
         /* footer stick-alt
         ----------------------------------------------------------------------------------------*/
         html, body, #page-wrap {height: 100%;}
         body > #page-wrap {height: auto; min-height: 100%;}
         /* CLEAR FIX*/
         .clearfix:after {content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;}
         .clearfix {display: inline-block;}
         /* Hides from IE-mac \*/
         * html .clearfix { height: 1%;}
         .clearfix {display: block;}
         /* End hide from IE-mac */
         
         
         /* rebuild
         ----------------------------------------------------------------------------------------*/
         body { 
             font: 62.5%/1.5  "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; 
             background: #024a5e url() repeat;
             color: #333;     
             text-align:center; 
         }
         
         #page-wrap {
            background: #fff url(Bilder/bar.jpg) repeat-y 650px 0;
            width: 800px;
            margin: 0 auto;
            text-align: left;
            
         }
         
         #main {
            tet-align: left;
            padding-bottom: 150px;
            
         }
         
         /* header
         --------------------------------------------------------------------------------------- */
         #header {
            background: #fff url(Bilder/main_header.jpg) repeat-x 0 20px;
            height: 101px;
            text-align: right; /* overwriting the text orientation */
            
         }
         #header h1 {
            width: 629px;
            float: left;
            margin-top: 25px ;
            
         }
         #header strong {
            display: block;
            font-size: .8em;
            margin-top: -10px;
            
         }
         #header span {
            background: url(Bilder/bar.jpg) repeat-y;
            float: right;
            margin-right: 20px;
            width: 130px; height: 101px;
            
         }
         
         /* content
         --------------------------------------------------------------------------------------- */
         #content {
            width: 609px; /* width + padding-left + padding-right = absolute Breite */
            float: left;
            padding-bottom: 9em;
            padding: 10px 0 0;
            padding-left: 20px; 
            padding-right: 20px;
            
         }
         
         /* sidebar
         --------------------------------------------------------------------------------------- */
         #sidebar {
            width: 141px; /* width + padding-left = absolute Breite */
            float: right;
            padding-top: 10px;
            padding-left: 10px;
            
         }
         
         /* footer
         --------------------------------------------------------------------------------------- */
         #footer {
            position: relative;
            background: #024a5e url('Bilder/bar.jpg') repeat-y 650px 0;
            margin: -20px auto 0;
            width: 800px; height: 20px;
            text-align: left;
          clear:both;
         } 
            
         }
         
         /* general classes
         ----------------------------------------------------------------------------------------*/
         .hide, .print-logo, .close-button{ display:none; }
         .clear { clear:both; } 
         .right { float: right; } 
         .left { float: left; }
         .preforient { text-align: left; } /* prefered orientation of the text */
      .Stil4 {color: #FFFFFF}
      .Stil5 {
 color: #333333
}
.Stil8 {
 font-size: 10pt;
 font-weight: bold;
}
      .Stil9 {font-size: 10%}
      .Stil10 {
 font-size: 8pt;
 color: #FFFFFF;
}
      #apDiv1 {
 position:absolute;
 margin-left:110px;
 padding-left:40px;
 left:100px;
 top:0px;
 width:633px;
 height:22px;
 z-index:1;
}
      </style>
</head>
   <body id="index">
   
      <div id="apDiv1">
        <div align="right">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="11%" class="Stil8"><div align="left">Home</div></td>
              <td width="13%" class="Stil8"><div align="left"><a href="kontakt.html" titel="Kontakt">Kontakt</a></div></td>
              <td width="76%" class="Stil8"><div align="left"><a href="impressum.html" titel="Impressum">Impressum</a></div></td>
            </tr>
          </table>
        </div>
      </div>
<div id="page-wrap">
         
         <div id="main" class="clearfix">
            <div id="header" class="clearfix">
               <h1>Wladimir-Filatow-Schule<strong>Leipzig</strong></h1>
              <span></span>
               
            </div>
            
            <div id="content">
               <table width="620px" border="0" cellspacing="0" cellpadding="0">
                 <tr>
                   <td valign="top"><a href="javascript:textSize(1)">Schrift größer</a> | <a href="javascript:textSize(0)">Schrift kleiner</a><div id="content"></div>
</td>
                   <td valign="top">&nbsp;</td>
                   <td valign="top">&nbsp;</td>
                 </tr>
                 <tr>
                   <td width="70%" valign="top"><h3>Herzllich Willkommen</h3>
                   <p align="justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p></td>
                   <td width="3%" valign="top">&nbsp;</td>
                   <td width="28%" valign="top"><h3 align="justify">Aktuelles Wetter</h3>
                   <p align="justify"> <script language="JavaScript" type="text/javascript" src="[URL="http://woys.wetter.com/woys2.js.php?216082,a2c8d562d20ca56026c6ac79171a801d%22%3E%3C/script%3E%3Cdiv"]http://woys.wetter.com/woys2.js.php?216082,a2c8d562d20ca56026c6ac79171a801d"></script><div[/URL] style="width:150px;background-color:#FFFFFF">
<a href="[URL]http://www.wetter.com/deutschland/leipzig/DE0006194.html[/URL]" title="Wetter für Leipzig" target="_blank" class="wettercomsmall216082">Wetter für Leipzig</a>
</div> </p>
                   <p align="justify"><br />
                   </p></td>
                 </tr>
                 <tr>
                   <td valign="top"><h3>Neuigkeiten</h3>
                   <p align="justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p></td>
                   <td>&nbsp;</td>
                   <td valign="top"><h3 align="justify">Aktuelle Termine</h3>
                   <p align="justify"> ? <strong>Herbstferie</strong>n<br />
vom 12.10. bis 24.10.09<br /><br />
Weitere Termine in Kürze </p>
               
                 
               </table>
               <h3>&nbsp;</h3>
           </div>
         <div id="sidebar" class="clearfix">
               <h3 class="Stil5">Navigation:</h3>
               <ul class="Stil8" id="navi">
                  <li class="Stil4"><a href="schule.html" title="Schule" class="Stil4">Schule</a></li>
                 <li class="Stil4"><a href="hort.html" title="Hort" class="Stil4">Hort</a></li>
                 <li class="Stil4"><a href="freizeit.html" title="Freizeit" class="Stil4">Freizeit</a></li>
                 <li class="Stil4"><a href="elternrat.html" title="Elternrat" class="Stil4">Elternrat</a></li>
                 <li class="Stil4"><a href="foerderverein.html" title="Förderverein" class="Stil4">F&ouml;rderverein</a></li>
                 <li class="Stil4"><a href="galerie.html" title="Galerie" class="Stil4">Galerie</a></li>
                 <li class="Stil4"><a href="sponsoren.html" title="Sponsoren" class="Stil4">Sponsoren</a></li>
                 <li class="Stil4"><a href="links.html" title="Links" class="Stil4">Links</a></li>
           </ul>
           </div>
            
        </div>
         
   </div>
         
   <div id="footer" class="">
     <div align="center"><span class="Stil9"> </span>
         <p align="left" class="Stil10"> &copy; 2009 &bull; <a href="[URL]http://www.computerservice-leipzig.de[/URL]" target="_blank" class="Stil4">Computerservice Leipzig</a> </p>
     </div>
   </div>
</body>
</html>
Vielleicht kann jemand helfen, vielen Dank schon mal.

Viele Grüße aus L.E.
IcHwArS

Hier ist noch das Bild...vergessen...
 
Zuletzt bearbeitet von einem Moderator:

cebito

undefined

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

Welcher Screen? Und ohne css ist da sowieso nix zu zu sagen.
 

sokie

Mod | Web

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

HTML:
                   <td valign="top"><h3 align="justify">Aktuelle Termine</h3>
                   <p align="justify"> • <strong>Herbstferie</strong>n<br />
vom 12.10. bis 24.10.09<br /><br />
Weitere Termine in Kürze </p>
               
                 
               </table>
zum einen ist das Vorkommen einer Tabelle an der Stelle völlig unklar.
eine geöffnete Tabellenzelle, und -Zeile die vor dem schliessen einer Tabelle nicht geschlossen wird, muss zwangsläufig probleme machen.

(warum der IE7 etwas korrekt aussehendes darstellt ist wieder ein mysterium)
 

Shynt

Noch nicht viel geschrieben

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

Grundsätzlich ist zu sagen:
Was Firefox, Opera und co darstellen ist nahezu zu 100% richtig dargestellt...

Was IE anzeigt ist Schrott xD

Version zu Version macht der IE andere Sachen kaputt.
Deshalb codet man es zuerst richtig (Opera + Firefox überprüfen) und dann passt man es mit einer extra CSS Datei dem IE an (falls er ne Stelle wie immer falsch interpretiert)

Was ich damit sagen will: Code es nicht so, dass es im IE gut aussieht (Egal welche Version) sondern in den guten Browsern... sonst baust du nur Mist *g*

MfG
Vlyn
 

ichwars83

Noch nicht viel geschrieben

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

Es geht nicht darum ob guter oder schlechter Browser, sondern darum was der großteil der User hat. Derzeit ist es nun mal noch der IE7...deswegen erstmal dafür.
Außerdem helfen mir persönlich solche Antworten schon mal gar nicht bei meinem Problem...aber das sei nur nebenbei erwähnt.

Ich werd das mit der nicht geschlossenen Table mal checken...

So kinners dann schlaft mal weiter...;-)
 

Shynt

Noch nicht viel geschrieben

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

Es geht nicht darum ob guter oder schlechter Browser, sondern darum was der großteil der User hat. Derzeit ist es nun mal noch der IE7...deswegen erstmal dafür.
Außerdem helfen mir persönlich solche Antworten schon mal gar nicht bei meinem Problem...aber das sei nur nebenbei erwähnt.

Ich werd das mit der nicht geschlossenen Table mal checken...

So kinners dann schlaft mal weiter...;-)

Vollkommen falsch: Es geht um richtigen Code!!!

Und Opera sowie Firefox zeigen den Code 1:1 richtig an. Sieht etwas im Internet Explorer toll aus und in anderen Browsern nicht, so ist dein Code falsch.

Sobald der Code wirklich passt, kann man mit ein, zwei Zeilen die nur für den Internet-Explorer gelten für diesen die Seite auch anpassen.

Und nur weil 70-75% Internet Explorer nutzen (6 & 7) heißt das nicht, dass man es nicht trotzdem richtig machen sollte. Die Zahl von anderen Browser Usern steigt noch dazu an.

Im übrigen: Wenn der Code einwandfrei ist, dann ist die Anpassung für IE 6 & 7 n Klacks. Das sind dann 2-3 Zeilen und alles läuft perfekt.

Noch ein kleiner Tipp: Bind CSS extern ein. Also schreib es nicht in deine HTML Datei sondern mach dir in einem Ordner "styles" oder wie auch immer eine .css Datei. Wenn du HTML und CSS trennst, hast du gleich einen viel besseren Überblick über den gesamten Code und findest Fehler auch schneller. Außerdem kannst du unzählige HTML Seiten draus machen und brauchst nicht 100 Zeilen CSS jedes Mal reinschreiben/kopieren sondern nur eine Zeile in der du es einfügst...


Schau jetzt also mal lieber, dass in den guten Browsern (und ja, gut kann man dazu sagen!) das Ganze passt. Wenn du das gemacht hast ist es sogar sehr wahrscheinlich, dass es im IE plötzlich auch geht.

Wenn du aber weiter auf deinem: Internet Explorer ist die Welt! Beharrst, na dann viel Spaß...
 

ichwars83

Noch nicht viel geschrieben

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

Das ist doch wenigstens mal ne einleuchtende Erklärung...sorry, aber das vorher war einfach nur gemecker auf den IE!
Damit jetzt kann ich was anfangen. Warum nicht gleich so...;-)

Nice WE
 

Shynt

Noch nicht viel geschrieben

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

Das ist doch wenigstens mal ne einleuchtende Erklärung...sorry, aber das vorher war einfach nur gemecker auf den IE!
Damit jetzt kann ich was anfangen. Warum nicht gleich so...;-)

Nice WE

Für sowas Ausführliches musstest du mich erst provozieren :p

N kleiner aber wichtiger Hinweis: Wenn du externe CSS Dateien machst, pass auf die Pfade auf.
D.h. du sprichst nicht mehr: /images/****.jpg an sondern (durch den Ordner Styles) ../images/****.jpg (Du startest ja nicht mehr bei der index.html od. .php sondern im CSS Ordner) Ich sprechs lieber gleich an, weil ich auch heute noch manchmal dasitze und mich wundere, warum da nix geht :schmoll:

Ich hab heute leider keine Zeit (vielleicht am Abend ne Stunde, mal schaun) aber ich werd mir deinen Code dann mal vollständig durchlesen ;)

Auch dir ein schönes WE!

MfG
Vlyn (Ich bräuchte mal nen neuen Forennamen :-/ )



EDIT:
Hab deinen Code jetzt nochmal angesehen (Und auch runtergeladen + getestet) und ich bin entsetzt *grinst*

Bevor du jetzt da irgendwie versuchst das zusammen zu flicken, rate ich dir einen völlig neuen Seitenaufbau:

1) Du nutzt für den Text Links und die Anzeigen rechts Tabellen. Du hast Divs.. warum nutzt du dann noch eine Tabelle? Mach einfach ein großes Div für den Text links und daneben ein Div für dein Wetter und die anderen Sachen. Schreib in CSS dann für beide Divs rein: float: left (dann sind sie auch wirklich nebeneinander)

2) Die Textvergrößerung per Javascript.. schön und gut, aber sie haut dir dein Design durcheinander. Leute die wirklich eine Textvergrößerung brauchen, schaffen das mit STRG + Mausrad, oder anderen Tastenkombinationen. Normalerweise brauchst du dafür nichts auf deiner Seite einbauen.

3) Die Navigation wird heutzutage auch nicht per Tabelle gemacht, sondern per Listenelement. D.h. du schreibst:
<ul>
<li>Home</li>
<li>Neuigkeiten</li>
</ul>
Blablubb. <ul> steht für unordered list (Also einfach eine ungeordnete Liste). Dann formatierst du nur dieses eine Element und deine Navi passt ;-) (Google mal nach Selfhtml oder CSS4You, sind wirklich gute Seiten dafür)

Hier noch um zu verdeutlichen, wie du den Seitenaufbau machen könntest:



So würds ich zumindest machen. Der Wrapper umschließt ALLES von deinem Inhalt und den stellst du einfach auf
margin: 0 auto; (Bedeutet er steht oben an und ist zentriert auf der Seite)
height: 100%;
width: ***px; <- (Wie du möchtest)

Die restlichen Divs kannst dann definieren mit:
width: 100%; (also gesamte Wrapperbreite, bei Content und Menü rechts musst du natürlich px angeben.. oder auch % wenn du es dynamisch haben willst)
height: ***; (völlig dir überlassen)
usw. usw. usw.

Hoffe geholfen zu haben ;-)

LG
Vlyn
 
Zuletzt bearbeitet:

ichwars83

Noch nicht viel geschrieben

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

Herzlichen dank für den Exkurs...Um damit neu anzufangen hab ich keine Zeit für. Ich werds erstmal versuchen zu "retten", aber für die kommenden Sachen versuch ich mich an deine herangehensweise zu orientieren.

Was müsste ich jetzt beachten um es an Mozilla und die anderen "guten" Browser anzupassen?

Die beiden Seiten die du nanntest sind gut, ich schau auch nebenbei in das Buch "little boxes"...sehr hilfreich.

@sokie:

Kann in dem von dir gezeigten codeschnippsel keinen fehler erkennen. Hab da matsch auf der Linse.

Einen schönen Montag abend noch.

grüße
 
Zuletzt bearbeitet:

Shynt

Noch nicht viel geschrieben

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

HTML:
                   <td valign="top"><h3 align="justify">Aktuelle Termine</h3>
                   <p align="justify"> • <strong>Herbstferie</strong>n<br />
vom 12.10. bis 24.10.09<br /><br />
Weitere Termine in Kürze </p>
               
                 
               </table>
zum einen ist das Vorkommen einer Tabelle an der Stelle völlig unklar.
eine geöffnete Tabellenzelle, und -Zeile die vor dem schliessen einer Tabelle nicht geschlossen wird, muss zwangsläufig probleme machen.

(warum der IE7 etwas korrekt aussehendes darstellt ist wieder ein mysterium)

Er meint, dass du kein </td> gemacht hast und auch kein </tr>. Damit hauts dir auch viele Fehler rein.


Für Opera/Firefox/Internetexplorer Notlösung:
- Pass dein Design in der Breite an (Wetterplugin steht übern Rand raus... also machs breiter an der Stelle)
- Hau Schriftgröße größer/kleiner weg, ein Klick darauf und bei deiner Variante hauts das Design zusammen
- Mach vielleicht eine große Tabelle um deinen ganzen Inhalt herum und das wiederum in einen "wrapper" (Siehe Bild oben). Dann fügst die Inhalte ein und sie können nicht verrutschen oder "ausbrechen" aus deinem Layout wie gerade die Navigation die oben links wegrutscht

Wenn du das machst dürfte es ungefähr gehen. Aber um die (sowieso extrem flotte Lösung) des "neu machens" kommt man fast nicht vorbei. Lieber 10 Min ein paar Divs hinschmeißen und formatiern als ne Stunde das Design zusammenflicken bis so ne grauenhafte Notlösung herauskommt ;) Ich mein deine Seite ist so gut wie leer, da dauert doch das neu machen überhaupt nicht lange ;)

LG
Vlyn
 

ichwars83

Noch nicht viel geschrieben

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

Hi,

also ich hab den Code mal von den Tabellen befreit und hab vorher noch einiges Gefunden in den Tabellen...da fehlten Tag-Abschlüsse etc. Als das korrigiert war, waren die Tabellen untereinander...ich brauch aber 2 Spalten und 2 Zeilen...Ich glaub das neu zu erstellen wäre einfacher als das umzubasteln...vielleicht denkfehler von mir.

Habs mit Divs versucht, führt aber nicht zum gewünschten ergebnis...Beide Divs stehen untereinander, statt ebeneinander und die Navi rechts hats weiter nach links verschoben. Auch der Footer ist nicht dort wo er hingehört.

So sieht der code aus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="XHTML namespace" xml:lang="de" >
<head>
<meta http-equiv="content-type" content="text/html; UTF-8" />
<script type="text/javascript">
<!--
var fontsize=13;
function textSize(dec) {
fontsize+=(dec==1)?1:(-1);
if (fontsize<1) fontsize=1;
document.getElementById("content").style.fontSize=""+fontsize+"px";
}
//-->
</script>
<title>Filatow-Leipzig.de</title>
<style type="text/css" media="screen, projection">

/* reset
----------------------------------------------------------------------------------------*/
* { margin: 0; padding: 0; }

a { text-decoration: none; outline: none; color: #000; }
a img { border: 0; }

ol, ul { list-style: none; }
q:before, q:after,
blockquote:before, blockquote:after { content: ""; }

/* footer stick-alt
----------------------------------------------------------------------------------------*/
html, body, #page-wrap {height: 100%;}
body > #page-wrap {height: auto; min-height: 100%;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* rebuild
----------------------------------------------------------------------------------------*/
body {
font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
background: #024a5e url() repeat;
color: #333;
text-align:center;
}

#page-wrap {
background: #fff url(Bilder/bar.jpg) repeat-y 650px 0;
width: 800px;
margin: 0 auto;
text-align: left;

}

#main {
tet-align: left;
padding-bottom: 150px;

}

/* header
--------------------------------------------------------------------------------------- */
#header {
background: #fff url(Bilder/main_header.jpg) repeat-x 0 20px;
height: 101px;
text-align: right; /* overwriting the text orientation */

}
#header h1 {
width: 629px;
float: left;
margin-top: 25px ;

}
#header strong {
display: block;
font-size: .8em;
margin-top: -10px;

}
#header span {
background: url(Bilder/bar.jpg) repeat-y;
float: right;
margin-right: 20px;
width: 130px; height: 101px;

}

/* content
--------------------------------------------------------------------------------------- */
#content {
width: 609px; /* width + padding-left + padding-right = absolute Breite */
float: left;
padding-bottom: 9em;
padding: 10px 0 0;
padding-left: 20px;
padding-right: 20px;

}

/* sidebar
--------------------------------------------------------------------------------------- */
#sidebar {
width: 141px; /* width + padding-left = absolute Breite */
float: right;
padding-top: 10px;
padding-left: 10px;

}

/* footer
--------------------------------------------------------------------------------------- */
#footer {
position: relative;
background: #024a5e url('Bilder/bar.jpg') repeat-y 650px 0;
margin: -20px auto 0;
width: 800px; height: 20px;
text-align: left;
clear:both;
}

}

/* general classes
----------------------------------------------------------------------------------------*/
.hide, .print-logo, .close-button{ display:none; }
.clear { clear:both; }
.right { float: right; }
.left { float: left; }
.preforient { text-align: left; } /* prefered orientation of the text */
.Stil4 {color: #FFFFFF}
.Stil5 {
color: #333333
}
.Stil8 {
font-size: 10pt;
font-weight: bold;
}
.Stil9 {font-size: 10%}
.Stil10 {
font-size: 8pt;
color: #FFFFFF;
}
#apDiv1 {
position:absolute;
margin-left:110px;
padding-left:40px;
left:100px;
top:0px;
width:633px;
height:22px;
z-index:1;
}
#divText {
float:left;
width:300px;
height:300;
padding:5px;
margin-top:50px;
}

#divText2 {
float:left;
width:300px;
height:300;
padding:5px;
margin-top:50px;
}
</style>
</head>
<body id="index">

<div id="page-wrap">

<div id="main" class="clearfix">
<div id="header" class="clearfix">
<h1>Wladimir-Filatow-Schule<strong>Leipzig</strong></h1>
<span></span>

</div>
<div id="content">

<table width="620px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><a href="javascript:textSize(1)">Schrift größer</a> | <a href="javascript:textSize(0)">Schrift kleiner</a><div id="content"></div>
</td></tr></table>
<div id="divText">
<h3>Herzlich Willkommen</h3>
Die Webseite der Wladimier-Filatow-Schule präsentiert sich im neuen Glanz.
</div>
<div id="divText2" class="clearfix">
<h3>Herzlich Willkommen</h3>
Die Webseite der Wladimier-Filatow-Schule präsentiert sich im neuen Glanz.
</div>
<div id="sidebar">
<h3 class="Stil5">Navigation:</h3>
<ul class="Stil8" id="navi">
<li class="Stil4"><a href="#" title="Menuepunkt1" class="Stil4">Schule</a></li>
<li class="Stil4"><a href="#" title="Menuepunkt2" class="Stil4">Hort</a></li>
<li class="Stil4"><a href="#" title="Menuepunkt3" class="Stil4">Freizeit</a></li>
<li class="Stil4"><a href="#" title="Menuepunkt4" class="Stil4">Elternrat</a></li>
<li class="Stil4"><a href="#" title="Menuepunkt5" class="Stil4">F&ouml;rderverein</a></li>
<li class="Stil4"><a href="#" title="Menuepunkt6" class="Stil4">Galerie</a></li>
<li class="Stil4"><a href="#" title="Menuepunkt7" class="Stil4">Sponsoren</a></li>
<li class="Stil4"><a href="#" title="Menuepunkt8" class="Stil4">Links</a></li>
</ul>
</div>

</div>

</div>

<div id="footer" class="">
<div align="center"><span class="Stil9"> </span>
<p align="left" class="Stil10"> &copy; 2009 &bull; <a href="Computerservice Leipzig =< Herzlich Willkommen" target="_blank" class="Stil4">Computerservice Leipzig</a> </p>
</div>
</div>
</body>
</html>

Hat jemand nen fixen lösungansatz um problemlos die Divs zu setzen?
Danke schon mal.

Grüße
 
Zuletzt bearbeitet:

Shynt

Noch nicht viel geschrieben

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

Ganz ehrlich, dein Code ist ne Katastrophe

Kopierst du den irgendwo blind heraus? Oder denkst du dir die ganzen Zeilen selber zusammen? o_O

Ein riesiger Teil ist unnötig, zu kompliziert geschrieben, totaler Schwachsinn... :motz:

Da, das ist der einfachste Aufbau für deine Seite:

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">
<head>
<title>Filatow-Leipzig.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/home.css" />
</head>

<body>  
	<div id="wrapper">
		<div id="header">
			<div id="navigation">
				NAVIGATION
			</div> <!-- Ende navigation -->
			<div id="logo">
				Wladimir-Filatow-Schule<br />
				Leipzig
			</div> <!-- Ende logo -->
		</div> <!-- Ende header -->
		<div id="inhalt">
			<div id="content">
				<p><h3>Herzlich Willkommen</h3></p>
				<p>Die Webseite der Wladimier-Filatow-Schule präsentiert sich im neuen Glanz.</p>
			</div> <!-- Ende content -->
			<div id="menue">
				MENUE: Deine Plugins, dein Wetter, deine Neuigkeiten, sobald alles weiß ist, passt die Farbe natürlich zusammen.
			</div> <!-- Ende menue -->
		</div> <!-- Ende inhalt -->
		<div id="footer">
			&copy; 2009 &bull; Computerservice Leipzig
		</div>
	</div> <!-- Ende wrapper -->
</body>
</html>

Und im selben Ordner in nem Ordner "styles" dann noch diese CSS Datei:

Code:
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #024a5e;
}

#wrapper {
	margin: 0 auto;
	width: 800px;
	background-color: #FFFFFF;
}

#header {
	width: 100%;
	height: 100px;
}

#navigation {
	width: 600px;
	height: 100%;
	float: left;
	
	background-color: #ffc; /* HINTERGRUNDFARBE */
}

#logo {
	width: 200px;
	height: 100%;
	float: left;

	background-color: #fcf; /* HINTERGRUNDFARBE */
}

#inhalt {
	width: 100%;
}

#content {
	float: left;
	width: 500px;	
	height: 100%;
	
	background-color: #cff; /* HINTERGRUNDFARBE */
}

#menue {
	float: left;
	width: 300px;
	height: 100%;

	background-color: #cfc; /* HINTERGRUNDFARBE */
}

#footer {
	clear: both;
	width: 100%;
	height: 30px;
	background-color: #024a5e;
	color: #FFFFFF;
}

Du brauchst nicht mehr und nicht weniger! Das formatierst du mit ein paar simplen Anweisungen und deine Seite ist "fertig". Die Navi musst dir halt wieder basteln und deine Inhalte einfügen, aber das wars.

Und bitte.... du brauchst nicht body ne ID vergeben, damit das funktioniert -.-

da reicht:

body {
*deine CSS Einstellungen*
}


Wer hat dir denn den Code eingepflanzt? Wenn ich da drüber lese bin ich geschockt, ganz ehrlich.

Vlyn
 

ichwars83

Noch nicht viel geschrieben

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

Danke für die Hilfe oder viel mehr für den Code...

Den anderen Code hab ich gemeinsam mit jemanden mal erstellt...auch hier ausm Forum...bzw. diente sein Code als Muster. Da waren auch die tabellen drin und so..die ja jetzt unnötig sind.

Ich probiers mit deinem code. Danke...

Hab da nicht so viel Ahnung von...mach immer alles live am Projekt...

EDIT:

Hab mir dein Rohmaterial mal angeschaut...also die Plugins sollen ja neben den Fließtext...und die Menüleiste soll rechts hin.....
Ganz oben im Header sind nur die Links für "Home", "Kontakt" und "Impressum"...

Ich brauch insgesamt 4 Divs im Conent....wie eine Tabelle mit 2 Zeilen und 2 Spalten....Das ist für mich die schwierigkeit.

Grüße
 
Zuletzt bearbeitet:

Shynt

Noch nicht viel geschrieben

AW: Darstellungsproblem im IE 8 / FF - IE 7 zeigt die Seite korrekt an

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">
<head>
<title>Filatow-Leipzig.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/home.css" />
</head>

<body>  
	<div id="wrapper">
		<div id="header">
			<div id="navigation">
				NAVIGATION
			</div> <!-- Ende navigation -->
			<div id="logo">
				Wladimir-Filatow-Schule<br />
				Leipzig
			</div> <!-- Ende logo -->
		</div> <!-- Ende header -->
		<div id="inhalt">
			<div id="content1">
				<p><h3>Herzlich Willkommen</h3></p>
				<p>Die Webseite der Wladimier-Filatow-Schule präsentiert sich im neuen Glanz.</p>
			</div> <!-- Ende content1 -->
			<div id="menue1">
				MENUE: Deine Plugins, dein Wetter, deine Neuigkeiten, sobald alles weiß ist, passt die Farbe natürlich zusammen.
			</div> <!-- Ende menue1 -->
			<div id="content2">
				<p><h3>Herzlich Willkommen</h3></p>
				<p>Die Webseite der Wladimier-Filatow-Schule präsentiert sich im neuen Glanz.</p>
			</div> <!-- Ende content2 -->
			<div id="menue2">
				MENUE: Deine Plugins, dein Wetter, deine Neuigkeiten, sobald alles weiß ist, passt die Farbe natürlich zusammen.
			</div> <!-- Ende menue2 -->
		</div> <!-- Ende inhalt -->
		<div id="footer">
			&copy; 2009 &bull; Computerservice Leipzig
		</div>
	</div> <!-- Ende wrapper -->
</body>
</html>

CSS:

Code:
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #024a5e;
}

#wrapper {
	margin: 0 auto;
	width: 800px;
	background-color: #FFFFFF;
}

#header {
	width: 100%;
	height: 100px;
}

#navigation {
	width: 600px;
	height: 100%;
	float: left;
	
	background-color: #ffc; /* HINTERGRUNDFARBE */
}

#logo {
	width: 200px;
	height: 100%;
	float: left;

	background-color: #fcf; /* HINTERGRUNDFARBE */
}

#inhalt {
	width: 100%;
}

#content1 {
	float: left;
	width: 500px;	
	height: 100%;
	
	background-color: #cff; /* HINTERGRUNDFARBE */
}

#menue1 {
	float: left;
	width: 300px;
	height: 100%;

	background-color: #cfc; /* HINTERGRUNDFARBE */
}

#content2 {
	float: left;
	width: 500px;	
	height: 100%;
	
	background-color: #ccf; /* HINTERGRUNDFARBE */
}

#menue2 {
	float: left;
	width: 300px;
	height: 100%;

	background-color: #fcc; /* HINTERGRUNDFARBE */
}

#footer {
	clear: both;
	width: 100%;
	height: 30px;
	background-color: #024a5e;
	color: #FFFFFF;
}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.642
Beiträge
1.538.512
Mitglieder
67.559
Neuestes Mitglied
Andi Schäfer
Oben