Navigation verlinken

[Maxi]

Hi zusammen,

um mich in ein neues programm einzuarbeiten habe ich mir mal ein kleines und ganz einfaches Homepage-Design gemacht.
Zu erreichen ist es unter Maximilian Fiacco - maxif.de

Der komplette obere Bereich ist ein Bild.
Nun meine Frage:
Wie kann ich die Wörter, die mal als Links gelten sollen verlinken?
So was hab ich schonmal gesehen, aber ich weiß nich mehr wo...

Vielen Dank schonmal für zahlreiche helfende Antworten.

 

[gruenspan]

Meinst Du HotSpots?

 

[da_loki]

Du machst auf die Wörter welche du verlinken möchtest z.B. mit PHP ein [phpnet]str_replace[/phpnet].
Hier verwendest du dann den Link mit dem Text.

$ausgabe = 'Ich bin eine Ausgabe';

$t = str_replace('Ausgabe','<a href="ausgabe.html">Ausgabe</a>', $ausgabe);

echo $t;

 

[HalloHTML]

meinst du das:

SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps)

 

[gruenspan]

Du machst auf die Wörter welche du verlinken möchtest z.B. mit PHP ein [phpnet]str_replace[/phpnet].
Hier verwendest du dann den Link mit dem Text.

Wie wendest du str_replace auf eine Grafik an? :???:

meinst du das:

wie ich schon sagte...

 

[da_loki]

Ja auf ne Grafik geht das natürlich nicht ;)
Da habe ich zu schnell geschrieben, und zuwenig gelesen ^^

Bei einer Grafik ist natürlich imageMap die Wahl -.-

 

[Maxi]

Mit Wörter verlinken mein ich die, die die Navigation ergeben sollen, also Start, Über, Schule, etc.

meinst du das:

SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps)

Ja ich glaub so was hab ich damit gemeint, ich schau mir das dann Morgen mal an, stell evtl. ne Frage dazu oder sag dir einfach nur, dass es genau das war :mrgreen:


Wichtiger Edit:

Ich seh gerade, dass das design im IE 7 korrekt angezeigt wird, in Firefox hab ich allerdings so blöde Lücken zwischen den einzelnen Bereichen. Wies im IE 6 und Opera aussieht weiß ich nicht, hätte mir da vielleicht jemand ein Screenshot? Wäre nett...
Und was muss ich tun, damit es im allen browsern gleich aussieht wie im Internet explorer 7?

 

[gruenspan]

Ich seh gerade, dass das design im IE 7 korrekt angezeigt wird, in Firefox hab ich allerdings so blöde Lücken zwischen den einzelnen Bereichen. Wies im IE 6 und Opera aussieht weiß ich nicht, hätte mir da vielleicht jemand ein Screenshot? Wäre nett...
Und was muss ich tun, damit es im allen browsern gleich aussieht wie im Internet explorer 7?

Diese Annahme ist nicht ganz richtig. Der IE7 zeigt nicht korrekt an, sondern ignoriert.;)

Korrigiere mal in deiner CSS-Datei folgendes:

div#inhalt p {
margin: 1em 1em 1em;
}

margin: muß 4 Werte haben. (oben, rechts, unten, links)

Und wenn Du schon XHTML im DocType angibst, dann schreib auch welches.(<br> != XHTML). Lass mal nen Validator drüber laufen.

 

[Maxi]

Schau dir mal das Ergebnis vom Validator an:

Result for http://www.maxif.de/try/ - W3C Markup Validator


OK, das vierte 1em füge ich mal ein, schauen wir mal obs dann besser wird...


Edit:
Bringt nichts, aber in der CSS-Datei ist sonst auch kein fehler drinnen:
Result for http://www.maxif.de/try/ - W3C Markup Validator

Was kann ich dann noch machen?

 

[gruenspan]

Also wenn ich deinen Quelltext anschaue (http://www.maxif.de/try/style.css),
hast Du das 4te em nicht eingefügt.
Und Dann schau Dir

div#inhalt p {
margin: 1em 1em 1em;
}

nochmal genau an und überlege was es tut!

 

[Maxi]

Schau mal ganz genau hin, da steht folgendes:

div#inhalt p {
margin: 1em 1em 1em 1em;
}

 

[gruenspan]

Ok, war wohl noch im Cache. Aber zur Frage: Was tut margin? mmh...
Wenn Du das erkennst, hast du das problem gelöst...

 

[gruenspan]

hier mal ein shot von meinem FF :mrgreen:

 

[Maxi]

und warum siehts bei dir anders aus?

Wenn ich margin rausnehme und statt dessen zum Beispiel padding einsetze hab ich die gleichen blöden Lücken...

 

[gruenspan]

Du vertauschst das eine mit dem anderen und beides hat fast das selbe ergebnis. ist doch klar.

1. margin == aussenabstand
2. padding == innenabstand

und dein momentaner margin nach oben sowie unten ist 1em....

... eine größere zaunslatte zum winken hab ich nicht gefunden ;)

 

[Maxi]

OK ich nehms einfach mal kurz ganz raus...

Es sieht bei mir immer noch gleich aus (Cache geleert):

http://maxif.de/try/bild1.png

Nur, dass der Text jetzt ganz links noch über dem Rand dranklebt.

 

[gruenspan]

Ok, ich sehe schon, so kommen wir nicht weiter. Du sollst das padding nicht rausnehmen sonder auf 0 setzen.
Problem ist, das es immer ein standardwert von (glaube ich) 5px für padding und margin gesetzt wird. Du siehst das, wenn du mal eine leere htmlSeite machst und in den body nur eine tabelle mit sichtbarem rahmen setzt. der liegt nie ganz aussen an.
deswegen empfehle ich dir, am anfang jeder CSS immer folgendes zu schreiben:

*{
padding:0;
margin:0;
}

Das setzt abstände aller vorhandenen elemente auf 0.

in deinem fall würde auch gehen:

div#inhalt p {
margin: 0em 1em 0em 1em;
}

 

[Maxi]

Danke, mit diesem letzten trick klappts wunderbar. Sollte nun eigtnlich in allen browsern gleich aussehen (hoffe ich zumindest).

Jetzt werd ich mal das mit dem verlinken versuchen...