Problem mit dem IE

[Amalia]

Hallo zusammen.

Ich bin gerade dabei mein HP-Design vollkommen neu zu machen und bei der Gelegenheit auch das alte Framelayout einzumotten und auf php includes umzustellen.

Dabei hat sich folgendes Problem ergeben. Meine Grafik-Navi wird vom IE ein Stück nach oben verschoben, während Firefox, Opera und Safari alles korrekt anzeigen.

Ist mit Worten schwer zu erklären, daher hab ich mal Bilder angehängt, wie der IE und Firefox das darstellen.
Falls die doch zu undeutlich oder zu klein sind:Imoilus FanFictions. Es geht um die roten Lesezeichen.

Und hier ist ein Teil des CSS-Code in dem die Navi formatiert wird. Sie umfasst im ganzen ja fünf Punkte, die aber abgesehen vom margin-top-Wert sind die alle genau so wie die unter a.b2 bzw. dem entsprechenden Hoverbereich.

/*Menü*/
<!--
a.b1 {   float:left;
         background-image:url(../images/button/home.png);
         background-repeat:no-repeat;
         width:135px;
         height:55px;
         margin-left:350px;
         margin-top:-39px;
         padding:20px;
     }

a:hover.b1 { background-image:url(../images/buttonhover/home.png);
             background-repeat:no-repeat;
             width:135px;
             height:66px;
             margin-top:-50px;
           }


a.b2 {   float:left;
         background-image:url(../images/button/geschichten.png);
         background-repeat:no-repeat;
         width:135px;
         height:55px;
         margin-top:-35px;
         padding:20px;
     }

a:hover.b2 { background-image:url(../images/buttonhover/geschichten.png);
             background-repeat:no-repeat;
             width:135px;
             height:66px;
             margin-top:-50px;
           }
-->

Hab ich da einen Fehler drin?
Oder ist das ein bekanntes Problem des IE, dass sich nur mittels seperater CSS für IE lösen lässt?

Wenn das der Fall ist, wie schaffe ich es, dass die Lesezeichen über dem Div mit dem oberen Buchrand liegen? Wenn ich in meiner CSS die Werte anpasse liegen sie nämlich darunter.

(Das Buch ist in insgesamt drei divs eingeteilt, damit ich es je nach inhalt in die Länge ziehen kann... bzw. soll das so sein, ob es auch geht, hab ich noch nicht versucht aber das wäre dann auch eine andere Baustelle und ich arbeite nicht gern auf mehreren gleichzeitig)

Vielen Dank schon mal für die Hilfe.
Amalia

Ach ja... Die Navi wird über php includes eingefügt und das Problem tritt beim IE 7 auf.

 

[Efchen]

Das hat jetzt zwar nicht direkt mit Deinem Problem zu tun (s.u.), aber wo ist Deine Semantik?
Umstellung ist gut, aber warum nicht gleich richtig? Du hast den Sinn von HTML noch nicht richtig eingesetzt: Du zeichnest z.B. eine Überschrift als Textabsatz aus. Allein die Zuweisung einer Klasse "ueberschrift" macht aus dem Element noch keine Überschrift, es bleibt weiterhin ein Textabsatz, weil Du es fälschlicherweise mit <p> ausgezeichnet hast. Für Überschriften gibt es <h1> bis <h6>, je nach notweniger Ordnung.
Ähnlich verhält es sich mit Deinem Menü. Deine Links klatschst Du irgendwo in den Code rein, ohne ihn auszuzeichnen. Ein Tag für ein Menü gibt es nicht, das was dem Menü am nächsten kommt, ist eine Liste. Also solltest Du es mit <ul> auszeichnen.
Mehr hab ich mir jetzt nicht angesehen, ich bin aber sicher, dass da noch mehr solche, semantische Fehler drin sind.

HTML ist immer das, was man als erstes macht. Wenn Du Dich jetzt zuerst auf Dein Darstellungsproblem stürzt und löst, wirst Du feststellen, dass Deine Lösung mit geänderter Semantik vielleicht nicht mehr so funktioniert, weil dem Stylesheet dann ja andere Elemente zu Grunde liegen. Deswegen solltest Du erst die fehlerhafte Semantik korrigieren (und auch immer auf validen HTML-Code achten), denn sonst machst Du CSS-Arbeit oftmals zwei- oder gar mehrmals.

Insofern hat mein Einwand doch auch mit Deinem Problem zu tun, weil sich das vermutlich nach der Änderung ganz anders darstellt.

P.S.: Ich find das Design mit dem Buch zwar eigentlich toll (abgesehen davon, dass es so unwahrscheinlich gerade ist, mit rechten Winkeln und ohne Eselsohren), aber der unscharfe Teil links macht mich total nervös, der bekommt meinen Augen nicht. Zum einen hab ich die ganze Zeit das Gefühl, dort hin sehen zu müssen und dann habe ich als nächstes das Gefühl, als hätte ich noch Schlaf in den Augen und ein Bedürfnis meine Augen zu reiben. Ich glaube, wenn ich da längere Texte lesen müsste, würde ich das als Strafe empfinden.

 

[Amalia]

Hallo Efchen,

danke für deinen Hinweis wegen der Überschrift. Hab darüber ehrlich gesagt nicht weiter nachgedacht, da ich da ja eigene Formatierungen verwende. Nun steht da aber statt <p> <h1>.

Die Links in mit <ul> zu umschließen, stellt mich allerdings vor ganz neue Pobleme.

1. Inerhalb <ul> muss mindestens ein<li> stehen. Zumindest wenn ich den Fehlertext aus meinem Validator sinngemäß richtig übersetzt habe.

2. wenn ich <li> einfüge, hab ich in Firefox IE und Safari diese Listenpunkte, die ich nicht will.
Opera zeigt sie nicht.
Dafür...

3. legt Opera mir jetzt die Lesezeichen hinter das <div> mit der Oberkante vom Buch.

Ob das mit dem div nun eine semantische Lösung ist, weiß ich nicht.
Es war für mich das Naheliegenste, denn ich will die Grafik ja als Hintergrund für einen Text benutzen und einem p element kann man meinem Wissen nach keine Hintergrundgrafik zuweisen. Oder irre ich mich da?

mit den <li> einträgen sehen im IE und in Safari das Menü zudem aus wie eine Treppe und sie schweben nun bei beiden über dem Buchrand so wie vorher auch. Also der Abstand beim letzten Lesezeichen zum Buchrand ist geblieben und von da an geht es nach links immer höher. Ebenso verschiebt sich das Banner.

Ich versuch gleich mal, die Seiten neu hochzuladen, garantier aber nicht das es geht, da ich auf der Arbeit bin.

LG
Amalia

Edit: Wie befürchtet, geht das Hochladen von hier aus nicht. Die Ports für den FTP upload sind gesperrt.

Amalia

 

[Efchen]

Die Links in mit <ul> zu umschließen, stellt mich allerdings vor ganz neue Pobleme.

Das habe ich erwartet :-)

wenn ich <li> einfüge, hab ich in Firefox IE und Safari diese Listenpunkte, die ich nicht will.

Wichtig dabei ist, zu verstehen, dass das nichts mit HTML zu tun hat, man zeichnet den Inhalt ja aufgrund seiner Bedeutung mit bestimmten Tags auBlock-Element" ideal für solche Dinge benutzen, wo kein Inhalt da ist und keine besondere Semantik vermittelt werden darf. Hier ein <p> zu nehmen, wäre optisch fast das gleiche, aber damit würde man einen Textabsatz einleiten, den man hier ja nicht hat.

Es war für mich das Naheliegenste, denn ich will die Grafik ja als Hintergrund für einen Text benutzen und einem p element kann man meinem Wissen nach keine Hintergrundgrafik zuweisen. Oder irre ich mich da?

Nein und ja. Deine Begründung ist perfekt. Aber woher Du die Idee hast, es gäbe irgendein Element, dem man keine Hintergrundgrafik zuweisen kann, das kann ich nicht nachvollziehen. Ich weiß aber, dass viele so denken, viele glauben, man könne CSS-Eigenschaften nur dem Element <div> geben, aber das ist Nonsense. Natürlich kann man prinzipiell jede CSS-Eigenschaft auch jedem Element verpassen (Ausnahmen bestätigen die Regel: Es gibt Eigenschaften, die bei Block-Elementen keinen Sinn machen und umgekehrt, und einige andere wenige Sonderfälle). Aber Du kannst auch einem input ein Hintergrundbild geben oder einen Listenpunkt absolut positionieren und das Element <strong> auch kursiv und nicht fett machen.

mit den <li> einträgen sehen im IE und in Safari das Menü zudem aus wie eine Treppe

Vermutlich, weil <li> ein Block-Element ist, und daher immer untereinander steht. Aber das ist auch kein Grund, auf die Liste zu verzichten, denn dass das so aussieht und Du das anders haben willst, hat ja (s.o.) nichts mit HTML zu tun, denn für das Aussehen ist ja allein CSS zuständig.
Und wie es der Zufall so will :-) kannst Du Block-Elemente ganz einfach mit "float:left" nebeneinander setzen.

Grüße,
-Efchen

 

[Amalia]

wenn ich <li> einfüge, hab ich in Firefox IE und Safari diese Listenpunkte, die ich nicht will.

Wichtig dabei ist, zu verstehen, dass das nichts mit HTML zu tun hat, man zeichnet den Inhalt ja aufgrund seiner Bedeutung mit bestimmten Tags auBlock-Element" ideal für solche Dinge benutzen, wo kein Inhalt da ist und keine besondere Semantik vermittelt werden darf. Hier ein <p> zu nehmen, wäre optisch fast das gleiche, aber damit würde man einen Textabsatz einleiten, den man hier ja nicht hat.

Ok.. ich denke ich hab diese Aussage verstanden.
Weil eine Liste am ehesten das ist, was man ein Menü nennen kann, sollte man es als dieses auch ausweisen und das macht man eben mit ul und li.

Ich gehe daher auch mal davon aus, dass man diese Punkte nicht verschwinden lassen kann. Denn das würde ja wieder den eigentlichen Sinn dieses Tags verändern.
Oder liege ich da falsch?
(Merlin, ich komm mir irgendwie so dumm vor )

mit den <li> einträgen sehen im IE und in Safari das Menü zudem aus wie eine Treppe

Vermutlich, weil <li> ein Block-Element ist, und daher immer untereinander steht. Aber das ist auch kein Grund, auf die Liste zu verzichten, denn dass das so aussieht und Du das anders haben willst, hat ja (s.o.) nichts mit HTML zu tun, denn für das Aussehen ist ja allein CSS zuständig.
Und wie es der Zufall so will kannst Du Block-Elemente ganz einfach mit "float:left" nebeneinander setzen.

float:left steht da leider aber schon von anfang an drin. Lässt sich das vielleicht über position:absolut/relative lösen? Ohne das mein Hovereffekt verloren geht?
(Ich gestehe... das Schema von relative und absolute hab ich noch nie verstanden.)

Hab mal ein Bild angehängt, wie das jetzt im IE und Safari aussieht aussieht.

