Seitenbreite bei Browsern

[DonUndertaker]

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:

*{
    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:

<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]

AW: Seitenbreite bei Browsern

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

<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]

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]

AW: Seitenbreite bei Browsern

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]

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]

AW: Seitenbreite bei Browsern

Unter anderem würde ich absolute Positionierung nicht einsetzen.

 

[CrazyLopp]

AW: Seitenbreite bei Browsern

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]

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]

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]

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]

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]

AW: Seitenbreite bei Browsern

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

<div align="center">

Desweiteren ist dies hier auch etwas seltsam..

#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]

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]

AW: Seitenbreite bei Browsern

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

AW: Seitenbreite bei Browsern

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

 

[Manfred62]

AW: Seitenbreite bei Browsern

Hier einmal das Ganze hochgeladen:

Da ist irgendeine Umleitung drin?

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

 

[DonUndertaker]

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]

AW: Seitenbreite bei Browsern

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

AW: Seitenbreite bei Browsern

Hi,

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

 

[Myhar]

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.