Tutorial HTML, CSS u. PHP - Forum

[Bladz]

Hallo liebe Leut
Ich will auf meiner Seite ein weiterleitendes Bild haben, quasi als Intro. Zentrieren an sich ist nicht das Problem, das kriege ich hin. Ich würde mir nur wünschen, dass es, unabhängig von Bildgröße und Bildschirmauflösung immer auch den gleichen Abstand von oben und unten hat. Gibts dafür einen Befehl? Ich weiß dass es für Hintergrundbilder möglich ist, aber mein Bild soll verlinkt sein, Hintergrund fällt also flach
Hier ein Beispiel, wie ich es mir vorstelle.
Das hier kann ich schon:


und das hier will ich gern (habs mit Bildbearbeitung gemacht xD)


Vielen Dank, ich hoff es war verständlich LG
Bladz

[lauras]

Du kannst auch durchaus einen Link zu einem Block-Element machen und ihm feste Höhe und Breite geben und dem dann ein Hintergrundbild geben ;)
Im Sinne der Semantik und der Barrierefreiheit allerdings bitte in den Link ienen Text setzen und den rausschieben (z.B. per span).

Grüße
Laura

[Bladz]

hehe hallo Laura
Danke für die schnelle Antwort, aber ich befürchte, ich komm nicht mit ehrlich gesagt bin ich der totale Neueinsteiger könntest du mir das vielleicht nochmal als code hinschreiben bitte? xD Ich hab grad nur Bahnhof gelesen^^

LG und Danke

Bladz

[Flow Snow]

Ich will auf meiner Seite ein weiterleitendes Bild haben, quasi als Intro.

Tust du dem Internet bitte einen Gefallen und lässt das? Das ist absolut unnötig und deprimiert viele BEsucher die auf deine Seite wollen, also absolut überflüssig und hinderlich, in Fernsehsprache ausgedrückt ist es einfach Bullshit

Lösbar wäre es so:

Code: Alles auswählen

  <a href="#">
    <span>Zur Startseite</span> <!-- Dieser Teil ist z.B. fuer Suchmaschinen wichtig
                                     und wird einfach per CSS versteckt. -->
    <img src="verz/img.png" alt="Zur Startseite" title="Zur Startseite" /> <!-- alt= falls das Bild nicht angezeigt werden kann
                                                                    title= erscheint wenn du mit der Maus &uuml;ber
                                                                    das Bild gehst  -->
  </a>


Code: Alles auswählen

* {
  margin: 0;  /* Abstände für alle Elemente auf 0 setzen */
  padding: 0;
}

html, body {
  height: 100%; /* damit der Link auch 100% hoch wird */
}

a {
  display: block; /* damit das Bild komplett zentriert wird */
  height: 100%;
  text-decoration: none; /* um die unterstreichung im FF zu verbergen */
}

a span {
  position: relative;
  left: -999em;
}

a img {
  position: absolute; /* damit wir per left/top positionieren können */
  display: block;
  width: 150px; /* breite des Bildes (wichtig!!) */
  height: 200px; /* höhe des Bildes (wichtig!!) */

  /* hier wird es wichtig: */
  top: 50%;
  margin-top: -100px; /* erst 50% nach unten schieben und dann
                         um die Hälfte der Höhe des Bildes wieder nach oben */
  left: 50%;
  margin-left: -50px; /* das selbe mit links */
}


[Bladz]

Ich erspare das dem Internet :> Es ist für mich und eine zweite Person, mehr nicht, es bleibt offline ;) Ist nur n kleiner Gag^^ danke trotzdem, ich probiers gleich aus^^

[Flow Snow]

Okay ich bin beruhigt

Gerne doch, bei Fragen weißt du bestimmt was du tun kannst ;)

[Bladz]

Woaar ich hab zwar keine Ahnung was du da geschrieben hast, aber wenn ichs in mein Stylesheet kopiere und die Pixelzahlen anpasse klappts Ich danke dir vielmals

*CLOSED* (jaaa ich weiß nicht meine Aufgabe xD)

[Flow Snow]

Wir schließen hier auch nicht, vielleicht hat später noch mal jemand eine Frage, was genau hast du denn nicht verstanden, also wo ist Klärungsbedarf?

[lauras]

Die andere Variante - braucht man oft z.B. auch bei Navigationen, die über Bilder funktionieren, wäre das ganze über ein Hintergrundbild zu lösen, indem man den img-Tag rausnimmt.
Somit hast du lediglich folgende Konstruktion):

Code: Alles auswählen

<a><span>Linktext</span></a>

Um es mal zu verkürzen.
Anschließend einfach dein Hintergrundbild definieren und positionieren (du sagtest ja, du wüsstest wie das ginge).
Anschließend den Text durch Ansprache des span-Tags wie oben im Code rausschieben.

Ist für mich persönlich eine einfachere Lösung und eventuell etwas einfacherer zu verstehen

LG

[Flow Snow]

So ich entschuldige mich für den unnötigen Mehrcode, so geht es natürlich auch und ist "besser":

Code: Alles auswählen

  <a href="#">
    <span>Zur Startseite</span>
  </a>


Code: Alles auswählen

  * {
    margin: 0;
    padding: 0;
  }

  a {
    position: absolute;
    display: block;
    width: 100px; /* Breite des Bildes */
    height: 200px; /* Höhe des Bildes */
    background: transparent url(link/zumBild.jpg) top left no-repeat;

    top: 50%;
    margin-top: -100px; /* -(halbe Höhe des Bildes) */
    left: 50%;
    margin-left: -50px; /* -(halbe Breite des Bildes) */

    text-decoration: none;
  }

  a span {
    position: relative;
    left: -999em;
  }


Natürlich müssen bei margin-top: ; und margin-left: ; noch Innenabstände berücksichtigt werden, sprich ein mal den Innenabstand (padding: ;) drauf rechnen!