Nein und ja. Deine Begründung ist perfekt. Aber woher Du die Idee hast, es gäbe irgendein Element, dem man keine Hintergrundgrafik zuweisen kann, das kann ich nicht nachvollziehen. Ich weiß aber, dass viele so denken, viele glauben, man könne CSS-Eigenschaften nur dem Element <div> geben, aber das ist Nonsense. Natürlich kann man prinzipiell jede CSS-Eigenschaft auch jedem Element verpassen (Ausnahmen bestätigen die Regel: Es gibt Eigenschaften, die bei Block-Elementen keinen Sinn machen und umgekehrt, und einige andere wenige Sonderfälle). Aber Du kannst auch einem input ein Hintergrundbild geben oder einen Listenpunkt absolut positionieren und das Element <strong> auch kursiv und nicht fett machen.

Dann ist p entweder eine der Ausnahmen oder ich stell mich einfach zu dämlich an.

Es ist egal wie ich es versuche, nur mit p, als id, als class der Hintergrund will einfach nciht dahin wo er hin soll. Außerdem habb ich h1 und p ja auch nicht ineinander verschachteln. aber meine ÜBerschrift soll ja auch mit dem selben Hintergrund hinterlegt sein.

Sorry wenn ich mit meinen Anfängerfragen nerve...

LG
Amalia

 

[Efchen]

Ich gehe daher auch mal davon aus, dass man diese Punkte nicht verschwinden lassen kann. Denn das würde ja wieder den eigentlichen Sinn dieses Tags verändern.
Oder liege ich da falsch?

Ja.
1. Der Sinn dieses Tags ist, zu zeigen, dass der Inhalt, der jetzt kommt, eine Liste, eine Auflistung ist. Mit Listenpunkten hat das nichts zu tun.
2. Die Listenpunkte sind nicht Bestandteil von HTML, sondern von CSS. Sie sind nur für die Optik da. Und Du hast wohl nicht richtig gelesen, denn ich habe geschrieben, wie man die abstellen kann :-)

float:left steht da leider aber schon von anfang an drin. Lässt sich das vielleicht über position:absolut/relative lösen? Ohne das mein Hovereffekt verloren geht?

Immer langsam...nicht alles auf einmal. Hovereffekt ist erstmal völlig unwichtig, erstmal muss das Element ja da stehen, wo es hin soll. :-)
float und position zusammen vertragen sich nicht. Und position braucht man eigentlich auch kaum. Das sind schon spezielle Anforderungen, wo man sowas braucht.

Wenn Du die Seite neu hochgeladen hast, kann ich wieder drauf sehen, aber ich vermute, dass Du da noch irgendwelche Abstände drin hast. Oder irgendwas falsch umgesetzt hast.

Du kannst Dir ja ne Testseite ohne alles machen und da eine solche Liste einbauen, Du wirst sehen, dass das mit float perfekt funktioniert. Alternativ kann man "display:inline" setzen und damit den Block-Elementen sagen, dass sie sich wie Inline-Elemente verhalten sollen (dann stehen sie auch nebeneinander).

(Ich gestehe... das Schema von relative und absolute hab ich noch nie verstanden.)

Das ist auch alles andere als trivial. Ich bin mir nicht sicher, ob ich es 100% verstanden habe. Wozu es in jedem Falle nicht geeignet ist, damit alle Elemente einer Seite absolut zu positionieren. Das ist ein großer Fehler, den CSS-Anfänger machen, weil sie glauben, das wäre die Erfüllung in Layouts von Webseiten. Das hab ich anfangs auch gedacht, ist aber völliger Schmarrn :-)

Dann ist p entweder eine der Ausnahmen oder ich stell mich einfach zu dämlich an.

Das hat sicher nichts mit dämlich zu tun, aber teste es in einer Testseite:

<p style="background-image:url(foobar.jpg);">Text mit Hintergrundbild</p>

Es ist egal wie ich es versuche, nur mit p, als id, als class der Hintergrund will einfach nciht dahin wo er hin soll. Außerdem habb ich h1 und p ja auch nicht ineinander verschachteln. aber meine ÜBerschrift soll ja auch mit dem selben Hintergrund hinterlegt sein.

Wenn er nicht dahin will, wo er soll, wird er doch schonmal angezeigt, also ist bewiesen, dass er auch im <p> funktioniert :-)
Den zweiten Satz hab ich aber nicht verstanden. Nein, <h1> und <p> kann man nicht verschachteln, macht auch keinen Sinn (Semantik).

Sorry wenn ich mit meinen Anfängerfragen nerve.

Überhaupt nicht. Jeder hat mal klein angefangen. Schlimm ist nur, wenn ein Anfänger sich nichts sagen lässt, nichts gaubt und dann irgendwann das Schimpfen anfängt. Oder wenn jemand nur rumjammert, dass er nichts kann, aber auch nicht den Eindruck macht, dass er sich bemüht und Eigeninitiative zeigt.
Denn dazu ist ein Forum da: Hilfe zur Selbsthilfe. Hier gehts nicht darum, jemandem alles vorzukauen, derjenige soll am Ende auch selbst in der Lage sein, das Problem lösen zu können.

Solange Du Lernwille zeigst, und ich an Deinen Problemen nicht verzweifel, kommen wir in diesem Thread gut miteinander aus :-)

Bis demnähx,
-Efchen

 

[Amalia]

Und Du hast wohl nicht richtig gelesen, denn ich habe geschrieben, wie man die abstellen kann

Schäm... ja.. irgendwie hab ich deinen Hinweis wohl beim ersten Mal einfach übersehen. (Man heute ist echt nicht mein Tag).

Nach deinem zweiten Hinweis hab ichs aber gefunden und auch gleich mal nachgeschaut wie es denn gemacht wird. (Meine Quelle war da mal wieder selfhtml.)
Erledigt ist es auch schon und nun bin ich auch endlich wieder zu Hause, wo es keine Portsperrung gibt.
Die geändeerten Dateien sind ebenfalls schon hochgeladen und hier ist dann mal mein Quelltext einmal vollständig.

/*Holzhintergrund*/
body { background-image:url(../images/hintergrund.gif);}

/*Banner*/
div#banner{background-image:url(../images/banner.gif);
                 background-repeat:no-repeat;
                 width:591px;
                 height:211px;
                 margin-left:305px;
        }


/*Navigation*/
li {     list-style-type:none; }

<!--
a.b1 {   background-image:url(../images/button/home.png);
         background-repeat:no-repeat;
         width:135px;
         height:55px;
         float:left;
         margin-left:350px;
         margin-top:-39px;
         padding:10px;
     }

a:hover.b1 { background-image:url(../images/buttonhover/home.png);
             background-repeat:no-repeat;
             width:135px;
             height:66px;
             margin-top:-50px;
           }


a.b2 {   float:left;
         background-image:url(../images/button/geschichten.png);
         background-repeat:no-repeat;
         width:135px;
         height:55px;
         margin-top:-35px;
         padding:10px;
     }

a:hover.b2 { background-image:url(../images/buttonhover/geschichten.png);
             background-repeat:no-repeat;
             width:135px;
             height:66px;
             margin-top:-50px;
           }


a.b3 {   float:left;
         background-image:url(../images/button/gaestebuch.png);
         background-repeat:no-repeat;
         width:135px;
         height:55px;
         margin-top:-33px;
         padding:10px;
     }

a:hover.b3 {    background-image:url(../images/buttonhover/gaestebuch.png);
                background-repeat:no-repeat;
                width:135px;
                height:66px;
                margin-top:-50px;
           }


a.b4 {  float:left;
        background-image:url(../images/button/linktipps.png);
        background-repeat:no-repeat;
        width:135px;
        height:55px;
        margin-top:-30px;
        padding:10px;
     }

a:hover.b4 {    background-image:url(../images/buttonhover/linktipps.png);
                background-repeat:no-repeat;
                width:135px;
                height:66px;
                margin-top:-50px;
           }


a.b5 {  float:left;
        background-image:url(../images/button/uebermich.png);
        background-repeat:no-repeat;
        width:135px;
        height:55px;
        margin-top:-27px;
     }

a:hover.b5 {    background-image:url(../images/buttonhover/uebermich.png);
                background-repeat:no-repeat;
                width:135px;
                height:66px;
                margin-top:-50px;
           }

-->

/*Grafiken*/
/*Buch*/
div#buchoben{background-image:url(../images/buchoben.png);
                 background-repeat:no-repeat;
                 width:1230px;
                 height:57px;
                 margin-left:-7px;
           }

div#buchmitte{background-image:url(../images/buchmitte.png);
                 width:1230px;
                 height:100%;
                 min-height:620px;
                 margin-left:-7px;
                 margin-top:0px;
                 margin-bottom:0px;
             }

div#buchunten{background-image:url(../images/buchunten.png);
                 background-repeat:no-repeat;
                width:1230px;
                height:89px;
                margin-left:-7px;
                margin-top:-20px;
           }

/*Textformatierung*/
.begruessung {   font-family:'Times New Roman', serif, sans-serif;
                 font-size:1.2em;
                 margin-left:400px;
                 margin-right:150px;
                 margin-top:0px;
                 color:#4d4626;
             }
/*Überschrift Begruessung*/
h1{  font-family:'Times New Roman', serif, sans-serif;
                 font-size:2em;
                 font-weight:bold;
                 margin-left:400px;
                 margin-right:150px;
                 margin-top:0px;
                 margin-bottom:10px;
                 color:#4d4626;
              }

LG (von einer immer lernwilligen aber manchmal etwas schwer von Begriff seienden)
Amalia

 

[Efchen]

Ich vermute, jetzt liegt das Problem darin, dass die <li> noch immer Block-Elemente sind. Setz das float mal statt in de Links in die Listenelemente.

Es sind dann übrigens noch ein paar semantische Verbesserungsvorschläge, wenns Dich interessiert ;-)

 

[Amalia]

Hmm... ich hab float und aus den links rausgenommen und in die li gesetzt. Das Menu ist daraufhin komplett verschwunden (IE) bzw. ist total zusammengschoben, als wenn die Breiten und Höhenangeban gar nicht mehr erkannt oder akzeptiert werden (Firefox) (So liegt es nun auch auf dem Server)

Das Menu wird vom IE nur in einer Linie angezeigt, wenn ich float auch in den Links stehen lasse Firefox machte da ja von anfang an keine Probleme.

Es sind dann übrigens noch ein paar semantische Verbesserungsvorschläge, wenns Dich interessiert

Du hast dann noch ein paar semantische Verbesserungsvorschläge?
Bin immer interessiert, will es ja richtig lernen und vielleicht lösen die ja auch das nun aufgetretene Problem, bzw. auch dass, was auftritt, wenn float in den Links und im li steht. Dann schwebt das Menu immer nämlich immer noch über dem Buchrand wenn ich die Seite im IE aufrufe.

 

[Efchen]

Jetzt noch ein "display:block" ins "a", denn width/height gelten nur bei Block-Elementen oder bei float. Dann klappts im Firefox. Wie das dann im IE aussieht, weiß ich nicht. Ich bin mit der IE Developer Toolbar noch nicht per Du, weiß nicht, ob man da wie bei Firebug die Werte direkt abändern kann.

