cyberoner1: Dynamische Seitengröße

Moin,

ich brüchte mal eine Lösung für folgendes Problem:

Ich versuche grade eine Website zu erstellen in reinem html mit css.

soweit so gut, ist ja eigentlich auch kein Thema, aber dann kam mein großes Problem mit dem resize.

Wenn ich meine Bildschirmgröße auf Vollbild habe sieht alles wunderbar aus, doch dann habe ich das Fenster mal verkleinert und mir ist alles aus dem Gesicht gefallen. Die ganzen Grafiken waren verschoben. Ich habe gerade keine Idee, wie ich dies bewerkstelligen kann. ICh hoffe ihr könnt mir weiterhelfen-

Hier der Link zur Seite:

klick

hier meine index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <title></title> </head> <body> <div id="leiste_oben"></div> <p class="suche">Experten-Suche</p> <p class="anwalt">Rechtsanwälte</p> <p class="sachver">Sachverständige</p> <p class="gutachter">Gutachter</p> <p class="bau">Bau-Gutachter</p> <p class="kfz">KFZ-Gutachter</p> <p class="medizin">Medizin-Gutachter</p> <p class="etc">etc.</p> </body>  </html>

und hier meine css:

body {   background-image:url(http://cyberoner1.kilu.de/rdg/images/bg.jpg);   background-repeat:no-repeat;   background-position:100px 15px;   background-color:#b0c4de;   } #leiste_oben { background-color:#000080; width:992px; padding:5px; margin-top: 15px; margin-left:90px; line-height:10px; } .suche { color:#FFFFFF; font-weight:bold; margin-top:-25px; margin-left:130px; } .anwalt { color:#FFFFFF; font-weight:bold; margin-top:-38px; margin-left:260px; } .sachver { color:#FFFFFF; font-weight:bold; margin-top:-38px; margin-left:380px; } .gutachter { color:#FFFFFF; font-weight:bold; margin-top:-38px; margin-left:510px; } .bau { color:#FFFFFF; font-weight:bold; margin-top:-38px; margin-left:600px; } .kfz { color:#FFFFFF; font-weight:bold; margin-top:-38px; margin-left:730px; } .medizin { color:#FFFFFF; font-weight:bold; margin-top:-38px; margin-left:870px; } .etc { color:#FFFFFF; font-weight:bold; margin-top:-38px; margin-left:1030px; }   
  1. Hi cyberoner1,

    aber dann kam mein großes Problem mit dem resize.

    falsch, Dein großes Problem ist, dass Du nur Pixel für Längen-, Breiten und Positionsangaben benutzt, also _feste_ Längenangaben. Besser ist aber die Verwendung _relativer Angaben_, wie zB. % oder em.

    Lese dazu den Artikel »em« nicht nur für Schriftgrößen von Ingo Turski.

    Hier der Link zur Seite:
    klick

    Außerdem empfehle ich Dir den Absatz Allgemeines zu Verweisen hier bei SELFHTML zu lesen.

    Mit lieben Grüßen aus Wien

    Michi

    --
    Self-Code: ie:{ fl:| br:> va:} ls:# fo:| rl:° n4:# ss:| de:> js:{ ch:? mo:) zu:}
    Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html

    It is nice to be important - but it is more important to be nice.

  2. Hi,

    und solche Angaben....

    margin-left:1030px;
    margin-left:870px;
    width:992px;

    ...bringen dich nicht ins Grübeln?

    Liquid Design benötigt in der Regel Prozentangaben.

    Davon abgesehen empfehle ich dir für so eine einfache Struktur, dir mal die Selfhtml templates anzuschauen. Ach ja und noch was, wer bei einem einfachen Design, Maßangaben mit minus werten versieht, da muss irgendwas nicht überdacht worden sein, meine persönliche Meinung.

    Tim

  3. Mahlzeit cyberoner1,

    Ich versuche grade eine Website zu erstellen in reinem html mit css.

    soweit so gut, ist ja eigentlich auch kein Thema, aber dann kam mein großes Problem mit dem resize.

    Nein, Dein großes Problem ist, dass Du noch nicht ganz verstanden hast, wozu HTML und CSS da sind. HTML zeichnet die Struktur einers Dokuments aus. Ein Abschnitt wie

    <div id="leiste_oben"></div>
    <p class="suche">Experten-Suche</p>
    <p class="anwalt">Rechtsanwälte</p>
    <p class="sachver">Sachverständige</p>
    <p class="gutachter">Gutachter</p>
    <p class="bau">Bau-Gutachter</p>
    <p class="kfz">KFZ-Gutachter</p>
    <p class="medizin">Medizin-Gutachter</p>
    <p class="etc">etc.</p>

    jedoch hat überhaupt keine Struktur. Ich vermute, Du willst etwas wie eine Menüzeile darstellen. Eine Menüzeile ist von der Struktur her vergleichbar mit einer Liste von Links. Wieso schreibst Du Dein Menü also nicht ungefähr so:

    <ul id="leiste_oben">   <li>Experten-Suche</li>   <li>Rechtsanwälte</li>   <li>Sachverständige</li>   <li>Gutachter</li>   <li>Bau-Gutachter</li>   <li>KFZ-Gutachter</li>   <li>Medizin-Gutachter</li>   <li>etc.</li> </ul>

    und benutzt dafür ungefähr folgende CSS-Anweisungen:

    #leiste_oben li {   display: inline; }

    (ggf. noch um weitere Formatierungen wie Ränder, Abstände usw. ergänzt)?

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|

    1. <ul id="leiste_oben">

      Dann bitte nicht "leiste_oben" sondern "navigation" oder "menu" - wenn aus der Leiste jemals eine gewichtete Wolke wird, oder ein diagonales Menü und dieses dann rechts unten steht, hast du mit der Benennung ein logisches Problem :)

      1. So habe nun mal das ganze geändert.
         Jetzt habe ich das große Problem das im im Firefox3 nicht vernünftig angezeigt wird im IE7 schon.. naja so halbwegs:

        Nur wie bekomme ich denn nun das ul in die div Zeile?

        oder kann man das in einer zusammenfügen?....

        hier mal der neue Code:

        <body> <div id="leiste_oben"></div> <ul id="text"> <li>Experten-Suche</li> <li>Rechtsanwälte</li> <li>Sachverständige</li> <li>Gutachter</li> <li>Bau-Gutachter</li> <li>KFZ-Gutachter</li> <li>Medizin-Gutachter</li> <li>etc.</li> </ul> </body>

        und css:

        body {   background-image:url(http://cyberoner1.kilu.de/rdg/images/bg.jpg);   background-repeat:no-repeat;   background-position:50% 15px;   background-color:#b0c4de;   }   #leiste_oben {   background-color:#000080;     position: centre; width:80.8%; margin-top: 10px; margin-left:auto; margin-right:auto; line-height:10px; } #text li { margin-top:-10px;  font-size:1.1em;  display: inline;  color: #FFFFFF;  word-spacing:1em;   }
        1. Nur wie bekomme ich denn nun das ul in die div Zeile?
          oder kann man das in einer zusammenfügen?....

          das div-Element brauchst du garnicht, das soll ja dein div-Element ersetzen

          <div id="leiste_oben"></div>
          <ul id="text">

          Und wie bereits erwähnt sind die Namen nicht schlau "text" ist mindenstens genauso unklug wie leiste_oben - no na] ist Text drinnen. Warum benennst du das Element nicht nach seinem Zweck? also "menu" oder "nav", "navigation" oder wie auch immer?

        2. Mahlzeit cyberoner1,

          Jetzt habe ich das große Problem das im im Firefox3 nicht vernünftig angezeigt wird im IE7 schon.. naja so halbwegs:

          Du zäumst das Pferd von hinten auf: sinnvollerweise entwickelt man mit Hilfe eines vernünftigen, standardkonformen Browsers (z.B. dem von Dir erwähnten Firefox) validen Code und testet anschließend, ob die verschiedenen IE-Versionen auch damit klar kommen. Wenn nicht, fügt man ggf. speziell für diese Browser Ausnahmen ein.

          Nur wie bekomme ich denn nun das ul in die div Zeile?

          Vielleicht, indem Du es auch in das <div> hineintust? Im Moment schließt Du das <div> ja wieder, bevor die Liste kommt.

          Darüber hinaus brauchst Du - wie suit bereits schrieb - dieses <div> eigentlich gar nicht, oder?

          MfG,
          EKKi

          --
          sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|