Seitenbreite bei Browsern

DonUndertaker · 21.09.2011

Hallo,
ich habe eine Seite gemacht, die man auch mit mobilen Entgeräten ansehen soll.
Um zu sehen, ob alles da sitzt, wo ich es haben will, stellte ich meinen FF auf die entsprechende Größe ein. Leider wird durch irgendeine Einstellung die Seitenbreite nicht richtig umgesetzt, so dass es immer abgeschnitten wirkt.
Im Vergleich dazu einmal der IE (links)

Hier die CSS Datei:

Code:

*{
    margin: 0;
    padding: 0;
    border: 0;
}

*:focus {
    outline: none;
}

body {
    background: #fff;
    background-image: url(Bilder/web_bg.jpg);
    background-repeat: repeat-x;
    font-family: Arial, Helvetica, sans-serif;
}

#rahmen {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
}

#header {
    width: 100%;
    height: 98px;
    text-align: center;
}

#button_vertretung {
    width: 71px;
    height: 81px;
    background-image: url(Bilder/vertretung.jpg);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    display: block;
    font-size: 0px;
}

#button_vertretung:hover {
    background-image: url(Bilder/vertretung_hover.jpg);
}

#button_kunden_add {
    width: 71px;
    height: 81px;
    background-image: url(Bilder/kunde_add.jpg);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    display: block;
    font-size: 0px;
}

#button_kunden_add:hover {
    background-image: url(Bilder/kunde_add_hover.jpg);
}

#button_kunden_edit {
    width: 71px;
    height: 81px;
    background-image: url(Bilder/kunde_edit.jpg);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    display: block;
    font-size: 0px;
}

#button_kunden_edit:hover {
    background-image: url(Bilder/kunde_edit_hover.jpg);
}

#button_home {
    width: 71px;
    height: 81px;
    background-image: url(Bilder/home.jpg);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    display: block;
    font-size: 0px;
}

#button_home:hover {
    background-image: url(Bilder/home_hover.jpg);
}

.clear {
    clear: left;
}

#middle {
    width: 90%;
    padding: 0 5px 0 5px;
    display: block;
    text-align: left;
}

#footer {
    width: 90%;
    height: 22px;
    font-size: 12px;
    text-align: right;
    padding: 0 5px 0 5px;
    color: gray;
}

table.firmenliste {
    width: 80%;
    border: 0;
    background-color: #666666;
}

th {
    margin: 1px;
    padding: 2px;
    background-color: #E6E6E6;
}

td{
    margin: 1px;
    padding: 2px;
    background-color: #fff;
}

td a {
    color: #666666;
    text-decoration: none;
}

td a:hover {
    color: #666666;
    text-decoration: underline;
}

#linklist {
    text-align: center;
}

#linklist a {
    width: 80%;
    height: 25px;
    margin: 3px auto 0 auto;
    padding: 2px;
    display: block;
    text-decoration: none;
    color: #666666;
    line-height: 25px;
    background-color: #E6E6E6;
    border: 1px solid #666666;    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
    -moz-box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
    box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
    filter:progid:DXImageTransform.Microsoft.Shadow
    (color=#e2e2e2, Direction=135, Strength=5);
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow
    (color=#e2e2e2, Direction=135, Strength=5)";
}

#linklist a:hover {
    background-color: #fff;
    color: #000;
}

hr {
    height: 1px;
    background-color: #666;
}

.bezeichnung {
    font-size: 11px;
    color: #666;
    margin: 0 0 12px 0;
}

Und noch die index.php:

Code:

<div align="center">
   <div id="rahmen">
    <div id="header">
        <div id="button"><?php include('Include/button.php'); ?></div>
        <div class="clear"></div>
    </div>
    <div id="middle">
<?php

    if(!file_exists('Include/'.$site.".php")):
        echo '<h2>Error 404</h2><br />Die von Ihnen angeforderte Datei <br />
        namens <b>'.$site.'.php</b> <br />
        ist nicht vorhanden.<br />';
    else:
        include('Include/'.$site.".php");
    endif;

?>
     <br />
    </div>
    <div id="footer">
        <div id="copy">Copyright by Felix Titze</div> 
    </div>
   </div>
  </div>

Kann mir jemand sagen, wie ich den Fehler berichtige?

Mfg DonUndertaker

Myhar · 21.09.2011

AW: Seitenbreite bei Browsern

Du solltest die Seite erst einmal valide gestalten, bevor du dich an die Gestaltung mit CSS wagst.

Code:

<div align="center">

Es ist übrigens auch uz Empfehlen, wenn du nicht das von dir gepostete PHP File sondern das daraus generierte HTML validieren lässt.

Des weiteren testet man mobile Webseiten nicht einfach so, indem man das Browserfenster verkleinert (schön wäre es, wenn es so einfach gehen würde)
Es gibt hierfür ein paar Hilfsmittel.

L. G.

DonUndertaker · 21.09.2011

AW: Seitenbreite bei Browsern

Danke für deine Antwort und du hast recht mit dem align, jedoch beantworte das in keiner Weise meine Frage zum FF, denn ich wollte nicht wissen wie es auf mobilen Geräten aussieht, sondern mich störte die Ansicht im FF.

Myhar · 21.09.2011

AW: Seitenbreite bei Browsern

DonUndertaker schrieb:
Hallo,
ich habe eine Seite gemacht, die man auch mit mobilen Entgeräten ansehen soll.
[...]
stellte ich meinen FF auf die entsprechende Größe ein.

Verzeihung, dass ich auf die Idee komme, du möchtest die Seite auch auf mobilen Endgeräten testen.
Aber auch um Probleme im Firefox zu beheben, empfiehlt es sich, zuerst eine valide Seite auszuliefern. Ist das der Fall, kann man sehr einfach mit den Fehler lokalisieren.
Mehr kann ich dir, aufgrund der fehlenden HTML Datei leider nicht sagen. Jedoch vermute ich, dass Standardwerte für padding oder margin für das Phänomen verantwortlich sind.

L. G.

DonUndertaker · 21.09.2011

AW: Seitenbreite bei Browsern

Ich habe das align entfernt und die Standardwerte für margin und padding sowie border dachte ich mit dem ersten Block in der css Datei zu erschlagen.
Der restlich Content ist nur zur Verdeutlichung gewesen und ist nicht Teil des Problems.
Dieses tritt auch schon auf, wenn kein Inhalt vorhanden ist.

Pixelverwender · 21.09.2011

AW: Seitenbreite bei Browsern

Unter anderem würde ich absolute Positionierung nicht einsetzen.

CrazyLopp · 21.09.2011

AW: Seitenbreite bei Browsern

Myhar schrieb:
Des weiteren testet man mobile Webseiten nicht einfach so, indem man das Browserfenster verkleinert (schön wäre es, wenn es so einfach gehen würde)
Es gibt hierfür ein paar Hilfsmittel.

L. G.

Natürlich kann man dies auch in einem normalen Browser testen, gerade wenn Media Queries eingesetzt werden, denn dort spielt nur die Darstellungsgröße ein Rolle. Natürlich gibt es auch hier unterschiede die auch bei jeweiligen Desktopversionen da sind...

Myhar · 21.09.2011

AW: Seitenbreite bei Browsern

Das heißt, wenn ich meinen Firefox einfach kleiner mache, dann kann ich nachvollziehen, wie eine Seite auf einem Android Handy dargestellt wird? Die Sache mit den Mediaqueries ist mir schon bekannt, jedoch dachte ich, es werden auf den Handys (und Klugtelephonen aka smartphones) auch eigene Browser verwendet (Opera Mini, auf einem iPhone eine eigene Safari Version etc..)
Kann man das durch das einfache Verkleinern wirklich zuverlässig testen? Ich frage deshalb, weil das die Arbeit doch etwas vereinfachen würde

L. G.

CrazyLopp · 21.09.2011

AW: Seitenbreite bei Browsern

Nein, natürlich muss man auch speziell auf einzelne Dinge eingehen, wie bei der Desktopversion (z.B. IE6) auch. Es geht nur darum das ich natürlich schon am Anfang ganz normal in meinem Browser testen kann, denn wenn es nicht da läuft, dann wird es zu 80% auch nicht auf dem Smartphone laufen, sofern es natürlich keine OS-Sepzifischen Eigenschaft sind...

Die Endkontrolle sollte man natürlich mit den passenden Handhelds machen, gerade wenn es auch um die Retinafrage geht...

Myhar · 21.09.2011

