Ankündigung

Einklappen
Keine Ankündigung bisher.

Probleme mit CSS-Layout

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Probleme mit CSS-Layout

    Hallo,
    ich hab mit "Gimp" ein Design für unsere Klassenhomepage erstellt. Jetzt
    haben wir aber einige probleme damit, bei denen wir einfach nicht weiter wissen:

    1. Im IE wird das Design normalerweise richtig angezeigt. Aber wenn ich die DOCTYPE Angabe in die Datei reinschreibe wird der Inhalt unter der Navigation angezeigt
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    www.my-class.de/Screen-DOCTYPE.JPG

    2. Im Firefox wird das irgendwie ganz komisch dargestellt.
    www.my-class.de/Screen-Firefox.JPG

    3. Wir hätten noch gerne, dass die Navigationsleiste immer genauso lang ist, wie der Inhalt. Funktioniert das, und wenn ja wie?

    Hier ein Bild wie das Design ohne DOCTYPE-Angabe im IE aussieht:
    www.my-class.de/Screen1.JPG

    Hier die CSS: www.my-class.de/css.txt
    und hier die Index:www.my-class.de/index.txt

  • #2
    Sinnvollerweise denke ich solltest du vielleicht den Inhalt der navi.php und der content.php zufügen...sonst lässt sich das Problem schlecht analysieren...
    oder zumindest die struktur der seiten....

    Kommentar


    • #3
      Ok, hier die Navi.php: www.my-class.de/navi.txt
      die content.php: www.my-class.de/content.txt
      in die content.php wird der Inhalt included (wie beim Tut von tut.php-q.net)
      z.B. de Startseite: www.my-class.de/start.txt
      Grüße
      Alex

      Kommentar


      • #4
        Und jetzt? weiß keiner weiter?

        Kommentar


        • #5
          doch sicher, aber vielleicht läßt sich mit deinen infos nicht viel anfangen? oder es hat niemand lust, alles, was schon hundert mal gesagt wurde, zu wiederholen?

          - entwickele deine seite primär im firefox, danach kannst du dich um die ie-möhre kümmern
          - denk dabei aber immer an den box-model-bug (=> kombiniere niemals width/height und padding)
          - setz am anfang alle (universeller selector (*)) innen- und außenabstände (margin/padding) auf 0
          - verichte vollständig auf layout-tabellen
          - poste das html-grundgerüst _hier_ in code-tags (kein php bitte)
          - und das css dazu ...
          - und ein online-beispiel

          edit: validier css und html ...
          [URL=http://www.mozilla.org/products/firefox/][img]http://www.nophia.de/misc/spreadtheword/feuerfuchs.gif[/img][/URL]

          Kommentar


          • #6
            Hallo,
            danke erst mal für die Antwort!
            - entwickele deine seite primär im firefox, danach kannst du dich um die ie-möhre kümmern
            Ok, mach ich ab jetzt...

            - denk dabei aber immer an den box-model-bug (=> kombiniere niemals width/height und padding)
            Kann ich width/height einfach weglassen? Padding brauch ich ja, damit der Inhalt am richtigen Ort steht oder gibts da eine Alternative?

            - setz am anfang alle (universeller selector (*)) innen- und außenabstände (margin/padding) auf 0
            Code:
             * { padding: 0px; margin: 0px; }
            So?

            - verichte vollständig auf layout-tabellen
            Wie meinst du das?

            - poste das html-grundgerüst _hier_ in code-tags (kein php bitte)
            Code:
              
             			
            <html>
            <head>
            <title>Meine Klasse am KG</title>
            <link rel="stylesheet" type="text/css" href="styles/main.css"/>
            </head>
            <body>
                 <div id="root">
                      <div id="header">
                           <div id="header_l"></div>
                           <div id="header_r"></div>
                      </div>
                      <div id="navi">
                           <div id="navi_body">
                                <ul>[*]Startseite[*]News[*]Games/Fun[*]Links[*]Termine[*]Stundenplan[*]Schüler[*]Lehrer[*]Klassensp.[*]Unterstufe[/list]			
                           </div>
                           <div id="navi_footer"></div>
                      </div>
                      <div id="content">
                           <div id="content_body">
            User Online: 1
            
            <marquee direction="left"><h1>+++Die Homepage der 8f+++</h1></marquee>
            <center>
            <h3 align="center">Herzlich Wilkommen auf der Homepage meiner Klasse, der 8f des Karolinengymnasiums Frankenthal.</h3>
            
            
            
            
            <h1>&gt;&gt;&gt;&gt; Zum Forum &lt;&lt;&lt;&lt;</h1>
            
            
            <h2 class="Üschrift">NEWS</h2>
            
            <table border="1" cellpadding="5" width="50%">
                    <tr>
                    <td valign="top">9.9.2005</td>
                    <td>XXX</td>
                    </tr>
                    <tr>
                    <td valign="top">8.9.2005</td>
                    <td>XXX</td>
                    </tr>
                    <tr>
                    <td valign="top">7.9.2005</td>
                    <td>XXX</td>
                    </tr>
                    <tr>
                    <td valign="top">17.8.2005</td>
                    <td>XXX</td>
                    </tr>
            </table>
            	</div>
            	<div id="content_footer"></div>
                      </div>
                 </div>
            </body>
            </html>
            Hier das CSS:
            Code:
            body {
            	text-align: center;
            		
            	}
            div#root {
            	width: 802px;
            	margin: 0px auto;
            	text-align: left;
            	border: 1px solid orange;	
            	background-color: yellow;
            	}
            
            div#header {
            	width: 800px;
            	height: 218px;
            	}
            div#header_l {
            	width: 230px;
            	height: 218px;
            	background-image: url(../images/head_left.jpg);
            	float:left;
            	}
            div#header_r {
            	width:570px;
                height:218px;
            	background-image: url(../images/head_right.jpg);
            	float:left;
            	}
            div#navi {
            		float: left;
            	
            	}
            div#navi_body {
            	width: 230px;
            	background-image: url(../images/navi_body.jpg);
            	background-repeat: repeat-y;
            	padding-left: 50px;
            	padding-right: 30px;
            	}
            div#navi_footer {
            	width: 230px;
            	height: 59px;
            	background-image: url(../images/navi_footer.jpg);
            	}
            div#content{
            	width: 569px;
            	float: left;
            	}
            div#content_body{
            	width: 570px;
            	background-image: url(../images/content_body.jpg);
            	background-repeat: repeat-y;
            	padding-left: 20px;
            	padding-right: 45px;
            	}
            div#content_footer{
            	width: 570px;
            	height: 59px;
            	background-image: url(../images/content_footer.jpg);
            	}
            Die Testseite läuft leider auf meinem lokalen Server... Aber ich schaue, dass ich sie noch irgendwo hochlade...
            Viele Grüße
            Alexander

            Kommentar


            • #7
              hallo ich hab ein doofes problem wen ich nen link im menü anklicke öfnet er sich im gleichen fram
              Code:
              <html>
              <head>
              <title></title>
              </head>
              <frameset rows="20%,*" border="4">
                      <frame name="Header"
                       src="http://de.geocities.com/klasse4_05/test.html"
                       scrolling="No">
              <frameset cols="20%,*">
                      <frame name="Frame1"
                       src="http://de.geocities.com/klasse4_05/test.html"
                       scrolling="No">
                      <frame name="Frame2"
                       src="http://de.geocities.com/klasse4_05/test.html">
              
              </html>
              <HTML><HEAD></HEAD><BODY>
              
              
              
              <CENTER><CODE>[-------- Ende der Seite --------]</CODE></CENTER>
              
              <HR> 
              
              
              <TABLE bgColor=#ffffff border=0 cellPadding=0 cellSpacing=0 width="100%">
              <tr><td bgColor=#ffffff>
              <TABLE bgColor=#9999cc border=0 cellPadding=4 cellSpacing=0 width="100%">
              <TR>
              <TD><FONT face=arial>Erweiterter HTML-Editor</FONT></TD>
              <td align=right>
              <TABLE border=0 cellPadding=1 cellSpacing=0>
              <TR>
              <TD bgColor=#ccccff noWrap><FONT face=Arial size=-1>
               HTML-Hilfe
              </FONT>
              </TD></TR></TABLE>
              </TR>
              </TABLE>
              <table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td width="50%">
              <font face=arial size=-1>Titelseite &gt; Datei-Manager &gt; Erweiterter HTML Editor</font>
              </td></tr></table>
              
              
              
              <form method=post action="/filemanager/advancededitor">
              
              
              
              <table width="100%" border=0 cellspacing=0 cellpadding=4 bgcolor=#FFFFCC>
              <tr>
              <td noWrap><font face=Arial size=-1>Dateiname:
              <input name="newfile" value="" size=20 maxlength=30></font></td>
              </tr>
              </table>
              <table border=0 cellPadding=2 cellSpacing=0 bgColor="#cccccc" width="100%">
              <tr>
              <td bgColor="#cccccc" noWrap>
              <input name="directory" type=hidden value="">
              <input name="dispopts" type=hidden value="html, gif, jpg, other;;*">
              <input type="submit" name="op-newfile" value="Neu">
              <input type="submit" name="op-preview" value="Vorschau">
              <input type="submit" name="op-savefile" value="Speichern">
              <input type="submit" name="op-savecontinue" value="Speichern und fortfahren">
              <input type="reset" value="Löschen">
              </td><td align="right">
              <input type="submit" name="op-cancel" value="Abbrechen">
              </td></tr></table>
              <font face="Arial" size=2>Willkommen bei Ihrem Erweiterten HTML-Editor. Mit diesem Editor können Sie Ihre eigene, benutzerdefinierte HTML kodieren. Wenn Sie auf die Schaltfläche Voransicht klicken, können Sie außerdem sehen, wie Ihre Seite im Web tatsächlich aussieht.
              </font>
              
              
              
              <center>
              <textarea wrap=virtual name="body" rows=25 cols=65>
              <html>
              <head>
              <title></title>
              </head>
              <frameset rows="20%,*" border="4">
                      <frame name="Header"
                       src="test.html"
                       scrolling="No">
              <frameset cols="20%,*">
                      <frame name="Frame1"
                       src="test.html"
                       scrolling="No">
                      <frame name="Frame2"
                       src="test.html">
              
              </html></textarea>
              </center>
              
              <font face="Arial" size=2>Achten Sie darauf, Ihre Änderungen regelmäßig zu speichern. Sollte Ihre Internet-Verbindung &quot;ablaufen,&quot; (Time out) wird Ihre Arbeit NICHT automatisch gespeichert.</font>
              
              
              
              <table border=0 cellPadding=2 cellSpacing=0 bgColor="#cccccc" width="100%">
              <tr>
              <td bgColor="#cccccc" noWrap>
              <input type="submit" name="op-newfile" value="Neu">
              <input type="submit" name="op-preview" value="Vorschau">
              <input type="submit" name="op-savefile" value="Speichern">
              <input type="submit" name="op-savecontinue" value="Speichern und fortfahren">
              <input type="reset" value="Löschen">
              </td><td align="right">
              <input type="submit" name="op-cancel" value="Abbrechen">
              </td></tr></table>
              </form>
              <CENTER><hr size=1 width=675><font face=verdana size=-2>Copyright &copy; 
              2005 Yahoo! Inc. Alle Rechte vorbehalten.
              
              Hilfe
              Geschäftsbedingungen
              Richtlinien
              Rechtliche Hinweise
              
              <font size=2>Datenschutzbestimmungen</font>
              </font></CENTER>
              
              <script language="JavaScript" type="text/javascript" src="http://uk.adserver.yahoo.com/a?f=382041053:RS&p=de&l=RS&c=r&site-country=de&rand=1130864424">
              </script>
              
              
              
              </td></tr></table>
              </body>
              </html>
              
              
              <script language="javascript" src="http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js">
              </script>

              Kommentar


              • #8
                Was soll denn bitte der Mist hier?

                Kommentar


                • #9
                  hat das irgendwas mit meiner Frage zu tun?
                  Nur so als Tipp...: Neues Thema aufmachen :wink:

                  Kommentar

                  Lädt...
                  X