2 kleinere Fragen

[Nadja]

Hallo,

hab da mal 2 kleine Fragen:

1. auf http://www.markenhansa.de/coix befindet sich auf der Startseite ein Flash-Film.
   Das Problem ist das JS-Menü. Wenn es im IE aufklappt, verschwindet der Flash-Film im, Hauptbereich. Im FF wird alles, was vom Menü über dem Flash-Film liegt, abgeschnitten.
   Wie kann ich das verhindern? Liegt das am z-Index?

2. CSS-Layout
   Auf http://www.markenhansa.de/hennig seht ihr eine Webseite, die im Moment noch mit Tabellen erzeugt wurde.
   Das ganze will ich aber in ein CSS-Layout mit DIV-Containern umbauen.
   Ich hab da nur ein Problem:
   Wie erreiche ich, dass die Kante unten links vom Bild z.B. bündig mit dem grauen Balken abschließt?

Weiß nicht, wie ich das erklären soll...

Das Menü ist insgesamt ja so breit wie das rote Logo. Dazwischen liegen 3px Abstand.
Rechts von Menü und Logo folgen wieder 3px Abstand, danach kommen Bild und grauer Balken.
Mit Tabellen ist das ja easy zu realisieren, aber wie macht man das, wenn man Maßangaben wie % oder em benutzt??

Liebe Grüße,
Nadja

[Nadja]

Hallo,

P.s: Der Abstand zwischen den einzelnen Elementen soll immer 3px betragen...
Also: Der Bereich, der Menü, Bild, Logo und Text umfasst, soll immer gleich groß bleiben.
Lediglich die weißen, leeren Flächen links, rechts, oben und unten sollen sich variabel vergrößern oder verkleinern.

Liebe Grüße,
Nadja

[MudGuard]

Hi,

P.s: Der Abstand zwischen den einzelnen Elementen soll immer 3px betragen...

Was hält Dich davon ab, margin:3px zu benutzen, wenn Du 3px margin haben willst?

Lediglich die weißen, leeren Flächen links, rechts, oben und unten sollen sich variabel vergrößern oder verkleinern.

Wenn diese Flächen weiß sein sollen, dann solltest Du auch weiß als Hintergrundfarbe angeben, sonst sind die bei mir #dfe
Nicht jeder hat weiß als Default-Hintergrundfarbe eingestellt.

cu,
Andreas

[sschumann]

Das Problem ist das JS-Menü. Wenn es im IE aufklappt, verschwindet der Flash-Film im, Hauptbereich.

Tut er bei mir nicht.

Im FF wird alles, was vom Menü über dem Flash-Film liegt, abgeschnitten.
Wie kann ich das verhindern? Liegt das am z-Index?

Applets, Flashfilme und ähnliches liegen immer über allem. Was meinst Du, warum Flashbannerpopupimitate so beliebt sind?

2. CSS-Layout
   Wie erreiche ich, dass die Kante unten links vom Bild z.B. bündig mit dem grauen Balken abschließt?

Das tut sie jetzt doch auch nicht.

Mit Tabellen ist das ja easy zu realisieren, aber wie macht man das, wenn man Maßangaben wie % oder em benutzt??

Wieso willst Du Maßangaben wie % oder em benutzen?

[Nadja]

Hallo,

Tut er bei mir nicht.

Welche IE-Version hast du? Ich nutze IE v6.0

Applets, Flashfilme und ähnliches liegen immer über allem. Was meinst Du, warum Flashbannerpopupimitate so beliebt sind?

Kann man das denn mit z-Index verhindern?

2. CSS-Layout
   Wie erreiche ich, dass die Kante unten links vom Bild z.B. bündig mit dem grauen Balken abschließt?

Das tut sie jetzt doch auch nicht.

Ich meinte mit Bild das "Küchenbild".

Wieso willst Du Maßangaben wie % oder em benutzen?

Weil ich ein flexibles, für den Benutzer am besten angepasstes Layout haben will!?

Liebe Grüße,
Nadja

[sschumann]

Welche IE-Version hast du? Ich nutze IE v6.0

6.0.2800.1106.xpsp2.030422-1633 - der Flashfilm überlagert Teile der Navigation.

Applets, Flashfilme und ähnliches liegen immer über allem. Was meinst Du, warum Flashbannerpopupimitate so beliebt sind?

Kann man das denn mit z-Index verhindern?

Applets, Flashfilme und ähnliches liegen immer über allem, wie bereits erwähnt. Das mit dem z-Index hättest Du bereits testen können. Einzige Möglichkeit ist ein Iframe, der kann überlagern *g*

Wieso willst Du Maßangaben wie % oder em benutzen?

Weil ich ein flexibles, für den Benutzer am besten angepasstes Layout haben will!?

Du scheinst von Höhenangaben zu sprechen. Da würde ich auf Dimensionsangaben weitgehend verzichten. Bei relativen Angaben außer px ist sehr darau zu achten, welche Maßeinheit man für welche Art von Elementen verwendet.

Ansonsten: siehe MudGuard.

[wahsaga]

hi,

Im FF wird alles, was vom Menü über dem Flash-Film liegt, abgeschnitten.
Wie kann ich das verhindern? Liegt das am z-Index?

Applets, Flashfilme und ähnliches liegen immer über allem.

ja, dache ich auch lange zeit.

mit
<param name=wmode value=transparent>
bei der einbindung des flash-objektes kann man das aber wohl (teilweise, je nach browser) verhindern.
(s.a. https://forum.selfhtml.org/?t=111309&m=700387)

gruß,
wahsaga

[Nadja]

Hallo,

mit
<param name=wmode value=transparent>
bei der einbindung des flash-objektes kann man das aber wohl (teilweise, je nach browser) verhindern.
(s.a. https://forum.selfhtml.org/?t=111309&m=700387)

Danke, ich werd's mal damit probieren!

Liebe Grüße,
Nadja

[Nadja]

Hallo,

ich krieg 'ne Kriese mit dem IE...

Hab die CSS-Layoutseite, wie sie jetzt ist, mal hochgeladen: Bastelseite

Mit dem FF sieht die so aus, wie ich sie haben will.
Nun kommt aber der IE:
Warum sind unter dem roten Logo noch ein paar Pixel grau? Der Balken ist zu hoch, aber ich habe die Höhe des Balkens in der CSS-Datei so angegeben, wie auch das Bild hoch ist: 33px :(
*wäääh*

Achja: Wie krieg ich bei einer Liste eigentlich die Bullets im IE weg? Im FF funzt das mit list-style-type:none; aber im IE will das nicht so richtig...

Vielen Dank schonmal für eure Hilfe!
Und bitte nicht gleich auf mir rumhacken - Ich erlerne gerade mal CSS-Layouts...

Liebe Grüße,
Nadja

[sschumann]

Warum sind unter dem roten Logo noch ein paar Pixel grau?

Entferne Leerzeichen zwischen div und img, definiere die line-height oder definiere img als Inline-Element.

[Nadja]

Hallo,

Warum sind unter dem roten Logo noch ein paar Pixel grau?

Entferne Leerzeichen zwischen div und img, definiere die line-height oder definiere img als Inline-Element.

Jap, es lag an der Einrückung:

  
<div id="grey_container">  
  <img src="grafik/logo_rot.jpg" width="159px" height="33px" alt="" border="0" />  
</div>  

So funktioniert es jetzt:

  
<div id="grey_container"><img src="grafik/logo_rot.jpg" width="159px" height="33px" alt="" border="0" /></div>  

Find ich trotzdem fadenscheinig... Dann bringt ja die ganze Einrückung nichts :/

Liebe Grüße,
Nadja

[sschumann]

<div id="grey_container"><img src="grafik/logo_rot.jpg" width="159px" height="33px" alt="" border="0" /></div>

>   
> Find ich trotzdem fadenscheinig... Dann bringt ja die ganze Einrückung nichts :/  
  
So kann man's auch lesen:  
  
[code lang=html]  
<div id="grey\_container"><img  
    src="grafik/logo\_rot.jpg" width="159px" height="33px" alt="" border="0" /></div>  
/code]  

[Nadja]

Hallo,

So kann man's auch lesen:

<div id="grey_container"><img
    src="grafik/logo_rot.jpg" width="159px" height="33px" alt="" border="0" /></div>

  
Hm... Funktioniert zwar, find ich aber irgendwie komisch, weil die Tags dann so zerrissen wirken...  
Aber wenn das die einzige Möglichkeit ist, mit Einrückungen gute Ergebnisse zu erzielen, muss man sich wohl daran gewöhnen ;)  
  

>   

Liebe Grüße,  
Nadja

-- 
system.exit(0);

[Ashura]

Hallo Nadja.

Mit dem FF sieht die so aus, wie ich sie haben will.

Bist du sicher, dass du diese überbreite Seite haben möchtest?

Nun kommt aber der IE:
Warum sind unter dem roten Logo noch ein paar Pixel grau? Der Balken ist zu hoch, aber ich habe die Höhe des Balkens in der CSS-Datei so angegeben, wie auch das Bild hoch ist: 33px :(

Möglichweise, weil du ihn in den Quirksmodus geschickt hast:

<?xml version="1.0"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

Achja: Wie krieg ich bei einer Liste eigentlich die Bullets im IE weg? Im FF funzt das mit list-style-type:none; aber im IE will das nicht so richtig...

Einmal davon abgesehen, dass sie bereits nicht zu sehen sind, wirkt ein

ul li{list-style-type:none;}

manchmal Wunder.

Und bitte nicht gleich auf mir rumhacken - Ich erlerne gerade mal CSS-Layouts...

Keine Sorge. Aber zumindest einen Tipp gebe ich dir: befasse dich mit relativen Maßeinheiten, sonst zerfällt dein Layout möglichweise schneller, als du du glaubst.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Nadja]

Hallo,

Bist du sicher, dass du diese überbreite Seite haben möchtest?

Wieso überbreit?

Möglichweise, weil du ihn in den Quirksmodus geschickt hast:

Danke für den Link, vielleicht kapier ich jetzt ja endlich mal, wovon ihr alle redet ;)

Und bitte nicht gleich auf mir rumhacken - Ich erlerne gerade mal CSS-Layouts...

Keine Sorge. Aber zumindest einen Tipp gebe ich dir: befasse dich mit relativen Maßeinheiten, sonst zerfällt dein Layout möglichweise schneller, als du du glaubst.

Danke für den Tipp :)
Ich find diese ganzen Maßeinheiten momentan nur absolut undurchsichtig und sehr komplex...

Liebe Grüße,
Nadja

[MudGuard]

Hi,

Bist du sicher, dass du diese überbreite Seite haben möchtest?
Wieso überbreit?

Weil sich unten ein horizontaler Scrollbalken befindet.
Resultierend aus width:100% und padding-left:177px für den grey_container, womit dieser 177px breiter als das Fenster ist.

Setze width gar nicht bzw. auf auto.

cu,
Andreas

[Ashura]

Hallo Nadja.

Bist du sicher, dass du diese überbreite Seite haben möchtest?

Wieso überbreit?

Bevor du die xml-Deklaration entfernt hattest, war deine Bastelseite noch mehr als überbreit, d. h. ein horizontaler Scrollbalken erschien.

Doch nun hast du auch gleich mit den DOCTYPE entfernt, wodurch jeder Browser, der über ihn verfügt, in den Quirksmodus schaltet.

Füge den DOCTYPE wieder ein, lasse aber die xml-Deklaration weg.

Danke für den Tipp :)
Ich find diese ganzen Maßeinheiten momentan nur absolut undurchsichtig und sehr komplex...

Das gibt sich mit der Zeit. Wenn du dir dein System entwickelst, welche Maßneinheit wo angebracht ist (bei border z. B. nimmt so gut wie niemand etwas anderes als px), kommst du weniger durcheinander.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Nadja]

Hallo,

Bevor du die xml-Deklaration entfernt hattest, war deine Bastelseite noch mehr als überbreit, d. h. ein horizontaler Scrollbalken erschien.

Echt? Ist mir nicht aufgefallen...

Doch nun hast du auch gleich mit den DOCTYPE entfernt, wodurch jeder Browser, der über ihn verfügt, in den Quirksmodus schaltet.

Füge den DOCTYPE wieder ein, lasse aber die xml-Deklaration weg.

Ich finde das verwirrend. Gestern sagte ein bekannter Programmierer, ich sollte eben diesen DOCTYPE mit XML-Deklaration nutzen...
Wann muss man denn was benutzen??

Das gibt sich mit der Zeit. Wenn du dir dein System entwickelst, welche Maßneinheit wo angebracht ist (bei border z. B. nimmt so gut wie niemand etwas anderes als px), kommst du weniger durcheinander.

Hoff ich doch mal ;)

Liebe Grüße,
Nadja

[Ashura]

Hallo Nadja.

Doch nun hast du auch gleich mit den DOCTYPE entfernt, wodurch jeder Browser, der über ihn verfügt, in den Quirksmodus schaltet.

Füge den DOCTYPE wieder ein, lasse aber die xml-Deklaration weg.

Ich finde das verwirrend. Gestern sagte ein bekannter Programmierer, ich sollte eben diesen DOCTYPE mit XML-Deklaration nutzen...
Wann muss man denn was benutzen??

Schau dir die von mir verlinkte Seite noch einmal genau an.

Übrigenst hast du nun zwar einen DOCTYPE angegeben, doch ohne den URL zur DTD bleibt der IE im Quirksmodus.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Nadja]

Hallo,

Das gibt sich mit der Zeit. Wenn du dir dein System entwickelst, welche Maßneinheit wo angebracht ist (bei border z. B. nimmt so gut wie niemand etwas anderes als px), kommst du weniger durcheinander.

P.s.: Welche Maßeinheit/-angabe benutzt man denn am besten für die Angabe der Breite eines speziellen Bereiches, z.B. Navigations-DIV!?
Hab da schon die verschiedensten Sachen gesehen... Von em über % bis px. Was wäre denn dafür aber am sinnvollsten?

Liebe Grüße,
Nadja

[Ashura]

Hallo Nadja.

P.s.: Welche Maßeinheit/-angabe benutzt man denn am besten für die Angabe der Breite eines speziellen Bereiches, z.B. Navigations-DIV!?
Hab da schon die verschiedensten Sachen gesehen... Von em über % bis px. Was wäre denn dafür aber am sinnvollsten?

Ich verwende hier im Normalfall %, da ich Breiten- und Höhenangaben immer damit tätige.

Ggf. kann es aber auch sein, dass eine Breitenangabe gar nicht erforderlich ist, weil margin und / oder padding schon für die gewünschte Breite sorgen. Das kommt aber wirklich auf die Konstellation in deinem CSS an.

(Übrigens sieht dein Code nach XHTML aus, also solltest du einen entsprechenden DOCTYPE verwenden.)

Einen schönen Donnerstag noch.

Gruß, Ashura

[Nadja]

Hallo,

Ich verwende hier im Normalfall %, da ich Breiten- und Höhenangaben immer damit tätige.

Ggf. kann es aber auch sein, dass eine Breitenangabe gar nicht erforderlich ist, weil margin und / oder padding schon für die gewünschte Breite sorgen. Das kommt aber wirklich auf die Konstellation in deinem CSS an.

Puh, ist das alles kompliziert :/

(Übrigens sieht dein Code nach XHTML aus, also solltest du einen entsprechenden DOCTYPE verwenden.)

Den Link hab ich mir in meine Lesezeichen gelegt, aber an sowas denke ich momentan noch nicht - Erst soll das Layout stehen :)

Liebe Grüße,
Nadja

[Ashura]

Hallo Nadja.

Puh, ist das alles kompliziert :/

Keine Sorge. Wenn du dein System hast, blickst du da schnell durch.

Den Link hab ich mir in meine Lesezeichen gelegt, aber an sowas denke ich momentan noch nicht - Erst soll das Layout stehen :)

Inwieweit das Dokument valide ist, beeinflusst aber auch die Darstellung und Umsetzung des CSS. (Siehe Quirksmodus)

BTW: Viel Erfolg. :-)

Einen schönen Donnerstag noch.

Gruß, Ashura

[Nadja]

Hallo,

Keine Sorge. Wenn du dein System hast, blickst du da schnell durch.

Dann hoffe ich mal, dass ich systemloser Mensch bald ein System habe :)

BTW: Viel Erfolg. :-)

Danke, danke :)

Liebe Grüße,
Nadja

[Nadja]

Hallo,

(Übrigens sieht dein Code nach XHTML aus, also solltest du einen entsprechenden DOCTYPE verwenden.)

Ist das so jetzt richtig?

Liebe Grüße,
Nadja

[Ashura]

Hallo Nadja.

(Übrigens sieht dein Code nach XHTML aus, also solltest du einen entsprechenden DOCTYPE verwenden.)

Ist das so jetzt richtig?

*g* (Verzeihung)
Ja, der DOCTYPE stimmt nun, auch wenn du dir mit Strict eine Bürde auferlegt hast, die du ggf. noch nicht tragen kannst.
Vielleicht genügt dir erst einmal Transitional?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

wird zu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nun ist aber die Seite auch wieder überbreit, beachte dazu MudGuard's Hinweis.

Zudem hast du nach wie vor Maßeinheiten in den height- und width-Attributen der <img>-Elemente stehen. Die gehören dort nicht hin. Schreibe dort einfach nur die Zahlen hinein, ohne Maßeinheit.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Nadja]

Hallo,

*g* (Verzeihung)

Macht ja nichts :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  
Okay, hab ich entsprechend geändert :)  
  

> Nun ist aber die Seite auch wieder überbreit, beachte dazu [MudGuard's Hinweis](https://forum.selfhtml.org/?t=111358&m=700865).  
  
Jap, den Hinweis habe ich befolgt, der böse Scrollbalken ist nun weg :)  
  

> Zudem hast du nach wie vor Maßeinheiten in den height- und width-Attributen der <img>-Elemente stehen. Die gehören dort nicht hin. Schreibe dort einfach nur die Zahlen hinein, ohne Maßeinheit.  
  
\*panik\*  
Irgendwer hat mal gesagt, man sollte immer Maßeinheiten angeben...  
  
Aber welche Maßeinheit nimmt er denn dann, wenn nichts angegeben ist??  
  

> Einen schönen Donnerstag noch.  
  
Dir auch und danke (natürlich auch an alle anderen) für die ganze Mühe und Hilfe :)  
  
  
Liebe Grüße,  
Nadja

-- 
system.exit(0);

[Ashura]

Hallo Nadja.

Okay, hab ich entsprechend geändert :)

Jap, den Hinweis habe ich befolgt, der böse Scrollbalken ist nun weg :)

Und wenn du nun noch einen Zeichensatz angibst, ist deine Seite sogar validierbar. ;-)

Zudem hast du nach wie vor Maßeinheiten in den height- und width-Attributen der <img>-Elemente stehen. Die gehören dort nicht hin. Schreibe dort einfach nur die Zahlen hinein, ohne Maßeinheit.

*panik*
Irgendwer hat mal gesagt, man sollte immer Maßeinheiten angeben...

Wenn die Dimensionen per CSS im style-Attribut getätigt werden, ja.
Ansonsten niemals.

Aber welche Maßeinheit nimmt er denn dann, wenn nichts angegeben ist??

Pixel.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Nadja]

Hallo,

validierbar. ;-)

Bin gerade dabei.
Könnte einer von euch da nochmal gucken, ich raff die letzten beiden Fehler nicht.
Einmal wird am </head> gemeckert, ein anderes mal am border-Attribut im <img>-Tag (komischerweise nur einmal, obwohl ich das zwei Mal habe)...

Liebe Grüße,
Nadja

[Ashura]

Hallo Nadja.

validierbar. ;-)
Einmal wird am </head> gemeckert,

Nunja, du könntest deinem Dokument noch einen title verpassen... ;-)

ein anderes mal am border-Attribut im <img>-Tag (komischerweise nur einmal, obwohl ich das zwei Mal habe)...

Du könntest border="0" durch style="border:none;" ersetzen, doch wozu?
Wenn das Bild nicht gerade verlinkt wird, wird es niemals einen Rahmen erhalten. (Was der IE macht, steht natürlich wieder auf einem anderen Blatt.)

Ich habe dein Dokument abgespeichert und lokal valide gemacht.
Es geht also. ;-)

Einen schönen Donnerstag noch.

Gruß, Ashura

[Nadja]

Hallo,

Nunja, du könntest deinem Dokument noch einen title verpassen... ;-)

*Öhm* *hüstel* ;)
*blind wie 'ne Natter ist*

ein anderes mal am border-Attribut im <img>-Tag (komischerweise nur einmal, obwohl ich das zwei Mal habe)...

Du könntest border="0" durch style="border:none;" ersetzen, doch wozu?
Wenn das Bild nicht gerade verlinkt wird, wird es niemals einen Rahmen erhalten. (Was der IE macht, steht natürlich wieder auf einem anderen Blatt.)

Funzt, der IE macht auch keine komischen Sachen.

Ich frage mich nur, warum der nur an einer Stelle an dem border-Attribut rummeckert, obwohl ich 2 img-Tags hatte mit diesem Attribut... Naja - Egal.

Das einzige, was mich jetzt noch im Bezug auf's Layout interessiert (dann lass ich dich / euch auch schon wieder in Ruhe!), ist, wie ich im IE einen kleineren Zeilenabstand für das Menü hinbekomme... Sieht doch nicht aus, wie es jetzt ist ;)
Der FF zeigt es korrekt an. Momentan hab ich line-height auf auto stehen. Muss man für den IE da wieder was Spezielles angeben??

Liebe Grüße,
Nadja

[MudGuard]

Hi,

Das einzige, was mich jetzt noch im Bezug auf's Layout interessiert (dann lass ich dich / euch auch schon wieder in Ruhe!), ist, wie ich im IE einen kleineren Zeilenabstand für das Menü hinbekomme... Sieht doch nicht aus, wie es jetzt ist ;)

für die a- und li-Elemente ggf. padding und oder margin auf passende Werte setzen.

cu,
Andreas

[Nadja]

Hallo,

für die a- und li-Elemente ggf. padding und oder margin auf passende Werte setzen.

Hilft auch nicht, hab beides jeweils auf 0 gesetzt :(

Liebe Grüße,
Nadja

[MudGuard]

Hi,

für die a- und li-Elemente ggf. padding und oder margin auf passende Werte setzen.

Hilft auch nicht, hab beides jeweils auf 0 gesetzt :(

Ah, jetzt weiß ich, welcher Fehler des IE zuständig ist (display:block ohne Breitenangabe ==> seltsames geschieht):

div#navi_container ul li a
{
 font-family: Verdana, Arial;
 color: #808080;
 text-decoration: none;
 display: block;
 width:100%;   /* wichtig, sonst spinnt der IE */
}

cu,
Andreas

[Nadja]

Hallo,

Danke, danke, es funzt :)

Jetzt hab ich aber _schon_wieder_ ein Problem:

Im Content-Bereicht verläuft der Text ja im Moment bis an den Scrollbalken.

Der Scrollbalken soll da bleiben, wo er ist, aber der Text soll ca. 150px eher aufhören.
Wenn ich aber padding-right: 150px; setze, bleibt der Text so, wie er ist, und der Scrollbalken wird um 150px nach rechts versetzt.

Wie zwinge ich den Text, weniger Platz einzuberaumen??

Liebe Grüße,
Nadja

[MudGuard]

Hi,

Der Scrollbalken soll da bleiben, wo er ist, aber der Text soll ca. 150px eher aufhören.
Wenn ich aber padding-right: 150px; setze, bleibt der Text so, wie er ist, und der Scrollbalken wird um 150px nach rechts versetzt.

Dann mußt Du das Element halt entsprechend dem padding-right schmaler machen.

cu,
Andreas

[Nadja]

Hallo,

Dann mußt Du das Element halt entsprechend dem padding-right schmaler machen.

Und sie sah mal wieder den Wald vor lauter Bäumen nicht, sorry ...

Tausend Dank!

Liebe Grüße,
Nadja

[MudGuard]

Hi,

Zudem hast du nach wie vor Maßeinheiten in den height- und width-Attributen der <img>-Elemente stehen. Die gehören dort nicht hin. Schreibe dort einfach nur die Zahlen hinein, ohne Maßeinheit.

*panik*
Irgendwer hat mal gesagt, man sollte immer Maßeinheiten angeben...

Irgendwer hat wohl keine Ahnung.

HTML: keine Längeneinheit (außer %), da immer nur eine Möglichkeit besteht (bei width und height sind es Pixel)
CSS: immer Längeneinheit (außer beim Wert 0, da ist die Einheit nicht erforderlich)

Aber welche Maßeinheit nimmt er denn dann, wenn nichts angegeben ist?

Die jeweils passende. Bei img width/height Pixel, bei <input size> je nach type Character oder Pixel usw. - steht im Standard jeweils dabei.

cu,
Andreas

[Ingo Turski]

Hi,

P.s.: Welche Maßeinheit/-angabe benutzt man denn am besten für die Angabe der Breite eines speziellen Bereiches, z.B. Navigations-DIV!?
Hab da schon die verschiedensten Sachen gesehen... Von em über % bis px. Was wäre denn dafür aber am sinnvollsten?

Ich verwende hier im Normalfall %, da ich Breiten- und Höhenangaben immer damit tätige.

dies so pauschal zu empfehlen ist nicht sinnvoll.

Besonders die Breite einer Navigation sollte meist nicht in % angegeben werden - es sei denn, man läßt genügend Freiraum, so daß es auch in schmaleren Fenstern nicht zu Problemen kommt. Generell ist für eine Navigation eher em oder px angebracht. em für Textlinks (damit sich die Breite der Schriftgröße anpassen kann) und px für Bildlinks.
Eine %-Angabe wäre hier allenfalls noch sinnvoll, wenn das Elternelement eine feste Breite hat - aber dann würde auch px keinen Unterschied machen.

freundliche Grüße
Ingo

[Ashura]

Hallo Ingo.

Ich verwende hier im Normalfall %, da ich Breiten- und Höhenangaben immer damit tätige.

dies so pauschal zu empfehlen ist nicht sinnvoll.

Ich == pauschal?

Besonders die Breite einer Navigation sollte meist nicht in % angegeben werden - es sei denn, man läßt genügend Freiraum, so daß es auch in schmaleren Fenstern nicht zu Problemen kommt.

Momentan: Breite 100%. ;-)

Generell ist für eine Navigation eher em oder px angebracht. em für Textlinks (damit sich die Breite der Schriftgröße anpassen kann) und px für Bildlinks.
Eine %-Angabe wäre hier allenfalls noch sinnvoll, wenn das Elternelement eine feste Breite hat - aber dann würde auch px keinen Unterschied machen.

Gut, dass du dies noch einmal präzisierst.

Einen schönen Donnerstag noch.

Gruß, Ashura

[MudGuard]

Hi,

Hab die CSS-Layoutseite, wie sie jetzt ist, mal hochgeladen: Bastelseite

Mit dem FF sieht die so aus, wie ich sie haben will.
Nun kommt aber der IE:

Nimm die XML-Deklaration weg, dann ist der IE evtl. nicht mehr im Quirks mode.

Achja: Wie krieg ich bei einer Liste eigentlich die Bullets im IE weg? Im FF funzt das mit list-style-type:none; aber im IE will das nicht so richtig...

Das funktioniert im IE auch.

Ach ja, bei width- und height-HTML-Attributen haben CSS-Längeneinheiten nichts verloren.

cu,
Andreas

[Nadja]

Hallo,

Nimm die XML-Deklaration weg, dann ist der IE evtl. nicht mehr im Quirks mode.

Achja: Wie krieg ich bei einer Liste eigentlich die Bullets im IE weg? Im FF funzt das mit list-style-type:none; aber im IE will das nicht so richtig...

Das funktioniert im IE auch.

Okay, es lag, wie du schon meintest, an der XML-Deklaration *schäm*

Ach ja, bei width- und height-HTML-Attributen haben CSS-Längeneinheiten nichts verloren.

Häh? Was, wann, wie, wo?

Liebe Grüße,
Nadja

[MudGuard]

Hi,

Ach ja, bei width- und height-HTML-Attributen haben CSS-Längeneinheiten nichts verloren.
Häh? Was, wann, wie, wo?

z.B.: <img src="grafik/top.jpg" width="567pt" height="157pt" alt="" border="0" />

cu,
Andreas

[Nadja]

Hallo,

Hi,

Ach ja, bei width- und height-HTML-Attributen haben CSS-Längeneinheiten nichts verloren.
Häh? Was, wann, wie, wo?

z.B.: <img src="grafik/top.jpg" width="567pt" height="157pt" alt="" border="0" />

Oups, hab ich vergessen, rauszunehmen :(
Ist noch rudimentär vom ersten Versuch... Danke für den Hinweis!

Liebe Grüße,
Nadja

[Nadja]

Hallo,

nur zur Info, falls sich jemand nochmal die Seite ansehen will.

Der Link der Bastelseite hat sich geändert zu http://www.markenhansa.de/hennig geändert, die dazugehörige CSS-Datei befindet sich in http://www.markenhansa.de/hennig/css/hennig.css.

Hatte ja während dieses Threads einen etwas anderen Link für die "Bastelseite", der dürfte aber nicht mehr funktionieren.

Liebe Grüße,
Nadja

[Ingo Turski]

Hi,

nur zur Info, falls sich jemand nochmal die Seite ansehen will.

Der Link der Bastelseite hat sich geändert zu http://www.markenhansa.de/hennig geändert

De Seite sieht ja nicht schlecht aus, aber sie ist so miserabel benutzbar, daß ich, wenn ich Infos zu einer Küche suchen würde, garantiert lieber bei der Konkurenz nachsehen würde.
Die schlimmsten Unannehmlichkeiten sind:

• zu kleine Schriftgröße, besonders im Inhaltsbereich bei dem auch noch sehr geringen Zeilenabstand.
• Schriftgrößenangaben in der für Bildschirmdarstellung ungeeigneten und im IE nicht ohne weiteres skalierbaren Enheit pt.
• bei stärkerer Schriftvergrößerung (in anderen Browsern) verschwindet der Menüpunkt "Aktuelles".
• viel zu kleiner Inhaltsbereich. Es wird nur ein Bruchteil meines Anzeigebereiches genutzt, so daß völlig unötiges Scrollen erforderlich ist - besonders übel bei Einstellung einer - für mich - akzeptablen Schriftgröße; hier sehe ich dann gerade mal sieben Zeilen Text.
• Das Scrollen wird zudem in meinem Firefox erschwert, da das Scrollrad außer Funktion gesetzt wird.

freundliche Grüße
Ingo

[Nadja]

Hallo,

Danke für deine Kritik.

Ich habe die Seite im Laufe des Tages weiter bearbeitet.

Allerdings habe ich meine Vorgaben, z.B. Schriftgröße, Zeilenabstand, Navigation usw.

• Schriftgrößenangaben in der für Bildschirmdarstellung ungeeigneten und im IE nicht ohne weiteres skalierbaren Enheit pt.

Muss ich schauen, wie das mit em wird. Sie ist ja gerade erst im Aufbau ;)

• bei stärkerer Schriftvergrößerung (in anderen Browsern) verschwindet der Menüpunkt "Aktuelles".

Das habe ich auch schon festgestellt, wie kann ich das ändern?

• viel zu kleiner Inhaltsbereich.

Tja, das war auch so eine Vorgabe...

Wie ich schonmal meinte - Ich mache "nur" ein Praktikum. Ich würde zwar auch einiges anders machen, aber wenn der, der das bestimmt, sich nicht darauf einläfft und er und der Kunde das halt so haben wollen, bastel ich das denen so.

• Das Scrollen wird zudem in meinem Firefox erschwert, da das Scrollrad außer Funktion gesetzt wird.

Der Scrolltext war nur zum Text. Bei den meisten Seiten wird das Scrollen nicht nötig sein.

Liebe Grüße,
Nadja

[Ingo Turski]

Hi,

Allerdings habe ich meine Vorgaben, z.B. Schriftgröße, Zeilenabstand, Navigation usw.

sind diese Vorgaben denn unabänderlich? Der Auftraggeber sollte doch daran interessiert sein, daß die Seite bei den Besuchern gut ankommt und nicht nur an seine eigenen Vorlieben denken.

• bei stärkerer Schriftvergrößerung (in anderen Browsern) verschwindet der Menüpunkt "Aktuelles".

Das habe ich auch schon festgestellt, wie kann ich das ändern?

Verzichte auf absolute Positionierung. Möglicherweise könnten auch Positionierungsangaben in em helfen.

• viel zu kleiner Inhaltsbereich.

Tja, das war auch so eine Vorgabe...

Eine sehr schlechte. Zeige dem Auftraggeber die Seite in einem 1600er Fenster und vergrößerter Schrift im Firefox. Ich glaube kaum, daß er das dann noch so haben will. Und wenn doch, kannst Du im Nachhinein bei Beschwerden der Kundschaft darauf verweisen.

Wie ich schonmal meinte - Ich mache "nur" ein Praktikum.

Ich kenne das eigentlich so, daß gerade Praktikanten gute und neue Anregungen liefern können und das duchaus gern gesehen wird.

Der Scrolltext war nur zum Text. Bei den meisten Seiten wird das Scrollen nicht nötig sein.

Doch - bei jedem, der die Schriftgröße heraufsetzt. Es sei denn, es gibt nur Bilder in diesem Bereich.

freundliche Grüße
Ingo

[Nadja]

Hallo,

Ich kenne das eigentlich so, daß gerade Praktikanten gute und neue Anregungen liefern können und das duchaus gern gesehen wird.

Nun ja, mein Chef ist ein reiner Designer. Den interessiert nicht sonderlich, ob das Layout praktisch ist. Hauptsache, es sieht gut aus...

Aber vielen Dank für die ganzen Tipps, ich werde noch so einiges ändern :)

Liebe Grüße,
Nadja

[MudGuard]

Hi,

Ich kenne das eigentlich so, daß gerade Praktikanten gute und neue Anregungen liefern können und das duchaus gern gesehen wird.
Nun ja, mein Chef ist ein reiner Designer. Den interessiert nicht sonderlich, ob das Layout praktisch ist. Hauptsache, es sieht gut aus...

"form follows function" wird von ihm also in umgekehrter Wortreihenfolge gelesen?

cu,
Andreas

[Nadja]

Hallo,

Nun ja, mein Chef ist ein reiner Designer. Den interessiert nicht sonderlich, ob das Layout praktisch ist. Hauptsache, es sieht gut aus...

"form follows function" wird von ihm also in umgekehrter Wortreihenfolge gelesen?

Ganz so krass ist es nicht, aber er ist z.B. auch der Meinung, dass es im IE super aussehen soll, andere Browser wären nicht so wichtig... *heul*

Allein deswegen teste ich hauptsächlich mit FF ;)

Liebe Grüße,
Nadja

[Ingo Turski]

Hi,

Ganz so krass ist es nicht, aber er ist z.B. auch der Meinung, dass es im IE super aussehen soll, andere Browser wären nicht so wichtig... *heul*

dann erzähl' ihm mal, daß der Firefox in Deutschland nach dem IE der zweithäufigst genutzte Browser ist. Je nach Seite und Zielgruppe von weit über 20%.
Und daß die Chance immer größer wird, daß ein Kunde selbst den Firefox nutzt - ganz schöne Blamage, wenn die Seite dann dort nicht wie gewünscht angezeigt wird oder gar nicht funktioniert.

freundliche Grüße
Ingo

[Nadja]

Hallo,

dann erzähl' ihm mal, daß der Firefox in Deutschland nach dem IE der zweithäufigst genutzte Browser ist. Je nach Seite und Zielgruppe von weit über 20%.

Hab ihm schon gesagt, dass der Trend zu Alternativbrowsern geht und der Marktanteil immer größer wird...

Und daß die Chance immer größer wird, daß ein Kunde selbst den Firefox nutzt - ganz schöne Blamage, wenn die Seite dann dort nicht wie gewünscht angezeigt wird oder gar nicht funktioniert.

Ich werd einfach versuchen, das Layout so zu belassen, aber die Funktionalität noch etwas zu verbessern (jedenfalls soweit, wie es mir mit meinen Kenntnissen möglich ist).

Liebe Grüße,
Nadja

[Ingo Turski]

Hi,

Hab ihm schon gesagt, dass der Trend zu Alternativbrowsern geht und der Marktanteil immer größer wird...

und was hat er geantwortet?
Hattest Du ihm die Seiten übrigens mal im Firefox bei größerer Auflösung und Fenster- und Schriftgröße ausprobieren lassen?

freundliche Grüße
Ingo

[Nadja]

Hallo,

Hab ihm schon gesagt, dass der Trend zu Alternativbrowsern geht und der Marktanteil immer größer wird...

und was hat er geantwortet?

Nicht viel. Er hat es eigentlich nur zur Kenntnis genommen.

Hattest Du ihm die Seiten übrigens mal im Firefox bei größerer Auflösung und Fenster- und Schriftgröße ausprobieren lassen?

Nein, noch nicht, mach ich nächste Woche.

Liebe Grüße,
Nadja

[Gunnar Bittersmann]

Hi Nadja,

Nun ja, mein Chef ist ein reiner Designer. Den interessiert nicht sonderlich, ob das Layout praktisch ist. Hauptsache, es sieht gut aus...

Dann ist der Artikel Warum können Werbeagenturen keine guten WWW-Seiten schreiben? ja eine ideale Feierabendlektüre für ihn.

Live long and prosper,
Gunnar

[Nadja]

Hallo,

Dann ist der Artikel Warum können Werbeagenturen keine guten WWW-Seiten schreiben? ja eine ideale Feierabendlektüre für ihn.

Autsch, das ist hart, aber leider entspricht zu es 99% der Realität :)
Guter Artikel!

Liebe Grüße,
Nadja