✔ Probleme mit pixelgenauem css Design

Status
Nicht offen für weitere Antworten.
Vielen Dank für deine Hilfe, das mit dem clear hab ich mir auch schon gedacht, aber jetzt besteht ja immernoch das Problem, dass die 4 divs komischerweise sich im ff nicht mehr in dem <div class="content"> befinden, obwohl sie das sollten :suspekt:
Naja, ich finde halt man kann mit Tabellen das design viel einfacher unterteilen durch Spalten und Zeilen :)

Anmerkung: Tabellen dienen nicht als 'universelles' Layout-Werkzeug einer (X)HTML-Seite, sofern es sich nicht um das Aufbereiten / Anzeigen von tabellarischen Daten / Inhalten handelt.
Zum Vergrößern anklicken....

Das war eins der Argumente mit dem man mich überredet hat, mein Design auf css Basis zu coden :-)
 
doenerpower hat gesagt.:
aber jetzt besteht ja immernoch das Problem, dass die 4 divs komischerweise sich im ff nicht mehr in dem <div class="content"> befinden, obwohl sie das sollten
Zum Vergrößern anklicken....
Seltsam, bei mir werden sie innerhalb des DIVs angezeigt.

[editpost]

Hier der Test-Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<HTML lang="de">
<HEAD>
<TITLE>gfxtasy</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">

 html {
      height: 100%;
      overflow: auto;
      }

 body {
      margin: 0;
      padding: 0;
      background-color:#0E2C3D;
      }

 .main {
       padding: 0;
       margin: 0 auto;
       width: 1004px;
       background: url(images/muster_css.gif) repeat-y;
       }

 .content {
          width: 994px;
          margin: 0 5px 0 5px; /* Aussenabstand oben rechts unten links */
          background: url(images/muster_css_2.gif) repeat-y;
          border: 1px solid yellow;
          }

 #header {
         margin: 0;
         padding: 0;
         }


 #navi { /* Für FireFox */
              margin: -5px 0 0 0; /* Aussenabstand oben rechts unten links */
              padding: 0;
              background: url(images/obere_leiste_bg.gif) repeat-x;
              height:37px;
              width:994px;
              }

 * html #navi { /* Für IE */
                     margin: 0;
                     padding: 0;
                     }


 .navi_inlay { float:left;
               margin: 0 0 0 0;
               padding: 0;
                }

 * html .navi_inlay { /* Für IE */
                     margin: 0;
                     padding: 0;
                     }

 .login { float:left;
          background: url(images/obere_leiste_bg.gif) repeat-x;
        }

 #loginfeld { background-image:url(images/eingabefeld_login.gif);
              border:0px;
              height:21px;
              width:136px;
              margin: 5px 0 0 15px;
            }

 #passwortfeld { background-image:url(images/eingabefeld_passwort.gif);
                 border:0px;
                 height:21px;
                 width:136px;
                 margin: 5px 0 0 5px;
            }

 #loginbutton {
                border:0px;
                height:22px;
                width:81px;
                margin: 0 15px 0 10px;
              }

 #suchefeld {    background-image:url(images/eingabefeld_suche.gif);
                 border:0px;
                 height:21px;
                 width:136px;
                 margin: 5px 0 0 15px;
            }

  #suchebutton {
                 border:0px;
                 height:22px;
                 width:81px;
                 margin: 0 15px 0 10px;
              }


 table {
       margin:0;
       padding:0;
       border:0;
       table-layout:fixed;
       }

 div.clear
 {
 clear: left;
 height: 0;
 font-size: 0;
 margin: 0;
 padding: 0;
 }

</style>


</HEAD>
<BODY>

<div class="main">
        <div class="content">

         <div id="header"><img src="images/header.gif" alt="header"></div>

         <div id="navi">
                 <div class="navi_inlay"><img src="images/obere_leiste_inlay_l.gif" alt="inlay"></div>

                 <div class="login">
                    <form name="login" method="post" action=""><div>
                            <input type="text" id="loginfeld">
                            <input type="password" id="passwortfeld">
                            <input type="image" name="login" value="" src="images/button_login.gif" id="loginbutton">
                            </div></form></div>

                     <div class="navi_inlay"><img src="images/obere_leiste_inlay_m.gif" alt="inlay"></div>

                     <div style="float:left; width:200px;">&nbsp;</div>

                     <div class="navi_inlay" style="margin: 0 0 0 15px;"><img src="images/obere_leiste_inlay_m.gif" alt="inlay"></div>

                     <div class="login">
                    <form name="Suche" method="post" action=""><div>
                            <input type="text" id="suchefeld">
                            <input type="image" name="login" value="" src="images/button_go.gif" id="suchebutton">
                            </div></form></div>

                     <div class="navi_inlay" style="margin: 0 20px 0 15px; float:left;"><img src="images/obere_leiste_inlay_m.gif" alt="inlay"></div>
            </div>

              <div style="background: url(images/muster_css_2.gif) repeat-y;">
                      <div style="float:left;">linkes Menü<p>dummy text linkes Menü</p></div>
                      <div style="float:left;">Mitte<p>dummy text Mitte</p></div>
                      <div style="float:left;">Rechtes Menü<p>dummy text rechtes Menü</p></div>

                      <div class="clear">&nbsp;</div>
              </div>



        </div>
</div>

</BODY>
</HTML>
 
ok, habs anders hinbekommen:

Code: 
div.clear { clear: left;
             height: 1px;
             width: 1px;
             font-size: 0;
             margin: 0;
             padding: 0;
          }

aber warum stimmt der text nur mit <p> ? Kann ich ganz normal weitermachen ? (da kommen ja auch noch grafiken hin)

mfg
 
doenerpower hat gesagt.:
aber warum stimmt der text nur mit <p> ? Kann ich ganz normal weitermachen ? (da kommen ja auch noch grafiken hin)
Zum Vergrößern anklicken....
Es sollte normalerweise keine Rolle spielen, was in den drei floatenden DIVs eingefügt wird, ob nun Text, Grafiken, o.ä. :confused:
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück