Tonni: Feste Layoutgröße...

Ich schaffe es einfach nicht, dass mein Layout meiner Site immer in der selben Größe bleibt. Ich habe es in Divs gesetzt und dann habe ich es mit right,left,bottom,top in die richtige Größe geformt. Nur wenn ich nun mein Browserfenster vergrößer oder verkleiner, dann verändert sich die Formatierung. Ich hätte aber gerne immer die selbe Größe. Nur wie macht man das?
Kann mir bitte jemand helfen?
Gruß
Tonni

  
<html>  
<head>  
 <title>Title</title>  
 <meta name="keywords" content="">  
 <meta name="description" content="">  
  
            <!--Ecken abrunden-->  
  
<style type="text/css">  
.div1  
{  
border:1px solid #000000;  
left:10px;top:50px;  
-moz-border-radius:30px;  
-khtml-border-radius:30px;  
}  
h3  
{  
color:green  
}  
</style>  
  
</head>  
<body bgcolor="green">  
  
  <!--Logo-->  
  
<center><img src="Logo.jpg" alt="Logo"></center>  
  
  <!--Schriftart-->  
  
 <span style="font-family: Comic Sans MS, Arial;">  
  
  <!--Hier beginnt das abgerundete Feld in dem alles steht-->  
  
<div class="div1" style="position:absolute;top:100px; right: 50px; left:50px; bottom: -350px; background: rgb(210,330,220);">  
 <h1><u><center>Überschrift</center></u></h1>  
  
                <!--Navigation-->  
  
 <div style="position:absolute;top:65px; left:0px;">  
  <h3><u>Navigation</u></h3>  
   <table border="1">  
   <tr>  
    <td>Navigationspunkt1</td>  
   </tr>  
  </table>  
 </div>  
  
    <!--Position von Textteil1-->  
  
   <div style="position:absolute;top:200px; left: 290px;">  
  
  <!--Text-->  
  
  blablabalbabalbalabbafl.....  
  
  
  <!--Link zu Impressum-->  
  
    <br>  
    <br>  
    <center><a href="Impressum.html">Impressum</a></center>  
    <br>  
    <br>  
    <br>  
    <br>  
    </div>  
  </div>  
      <!--Zuletzt geändert-->  
    <div style="position:absolute;top:0px;left:20px;">  
    <script type="text/javascript">  
    document.write("Zuletzt geändert am: <br>" +document.lastModified)  
    </script>  
    </div>  
</div>  
</body>  
</html>
  1. Ich schaffe es einfach nicht, dass mein Layout meiner Site immer in der selben Größe bleibt. Ich habe es in Divs gesetzt und dann habe ich es mit right,left,bottom,top in die richtige Größe geformt. Nur wenn ich nun mein Browserfenster vergrößer oder verkleiner, dann verändert sich die Formatierung. Ich hätte aber gerne immer die selbe Größe. Nur wie macht man das?

    ungeachtet der tatsache, dass fixe größen absolut benutzerunfreundlich sind und position: absolute nur eingesetzt werden sollte, wenn es WIRKLICH notwenidig ist, kannst du dein vorhaben fester größen erreichen, wenn du überhaupt erstmal größen definierst

    üblicherweise gibt es in css zwei ordinaten deren ausdehnungsformen landläufig auch als "breite" und "höhe" bezeichnet werden - in css ausgedrückt: width und height

    1. ungeachtet der tatsache, dass fixe größen absolut benutzerunfreundlich sind und position: absolute nur eingesetzt werden sollte, wenn es WIRKLICH notwenidig ist, kannst du dein vorhaben fester größen erreichen, wenn du überhaupt erstmal größen definierst

      üblicherweise gibt es in css zwei ordinaten deren ausdehnungsformen landläufig auch als "breite" und "höhe" bezeichnet werden - in css ausgedrückt: width und height

      Hallo suit,
      da ich mich mit css nicht so gut auskenne, würde ich lieber div's benutzen... Kann ich das Ganze auch mit div's machen? Oder brauche ich dazu Css?
      Gruß
      Tonni

      1. da ich mich mit css nicht so gut auskenne, würde ich lieber div's benutzen... Kann ich das Ganze auch mit div's machen? Oder brauche ich dazu Css?

        css ist das zeug, das du in das style-attribut hineinschreibst

        ob die elemente darum divs sind oder sonst etwas, spielt dabei keine rolle

        <style type="text/css">  
          #foo{ background: red; }  
        </style>  
          
        <div id="foo">bar</div>
        

        und

        <div style="background: red;">bar</div>

        hat den selben effekt

        --

        ich hab allerdings immer noch nicht ganz begriffen, was du machen möchtest - geht etwas die vermutung von elya, dass du die seite zentrieren willst, in die richtige richtung?

        1. da ich mich mit css nicht so gut auskenne, würde ich lieber div's benutzen... Kann ich das Ganze auch mit div's machen? Oder brauche ich dazu Css?

          css ist das zeug, das du in das style-attribut hineinschreibst

          ob die elemente darum divs sind oder sonst etwas, spielt dabei keine rolle

          <style type="text/css">

          #foo{ background: red; }
          </style>

          <div id="foo">bar</div>

          
          >   
          > und  
          >   
          > `<div style="background: red;">bar</div>`{:.language-css}  
          >   
          > hat den selben effekt  
          >   
          > --  
          >   
          > ich hab allerdings immer noch nicht ganz begriffen, was du machen möchtest - geht etwas die [vermutung von elya](https://forum.selfhtml.org/?t=176140&m=1158377), dass du die seite zentrieren willst, in die richtige richtung?  
            
          Ich will einfach nur, dass der Inhalt der Seite immer an der selben Stelle ist, egal ob das Browserfenster groß oder klein ist. ;)  
          Gruß  
          Tonni
          
          1. Ich will einfach nur, dass der Inhalt der Seite immer an der selben Stelle ist, egal ob das Browserfenster groß oder klein ist. ;)

            an der selben stelle in bezug auf die linke obere ecke des anzeigebereichs?

            gut, dann hier die furchtbare lösung, sag aber nicht, dass ich dich nicht gewarnt hätte

            <div style="width: 500px; height: 500px; left: 10px; top: 10px; background: red;">  
              <!-- hier kommt dein aktuelle code (der jetzt innerhalb des body-elements steht) rein -->  
            </div>
            
            1. korrektur:

              <div style="position: absolute; width: 500px; height: 500px; left: 10px; top: 10px; background: red;">  
                <!-- hier kommt dein aktuelle code (der jetzt innerhalb des body-elements steht) rein -->  
              </div>
              
        2. @@suit:

          <style type="text/css">

          #foo{ background: red; }
          </style>

          <div id="foo">bar</div>

          
          >   
          > und  
          >   
          > `<div style="background: red;">bar</div>`{:.language-css}  
          >   
          > hat den selben effekt  
            
          Aber nicht denselben Nutzen. Man sollte Anfängern gar nicht erst sagen, dass es das 'style'-Attribut überhaupt gibt!  
            
          Live long and prosper,  
          Gunnar  
            
          PS @Tonni: [„br br“](http://community.de.selfhtml.org/zitatesammlung/zitat1275)  
            
          Soll heißen: Wenn du dich in CSS eingearbeitet hast, willst du 'br' nicht mehr für Abstände benutzen. Und 'center' nicht mehr zum Zentrieren.
          
          -- 
          [Erwebsregel](http://memory-alpha.org/de/wiki/Erwerbsregeln_der_Ferengi) 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
          
          1. Aber nicht denselben Nutzen. Man sollte Anfängern gar nicht erst sagen, dass es das 'style'-Attribut überhaupt gibt!

            interessante ansicht - ich sehe das so: gib jemandem alle nötigen fakten und objektive beispiele und er soll selbst entscheiden, was er tut

            in diesem fall trifft das zwar nicht ganz zu, weil der blickwinkel sehr schmal ist, aber es ist in vielen fällen so, dass totschweigen von dingen nur mäßigen erfolg bringt

            1. @@suit:

              ich sehe das so: gib jemandem alle nötigen fakten und objektive beispiele

              Sag jetzt aber nicht, dass du dies hier für zentrale Stylesheets (gut[tm]) vs. Inline-Styles (böse[tm]) getan hättest!

              externes Stylesheet:

              • Vorteile:
                  übersichtlich
                  bei Änderungen für alle Seiten einer Site muss nur an einer einzigen Stelle geändert werden
              • Nachteile:
                  keine

              internes Stylesheet ('style'-Element im 'head'):

              • Vorteile:
                  übersichtlich
              • Nachteile:
                  bein Änderungen für alle Seiten einer Site muss in jedem HTML-Dokument geändert werden

              Inline-Styles:

              • Vorteile:
                  keine
              • Nachteile:
                  machen den Quelltext schwer bis unmöglich lesbar; Fehler schwer lokalisierbar
                  bei späteren Änderungen muss nicht nur jedes HTML angefasst werden, sondern dies auch noch an vielen Stellen

              und er soll selbst entscheiden, was er tut

              Die Entscheidung sollte nun klar sein. ;-)

              Live long and prosper,
              Gunnar

              --
              Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
              1. @@suit:

                ich sehe das so: gib jemandem alle nötigen fakten und objektive beispiele

                Sag jetzt aber nicht, dass du dies hier für zentrale Stylesheets (gut[tm]) vs. Inline-Styles (böse[tm]) getan hättest!

                nein, ich sagte ja, dass das in diesem fall nicht zutrifft - sprich ich habe viele nötige informationen unterschlagen - aufgrund der art der fragestellung und der ignoranz meine andere aussage überhaupt entsprechend zu beachten "ich hab nicht gelesen, was du geschrieben hast, aber ich will das es geht" habe ich dann einfach ohne viel drumherum einen einfachen lösungsvorschlag geliefert

                externes Stylesheet:

                • Nachteile:
                    keine

                externe Ressouce die zusätzlich geladen werden muss, bei lediglich einem einzelnen dokument (zb einer dummy-seite) ist das nicht notwendig)

                internes Stylesheet ('style'-Element im 'head'):

                • Vorteile:

                informationen die NUR in EINEM speziellen dokument gebraucht werden, können schnell und unkompliziert eingebunden werden ohne gleich ein zusätzliches stylesheet einzubinden oder eine neue klasse für ein spezielles element zu definieren

                • Nachteile:
                    bein Änderungen für alle Seiten einer Site muss in jedem HTML-Dokument geändert werden

                das liesse sich zur not auch als include regeln, dann müsste man ebenfalls nur ein dokument zentral ändern - der overhead durch die redundanten informationen bleibt aber bestehen

                Inline-Styles:

                • Vorteile:

                für sonderformatierungen sind keine klassen notwendig, für testzwecke in sinne von quick&dirty durchaus geeignet

                und er soll selbst entscheiden, was er tut
                Die Entscheidung sollte nun klar sein. ;-)

                oder schwieriger :p

                1. @@suit:

                  externes Stylesheet:

                  • Nachteile:
                      keine
                    externe Ressouce die zusätzlich geladen werden muss, bei lediglich einem einzelnen dokument (zb einer dummy-seite) ist das nicht notwendig)

                  Gut, mache ich für eine einzelne Testseite auch nicht. Obwohl’s der Trennung von Inhaltsstruktur, Präsentation und Verhalten [molily] widerspricht.

                  internes Stylesheet ('style'-Element im 'head'):

                  • Vorteile:
                    informationen die NUR in EINEM speziellen dokument gebraucht werden, können schnell und unkompliziert eingebunden werden ohne gleich ein zusätzliches stylesheet einzubinden oder eine neue klasse für ein spezielles element zu definieren

                  'body' mit 'class' oder 'id' und Nachfahrenselektor im externen siteweit gültigen Stylesheet und gut is’.

                  • Nachteile:
                      bein Änderungen für alle Seiten einer Site muss in jedem HTML-Dokument geändert werden
                    das liesse sich zur not auch als include regeln, dann müsste man ebenfalls nur ein dokument zentral ändern - der overhead durch die redundanten informationen bleibt aber bestehen

                  Eben.

                  Inline-Styles:

                  • Vorteile:

                  für sonderformatierungen sind keine klassen notwendig

                  Wenn man CSS-Selektoren beherrscht, (meist) auch nicht. :-b

                  für testzwecke in sinne von quick&dirty durchaus geeignet

                  Und nach dem Test frickelt man nochmal rum und macht den Quelltext richtig[rm]? Warum nicht gleich? Wozu doppelte Arbeit?

                  Live long and prosper,
                  Gunnar

                  --
                  Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
                  1. Wenn man CSS-Selektoren beherrscht, (meist) auch nicht. :-b

                    und wenn nicht Irgend Ein browser dagegen ist, die vorhandenen selektoren zu nutzen ;)

                    Und nach dem Test frickelt man nochmal rum und macht den Quelltext richtig[rm]? Warum nicht gleich? Wozu doppelte Arbeit?

                    das sehe ich auch so - es gibt nix schlimmeres als eine irgenwo .test oder #wert1, #wert2 usw zu sehen, wenn das ganze später mal final sein soll

                    im übrigen, wenn ich wirklich etwas teste, was mich einfach interessiert und NIEMALS online gehen wird, dann durchaus schmutzigen code ;) weils einfach schneller geht[tm]

                    aber sobald ich im entwicklungsstadium etwas ausprobiere, teste oder einen dummy erstelle, verwende ich sogut es geht finale namen - es gibt nix schlimmeres als doppelte arbeit

                2. Hallo.

                  Die Entscheidung sollte nun klar sein. ;-)

                  oder schwieriger :p

                  Um sie wieder ein wenig zu vereinfachen:

                  Inline-Styles:

                  Kennst du eine Möglichkeit, Pseudoklassen oder Pseudoelemente inline zu notieren?
                  MfG, at

                  1. Um sie wieder ein wenig zu vereinfachen:

                    Inline-Styles:
                    Kennst du eine Möglichkeit, Pseudoklassen oder Pseudoelemente inline zu notieren?

                    nein - das würde ich als punkt fürs auslagern bezeichnen ;)

  2. Hallo Tonni,

    Ich schaffe es einfach nicht, dass mein Layout meiner Site immer in der selben Größe bleibt. Ich habe es in Divs gesetzt und dann habe ich es mit right,left,bottom,top in die richtige Größe geformt. Nur wenn ich nun mein Browserfenster vergrößer oder verkleiner, dann verändert sich die Formatierung. Ich hätte aber gerne immer die selbe Größe. Nur wie macht man das?

    eieiei, den Code am besten wegschmeißen ;-)

    Du willst

    • fixe Größe
    • immer zentriert?

    Dann probiere es am besten mal hiermit, das klappt meistens für diesen Zweck ganz gut:

    Dead Centre

    Gruß aus Köln-Ehrenfeld,

    Elya

    --
    We are drowning in information but starved for knowledge. John Naisbitt
    1. Dann probiere es am besten mal hiermit, das klappt meistens für diesen Zweck ganz gut:
      Dead Centre

      uncoole lösung, wenn der viewport kleiner wird als die anzuzeigende seite, verschwindet das zeug im nirvana

      1. Hallo suit,

        Dann probiere es am besten mal hiermit, das klappt meistens für diesen Zweck ganz gut:
        Dead Centre

        uncoole lösung, wenn der viewport kleiner wird als die anzuzeigende seite, verschwindet das zeug im nirvana

        ja sicher, aber aufgrund der Aufgabenstellung nicht zu vermeiden. Wer ein "festgetackertes" Design haben will, will ja gerade nix liquides, womöglich selbständig floatendes und sich an den Viewport anpassendes. Im Gegenteil: er will die volle Kontrolle über sein festes Design. Daß das nicht dem entspricht, was unsereiner entscheiden würde (und daß das mit der Kontrolle eine Illusion ist), ist klar, aber diese Aufgabenstellung ist da draußen in der Welt gar nicht so nicht selten ;-)

        Gruß aus Köln-Ehrenfeld,

        Elya

        --
        We are drowning in information but starved for knowledge. John Naisbitt
        1. ja sicher, aber aufgrund der Aufgabenstellung nicht zu vermeiden. Wer ein "festgetackertes" Design haben will, will ja gerade nix liquides, womöglich selbständig floatendes und sich an den Viewport anpassendes. Im Gegenteil: er will die volle Kontrolle über sein festes Design. Daß das nicht dem entspricht, was unsereiner entscheiden würde (und daß das mit der Kontrolle eine Illusion ist), ist klar, aber diese Aufgabenstellung ist da draußen in der Welt gar nicht so nicht selten ;-)

          es gibt wunderbare lösungen zum zentrieren von seiten, ohne dass etwas im nirvana verschwindet ;)

          begründung ist hier zum nachlesen
          http://suit.rebell.at/index.php?id=14
          user: suit
          pass: rebell

          das ganze ist übrigens wie man sieht noch eine baustelle (und ich hab keine zeit, momentan etwas zu tun) ;) - anregungen/wünsche/beschwerden nehme ich natürlich gerne entgegen

    2. Hallo Elya

      Dead Centre

      Welchen Vorteil hat das gegenüber dem Tipp in unserer FAQ oder dem Zentrieren mit nur einem Element?
      (Und wenn nichts im Nirvana verschwinden soll, die dort verlinkten Beispiele beachten.)

      Auf Wiederlesen
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
  3. Hallo.

    Ich schaffe es einfach nicht, dass mein Layout meiner Site immer in der selben Größe bleibt. [...] Nur wie macht man das?

    Indem man malt.
    MfG, at