04er: Weitere Seiten meiner Homepage

Hallo zusammen,

bin ziemlich neu auf dem Gebiet CSS und HTML bzw. XHTML.
Bis dato - sprich im Moment habe ich nur die index-Seite mir so wie ich es wollte zusammengebaut. Nun habe ich für die weiteren Seiten mir mein index-html-code kopiert und in der Kopie die Seite abgeändert (auch gespeichert unter dem jeweiligen seitennamen). Schaue ich mir jetzt die index.html im browser an is alles noch okay - klicke ich aber auf den Link für die 2. Seite verschiebt sich mein haupt-Bereich div (Aufbau: Kopf, Navi links und der Textbereich rechts). Was kann ich dagegen tun? Ist doch beides die selbe css - da dürfte sich doch am Layout nichts ändern? oder? Kann mir da einer helfen?

  1. Hallo 04er,

    Was kann ich dagegen tun? Ist doch beides die selbe css - da dürfte sich doch am Layout nichts ändern? oder? Kann mir da einer helfen?

    Wenn Du uns zeigst, was du gemacht hast, kann sicher jemand helfen... Tipps für Fragende sagt Dir, wie.

    Gruß aus Köln-Ehrenfeld,

    Elya

  2. Schaue ich mir jetzt die index.html im browser an is alles noch okay - klicke ich aber auf den Link für die 2. Seite verschiebt sich mein Hauptbereichs-div (Aufbau: Kopf, Navi links und der Textbereich rechts). Was kann ich dagegen tun?

    Auf solche Fragen lässt sich grundsätzlich keine Antwort geben, solange der Code oder besser noch die URL der betreffenden Seite(n) nicht bekannt ist.

    Ist doch beides die selbe css - da dürfte sich doch am Layout nichts ändern?

    HTML und CSS sind darauf ausgelegt, sich an Inhalte und Umgebung anzupassen, weil niemand im Voraus wissen kann, mit welchem Anzeigegerät eine Seite betrachtet wird. (Schlechte Webseiten erkennt man dementsprechend daran, dass alles mit Pixel-Werten und position:absolute festbetoniert wurde.)

    Es kann also durchaus sein, dass der Inhalt der zweiten Seite die Darstellung des Rahmens anders beeinflusst als der Inhalt der ersten Seite. Ob das nun der Fall ist - siehe oben.

  3. Hallo zusammen,

    bin ziemlich neu auf dem Gebiet CSS und HTML bzw. XHTML. Bis dato - sprich im Moment habe ich nur die index-Seite mir so wie ich es wollte zusammengebaut. Nun habe ich für die weiteren Seiten mir mein index-html-code kopiert und in der Kopie die Seite abgeändert (auch gespeichert unter dem jeweiligen seitennamen). Schaue ich mir jetzt die index.html im browser an is alles noch okay - klicke ich aber auf den Link für die 2. Seite verschiebt sich mein haupt-Bereich div (Aufbau: Kopf, Navi links und der Textbereich rechts). Was kann ich dagegen tun? Ist doch beides die selbe css - da dürfte sich doch am Layout nichts ändern? oder? Kann mir da einer helfen?

    Hier hab ich noch den HTml Code und die CSS

    hatte die wohl vorhin vergessen

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <meta http-equiv="content-type" content="text/html";charset=ISO-8859-1" /> <title>Bundesliga Online Tippen - Home</title> <link rel="stylesheet" type="text/css" href="styleff.css" media="screen" />    <!--[if IE 8]>

    <link rel="stylesheet" type="text/css" title="IE Bugfixing Stylesheet" href="styleie.css" media="screen" />

    <![endif]-->  <!--[if IE 7]>        <link rel="stylesheet" type="text/css" title="IE Bugfixing Stylesheet" href="styleie7.css" media="screen" /> <![endif]-->  <!--[if IE 6]>

    <link rel="stylesheet" type="text/css" title="IE Bugfixing Stylesheet" href="styleie6.css" media="screen" />

    <![endif]-->   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <script type="text/javascript"> <!-- window.onload=show; function show(id) { var d = document.getElementById(id);  for (var i = 1; i<=10; i++) {   if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}  } if (d) {d.style.display='block';} } //--> </script> </head> <body> <div id="page"> <div id="kopf"> </div> <div id="navi"> <dl id="menu">

    <dt onclick="javascript:show();"><a href="rang.html">Rangliste</a></dt>

    <dt onclick="javascript:show('smenu2');">Tippabgabe</dt>    <dd id="smenu2">     <ul>      <li><a href="1spieltag.html">1. Spieltag</a></li>      <li><a href="2spieltag.html">2. Spieltag</a></li>      <li><a href="3spieltag.html#">3. Spieltag</a></li>                     <li><a href="4spieltag.html#">4. Spieltag</a></li>      <li><a href="5spieltag.html#">5. Spieltag</a></li>      <li><a href="6spieltag.html#">6. Spieltag</a></li>                     <li><a href="7spieltag.html#">7. Spieltag</a></li>      <li><a href="8spieltag.html#">8. Spieltag</a></li>      <li><a href="9spieltag.html#">9. Spieltag</a></li>                     <li><a href="10spieltag.html#">10. Spieltag</a></li>      <li><a href="11spieltag.html#">11. Spieltag</a></li>      <li><a href="12spieltag.html#">12. Spieltag</a></li>                     <li><a href="13spieltag.html#">13. Spieltag</a></li>      <li><a href="14spieltag.html#">14. Spieltag</a></li>      <li><a href="15spieltag.html#">15. Spieltag</a></li>                     <li><a href="16spieltag.html#">16. Spieltag</a></li>      <li><a href="17spieltag.html#">17. Spieltag</a></li>      <li><a href="18spieltag.html#">18. Spieltag</a></li>                     <li><a href="19spieltag.html#">19. Spieltag</a></li>      <li><a href="20spieltag.html#">20. Spieltag</a></li>      <li><a href="21spieltag.html#">21. Spieltag</a></li>                     <li><a href="22spieltag.html#">22. Spieltag</a></li>      <li><a href="23spieltag.html#">23. Spieltag</a></li>      <li><a href="24spieltag.html#">24. Spieltag</a></li>                     <li><a href="25spieltag.html#">25. Spieltag</a></li>                     <li><a href="26spieltag.html#">26. Spieltag</a></li>      <li><a href="27spieltag.html#">27. Spieltag</a></li>      <li><a href="28spieltag.html#">28. Spieltag</a></li>                     <li><a href="29spieltag.html#">29. Spieltag</a></li>      <li><a href="30spieltag.html#">30. Spieltag</a></li>      <li><a href="31spieltag.html#">31. Spieltag</a></li>                     <li><a href="32spieltag.html#">32. Spieltag</a></li>      <li><a href="33spieltag.html#">33. Spieltag</a></li>      <li><a href="34spieltag.html">34. Spieltag</a></li>     </ul>    </dd>

    <dt onclick="javascript:show();"><a href="tippu.html">Tippübersicht</a></dt>          <dt onclick="javascript:show();"><a href="tabelle.html">Tabelle</a></dt>          <dt onclick="javascript:show('smenu3');">Archiv</dt><dd id="smenu3">     <ul>      <li><a href="0708.html">Saison 07/08</a></li>      <li><a href="0607.html">Saison 06/07</a></li>      <li><a href="0506.html">Saison 05/06</a></li>                     <li><a href="#">Saison 04/05</a></li>     </ul>     </dd>          <dt onclick="javascript:show();"><a href="ewigetab.html">Ewige-Tabelle</a></dt>          <dt onclick="javascript:show();"><a href="regeln.html">Spielregeln</a></dt>          <dt onclick="javascript:show();"><a href="anmeldung.html">Anmeldung</a></dt>          <dt onclick="javascript:show();"><a href="kontakt.html">Kontakt</a></dt>          <dt onclick="javascript:show();"><a href="buch.html">Gästebuch</a></dt>

    </dl> <p class="ander">letzte Änderung:<br /> 25.05.08</p> <hr /> <p class="counter"> <p class="ander">Besucher seit: 18.12.2006</p> <!-- Microcounter-START: Accountlöschung bei Codeveränderung --><a href="http://www.microcounter.de" target="_blank"> <img src="http://www.microcounter.de/microcounter.php?" width="100" height="60" border="0"></a> <!-- Microcounter-ENDE: Code nicht verändern--></p> </div> <div id="haupt"> <p>Willkommen</p> <img src="#" width="455px" height="90px"/><br /> <iframe src="http://www.fussballportal.de/c4u_ticker.php?mouse_stop=1&category=bundesliga" name="iframe" width="452" height="24" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">  <a href="http://www.fussballportal.de" target="_blank">Fussball Datenbank auf www.fussballportal.de</a> </iframe><br /> <hr /> <p class="newsdatum">03.06.2008</p> <h4>Bundesliga-Online Tippen erstrahlt in neuem Design!</h4> <h7>BELIEBIGER TEXT</h7> <hr /> <p class="newsdatum">03.06.2008</p> kuckkcuckd <hr /> <p class="newsdatum">03.06.2008</p> </div> <div id="fuss"> <p>Copyright: 04-Design</p> </div> <br class="clear" /> </div> </body> </html>

    CSS

    body{  font-family:Verdana, Arial, Helvetica, sans-serif;  font-size:100%;  color:#000000; } #page{  width: 950px;  padding-bottom: 5px;  padding-top: 5px;  background-color: #FFFFFF;  margin-left: auto;  margin-right: auto;  } #kopf{  background-image: url(bilder/Bilder/Bilder/Bilder/Homepage_01.png);  height: 123px;  width: 950px;  background-repeat: no-repeat; }

    #navi{  width: 120px;  float: left;  height: 900px;  background-image: url(bilder/Bilder/Bilder/Bilder/Homepage_02.png);  background-repeat: no-repeat;  }

    #haupt{  text-align: center;  background-image: url(bilder/Bilder/Bilder/Bilder/Homepage_03.png);  height: 900px;  background-repeat: no-repeat;  margin: 0px 0px 0px 120px;  margin-top: -16px;

    }

    hr {  margin-left: 50px;  margin-right: 50px;  margin-top: 15px; }

    p.ander {  font-size: 9px;  color: #FFFFFF;  font-weight: bold;  margin-left: 5px; } #navi hr {  margin-left: 5px;  margin-right: 5px;  margin-top: 15px; }

    p.counter {  margin-left:8px; }

    #fuss {  width: 950px;  height: 20px;  font-size: 9px;  background-color: #CCCCCC;  clear: left;  text-align: center;  margin-top: -5px; } #fuss p {  padding-top: 5px; }

    /* Navigationsleiste / dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu { / Menu position that can be changed at will */ top: 0; left: 0; font-size:12px; } #menu { width: 9em; padding-top:15px; } #menu dt { cursor: pointer; margin: 2px 0; height: 20px; line-height: 20px; text-align: left; font-weight: bold; border: 1px solid gray; background: #ccc; } #menu dd { border: 1px solid gray; } #menu li { text-align: center; background: #fff; } #menu li a, #menu dt a { color: #000; text-decoration: none; display: block; border: 0 none; height: 100%; } #menu li a:hover, #menu dt a:hover { background: #eee; }

    .newsdatum {  font-size: 9px;  text-align: left;  border: solid gray 2px;  width: 65px;  margin-left: 20px;  padding-left: 4px; } .clear  {     clear:both;     height:0;     width:0;     visibility:hidden; }

    iframe {  margin-left: 15px; }

  4. Der code für die zweite Seite ist derselbe nur dass ich da einen iframe einfügen muss!
    Für ne Excel-Datei!

    1. Hi,

      Der code für die zweite Seite ist derselbe nur dass ich da einen iframe einfügen muss!

      das ist durchaus ein relevanter Unterschied.

      Für ne Excel-Datei!

      Dir ist klar, dass das Unsinn ist, da Du nicht wissen kannst, ob die Besucher
      a) Excel-Dateien öffnen können
      b) im Browser hierzu ein Plugin installiert haben (sofern sie nicht den IE nutzen)
      bzw. c) bei einem *Link* auf eine Excel-Datei z.B. Open Office starten würde.

      freundliche Grüße
      Ingo

  5. Hi,

    klicke ich aber auf den Link für die 2. Seite verschiebt sich mein haupt-Bereich div (Aufbau: Kopf, Navi links und der Textbereich rechts).

    Um wieviel? Um die halbe Scrollbalkenbreite?

    Dann läge es daran, daß die erste Seite einen Scrollbalken hat, die zweite nicht, und der betroffene Teil zentriert oder rechtsbündig ist.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi,

      klicke ich aber auf den Link für die 2. Seite verschiebt sich mein haupt-Bereich div (Aufbau: Kopf, Navi links und der Textbereich rechts).

      Um wieviel? Um die halbe Scrollbalkenbreite?

      Dann läge es daran, daß die erste Seite einen Scrollbalken hat, die zweite nicht, und der betroffene Teil zentriert oder rechtsbündig ist.

      cu,
      Andreas

      Hallo andreas,

      nur der haupt div verschiebt sich um etwa 10px nach oben. Ich habe damit es passt margin-top-16px eingegeben. sollte ich vielleicht nicht mit px sondern em beim layouten arbeiten?

      Naja und auf center steht nur der Text eigentlich. Die ganze page habe ich auf mittig im Browser stehen.

      1. Hi,

        nur der haupt div verschiebt sich um etwa 10px nach oben.

        Aha. Dann ist es vermutlich eine Auswirkung von collapsing-margins.

        Stell die Seiten mal online, damit man sie untersuchen kann.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hi,

          nur der haupt div verschiebt sich um etwa 10px nach oben.

          Aha. Dann ist es vermutlich eine Auswirkung von collapsing-margins.

          Stell die Seiten mal online, damit man sie untersuchen kann.

          cu,
          Andreas

          Hi Andreas,
          hab jetzt mal durch ein für die 2.te Seiten eigenes style den margin-top für die haupt auf 0px gesetzt - nu gehts. denke so kann ich mit leben.
          Code und CSS habe ich schon hier eingefügt. kannst es dir ja mal anschauen. muss mich jedoch noch um valide kümmern.

          cu,
          04er

          1. Hi,

            hab jetzt mal durch ein für die 2.te Seiten eigenes style den margin-top für die haupt auf 0px gesetzt - nu gehts. denke so kann ich mit leben.
            Code und CSS habe ich schon hier eingefügt. kannst es dir ja mal anschauen.

            Nö. Wenn Du's nicht online stellst, mach ich das nicht.

            muss mich jedoch noch um valide kümmern.

            Das sollte eigentlich die erste Arbeit sein.
            Wenn schon der Code fehlerhaft ist, ist es ziemlich sinnlos, Darstellungsfehler ausmerzen zu wollen.

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            O o ostern ...
            Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.