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

Diskutiere Position von Inhalten bei größerer Auflösung ändern im Webmaster Hilfe / Programmierer Forum Forum im Bereich Computerprobleme; 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...

  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. Anzeige

    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. 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?
     
  11. 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
     
  12. disler

    disler Erfahrener Benutzer

    Dabei seit:
    05.07.2007
    Beiträge:
    1.654
    Zustimmungen:
    0
    Ort:
    Schweiz
    also, schau mal auf linie 19! Dann eins hoch!

    Da fehlt doch was(2 Sachen) ganz zu hinterst!

    Hochkomma und Semikolon! gib dort noch "; ein, und dann sollte es laufen!



    versuchs nochmal...

    und sag mir bescheid, obs geklappt hat!
     
  13. PhYro

    PhYro Erfahrener Benutzer

    Dabei seit:
    02.02.2006
    Beiträge:
    545
    Zustimmungen:
    0
    Jetzt kommt :

    Fatal error: Call to undefined function include_one() in C:\xampp\htdocs\index.php on line 20
     
  14. disler

    disler Erfahrener Benutzer

    Dabei seit:
    05.07.2007
    Beiträge:
    1.654
    Zustimmungen:
    0
    Ort:
    Schweiz
    du musst auch include_once() nehmen!

    habe mich vorher vertippt, sorry!
     
  15. PhYro

    PhYro Erfahrener Benutzer

    Dabei seit:
    02.02.2006
    Beiträge:
    545
    Zustimmungen:
    0
    Ok jetzt geht die Seite wieder, aber es sieht jetzt noch schlechte aus als vorher. (Hab das aktuele leider noch nicht online, sonst könntest du mal drauf gehen)

    hier ein screenshot: (auflösung 1280*1024)
     

    Anhänge:

    • hp.jpg
      hp.jpg
      Dateigröße:
      83 KB
      Aufrufe:
      64
  16. disler

    disler Erfahrener Benutzer

    Dabei seit:
    05.07.2007
    Beiträge:
    1.654
    Zustimmungen:
    0
    Ort:
    Schweiz
    mhhmmm, ich habe dieses div bei mir bei firefox, ie6 und ie 7 getestet! Irgendetwas scheint störrent zu sein!

    Wie ist die Klasse Main definiert?



    P.S. Ich empfehle dir noch, php und html zu trennen, ist übersichtlicher!
     
  17. PhYro

    PhYro Erfahrener Benutzer

    Dabei seit:
    02.02.2006
    Beiträge:
    545
    Zustimmungen:
    0
    Also:
    Das mit main (ganz ehrlich hab ich kein plan)
    Hab die Index.php von einer anderen HP genommen die ich verwalte und da stand das so drin.

    hier mal ein Auszug aus meiner css datei.
    Ich glaub da muss ich mit den Pixel angaben was ändern oder?

    PHP:
    body
    {
      
    margin-top:     0px;
      
    margin-left:    0px;
      
    margin-right:   0px;
      
    background-attachment:fixed;
    }

    .
    banner
    {
      
    margin-top:     0px;
      
    margin-left:    320px;
      
    position:fixed;
      
    width:630px;
      
    height:130px;
      
    /* background-attachment:fixed;
      /* background-color:#111177;  */
      
    font-familyVerdanaGeorgia"Times New Roman"Timesserif;
        
    color#000000;
      
    font-size25px;
      
    font-weightbold;
    }

    .
    bigBanner
    {

      
    margin-top:25px;
      
    font-size25px;
      
    text-aligncenter;
    }

    .
    lilBanner
    {
      
    margin-top:20px;
      
    margin-right:20px;
      
    font-size15px;
      
    text-alignright;
    }

    .
    navigation
    {
      
    margin-top:     0px;
      
    margin-left:    130px;
      
    margin-right:   300px;
      
    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-right:   1000px;   */
      
    margin-bottom:   0px;
      
    width:190px;
      
    height:900px;
      
    position:fixed;

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

    .
    content
    {
      
    positionfixed;
      
    margin-top:     150px;
      
    margin-left:    330px;
      
    margin-right:   950px;
      
    margin-bottom:  80%;
      
    width:610px;
      
    overflow:scroll;
      
    scroll-y:auto;
      
    overflow:auto;
    }
    Wär nett wenn du mal drüber guckst.
    Ich bin nicht so fit in PHP
     
  18. disler

    disler Erfahrener Benutzer

    Dabei seit:
    05.07.2007
    Beiträge:
    1.654
    Zustimmungen:
    0
    Ort:
    Schweiz
    nimm mal das bei der navigation raus: margin-left: 320px;

    weil damit setzt du es um weitere 320px nach rechts!

    dann sollte es klappen! sonst werde ich mal weiter schauen!
     
  19. PhYro

    PhYro Erfahrener Benutzer

    Dabei seit:
    02.02.2006
    Beiträge:
    545
    Zustimmungen:
    0
    Ok also hab jetzt mal bischen ausprobiert:
    und bin auf den entschluss gekommen das es an den divs liegt in der index.php, Die sind ja bisher gar nicht verschachtelt, d.h. ohne die CSS Datei würde er das alles untereinander schreiben.

    Deswegen muss ich versuchen die divs ineinander zu verschachteln, weil dann kann ich auch die PIXEL angaben zum Teil weg lassen.

    Verstehst du das?

    Weist du wie ich das verschachteln muss?
     
  20. Anzeige

    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.
  21. disler

    disler Erfahrener Benutzer

    Dabei seit:
    05.07.2007
    Beiträge:
    1.654
    Zustimmungen:
    0
    Ort:
    Schweiz
    ändere mal deinen Code auf diesen hier:

    Code:
    <?php
      error_reporting(E_ALL);?>
    
    
    <html>
    	<head>
    <title>Wilder Haufen Sandlofs</title>
    <link rel="stylesheet" type="text/css" href="wilderhaufen.css" />
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1" />
    <meta name="copyright" content="Wilder Haufen Sandlofs" />
    <meta name="description" content="Herzlich Willkommen auf der Homepage des Wilden Haufen Sandlofs" />;
    <meta name="keywords" content="Wilder Haufen, Sandlofs, Hasenball, Männergade" />
    
    </head>
    <body class="main">
    <div style="width:750px; height:250px; margin:0 auto;">
    
    <div id="navigation_div"><?php
      include_one("navigation.php");?>
    </div>
    
    <div id="navigation2_div"> // rechtes Menü
    <?php
      include_one("navigation2.php");?>
    </div>
    
    <div id="content_div"> // In der Mitte der Inhalt
    <?php
      include_one("content.php");?>
    </div>
    
    <div id="banner_div"> // banner
    <?php
      include_one("banner.php");?>
    </div>
    
    <div id="root"> // ganz oberer Div-Holder
    </div>
    </body>
    
    </div>
    </html>
    
    
    und die css auf dies hier:

    Code:
    body
    {
      margin-top:     0px;
      margin-left:    0px;
      margin-right:   0px;
      }
    
    .banner
    {
      margin-top:     0px;
      margin-left:    0px;
    
      width:630px;
      height:130px;
      /* background-attachment:fixed;
      /* background-color:#111177;  */
      font-family: Verdana, Georgia, "Times New Roman", Times, serif;
        color: #000000;
      font-size: 25px;
      font-weight: bold;
    }
    
    .bigBanner
    {
    
      margin-top:25px;
      font-size: 25px;
      text-align: center;
    }
    
    .lilBanner
    {
      margin-top:20px;
      margin-right:20px;
      font-size: 15px;
      text-align: right;
    }
    
    .navigation
    {
      margin-top:     0px;
      margin-bottom:   0px;
      width:190px;
      height:900px;
      position:fixed;
      overflow:auto;
      scroll-y:auto;
      background-image:url("bilder/navi.png");
      font-family: Verdana, Georgia, "Times New Roman", Times, serif;
      color:#FFFFFF;
      text-align: center;
      font-size: 10px;
    }
    
    .navigation2
    {
    
      margin-bottom:   0px;
      width:190px;
      height:900px;
      position:fixed;
    
      overflow:auto;
      scroll-y:auto;
      background-image:url("bilder/navi2.png");
    }
    
    .content
    {
      position: fixed;
      margin-top:     150px;
      margin-bottom:  80%;
      width:610px;
      overflow:scroll;
      scroll-y:auto;
      overflow:auto;
    } 


    und probiere es erneut, und mache einen screenshot!

    jetzt könnte es sein, dass sie evt. nicht neben einaner liegen, was du aber wieder mit html code umstrukturieren kannst!
     
  22. PhYro

    PhYro Erfahrener Benutzer

    Dabei seit:
    02.02.2006
    Beiträge:
    545
    Zustimmungen:
    0
    ja ok jetzt ist ja nur PHP und HTMl getrennt.
    Aber vorher gibgs ja auch wo es nicht getrennt war.

    Verschachteln kann ich das ja jetzt mit den divs?
     
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...