Semantik:
Dein div#banner: Das enthält doch Inhalt, nämlich "Imobilus kreative Ecke". Das solltest Du nicht als Hintergrundbild einbinden, denn Inhalt wird immer mit HTML gemacht. Außerdem ist das doch die Überschrift Deiner Site, also solltest Du es als Überschrift auszeichnen:

<h1><img src="images/banner.gif" alt="Imobilus kreative Ecke" /></h1>

Dann würde ich natürlich Deine nachfolgenden Überschriften um eine Ordnung niedriger einstufen, also <h2> statt bisher <h1>.

Die <br> in Deiner bisherigen <h1> fliegen raus. Mit <br> macht man einen Zeilenumbruch, aber keinen Abstand. Zeilenumbruch ist sinnvoll z.B. innerhalb von <address> oder bei Gedichten, selten aber im Fließtext. Abstände kannst Du mit "margin" (Außenabstand) oder "padding" (Innenabstand) definieren.

Dein p#begruessung würde ich in mehrere Textabsätze aufteilen. Im Moment realisierst Du Deinen Absatz über <br>. Diese würde ich dort alle rausschmeißen, da Du die eigentlich zum Setzen eines Abstandes missbrauchst.

Das wars eigentlich schon...mir fallen nur eben Deine target="_blank" auf. De würde ich wegwerfen und lieber die Links als externe Links kennzeichnen (z.B. mit einem Bild). Ob jemand ein neues Fenster will, oder einen neuen Tab oder nichts dergleichen, sollte dem Nutzer überlassen werden. Ab XHTML 1.0 Strict existiert das Attribut ohnehin nicht mehr, weil es ab da auch keine Frames mehr gibt.

Grüße,
-Efchen

 

[Amalia]

Deine Ratschläge beherzigt und sowohl in der Datei als auch in meinem Kopf abgespeichert .

Das Banner ist nun ein Bild mit der ÜBerschrift erster Ordnung.
Für den Begrüßungstext sind die Abstände per margin definiert.
Für die Überschrift, die nun h2 ist, hab ich statt der br padding genommen. Margin-top hätte mir eine Lücke zwischen die divs gemacht. Nach unten hin wird es dann mit margin gemacht.

Leider behebt das immer noch nicht das problem mit den schwebendem Menu im ie.

Das taget blank ist noch ein Überbleibsel von meinem alten Framelayout und eine eine Erinnerungsstützte, dass ich noch recherchieren muss, wie ich mitt php diese Funktion umsetze.

Nun aber doch noch eine Frage: Die Links als externe links kennzeichnen?
Meinst du mit a:link, a:visited etc? und dann da via img das entsprechende Bild einfügen?

Oder meinst du <a href:"#"><img....(normal)><img...(hover)</a>

Bin auf diesen Weg gestoßen , als gerade danach gesucht hatte, wie man die beiden für den Hovereffekt nötigen Bilder auch in einer datei speichert und anspricht. (Die variante hab ich bis jetzt noch nicht gefunden.)

Grüße
Amalia

 

[Efchen]

Deine Ratschläge beherzigt und sowohl in der Datei als auch in meinem Kopf abgespeichert

Eines kannst Du noch vereinfachen. Du musst nicht unbedingt jeden Textabsatz mit der Klasse "begruessung" versehen. Wenn Du ein übergeordnetes Element hast, in dem alle Textabsätze die Klasse haben, dann kannst Du auch dem übergeordneten Element eine Klasse zuweisen und darauf reflektieren, z.B. so:

<div id="begruessungscontent">
  <p>Text Begrüßung</p>
  <p>Text Begrüßung</p>
  <p>Text Begrüßung</p>
</div>

In CSS sprichst Du die Textabsätze dann so an:

div#begruessungscontent p {
  ...
}

Das taget blank ist noch ein Überbleibsel von meinem alten Framelayout und eine eine Erinnerungsstützte, dass ich noch recherchieren muss, wie ich mitt php diese Funktion umsetze.

Welche Funktion? Das Öffnen eines neuen Fensters? Mit PHP gar nicht, denn PHP läuft ja serverseitig, da gibts keine Fenster, Tabs oder sowas.

Nun aber doch noch eine Frage: Die Links als externe links kennzeichnen?
Meinst du mit a:link, a:visited etc? und dann da via img das entsprechende Bild einfügen?

Ich meine eigentlich lediglich, dass Du externe Links irgendwie optisch kennzeichnest, am besten geht das mit einem Hintergrundbild, das Du am linken Rand positionierst und dem Link ein padding-left mitgibst, dass der Linktext nicht in diese Grafik reinrutscht.

Leider behebt das immer noch nicht das problem mit den schwebendem Menu im ie.

*seufz*
Jetzt bin ich an einer Stelle, an der ich mir wünschen würde, dass sich mal noch jemand anders einschaltet :-)

Ich würde jetzt zwei Sachen probieren:
1. Mit den Abständen experimentieren. Irgendwo müssen die Abstände (margin/padding) anders sein, anders interpretiert werden, irgendwelche Abstände sind vielleicht nicht gesetzt, verwenden also die Browser-Defaults, die sich hier vielleicht unterscheiden.
2. Wenn alles nicht fruchtet, würde ich überlegen, die margins nur für den IE anzupassen, dass es passt. Entweder mit einem eigenen Stylesheet für den IE, das per Conditional Comments eingebunden wird, oder mit irgendeinem der zahlreichen CSS-Hacks für den IE. Wobei Du auf jeden Fall aufpassen musst, für welche IEs der Fehler auftritt, das solltest Du mindestens mit dem IE6, 7 und 8 testen.

 

[Amalia]

Eines kannst Du noch vereinfachen. Du musst nicht unbedingt jeden Textabsatz mit der Klasse "begruessung" versehen. Wenn Du ein übergeordnetes Element hast, in dem alle Textabsätze die Klasse haben, dann kannst Du auch dem übergeordneten Element eine Klasse zuweisen und darauf reflektieren, z.B. so:
Code:
<div id="begruessungscontent">
<p>Text Begrüßung</p>
<p>Text Begrüßung</p>
<p>Text Begrüßung</p>
</div>

In CSS sprichst Du die Textabsätze dann so an:
Code:
div#begruessungscontent p {
...
}

Hab ich übernommen, auch wenn es auf dem Server noch nicht steht. Bin halt auf der Arbeit.

Das taget blank ist noch ein Überbleibsel von meinem alten Framelayout und eine eine Erinnerungsstützte, dass ich noch recherchieren muss, wie ich mitt php diese Funktion umsetze.

:
Welche Funktion? Das Öffnen eines neuen Fensters? Mit PHP gar nicht, denn PHP läuft ja serverseitig, da gibts keine Fenster, Tabs oder sowas.

Sorry, hab mich da vermutlich falsch ausgedrückt.Ich meinte eigentlich, dass ich noch rausfinden muss, wie man mit php nur einen bestimmten Bereich also in meinem Fall den Teil wo jetzt der Begrüßungstext drin steht, tauscht.

Das Gästebuch wird sich, so vermute ich, wohl von selbst in einem neuen Fenster öffnen, wenn ich das da nicht gesondert angebe(Bzw. ja auch gar nicht kann wie du geschrieben hast.) Es ist nämlich auch nicht von mir erstellt, sondern ein vorgefertigtes. So viel know how hab ich nämlich gar nicht, dass ich mir so was selbst basteln kann.

Zitat:
Leider behebt das immer noch nicht das problem mit den schwebendem Menu im ie.

*seufz*
Jetzt bin ich an einer Stelle, an der ich mir wünschen würde, dass sich mal noch jemand anders einschaltet

Ich würde jetzt zwei Sachen probieren:
1. Mit den Abständen experimentieren. Irgendwo müssen die Abstände (margin/padding) anders sein, anders interpretiert werden, irgendwelche Abstände sind vielleicht nicht gesetzt, verwenden also die Browser-Defaults, die sich hier vielleicht unterscheiden.
2. Wenn alles nicht fruchtet, würde ich überlegen, die margins nur für den IE anzupassen, dass es passt. Entweder mit einem eigenen Stylesheet für den IE, das per Conditional Comments eingebunden wird, oder mit irgendeinem der zahlreichen CSS-Hacks für den IE. Wobei Du auf jeden Fall aufpassen musst, für welche IEs der Fehler auftritt, das solltest Du mindestens mit dem IE6, 7 und 8 testen.
[/QOUTE]
Es wird wohl auf ein extra CSS für IE hinaus laufen, denn die für IE sind ganz offensichtlich andere als für Firefox.

Allerdings, wenn ich die Menus im IE das verschiebe, dann schieben sie sich unter den DIV mit dem Buchrand oben.

Nun kam mir schon die Idee, das via z-index zu lösen. Denn so wie ich das verstanden habe, kann man damit ja die Reihenfolge von übereinander liegenden Elementen beachten.

Leider hilft das nicht. Diese Werte werden einfach nicht interpretiert. Entweder, weil ich nicht weiß, dass sich z-index mit irgendwas anderem nicht verträgt, oder weil ich was falsch mache.

Und ein ähnliches Problem hat sich nun auch im Firefox eingestellt.
Seit ich das Banner als img eingestellt und jetzt zumindest auf meinem Notebook richtig positioniert habe liegt es über den Lesezeichen meiner Navi.
Könnte man ja auch mit z-index lösen, (wenn es möglich ist). Aber auch hier, kein erfolg bei meinem Versuch. Leider.
Vielleicht hast du noch eine Idee, oder jemand anderes?

EDIT: Problem mit ÜBerlagen gelöst. Ich hab ein position:absolute eingefügt und muss nun die marginwerte nur anpassen.
Für den IE brauch ich dennoch andere angaben, aber das ist das kleinere übel.

 

[hokage555]

mich interessiert folgendes ;-)

1. welcher ie macht probleme?
ie 8, 7, 6, 5 ???

kann ich mir dieses "schweben" irgendwo ansehen?
vll. habe ich hier einen link zur seite einfach nur übersehen, aber der wäre mir ganz lieb ;-)

ansonsten habe ich dich richtig verstanden, dass du ein vertikales menu haben willst, richtig?

denn in deinem ersten post verlinkst du auf eine andere seite, da dachte ich zuerst, dass wäre deine ^^
anscheinend ja nicht xD

efchen hat dir eig. schon alle nötigen tips gegeben und da firefox bei dir das menu anscheinend auch richtig anzeigt wird der code wohl stimmen. welcher ie da was für eine macke mal wieder hat weiß ich leider nicht.
dafür würde ich halt gerne wissen, in welchem es nicht klappt.

und ein seiten link wäre wie gesagt auch ganz hilfreich ;-)

grüße hokage

*edit: ich lese gerade von deinem z-index problem ;-) diese eigenschaft funktioniert nur in kombination mit positionierten elementen. d.h. ich würde dem element einfach ein position:relative; left:0px; top:0px; geben. dann sollte z-index klappen

SEITENLINK

 

[Amalia]

