Position von Inhalten bei größerer Auflösung ändern

Dieses Thema im Forum "Webmaster Hilfe / Programmierer Forum" wurde erstellt von PhYro, 15.12.2008.

  1. PhYro

    PhYro Erfahrener Benutzer

    Dabei seit:
    02.02.2006
    Beiträge:
    545
    Zustimmungen:
    0
    hallo Leute,

    ich bins mal wieder ^^

    ich habe ein HP auf 1280*1024 programmiert.
    links und rechts ist weißer rand.
    neben dem weisen rand ist links das navigationsmenü in einem farbigen kasten der von oben nach unten geht und rechts ist noch so ein farbiger Kasten, indem nichts steht. In der mitte befindet sich der inhalt.

    Problem ist jetzt wenn ich die Auflösung größer stelle (z.b. 1024*768), dann möchte ich das der weiße Rand links und rechts kleiner wird, sodass ich die farbigen Kästchen noch richtig im Bild habe.

    Ich hab das bis jetzt mit Pixelgrößen gemacht in der CSS Datei.
    Muss ich das dann mit Prozentangaben machen?
    Aber wie? Das klappt nicht wirklich

    siehe css datei:
    PHP:
    .navigation
    {
      
    margin-top:     0px;
      
    margin-left:    130px;
      
    margin-bottom:   0px;
      
    width:190px;
      
    height:900px;
      
    position:fixed;

      
    overflow:auto;
      
    scroll-y:auto;
      
    background-image:url("bilder/navi.png");
        
    font-familyVerdanaGeorgia"Times New Roman"Timesserif;
      
    color:#FFFFFF;
      
    text-aligncenter;
      
    font-size10px;
    }

    .
    navigation2
    {
      
    margin-top:     0px;
      
    margin-left:    950px;
      
    margin-bottom:   0px;
      
    width:190px;
      
    height:900px;
      
    position:fixed;

      
    overflow:auto;
      
    scroll-y:auto;
      
    background-image:url("bilder/navi2.png");
    }

    .
    content
    {
      
    positionabsolute;
      
    margin-top:     150px;
      
    margin-left:    350px;
      
    margin-right:   80%;
      
    margin-bottom:  80%;
      
    width:60%;
      
    overflow:scroll;
      
    scroll-y:auto;
      
    overflow:auto;
    }
    MfG
    PhYro
     
  2. AdMan

    schau mal hier: Windows-Wartungs-Tool. Viele Probleme lassen sich damit einfach beheben. Oftmals ist der PC dann auch schneller!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  3. disler

    disler Erfahrener Benutzer

    Dabei seit:
    05.07.2007
    Beiträge:
    1.654
    Zustimmungen:
    0
    Ort:
    Schweiz
    die eizige Lösung die ich kenne, ist nur mit Prozentangaben möglich. Da jeder User ja andere Einstellungen hat. Aber ich rate dir, von deinem Vorhaben mit Prozenten zu schaffen ab. Ich würde alles Standartmässig auf 1280 x 1024 (früher war es 1024 X 768) zu Programmieren (mit cm oder px angabe) da dies die meist verwendete Auflösung ist.
     
  4. #3 threadi, 16.12.2008
    threadi

    threadi Erfahrener Benutzer

    Dabei seit:
    16.04.2006
    Beiträge:
    289
    Zustimmungen:
    0
    Webseiten "programmiert" man nicht.
    Webseiten werden nicht für bestimmte Auflösungen erstellt.

    Wieso? Weil HTML eine Auszeichnungssprache ist, keine Programmiersprache.
    Und: eine Webseite wird immer nur im Fenster des Browsers dargestellt. Dieses nimmt erfahrungsgemäß nie den kompletten Bildschirm ein. Auch hat jeder Browser links und rechts am Fenster Elemente die wiederum selber Platz benötigen. Der übrig bleibende Teil wird Viewport genannt.

    Die Lösung für dich: erstelle eine Webseite nicht für einen bestimmten Viewport. Falls Du davon ausgehst, dass die meisten deiner Besucher einen Computer mit Bildschirm haben kannst Du davon ausgehen, dass diese einen maximalen Viewport von 998 Pixeln breite haben. Andernfalls müsstest Du auch mit wesentlich kleineren Viewports rechnen (z.B. 640 Pixel breite oder kleiner) die vor allem bei heutigen mobilen Endgeräten (Blackberry etc.) üblich ist.

    Die Frage ist also: was willst Du deinen Besucher von deiner Seite sehen lassen. Die Arbeit mit prozentualen Werten ist auch nur bis zu einer bestimmten (geringen) Auflösung sinnvoll und passt zudem nicht zu jedem Design.
     
  5. PhYro

    PhYro Erfahrener Benutzer

    Dabei seit:
    02.02.2006
    Beiträge:
    545
    Zustimmungen:
    0
    Was ich meinen besuchern sehen lassen will.
    Ganz einfach.

    Wenn jeman mit einer Auflösung von 1280*1024 (oder mehr) auf die Seite geht, dann soll er links und rechts einen weißen Rand haben, sodass der Haupteil von der Seite in der Mitte erscheint.

    Wenn jeman mit einer Auflösunf von 1204*768 (oder kleiner) auf die Seite geht, dann soll er links und rechts nicht diesen weißen Rand sehen, weil das haupteil die ganze Seite einnimmt.
     
  6. disler

    disler Erfahrener Benutzer

    Dabei seit:
    05.07.2007
    Beiträge:
    1.654
    Zustimmungen:
    0
    Ort:
    Schweiz
    dann definierst du um alles herum einen div block, mit der Breite von 768, welcher in die Mitten zentriert ist!
    Den hintergrund vom div definierst du mit weiss, und die sache ist geritzt! ;)
     
  7. PhYro

    PhYro Erfahrener Benutzer

    Dabei seit:
    02.02.2006
    Beiträge:
    545
    Zustimmungen:
    0
    Kannst du mir das anhand meiner index php bitte zeigen:
    PHP:
      echo "  <body class=\"main\">\n";
      echo 
    "    <div id=\"navigation_div\">\n"// linkes Menu
      
    include "navigation.php";
      echo 
    "    </div>\n";

      echo 
    "    <div id=\"navigation2_div\">\n"// rechtes Menü
      
    include "navigation2.php";
      echo 
    "    </div>\n";

      echo 
    "    <div id=\"content_div\">\n"// In der Mitte der Inhalt
      
    include "content.php";
      echo 
    "    </div>\n";

      echo 
    "    <div id=\"banner_div\">\n"// banner
      
    include "banner.php";
      echo 
    "    </div>\n";

      
      echo 
    "    <div id=\"root\">\n"
      echo 
    "    </div>\n";
      echo 
    "  </body>\n";
      echo 
    "</html>\n";
    Wie zentrier ich das dann?
     
  8. disler

    disler Erfahrener Benutzer

    Dabei seit:
    05.07.2007
    Beiträge:
    1.654
    Zustimmungen:
    0
    Ort:
    Schweiz
    Code:
    <div style="width:750px; height:250px; margin:0 auto;"></div>

    Das ist alles den ersten Teil schiebst du gleich nach deinem <body> rein, und das </div> kopierst du gerade vor das </body> rein!

    Hats geklappt?

    Ist die einfachste Version, ohne css und diesem zeug!

    Versuchs mal, und sage mir, obs geklappt hat! ;)
     
  9. PhYro

    PhYro Erfahrener Benutzer

    Dabei seit:
    02.02.2006
    Beiträge:
    545
    Zustimmungen:
    0
    Hmm.. das geht nicht: habs jetzt so:

    PHP:
      echo "  <body class=\"main\">\n";
      echo 
    " <div style="width:750pxheight:250pxmargin:0 auto;">

      echo "    
    <div id=\"navigation_div\">\n"// linkes Menu
      
    include "navigation.php";
      echo 
    "    </div>\n";

      echo 
    "    <div id=\"navigation2_div\">\n"// rechtes Menü
      
    include "navigation2.php";
      echo 
    "    </div>\n";

      echo 
    "    <div id=\"content_div\">\n"// In der Mitte der Inhalt
      
    include "content.php";
      echo 
    "    </div>\n";

      echo 
    "    <div id=\"banner_div\">\n"// banner
      
    include "banner.php";
      echo 
    "    </div>\n";


      echo 
    "    <div id=\"root\">\n";
     
     echo 
    "    </div>\n";
      echo 
    "  </body>\n";

      </
    div>
      echo 
    "</html>\n";
    ?>
    Fehlermeldung im browser:
    Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in C:\xampp\htdocs\index.php on line 17
     
  10. AdMan

    Es ist generell erstmal empfehlenswert alle ggf. veralteten oder fehlerhaften Treiber zu scannen und auf neue zu aktualisieren. Hier kannst du einen Treiber-Scanner downloaden. Das erspart oftmals viel Ärger und hilft gegen diverse Probleme.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  11. disler

    disler Erfahrener Benutzer

    Dabei seit:
    05.07.2007
    Beiträge:
    1.654
    Zustimmungen:
    0
    Ort:
    Schweiz

    deine 2. Zeile in

    echo " <div style=\"width:750px; height:250px; margin:0 auto;\">

    ändern!

    und deine 26. Zeile in

    echo "</div>";

    ändern!

    habe dir eben den HTML Code geschickt!

    Zur erklährung:

    Auf der 2. Linie hast du mit den " vor dem width das echo beendet. Was zur unvollstänigkeit führt!

    Bei der Line 26 hat du das echo vergessen! Php kennt html code eben nicht!

    Ändere die mal, und sage mir, was passiert ist!


    P.S. ersetzte include "file.php" , mit include_one("file.php")

    hats geklappt?
     
  12. PhYro

    PhYro Erfahrener Benutzer

    Dabei seit:
    02.02.2006
    Beiträge:
    545
    Zustimmungen:
    0
    danke für deine bemühungen, aber es geht immer noch nicht.
    hier ist mal die ganze index.php

    PHP:
    <?php
      error_reporting
    (E_ALL);

      echo 
    "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";
      echo 
    "         \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";
      echo 
    "<html>\n";
      echo 
    "  <head>\n";
      echo 
    "    <title>Wilder Haufen Sandlofs</title>\n";
      echo 
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"wilderhaufen.css\" />\n";
      echo 
    "    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />\n";
      echo 
    "    <meta name=\"copyright\" content=\"Wilder Haufen Sandlofs\" />\n";
      echo 
    "    <meta name=\"description\" content=\"Herzlich Willkommen auf der Homepage des Wilden Haufen Sandlofs\" />\n";
      echo 
    "    <meta name=\"keywords\" content=\"Wilder Haufen, Sandlofs, Hasenball, Männergade\" />\n";

      echo 
    "  </head>\n";
      echo 
    "  <body class=\"main\">\n";
      echo 
    " <div style=\"width:750px; height:250px; margin:0 auto;\">

      echo "    
    <div id=\"navigation_div\">\n"// linkes Menu
      
    include_one("navigation.php");
      echo 
    "    </div>\n";

      echo 
    "    <div id=\"navigation2_div\">\n"// rechtes Menü
      
    include_one("navigation2.php");
      echo 
    "    </div>\n";

      echo 
    "    <div id=\"content_div\">\n"// In der Mitte der Inhalt
      
    include_one("content.php");
      echo 
    "    </div>\n";

      echo 
    "    <div id=\"banner_div\">\n"// banner
      
    include_one("banner.php");
      echo 
    "    </div>\n";

      echo 
    "    <div id=\"root\">\n"// ganz oberer Div-Holder
      
    echo "    </div>\n";
      echo 
    "  </body>\n";

      echo 
    "</div>";
      echo 
    "</html>\n";
    ?>
    fehler:
    Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in C:\xampp\htdocs\index.php on line 19
     
Thema:

Position von Inhalten bei größerer Auflösung ändern

Die Seite wird geladen...

Position von Inhalten bei größerer Auflösung ändern - Ähnliche Themen

  1. Neuer Fernseher 50" oder größer, ohne Hochglanzlack

    Neuer Fernseher 50" oder größer, ohne Hochglanzlack: Hallo. Ich such schon ewig nach nem neuen Fernseher, um ein paar Stunden am Tag zu gucken und hauptsächlich Konsole zocken: -Full HD -brauchbare...
  2. Große Abweichung auf der -12V Schiene

    Große Abweichung auf der -12V Schiene: Moin Leute, gerade wollte mein PC nicht mehr starten. Ich trennte das Netzteil für einige Minuten vom Strom, sodass sich die Kondensatoren...
  3. Corel X7 Home and student

    Corel X7 Home and student: Moin! Ich habe mir Corel X7 Home and student gekauft. Das wird aber auf meinem W7 64 bit- Rechner als 32Bit- Version installiert und wenn ich es...
  4. Office2016 Home and Student - Kaufberatung

    Office2016 Home and Student - Kaufberatung: Hallo, ich möchte mir das neue "Office Home & Student 2016" zulegen. Jedoch gibt es im Netz sehr erhebliche Preisunterschiede beim Kauf. Da gibt...
  5. Klammern ändern

    Klammern ändern: Moin! Mein Verleger will, dass ich alle Klammertexte in Kursiv umändere. Muss ich jetzt in Word 2000 alle Klammern einzeln umändern, oder gibt es...