AW: Seitenbreite bei Browsern

Danke sehr, also bin ich doch nicht falsch gelegen mit meiner Ansicht, dass man auch ein passendes Handy zum Testen braucht. Dass es

wenn es nicht da läuft, es zu 80% auch nicht auf dem Smartphone laufen wird

ist mir auch bewusst.
Dieser Link ist vielleicht für den einen oder anderen noch

L. G.

DonUndertaker · 22.09.2011

AW: Seitenbreite bei Browsern

Ob ich relative oder absolute Positionierung habe spielt auch keine Rolle.
Der Fehler bleibt. Hat jemand vielleicht noch eine Idee?

Manfred62 · 22.09.2011

AW: Seitenbreite bei Browsern

Poste mal einen Link. Dann kann man das ev. eher nachvollziehen.
Ansonsten wurde dies ja schon genannt (braucht man nicht):

Code:

<div align="center">

Desweiteren ist dies hier auch etwas seltsam..

Code:

#rahmen {
width: 100%; 
height: 100%; 
display: block;     
position: absolute; 
}

height und width: 100% --> von was??
display: block --> wofür?
pos. absolute ist i.d.R. überflüssig.

DonUndertaker · 22.09.2011

AW: Seitenbreite bei Browsern

Danke für den Post. Die Einstellungen zu ändern hat aber leider noch nichts gebracht.
Das mit dem Link ist etwas schwierig. Es ist nur eine Intranet Seite von einem geschlossenen System. Der Zugriff soll nur innerhalb des Gebäudes per WLAN erfolgen.

Manfred62 · 23.09.2011

AW: Seitenbreite bei Browsern

DonUndertaker schrieb:
...Die Einstellungen zu ändern hat aber leider noch nichts gebracht.
Das mit dem Link ist etwas schwierig. Es ist nur eine Intranet Seite von einem geschlossenen System....

Was hat nichts gebracht...? Welche Einstellung...?
Wegen Link: mach eine Testseite und stell sie bei einem Freehoster rein.

DonUndertaker · 23.09.2011

AW: Seitenbreite bei Browsern

Ich meine die von dir vorgeschlagenen Werte.
Hier einmal das Ganze hochgeladen:

Manfred62 · 23.09.2011

AW: Seitenbreite bei Browsern

DonUndertaker schrieb:
Hier einmal das Ganze hochgeladen:

Da ist irgendeine Umleitung drin?

Error 404
Die von Ihnen angeforderte Datei
namens firmenliste.php
ist nicht vorhanden.

DonUndertaker · 24.09.2011

AW: Seitenbreite bei Browsern

Vielen Dank für den Hinweis, jedoch ist das Absicht.
Der Fehler läss sich auch so nachvollziehen.
Ansonsten müsste ich noch eine Datenbank isntallieren usw.

Manfred62 · 25.09.2011

AW: Seitenbreite bei Browsern

DonUndertaker schrieb:
....
Der Fehler läss sich auch so nachvollziehen.
Ansonsten müsste ich noch eine Datenbank isntallieren usw.

Wozu braucht man für eine Testseite in html und css eine Datenbank?

Du gibst keinerlei Breite an. Nur Prozentwerte (von was?).
Beispiel: #header hat 100% und soll sich zentrieren (margin: auto).
Wie soll das zentriert werden, wenn es volle Breite hat?

Stichworte: min und max-width, media queries

für Basics in html und css: http://little-boxes.de/little-boxes-teil1-online.html

kante64 · 27.09.2011

AW: Seitenbreite bei Browsern

Hi,

ich würde dafür generell eine eigene CSS generieren/schreiben

Myhar · 27.09.2011

AW: Seitenbreite bei Browsern

Er hat eine eigene CSS Dateie definiert.
Und warum FF dieses Verhalten hat, weiß ich auch nicht. Es sieht so aus, als ob er eine Mindestbreite für den body vergibt, welcher größer als das kleine Fenster ist. Hier kann ich dir auch nur zu media-queries raten um das Problem zu beheben.
Außerdem ist dein HTML + CSS unschön, da lässt sich noch einiges optimieren:
Hintergrund in den Header, Hintergrundgrafik nicht als .jpg, den footer nicht mit 2 divs wrappen, das div mit class="clear " brauchst du wohl auch nicht im header.

L. G.