Probleme auf anderen Bildschirmen

HoneyKiSs

HoneyKiSs

Mitglied
Mahlzeit.
Ich hab mal eine Frage und weiß nicht so recht wie ich das lösen soll.
Also ich arbeite mit DIV Boxen und geben deren Breite also im CSS mit Pixel an. Darin habe ich eine Tabelle wo ich eine Art Galerie gebastelt hab. Ich komme da besser mit Tabellen klar. Das hab ich auch mit width PX definiert. Und die einzelnen Bilder sind auch mit px definiert, allerdings nur die Höhe und die Breite als Auto.

So, jetzt aber folgendes Problem. Ich habe einen kleinen 15 Zoll Monitor kein Breitbild und die Standardauflösung wie fast die meisten haben 1024x768.
Natürlich hab ich die Website darauf angepasst.

Wenn jetzt auf einem anderen Bilderschirm die Seite angeschaut wird, ist rechts alles leer. Die Seite ist nicht mittig, da macht er irgendwie alles mittig auch das Logo und so. :eek:

Jedenfalls hab ich keine Ahnung wie ich das nun anders machen soll. Man kann ja auch mit % arbeiten, das ich das DIV einfach als 90% angeben oder so?

Aber ist dann nicht das Problem, das sich dann im Inhalt dann auch alles verschiebt und in die breite gezerrt wird. Ich meine, das Layout passt doch dann auch nicht mehr?

Oder ich könnte auch einfach das alles breiter machen mit Pixeln. Statt breite 900 eben 1200, aber dann hab ich wieder das Problem das man dann auf kleinen Bildschirmenen horizontal scrollen muss und das Layout dadurch auch nicht mehr richtig ist :(

Was kann man denn nur dagegen tun? Wie soll ich das jetzt anpassen? Geht das überhaupt mit % im Div? Ich bin jetzt ratlos. Das Hintergrundbild kann man ja einfach größer machen das ginge.

Danke schon mal :)
Gruß
 
Mahlzeit retour.
HoneyKiSs hat gesagt.:
... Wenn jetzt auf einem anderen Bilderschirm die Seite angeschaut wird, ist rechts alles leer. Die Seite ist nicht mittig, da macht er irgendwie alles mittig auch das Logo und so. :eek:
Zum Vergrößern anklicken....
Aha: Rechts alles leer, die Seite nicht mittig, aber irgendwie alles mittig auch das Logo und so.

HoneyKiSs hat gesagt.:
Jedenfalls hab ich keine Ahnung wie ich das nun anders machen soll. Man kann ja auch mit % arbeiten, das ich das DIV einfach als 90% angeben oder so?
Zum Vergrößern anklicken....
Hast du das schon mal probiert oder so?

HoneyKiSs hat gesagt.:
Aber ist dann nicht das Problem, das sich dann im Inhalt dann auch alles verschiebt und in die breite gezerrt wird. Ich meine, das Layout passt doch dann auch nicht mehr?
Zum Vergrößern anklicken....
Bei mir nicht, bei dir?

HoneyKiSs hat gesagt.:
Oder ich könnte auch einfach das alles breiter machen mit Pixeln. Statt breite 900 eben 1200, aber dann hab ich wieder das Problem das man dann auf kleinen Bildschirmenen horizontal scrollen muss und das Layout dadurch auch nicht mehr richtig ist :(
Zum Vergrößern anklicken....
Klar, entweder horizontal scrollen oder mit der Zoom-Funktion des Browsers das Bild verkleinern.

HoneyKiSs hat gesagt.:
Was kann man denn nur dagegen tun? Wie soll ich das jetzt anpassen? Geht das überhaupt mit % im Div? Ich bin jetzt ratlos. Das Hintergrundbild kann man ja einfach größer machen das ginge.
Zum Vergrößern anklicken....
Was kann man wogegen tun? Was willst du jetzt nun anpassen? Was soll nicht mit % im DIV gehen?
Nach lesen deines Beitrages bin ich ebenfalls ratlos.
 
naja, schade das du da nicht durchblickst. :/
ich meinte doch einfach das eben zu viel Platz frei ist wenn die seite bei hoher Auflösung betrachtet wird. Zum BSP bei dieser hier http://www.sukey-vionic.de oder http://www.delicat-art.de bei meiner Auflösung ist das schön mittig und rechts und links ist nicht viel frei. Und bei noch höherer auflösung am besten noch mit Breitbildmonitoren ist bei den Seiten rechts sehr viel frei.

Ich hab das also nicht in die Mitte bekommen, so das es gleichmässig ist. Ich hab das mit DIV Containern gemacht zuerst. Also um das komplette Layout ein Div.
So zum BSP
HTML: 
<body>

<div id="div_main">

<div id="menue">
</div>
<div id="content">
</div>
<div id="manue_left">
</div>
<div id="footbar">
</div>

</div>


</body>
</html>

Also hab ich um das ganze noch ein DIV gemacht, damit ich das komplett besser handhaben kann.

Ich hab das Problem jetzt so gelöst. Das ich um das komplette Layout einfach eine Tabelle gemacht hab anstelle des DIV, einfach den ganzen HTML Code kopiert und die Tabelle rein so dann.

HTML: 
<body>


<table width="0" align="center" border="0" cellspacing="0" cellpadding="0" id="tb_main">
  <tr>
    <td>
    
<div id="menue">
</div>
<div id="content">
</div>
<div id="manue_left">
</div>
<div id="footbar">
</div>

</td>
  </tr>
</table>

</body>
</html>

so ist das dann :) das hab ich dann einfach auf center gerichtet und dann passt es jetzt.
ich hoffe man weiß nun wie ich das meinte. ;-)
 
Zuletzt bearbeitet:
Hallo,

jetzt habe ich es vermutlich kapiert: Du willst die Seiten im Viewport zentrieren.
Dazu musst du dem inhaltstragenden Element (in deinem Beispiel der DIV-Block mit der id="div_main") eine rechte und linke äußere Auspolsterung (margin) mit dem Wert "auto" geben. Also etwa so:
HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Seitentitel</title>
    <style type="text/css">
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #main {
        width: 40em;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="main">

<!-- Seiteninhalt -->

    </div>
  </body>
</html>
Einzelheiten dazu kannst du hier nachlesen:
Little Boxes: Webseite zentrieren mit width und margin
 
ahhh, vielen Dank für den Tipp. Also die aktuelle Seite hab ich nun ja mit Tabelle umrandet und zentriert, aber danke dafür das kann ich direkt auf meinen anderen Seiten anwenden, da hab ich ja auch das Problem :)

DANKE
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück