• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Header anpassungsfähig an Browsergrösse im IE7

eropolus

eropolus

Neues Mitglied
Hallo Forum ich habe ein Problem und zwar habe ich in den Header 2 Bilder gemacht diese sollen sich überschneiden damit genügent Luft zum vergrössern bleibt.
Die Seite ist hat ein max-width von 94em (was bei der Standartgrösse 1147px ist) Das Hintergrundbild #headerrechts ist jedoch alleine schon 1127px breit. und liegt unter dem #logo.


Nun hat macht der IE7 mir aber Prlobleme und zwar während die anderen Browser bei einer verkleinerung des Fensters den #headerrechts einfach "aus der linken Seite rausdrücken (und da auch abschneiden)" bleibt das Bild im IE7 einfach stehen bei erreichen von 1127px. Der rest verkleinert sich zwar mit aber der #headerrechts bleibt dann und schiesst über die Seite raus und erzeugt somit einen vert. Scrollbalken.

Gibt es eine Möglichkeit das im IE7 zu unterdrücken?

Code: 
#wrapper {
    margin:10px auto 10px auto;
    width:auto;
    max-width:94em;
    min-width:760px;
    min-height:78em;
    background:#fff;
    border-left:solid 10px #fff;
    border-bottom:solid 10px #fff;
    border-right:solid 10px #fff;
    display:block;
}

#header {
    max-width:94em;
    min-width:760px;
    height:307px;
}

#logo {
    position:absolute;
    width:358px;
    height:315px;
    background:url(Bilder/logo.png);
    border-left:solid 10px #fff;
    margin-left:-10px;
    z-index:5;
    
}

#headerrechts {
    float:right;
    background:url(Bilder/header.png) no-repeat;
    height:315px;
    width:1127px;
    margin-right:-10px;
    text-align:right;
    position:relative;
    z-index:1;
}

HTML: 
<div id="wrapper">
      <div id="header">
        <div id="logo">
          <p id="startbutton"><span id="button1markiert"><a title="Sie befinden sich bereits auf dieser Seite">Startseite</a></span>
          </p>
        </div>    
        <div id="headerrechts">
        </div>
      </div>

Danke und Gruss
 
Soweit ich weiß, kennt der IE7 max und min-width nicht.

P.S. Es heißt Standard! Die Standarte ist etwas anderes.
 
Hallo,

und willkommen im Forum.

Mit dem was du uns zeigst ist es leider nicht möglich, deinen Fehler zu beheben. Zeige uns bitte den kompletten Code.

Die Seite ist hat ein max-width von 94em (was bei der Standartgrösse 1147px ist)
Zum Vergrößern anklicken....
Die Seite bestimmt nicht, sondern dein DIV-Kasten, welchem du den Namen Wrapper gegeben hast, hat die maximale Breite von 94em. Es muss zudem Standard heissen, das nur mal so am Rande.
Wie sieht die Standardbreite auf dem iPhone aus?
 
Bei den neueren IE Browsern funktioniert das so wie es soll, wenn man das ganze jedoch mit dem IE7 verkleinert, dann bleibt das Bild von #headerrechts einfach stehen, wenn er den linken Rand erreicht (rechts gefloatet). d.h. das Problem liegt darin das der IE7 bei verkleinerung des Browsers, bei einem Bild das die gesamte Breite der Seite einnimmt, das float rechts ignoriert weil er auf der linken Seite das ende (anfang) des Wrappers erreicht hat, wärend der Rest der Seite verkleinert wird.

der IE 8 z.B. macht das nicht er drückt das Bild so zu sagen im Hintergrund (also nicht sichtbar) über den Linken rand des Wrappers raus so das bei einer Bildgrösse von 1200px 400px links "geschluckt werden (links weil float:right)" wen das Broserfenster nur noch 800px Breit ist. Und nicht wie der IE7 die 400px einfach rechts über den Wrapper stehen lässt.

Vieleicht erklärt ein Link zur Seite das Problem besser als ich
http://comfixweb.dyndns.org:81/arbeitsordner/GBS/Index.html

Wustersoss schrieb:
Die Seite bestimmt nicht, sondern dein DIV-Kasten, welchem du den Namen Wrapper gegeben hast, hat die maximale Breite von 94em. Es muss zudem Standard heissen, das nur mal so am Rande.
Wie sieht die Standardbreite auf dem iPhone aus?
Zum Vergrößern anklicken....

Ja hast natürlich recht.
Keine ahnung wie das aufem Iphone aussieht, habe ein Andriod Handy.
Aber da die min-width Angabe 780px ist, wirds wohl auch diese sein, ausser das iphone löst höher auf (weis nicht).
 
Zuletzt bearbeitet:
Hallo,

einen wichtigen Hinweis hat Struppi dir ja schon geliefert.

2 Dinge:
1. Schau dir mal dein Bild hier an, ich denke das geht so wirklich nicht. Nutze die CSS Eigenschaften um einen Hintergrund für dein Menü zu erhalten.
http://comfixweb.dyndns.org:81/arbeitsordner/GBS/Bilder/header.png
2. Verwende den Doctype für HTML5.

NB: Auf einer Verbandsseite erwarte ich eigentlich keinen Button zu Facebook.
 
Ich habs mal ganz einfach gehalten um besser verständlich zumachen was genau mein Problem ist:
http://comfixweb.dyndns.org:81/arbeitsordner/dghfdh/Unbenannt-2.html


Code: 
#wrapper {
    margin:10px auto 10px auto;
    max-width:94em;
    min-width:760px;
    background:grey;
    height:400px;
    border:solid 10px grey;
}

#header {
    float:right;
    background:url(header.png) no-repeat;
    height:315px;
    width:1127px;
    margin-right:-10px;
}
[HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
</div>
</body>
</html>][/HTML]


Dies genau ist das was ich zulösen versuche, Wen man es ab IE8 anschaut macht das Bild eine Fensterverkleinerung in der Breite mit, mit dem IE7 nicht.
 
Wustersoss schrieb:
Hallo,
1. Schau dir mal dein Bild hier an, ich denke das geht so wirklich nicht. Nutze die CSS Eigenschaften um einen Hintergrund für dein Menü zu erhalten.
.
Zum Vergrößern anklicken....

Wie soll ich es denn anderst lösen? Es soll halt nun mal da ein Bild sein und klein rein farblicher Hintergrund oder ein Muster das man mit repeat hinbekommen kann.

Gut ich könnte aus dem Bild #headerrechts 2 Bilder machen die sich überschneiden. Aber das wäre vom Design her nicht so ansprechend.

In den Browsern Funnktioniert das ja recht gut, auch der IE6 macht es ohne Probleme, nur der IE7 will das nicht korrekt darstellen. Es muss doch eine Lösung dafür geben?

EDIT: Falsch, der IE6 macht es auch nicht, hatte das wohl falsch in erinnerung.
 
Zuletzt bearbeitet:
Weis keiner eine Lösung?
Zum Vergrößern anklicken....

Die Lösung lautet, nimm für alle Hintergründe nur ein einzelnes Bild.
verwende width statt min-width.
Erstelle deine Seite in HTML5.
Validiere deinen Code und zwar sowohl HTML als auch CSS.

Es gibt für dein Problem nicht ein ändere x in z.
Aber als Webdesigner müsstest du das wissen.
Und wenn du kein Webdesinger bist sage ich dir lerne die Dinge die du brauchst um einer zu werden oder lass die Finger von solchen Seiten.

Ich weiss dass das was ich dir sage hart klingt, aber es ist eine Tatsache, dass man nun mal nicht an etwas rumfummeln sollte von dem man nichts versteht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben