• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

GROßES Problem mit divs

Status
Für weitere Antworten geschlossen.
A

assmaje

Neues Mitglied
Ursprünglich war meine Seite eine Tabelle.

Viele sagen, dass Tabellen veraltet sind (aus den Zeiten, in denen das Internet "erfunden" wurde) und nicht gut taugen als Design, also habe ich meine Webseite umgeformt.

AAABER jetzt wird alles falsch angezeigt.

Hoffe ihr könnt mir helfen. :???:

Hier meine Webseite (--> softmedia.de.nr | Home) und der Code (es soll unter anderm auch das ganze Gebilde in die Mitte gerückt werden):

Code: 
<HTML>
<HEAD>
<TITLE>www.softmedia.de.nr | Home</TITLE>
<link rel="stylesheet" type="text/css" href="Style.css">

<script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="scriptaculous/src/scriptaculous.js"></script>

<style type="text/css">
.none:link { color:#FFFFFF }
.none:link { color:#FFFFFF }
.none:link { color:#FFFFFF }
.none:link { color:#FFFFFF }
.none:link { color:#FFFFFF }
</style>

</HEAD>
<BODY>

  <div style="width:80%; border:0px">

    <div id="header" style="background-color:#FF8C00; margin-left:20px">

      <span align="right">
        <span style="font-size:10px">
          <a href="Home.html">Home</a> | <a href="Impressum.html">Impressum</a>&nbsp;&nbsp;
        </span>
      </span>

      <br>
      <a class="info" href="Home.html"><img src="SL.png"; border="0"><span style="font-size:12px">
        Zurück zur Startseite.
      </span></a>

      <br>
      <span style="font-size:11px; color:#FFFFFF">
        Das große Downloadportal für deinen PC und deine PSP.
      </span>

      <br>

      <!-- Beginn Suche -->

        <form method=post action="planetsearchplus/planetsearchplus.php">
          <table border="0"; cellspacing="5"; cellpadding="0"; align="right">
            <tr> 
              <td> 
                <input type="text" name="search_exp" class="sform">
              </td>

              <td> 
                <input type="submit" value="Finden" name="submit" class="sbutton">
                <input type="hidden" name="exp_full" value="no" checked>
                <input type="hidden" name="exp_capital" value="no" checked>
              </td>
            </tr>
          </table>
        </form>

      <!-- Ende Suche -->

    </div>

    <div id="navigation" style="background-image:url(FV.png); background-repeat:repeat-x; height:150px; align:center">

      <a class="info" href="PSP.html"><img src="PSP.png"; border="0"><span style="font-size:12px">
        Hier findest Du Downloads für Deine PSP.
      </span></a>

      <span class="Leerzeichen">

        <a class="info" href="PC.html"><img src="PC.png"; border="0"><span style="font-size:12px">
          Hier findest Du Downloads für Deinen Windows-Computer.
        </span></a>

      </span>

    </div>

    <div id="main" style="background-color:#FFFFFF; margin-left:20px; margin-right:20px; font-size:12px; color:#000000">

      <h1>Home</h1>

      Dieses <a href="Home.html">Downloadportal</a> befindet sich momentan noch im Aufbau.<br>

      <h1>News</h1>

      Blabla.

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <div id="footer" style="background-image:url(FV2.png); background-repeat:repeat-x; height:50px; align:center">

      <span style="font-size:10px">
        Copyright &copy; Softmedia 2008 | Version 0.1 | by Jens Assmann | <a href="Impressum.html">Impressum</a>
      </span>

    </div>

  </div>

</BODY>
</HTML>


[U][B]UND: (css-Datei)[/B][/U]


body { background-image:url(BG.png);
       margin:0px;
       padding:0px;
       font-family:Arial; }

a:link { color:#000000; text-decoration:underline; }
a:visited { color:#000000; text-decoration:underline; }
a:focus { color:#000000; text-decoration:underline; }
a:hover { color:#FF8C00; text-decoration:underline; }
a:active { color:#FF8C00; text-decoration:underline; }

a.info { text-decoration: none; }
a.info:hover { cursor: help; }
a.info span { visibility: hidden; position: absolute; left: 50%; margin-top: -2em; padding: 0.5em; text-decoration:none; }
a.info:hover span { visibility: visible; border: 1px solid #FFC125; background:#FFFACD; color: #8B0000; }

h1 { font-size:12px;
     font-weight:bold;
     color:#FF8C00; }

.Leerzeichen { margin-left:40px }
 
assmaje schrieb:
AAABER jetzt wird alles falsch angezeigt.
Zum Vergrößern anklicken....
Zunächst braucht die Datei eine Doctype-Angabe:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Zentrieren für Internetexplorer:
Code: 
body { background-image:url(BG.png);
       margin:0px;
       padding:0px;
       font-family:Arial;
       text-align: center;
 }
Dann text-align:center für den Inhalt vom alles umschließenden div rückgängig machen.
Mit margin:auto die Seite für alle anderen Browser zentrieren:
Code: 
<div style="width:80%;
 margin: auto;
 text-align: left;">
Das währe der Anfang.

Zur Übersichtlichkeit solltest du das css nicht in die Tags schreiben, sondern ihnen lieber classen und id's geben.
Das erleichtert die Fehlersuche im html und hilft bei Änderungen ungemein.
 
DANKE!!!

Aber aus irgendeinem Grund funktioniert margin nicht...
An der Stelle wo der Text (im header und im main div) eingerückt werden soll, ist einfach GAR nichts,
obwohl es weiß sein sollte (wie der Hintergrund vom div eben). :(

Hier nochmal mein geänderter Code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<HEAD>
<TITLE>www.softmedia.de.nr | Home</TITLE>
<link rel="stylesheet" type="text/css" href="Style.css">

<script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="scriptaculous/src/scriptaculous.js"></script>

<style type="text/css">
.none:link { color:#FFFFFF }
.none:link { color:#FFFFFF }
.none:link { color:#FFFFFF }
.none:link { color:#FFFFFF }
.none:link { color:#FFFFFF }
</style>

</HEAD>
<BODY>

  <div style="width:80%; margin:auto; text-align:left">

    <div id="header" style="background-color:#FF8C00; [B][COLOR=Red]margin-left:20px[/COLOR][/B]">

      <div style="font-size:10px; text-align:right">
        <a href="Home.html">Home</a> | <a href="Impressum.html">Impressum</a>&nbsp;&nbsp;
      </div>

      <br>
      <a class="info" href="Home.html"><img src="SL.png"; border="0"><span style="font-size:12px">
        Zurück zur Startseite.
      </span></a>

      <br>
      <span style="font-size:11px; color:#FFFFFF">
        Das große Downloadportal für deinen PC und deine PSP.
      </span>

      <br>

      <!-- Beginn Suche -->

        <form method=post action="planetsearchplus/planetsearchplus.php">
          <table border="0"; cellspacing="5"; cellpadding="0"; align="right">
            <tr> 
              <td> 
                <input type="text" name="search_exp" class="sform">
              </td>

              <td> 
                <input type="submit" value="Finden" name="submit" class="sbutton">
                <input type="hidden" name="exp_full" value="no" checked>
                <input type="hidden" name="exp_capital" value="no" checked>
              </td>
            </tr>
          </table>
        </form>

      <!-- Ende Suche -->

      <br><br>

    </div>

    <div id="navigation" style="background-image:url(FV.png); background-repeat:repeat-x; height:150px; text-align:center">

      <a class="info" href="PSP.html"><img src="PSP.png"; border="0"><span style="font-size:12px">
        Hier findest Du Downloads für Deine PSP.
      </span></a>

      <span class="Leerzeichen">

        <a class="info" href="PC.html"><img src="PC.png"; border="0"><span style="font-size:12px">
          Hier findest Du Downloads für Deinen Windows-Computer.
        </span></a>

      </span>

    </div>

    <div id="main" style="background-color:#FFFFFF; [B][COLOR=Red]margin-left:20px[/COLOR][/B]; [COLOR=Red][B]margin-right:20px[/B][/COLOR]; font-size:12px; color:#000000">

      <h1>Home</h1>

      Dieses <a href="Home.html">Downloadportal</a> befindet sich momentan noch im Aufbau.<br>

      <h1>News</h1>

      Blabla.

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

    <div id="footer" style="background-image:url(FV2.png); background-repeat:repeat-x; height:50px; text-align:center">

      <span style="font-size:10px">
        <br>
        Copyright &copy; Softmedia 2008 | Version 0.1 | by Jens Assmann | <a href="Impressum.html">Impressum</a>
      </span>

    </div>

  </div>

</BODY>
</HTML>


[B]Und die css-Datei:[/B]


body { background-image:url(BG.png);
       margin:0px;
       padding:0px;
       font-family:Arial;
       text-align:center; }

a:link { color:#000000; text-decoration:underline; }
a:visited { color:#000000; text-decoration:underline; }
a:focus { color:#000000; text-decoration:underline; }
a:hover { color:#FF8C00; text-decoration:underline; }
a:active { color:#FF8C00; text-decoration:underline; }

a.info { text-decoration: none; }
a.info:hover { cursor: help; }
a.info span { visibility: hidden; position: absolute; left: 50%; margin-top: -2em; padding: 0.5em; text-decoration:none; }
a.info:hover span { visibility: visible; border: 1px solid #FFC125; background:#FFFACD; color: #8B0000; }

h1 { font-size:12px;
     font-weight:bold;
     color:#FF8C00; }

.Leerzeichen { margin-left:40px }
Hoffe, du (oder jemand andes) kann mir noch mal helfen. :?
 
Hat sich erledigt, hab einfach noch ein div ins div gemacht und dann das margin eingefügt.

Danke nochmal! :)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben