Ansicht:   

#262316

Mike_R zur Homepage von Mike_R

Rosenheim,
03.03.2011, 22:27:06

Link-images überdecken sich - warum? (web.design)

Hi,

wie ich zu meinem eigenen Erschrecken feststelle, bin ich nach wie vor der einzige, der auf diesem \"Schlachtfeld\" mit Problemen kämpft - aber vielleicht erbarmt sich doch noch mal jemand und hilft mir aus der Patsche. Hatte jetzt die vorhergehenden Probleme selber in den Griff gekriegt und auch alles soweit fertig gestellt - doch jetzt kamen schon wieder (!!!) Änderungswünsche, über die ich lieber keinen Kommentar abgeben möchte. Bitte also über das momentane Aussehen (bleibt höchstwahrscheinlich nicht so!) hinwegsehen! Die Seite ist jetzt unter \"http://www.knierer.de\" gespeichert. Das neue Problem: Ich komm nicht drauf, warum der Agentur-Link (img-Datei, weil die Schrift umbedingt so sein musste!!), wenn man auf \'Drykorn\' klickt, überlagert wird und somit ein dickerer schwarzer Rand entsteht. Beide Dateien (die weiße sowie die leicht angegraute haben dieselbe Höhe - 15px - wie man im Browser auch feststellen kann. Die dazugehörenden Teile der stylesheet-Datei sehen so aus (hab meine vielen /* - */ Versuche, die alle nichts gebracht haben, absichtlich drin gelassen!)

#menuAktivLink
{
position: relative;
/* left:-59px; top:0px; */
left: 0px; top:0px; /* 0 -> 1 -> 3 */
/* left: 0px; top:-1px; */
color: #000;
background-color: #fff;
z-index: 3;
}

/* #b1, #b2, #b3, #b4, #b5, #b6 */
{
/* border:0px; */
/* margin-top:2px; */
/* margin-bottom:2px; */
/* position: relative; */
/* height: 15px; */
}

.menu
{
position: relative;
/* left:16px; top:0px; */
left:-41px; top:0px;
z-index: 3;
}

Für Experten, so hoff ich, sicher nur eine Kleinigkeit, das in den Griff zu bekommen.

Mike_R

#262321

effeff

Ostfriesland,
03.03.2011, 23:02:04
(editiert von effeff, 03.03.2011, 23:03:43)

@ Mike_R

Link-images überdecken sich - warum? (ed)

Sorry,

aber eine Modeagentur, die es nicht für nötig hält, Groß- und Kleinschreibung zu beachten, werde ich auch nicht beachten...

[Edit]Und die Interpunktion nicht zu vergessen...[/Edit]

--
Gruß,

ff

Möge TUX mit dir sein!

#262322

Mike_R zur Homepage von Mike_R

Rosenheim,
03.03.2011, 23:23:24

@ effeff

Link-images überdecken sich - warum?

> Sorry,
> aber eine Modeagentur, die es nicht für nötig hält, Groß- und
> Kleinschreibung zu beachten, werde ich auch nicht beachten...
[Edit]Und die Interpunktion nicht zu vergessen...[/Edit]

Hi effeff,
hab ja volles Verständnis für Deine Entrüstung, aber damit \"strafst\" Du nur mich. Ich hab mit dieser Agentur selber nichts am Hut. (Wusste vor dem Auftrag gar nicht, dass es die überhaupt gibt!) Die permanente Keinschreibung ist natürlich Absicht - soll wohl besonders modern (!) aussehen - nehm ich mal an - auf alle Fälle setz ich nur die Vorgaben um und denk mir: Na ja, wenn man das so haben will!
Ich wäre trotzdem froh, wenn ich von Dir oder wer das sonst noch liest, einen kleinen Tipp bekäme.

Mike_R

#262346

effeff

Ostfriesland,
04.03.2011, 09:06:54

@ Mike_R

Link-images überdecken sich - warum?

> Hi effeff,
> hab ja volles Verständnis für Deine Entrüstung, aber damit \"strafst\" Du
> nur mich. Ich hab mit dieser Agentur selber nichts am Hut.

Au, weih!

Nein, dich wollte ich damit gar nicht meinen! Sorry!  :schaem:

--
Gruß,

ff

Möge TUX mit dir sein!

#262324

MudGuard zur Homepage von MudGuard

München,
03.03.2011, 23:54:28

@ Mike_R

Link-images überdecken sich - warum?

> /* #b1, #b2, #b3, #b4, #b5, #b6 */
> {
> /* border:0px; */
> /* margin-top:2px; */
> /* margin-bottom:2px; */
> /* position: relative; */
> /* height: 15px; */
> }

Hiervon bleibt
{
}
übrig - der Rest ist ja zeilenweise auskommentiert.

Kommentier das mal komplett aus, nicht unvollständig zeilenweise.
Ich weiß nicht, was so ein selektorloses leeres Ruleset für Nebenwirkungen hat ...

--
[image]
MudGuard
O-o-ostern

#262366

Mike_R zur Homepage von Mike_R

Rosenheim,
04.03.2011, 13:38:30

@ MudGuard

Link-images überdecken sich - warum?

Hi MudGuard,

vielen Dank für Deine Antwort.

> Kommentier das mal komplett aus, nicht unvollständig zeilenweise.
> Ich weiß nicht, was so ein selektorloses leeres Ruleset für Nebenwirkungen
> hat ...

Hab ich nun komplett auskommentiert, was aber überhaupt nichts veränderte. Hätte mich auch gewundert, wenn zwei leere Klammern irgendeine Auswirkung gehabt hätten. Aber Du hast trotzdem recht: Man weiß ja nie! Ich probier ja nun weiter alles (un)mögliche, bis jetzt ohne Erfolg.

Mike_R

#262328

schnake

Marburg,
04.03.2011, 02:07:40
(editiert von schnake, 04.03.2011, 02:51:22)

@ Mike_R

Link-images überdecken sich - warum? (ed)

Moin

> Das neue Problem: Ich komm nicht drauf, warum der Agentur-Link
> (...), wenn man auf \'Drykorn\' klickt, überlagert wird und somit ein dickerer
> schwarzer Rand entsteht. Beide Dateien (die weiße sowie die leicht angegraute haben
> dieselbe Höhe - 15px - wie man im Browser auch feststellen kann.

In welchem Browser hast du denn das Problem?  :kratz:
Also im FF 3.6.13 unter Ubuntu wird kein schwarzer Streifen dicker. Die schwarzen Abstände sind alle gleich. Was etwas störend wirkt ist der weiße Unterstrich unter der grauen Linkgrafik.

Mache gleich nochmal ein FF Update vielleicht sehe ich dann dein Problem :)
Notfalls wäre auch ein Screenshot hilfreich ... sorry.
Fehlersuche im CSS mache ich eigentlich ganz gerne. *fg*

EDIT: Auch mit dem 3.6.14er sehe ich nix auffälliges. Oder wurde dein Prob schon durch Muddys Hinweis behoben? :)

lg schnake

--
"Wenn die Welt von Frauen regiert würde, hätten wir keine Kriege, nur erbitterte Verhandlungen alle 28 Tage." Robin Williams [RIP]


"Wenn der Teufel machtlos ist, schickt er seine Frau." [ukrainisches Sprichwort]

#262369

Mike_R zur Homepage von Mike_R

Rosenheim,
04.03.2011, 14:25:15

@ schnake

Link-images überdecken sich - warum?

Hi schnake,

vielen Dank für Deine Antwort.
Hab jetzt eben den 3.614 (vorher 613) heruntergeladen, was aber keine Änderung mit sich brachte. Hier nun der screeenshot:

[image]

Uploaded with ImageShack.us

Obwohl der grau hinterlegte \'Drykorn-Text\' exakt die gleiche Pixelhöhe hat erscheint unten ein kleiner weißer Rand, der im Grafik-Programm (Photoimpact) nicht sichtbar ist und der \'Agentur\'-Link erscheint unten abgeschnitten (oder überlagert) - ich weiß nicht. Im IE8 sind diese Unterschiede sogar noch deutlicher sichtbar. Aber irgendwie müsste das doch in den Griff zu kriegen sein.

Mike_R

#262371

d-fens

Bonn,
04.03.2011, 14:55:41

@ Mike_R

Link-images überdecken sich - warum?

> Hi schnake,
>
> vielen Dank für Deine Antwort.
> Hab jetzt eben den 3.614 (vorher 613) heruntergeladen, was aber keine
> Änderung mit sich brachte. Hier nun der screeenshot:
>
> [image]
>
> Uploaded with ImageShack.us
>
> Obwohl der grau hinterlegte \'Drykorn-Text\' exakt die gleiche Pixelhöhe hat
> erscheint unten ein kleiner weißer Rand, der im Grafik-Programm
> (Photoimpact) nicht sichtbar ist und der \'Agentur\'-Link erscheint unten
> abgeschnitten (oder überlagert) - ich weiß nicht. Im IE8 sind diese
> Unterschiede sogar noch deutlicher sichtbar. Aber irgendwie müsste das doch
> in den Griff zu kriegen sein.

Interessanterweise habe ich das in der Firma unter XP nachstellen können. Hier zuhause unter Win7 64bit tritt das Phänomen nicht auf, beide Male mit FF 3.6.14 und IE 8 getestet.

Du könntest mal einen Rechtsklick auf den zusätzlichen Balken machen und das Element mit Firebug untersuchen. Vielleicht wird da irgendwas vererbt.

--
„Tu es oder tu es nicht! Es gibt kein Versuchen.“
(Jedi-Meister Yoda)

#262381

Mike_R zur Homepage von Mike_R

Rosenheim,
04.03.2011, 15:54:14

@ d-fens

Link-images überdecken sich - warum?

> Du könntest mal einen Rechtsklick auf den zusätzlichen Balken machen und
> das Element mit Firebug untersuchen. Vielleicht wird da irgendwas vererbt.

Vielen Dank, dass Du Dich mit meinem Problem beschäftigst. Das mit firebug hatte ich versucht, aber das hat mir auch nicht weiter geholfen. (Muss mich vielleicht auch erst noch in diese neue Materie etwas einarbeiten?) Inzwischen ist das Problem allerdings behoben (siehe meine Antwort um 15:01!)

Mike_R

#262382

Johann [Gast]

04.03.2011, 16:01:04
(editiert von Johann, 04.03.2011, 16:03:50)

@ Mike_R

Link-images überdecken sich - warum? (ed)

> Das mit firebug
> hatte ich versucht, aber das hat mir auch nicht weiter geholfen.

Versuchen gibt es nicht. Entweder man tut etwas oder nicht.
Mit Firebug muss man sich kontinuierlich beschäftigen, sonst lernt man nicht den Umgang damit, das ist völlig richtig.
Das erste mal hab ich auch gedacht: \"Hä? Wat soll ich denn damit?\" Aber das lag nicht am Firebug, sondern daran, dass ich zu dem Zeitpunkt nicht wusste, was ich überhaupt mache.
Firebug hat mir geholfen an vielen Stellen zu Blicken, wie Zusammenhänge überhaupt sind.
Punkt zwei: Validatoren
Nur valider Quelltext befähigt Dich, systematisch Fehler einzugrenzen. Deswegen ist ein Validator in Kombination mit einem Debugger für Entwickler _unerlässlich_.

Gruß,
Johann

#262387

Mike_R zur Homepage von Mike_R

Rosenheim,
04.03.2011, 16:34:06

@ Johann

Link-images überdecken sich - warum?

> > Das mit firebug
> > hatte ich versucht, aber das hat mir auch nicht weiter geholfen.
>
> Versuchen gibt es nicht. Entweder man tut etwas oder nicht.
> Mit Firebug muss man sich kontinuierlich beschäftigen, sonst lernt man
> nicht den Umgang damit, das ist völlig richtig.
> Das erste mal hab ich auch gedacht: \"Hä? Wat soll ich denn damit?\" Aber
> das lag nicht am Firebug, sondern daran, dass ich zu dem Zeitpunkt nicht
> wusste, was ich überhaupt mache.
Das tröstet mich, denn mein 1. Eindruck war auch so. Wenn ich wieder etwas \'mehr Luft\' habe, versuch ich ein tutorial dazu aufzutreiben (damit lernt man meiner Meinung nach immer am einfachsten). Kannst Du mir da etwas empfehlen oder weißt Du einen anderen Tipp (im firebug selber hab ich jetzt keine Hilfe-Buttons entdeckt!)?

Mike_R

#262389

Johann [Gast]

04.03.2011, 16:46:46
(editiert von Johann, 04.03.2011, 16:55:38)

@ Mike_R

Link-images überdecken sich - warum? (ed)

> Kannst Du mir da etwas
> empfehlen oder weißt Du einen anderen Tipp (im firebug selber hab ich jetzt
> keine Hilfe-Buttons entdeckt!)?

Firebug ist eine Art \"Messgerät\". Du musst schon wissen, was Du \"messen\" willst.
In dem konkreten Fall wäre es: Inspect Styles. Manchmal will man sich das Layout/Bemassungen betrachten, dann ist es: Inspect Layout.
Ich würde den mal in diversen Webseiten aufmachen und benutzen. Dann siehste schon, was der macht. Interessant ist in dessen Werkzeugleiste der Button \"Inspect/Inspizieren\". Damit kannst Du live im Dokument Bereiche suchen und einblenden.
Hier eins der ersten Suchergebnisse bei Google nach eingabe von \"firebug tutorial\".

Gruß,
Johann

#262397

Johann [Gast]

04.03.2011, 17:08:44

@ Johann

Nachtrag

Dem Fazit auf Seite 4 des verlinkten Tuorials schliesse ich mich voll und ganz an.

#262398

Mike_R zur Homepage von Mike_R

Rosenheim,
04.03.2011, 17:49:02

@ Johann

Nachtrag

Nochmal vielen Dank für den Link-Tip und Deine große Hilfsbereitschaft insgesamt.

Mike_R

#262373

Mike_R zur Homepage von Mike_R

Rosenheim,
04.03.2011, 15:01:25

@ Mike_R

Link-images überdecken sich - warum?

Hi - alle meine Tippgeber,

Entwarnung! Hab mein Problem (ehrlich gesagt mehr durch Zufall) gelöst - versteh aber nach wie vor nicht, warum das die Ursache war. Hab nämlich, weil da die Abstände oben und unten auch nicht mehr so recht passten, die beiden gestrichelten Linien statt als \'class\' in 2 \'id\'s umgewandelt und damit war plötzlich auch mein \'Link-Abstands-Problem\' behoben. Zum Glück - muss ich sagen - haben diese Linien auch Probleme bereitet, sonst wär ich nie drauf gekommen, dass sie für all das andere die Ursache sein könnten.
Nochmal allen Hilfe-Gebern ein herzliches Dankeschön. Vielleicht taucht ja auch bald ein neues Problem auf???

Mike_R

#262374

Johann [Gast]

04.03.2011, 15:08:15

@ Mike_R

Link-images überdecken sich - warum?

> sonst wär ich
> nie drauf gekommen, dass sie für all das andere die Ursache sein könnten.

Das war auch nicht die Ursache, sondern die Hintergrundfarbe der id \"menuAktivLink\" die vorher #ffffff war und nun nicht mehr.
Dafür hast Du jetzt zwei Fehler im Logo eingebaut.

#262379

Mike_R zur Homepage von Mike_R

Rosenheim,
04.03.2011, 15:44:13

@ Johann

Link-images überdecken sich - warum?

Hi Johann,
danke für Deine Antwort.
> Das war auch nicht die Ursache, sondern die Hintergrundfarbe der id
> \"menuAktivLink\" die vorher #ffffff war und nun nicht mehr.
Aber an dieser Farbe hab ich nie was geändert und die steht noch wie vor so im stylesheet:

#menuAktivLink
{
position: relative;
left: 0px; top:0px;
color: #000;
background-color: #fff;
z-index: 3;
}

Oder meinst Du das irgendwie anders?

> Dafür hast Du jetzt zwei Fehler im Logo eingebaut.
Wäre Dir dankbar, wenn Du mir sagen könntest, was das für Fehler sind.

Mike_R

#262380

Johann [Gast]

04.03.2011, 15:48:00
(editiert von Johann, 04.03.2011, 15:49:56)

@ Mike_R

Link-images überdecken sich - warum? (ed)

> Oder meinst Du das irgendwie anders?
>
> > Dafür hast Du jetzt zwei Fehler im Logo eingebaut.
> Wäre Dir dankbar, wenn Du mir sagen könntest, was das für Fehler sind.

Ich meine, dass Du endlich mal Firebug und HTML-Tidy benutzen könntest, wie schon vor Monaten durch mehrere Stellen angeregt.
Beim inspizieren der Styles mit Firebug siehst Du, _was_ genau CSS-technisch Sache ist und mit HTML-Tidy würdest Du auf Anhieb sehen, dass Dir im img-Tag des Logos bei zwei Parametern jeweils ein Anführungszeichen fehlt.
Besonders systematisch wirkt mir Deine Art der Fehlersuche nicht gerade (i.e. \"Ich kommentier mal einfach wild aus und warte ob sich was tut...\").

Gruß,
Johann

#262385

Mike_R zur Homepage von Mike_R

Rosenheim,
04.03.2011, 16:20:42

@ Johann

Link-images überdecken sich - warum?

Erst mal wieder danke für Deine Geduld!
> Ich meine, dass Du endlich mal Firebug und HTML-Tidy benutzen könntest,
> wie schon vor Monaten durch mehrere Stellen angeregt.
Ersteres hab ich mir heruntergeladen, muss mich aber erst noch in diese neue Materie etwas einarbeiten. HTML-Tidy ist mir scheinbar als Tipp entgangen; werd ich mir aber auch gleich besorgen.
> ...Dir im img-Tag des Logos bei zwei Parametern jeweils ein Anführungszeichen
> fehlt.
Jetzt muss ich trotzdem noch mal (dumm?) nachfragen: Hab alle html-Dateien durchgecheckt, aber nirgends beim logo-div fehlende Anführungszeichen entdeckt. Bitte also noch mal um eine konkrete Stellenabgabe.

> Besonders systematisch wirkt mir Deine Art der Fehlersuche nicht gerade
> (i.e. \"Ich kommentier mal einfach wild aus und warte ob sich was tut...\").
Da geb ich Dir schon recht; zunächst versuch ich\'s schon systematisch - soweit das bei meinem teilweise \'löchrigen\' Wissen möglich ist, aber wenn ich dann irgendwann zu genervt bin, geht die Systematik verloren.
Aber jetzt noch mal zu der von Dir angesprochenen Hintergrundfarbe (sorry, wenn ich hartnäckig bin!): An der kann\'s doch nicht gelegen haben oder?

Mike_R

#262388

Johann [Gast]

04.03.2011, 16:42:05

@ Mike_R

Link-images überdecken sich - warum?

> Da geb ich Dir schon recht; zunächst versuch ich\'s schon systematisch -
> soweit das bei meinem teilweise \'löchrigen\' Wissen möglich ist, aber wenn
> ich dann irgendwann zu genervt bin, geht die Systematik verloren.

Und genau deswegen habe ich Dir schon vor Wochen empfohlen, Dir diesbezüglich Systematik anzutrainieren. Allem voran Firebug und ein Validator.
Dazu gehört selbstverständlich, dass man sich das nicht nur installiert, sondern sich einarbeitet und testet.
Wenn ein Elektroniker nicht weiss wie er ein Messgerät handhaben muss, dann ist das mehr als schlecht für die Fehlerfindung.
Und ohne Plan ist auch schlecht Schaltungen bauen, nur zum Vergleich.

> Aber jetzt noch mal zu der von Dir angesprochenen Hintergrundfarbe (sorry,
> wenn ich hartnäckig bin!): An der kann\'s doch nicht gelegen haben oder?

Aber sicher. Ich hab\'s im Firebug ja gesehen, lokal entfernt und der Fehler war temporär weg.

> Jetzt muss ich trotzdem noch mal (dumm?) nachfragen: Hab alle html-Dateien
> durchgecheckt, aber nirgends beim logo-div fehlende Anführungszeichen
> entdeckt. Bitte also noch mal um eine konkrete Stellenabgabe.

[image]

Gruß,
Johann

#262330

_panograf_ [Gast]

04.03.2011, 05:43:06

@ Mike_R

schonmal FireBug benutzt? (kT)

[ kein Text ]
Ansicht:   
Auf unserer Web-Seite werden Cookies eingesetzt, um diverse Funktionalitäten zu gewährleisten. Hier erfährst du alles zum Datenschutz