kann ich mir dieses "schweben" irgendwo ansehen?
vll. habe ich hier einen link zur seite einfach nur übersehen, aber der wäre mir ganz lieb

Imoilus FanFictions Das ist der Link zu meiner Seite, wo das schweben noch zu sehen ist. (Aktuallisieren kann ich erst zu Hause, da hier der FTP Port gesperrt ist. und direkt auf die Dateien kann ich bei funpic nicht zugreifen)

1. welcher ie macht probleme?
ie 8, 7, 6, 5 ???

Das Problem liegt oder lag beim IE 7

6 und 8 hab ich noch nicht... letzteren aber gleich, sofern man das ohne I-Net verbinung installieren kann.

Auf meinem Arbeits-Pc bringt mir der dummerweise leider nichts, da ich meine neuen Dateien nicht auf den Server bekomme und XAMPP möchte ich ungern auf meinem Arbeits-PC installieren, weil ich zu Hause seit der Installation Probleme mit meinem Netzwerk habe.

Und mein Notebook darf ich nicht ins Firmennetz hängen, nicht mal für die IE Installation. Das gibt nur mächtig Ärger.

Danke für den Hinweis mit dem positionierten Elementen.

EDIT:
Hab jetzt trotzdem mal versucht was hochzuladen... und es scheint entgegen meinen erwartungen doch funktioniert zu haben... überprüfen kann ich das aber wohl erst zu hause.

EDIT3: Offensichtlich lilegt etwas bei uns im argen... aber was solls,... ich kann doch hochladen *happy bin*

EDIT2... der IE 7 macht ein klein wenig murks... verschiebt das Banner ein Stück hoch.
8 dagegen stellt die Seite da wie Firefox.:shock::grin:

 

[Efchen]

Sorry, hab mich da vermutlich falsch ausgedrückt.Ich meinte eigentlich, dass ich noch rausfinden muss, wie man mit php nur einen bestimmten Bereich also in meinem Fall den Teil wo jetzt der Begrüßungstext drin steht, tauscht.

Gar nicht. Man lädt einfach eine neue Seite, wo man dann entscheidet, welcher Inhalt an einer bestimmten Stelle steht. Mit der Funktion include() kann man den Inhalt dann serverseitig in die neue Seite packen.

Nun kam mir schon die Idee, das via z-index zu lösen. Entweder, weil ich nicht weiß, dass sich z-index mit irgendwas anderem nicht verträgt, oder weil ich was falsch mache.

z-index funktioniert nur zusammen mit "position". Aber das kann Dein Problem ja nicht lösen, weil die Lesezeichen einfach an der falschen Position liegen und nicht einfach in der z-Ebene verschoben werden sollen.

EDIT: Problem mit ÜBerlagen gelöst.

Anstatt z-index und position:absolute hätte ich eher geschaut, dass ich den Abstand entsprechend einstelle. Denn vorher hat sich ja auch nichts überlappt, warum sollte sich was überlappen, wenn man aus einem Hintergrundbild ein <img> macht?

 

[Amalia]

warum sollte sich was überlappen, wenn man aus einem Hintergrundbild ein <img> macht?

Weil die Größe der Grafiken so gewählt ist, dass sich da was überlappen soll.

Die untere Linke Ecke des Banners soll unterhalb, des Navigationspunktes Home liegen. Sonst sieht es so aus als würde das Banner an der Ecke über dem Tisch auf dem das ganze Buch liegt, schweben.
Und im HTML Code die Position wo es eingefügt wird, verlegen, ging auch nicht, dann verschwand das Bändchen des Banners hinter dem Buchrücken, was auch seltsam aussah. Daher die z-index Lösung...


wobei ich schon wieder den Eindruck habe, dass mir das nun doch alles zerschießt.

Jetzt ist nämlich noch ein Element hinzu gekommen. Der Notizzettel links.
Und nun schwebt mein Menu im IE 7 wieder. Ich nehme stark an das der IE 6 das auch macht. Nummer 8 dagegen ist genau so brav wie der Fuchs und macht das nicht mehr.

Da werde ich wohl noch mal fummeln müssen. (Auch an der Grafik selbst muss ich noch feilen.)

Gibt es eigentlich einen Weg einer Grafik die mitscrollt zu sagen, dass sie sich nur bis zu einem bestimmten Punkt nicht bewegen darf?

ich hab nämlich auf meinem Notebook das Problem, dass der Notizzettel. über den Buchrand wegrutscht, wenn ich nach unten scrolle.

Sorry besser beschreiben kann ich es nicht. Auf meinem Desktop sieht man das nur minimal Beim IE 7 wenn man gnz oben auf der Seite ist.

 

[neuroleptika]

Entferne erstmal alle voreingestellten paddings und margins:

* {
margin: 0;
padding: 0;
}

Dem img (banner) gebe display:block;

Entferne die paddings und margins aus den a-Elementen.
Wenn es jetzt in allen Browsern gleich aussieht kanst du mit der postionierung der a-Elemente neu anfangen.
li sollte position:relative haben. Dann hast du für a einen Bezugspunkt zur absoluten Positionierung.
Positioniere a mit top und left, nicht mit margin und padding.

Der beste Weg ist Eigenschaften und Werte zurückzunehmen bis es einheitlich aussieht.
Dann kann mann die Werte nach und nach wieder einfügen bis der Fehler wieder Auftritt.
Und dann gegebenenfalls einen geziehlten Hack einsetzen.
Sonst bleibt es unverstanden und man hangelt sich von einem Fehler zum nächsten.
Nach kurzer Zeit weiß man überhaupt nicht mehr was und wozu man für welchen Browser hackt.

Mußt du das für deinen Arbeitgeber machen?
Der Inhalt sieht so privat aus.

 

[Amalia]

Ok... hab jetzt mal alles gemacht was du geschrieben hast, neuroleptika.

Das hat mir gezeigt das ich für den IE 7 und kleiner eine extra Stylesheet brauche. Zumindest was die Werte für top und left zur Position der Bilder angeht.

die Textbereiche, konnte ich nicht mit top und left positionieren, daher hab ich da die Margin und paddingwerte gelassen

Das CSS für IE 7 ist auch eingebunden und angepasst.

da ergibt sich aber trotzdem noch ein kleines Problem.
Das banner liegt zwar optisch hinter der Navigation, aber nur wenn man die am unteren Rand berüht sieht man das es links sind, fährt man von oben drüber tut sich nichts.

Edit:
und im IE 8 gibt es zwischen dem mittleren Buchhintergrund und dem unteren eine Spalte, ohne einen top:0px:

Ist mir gerade eben aufgefallen.

Wieso, weshalb, warum?? ich hab keine Ahnung.
Es scheint aber etwa mit dem Bereich hinzukommen, der bei der Grafik transparent ist. Was nicht heißen soll, dass das zusammenhängt, denn eigentlich liegt die Grafik ja hinter der Navigation. Aber dem IE 7 traue ich inzwicshen so ziemlich alles zu.

Edit:
und im IE 8 muss ich im Div für den unteren Buchrand, ein margin-top:0px, setzen, sonst gibt es da eine spalte. Top allein reichte nicht
Das ist jetzt meine complette CSS Datei. die für den IE 7 untescheidet sich nur in den Werten für top und left beim Banner und bei den a elementen

*{margin:0;
  padding:0;
 }

/*Holzhintergrund*/
body { background-image:url(../images/hintergrund.gif);}


/*Banner*/
img.banner{      width:591px;
                 height:211px;
                 display:block;
                 position:relative;
                 top:16px;
                 left:305px;
        }


/*Navigation*/
li { list-style-type:none;
     position:relative;
   }

   <!--
a.b1 {   background-image:url(../images/button/home.png);
         background-repeat:no-repeat;
         width:135px;
         height:55px;
         display:block;
         position:absolute;
         top:-39px;
         left:400px;
     }

a:hover.b1 { background-image:url(../images/buttonhover/home.png);
             background-repeat:no-repeat;
             width:135px;
             height:66px;
             top:-50px;

           }


a.b2 {   background-image:url(../images/button/geschichten.png);
         background-repeat:no-repeat;
         width:135px;
         height:55px;
         display:block;
         position:absolute;
         top:-35px;
         left:550px;
     }

a:hover.b2 { background-image:url(../images/buttonhover/geschichten.png);
             background-repeat:no-repeat;
             width:135px;
             height:66px;
             top:-49px;
           }

a.b3 {   background-image:url(../images/button/gaestebuch.png);
         background-repeat:no-repeat;
         width:135px;
         height:55px;
         display:block;
         position:absolute;
         top:-33px;
         left:700px;
     }

a:hover.b3 { background-image:url(../images/buttonhover/gaestebuch.png);
             background-repeat:no-repeat;
             width:135px;
             height:66px;
             top:-50px;
           }



a.b4 {  background-image:url(../images/button/linktipps.png);
        background-repeat:no-repeat;
        width:135px;
        height:55px;
        display:block;
        position:absolute;
        top:-30px;
        left:850px;
     }

a:hover.b4 {    background-image:url(../images/buttonhover/linktipps.png);
                background-repeat:no-repeat;
                width:135px;
                height:66px;
                top:-50px;
           }


a.b5 {  background-image:url(../images/button/uebermich.png);
        background-repeat:no-repeat;
        width:135px;
        height:55px;
        display:block;
        position:absolute;
        top:-27px;
        left:1000px;
     }

a:hover.b5 {    background-image:url(../images/buttonhover/uebermich.png);
                background-repeat:no-repeat;
                width:135px;
                height:66px;
                top:-50px;
           }

-->

/*Grafiken*/
/*Buch*/
div#buchoben{background-image:url(../images/buchoben.png);
             background-repeat:no-repeat;
             display:block;
             width:1230px;
             height:57px;
           }

div#buchmitte{background-image:url(../images/buchmitte.png);
              width:1230px;
              height:100%;
              min-height:620px;
             }

div#buchunten{background-image:url(../images/buchunten.png);
              background-repeat:no-repeat;
              width:1230px;
              height:89px;
              margin-top:-20px;
           }

div#update{background-image:url(../images/notizzettel.png);
           display:block;
           width:250px;
           height:403px;
           position:fixed;
           margin-top:-60px;
           margin-left:15px;
          }


/*Textformatierung*/
div#buchmitte p {font-family:'Times New Roman', serif, sans-serif;
                 font-size:1.2em;
                 margin-left:400px;
                 margin-right:150px;
                 margin-top:0px;
                 margin-bottom:20px;
                 color:#4d4626;
             }

.ueberschrift {  font-family:'Times New Roman', serif, sans-serif;
                 font-size:2em;
                 font-weight:bold;
                 margin-left:400px;
                 margin-right:150px;
                 margin-top:0px;
                 margin-bottom:25px;
                 padding-top:30px;
                 color:#4d4626;
              }
[code]

Und die Page ist Privat. Ich hab aber auf der Arbeit genug Zeit für so was. Unsere Anweder brauchen ja nur Hilfe wenn ihre Sachen nicht laufen, und da ich noch Azubi bin hab ich mit dem Papierkram auch nichts zu tun.