Text zwischen Zwei Bildern ?

[Niklas]

Hallo,

Auf dieser Seite Startseite möchte ich bei der unteren Box (Die mit den Pfeilen rechts und links) zwischen den beiden Pfeilen Text bekommen als Seite 1 2 3 4 5 u.s.w

Nur wen ich Text zwischen die Beiden Bilder schreibe

<a href="videos.html"><img id="pfeil-links" src="../bilder/pfeil-links.png"></a>[COLOR=#ff0000]<p>Hi ich bin ein Text</p>[/COLOR]<a href="videoss.html"><img id="pfeil-rechts" src="../bilder/pfeil-rechts.png"><div style="clear: both;"></div>

Sieht es so aus Startseite

Wie mache ich es richtig ?

Gruß

 

[threadi]

Ändere

<div id="content-v2">
 <a href="videos.html"><img src="http://www.html.de/bilder/pfeil-links.png" id="pfeil-links"></a><a href="videoss.html"><img src="http://www.html.de/bilder/pfeil-rechts.png" id="pfeil-rechts"><div style="clear: both;"></div>
</a>
</div>

zu

<p id="content-v2">
 <a href="videos.html" class="pfeil_links">&nbsp;</a><a href="videoss.html" class="pfeil_rechts">&nbsp;</a>Und füge hier den Text ein.
</p>

und ergänze im CSS:

a.pfeil_links:link, a.pfeil_links:visited, a.pfeil_links:hover, a.pfeil_links:active, a.pfeil_links:focus {
 background-image: url(../bilder/pfeil-links.png);
 background-repeat: no-repeat;
 display: block;
 float: left;
 height: 60px;
 width: 90px;
}
a.pfeil_rechts:link, a.pfeil_rechts:visited, a.pfeil_rechts:hover, a.pfeil_rechts:active, a.pfeil_rechts:focus {
 background-image: url(../bilder/pfeil-links.png);
 background-repeat: no-repeat;
 display: block;
 float: left;
 height: 60px;
 width: 90px;
}
p#content-v2:after {
 content: ".";
 clear: both;
 float: none;
 height: 1px;
 width: 1px;
}

Ungetestet. Ggfs. noch Schriftfarben/-unterstreichungen einstellen.

 

[Niklas]

Erstmal danke für den Code, nur so ganz ist es noch nicht richtig erst waren die beiden Bilder noch zusammen dan habe ich ein bisschen verbessert nur weiter komme ich nicht das derzeitige Problem ist das die Bilder noch nicht in der gelben Box sind sonder einfach dadrüber! Obwohl sie gecleart sind !

Startseite

Gruß

 

[threadi]

Ergänze bei der after-Pseudoklasse noch "display: block;". Hatte ich vergessen.

 

[Niklas]

Vielen Dank dir threadi,

Nur ich verarbeite nicht gerne Scripe die ich nicht mindestens zu 90% verstehe ;) Deswegen habe ich noch ein paar Fragen

Also im Css Script habe ich folgende Fragen,

a.pfeil_links:link, a.pfeil_links:visited, a.pfeil_links:hover, a.pfeil_links:active, a.pfeil_links:focus

Wieso solche komischen langen namen und wieso visited hover active u.s.w ?

p#content-v2:after {
content: ".";

Ich benutze normal immer #content-v2 { deswegen was macht das p davor aus ? Und wieso after ? Und was das content: "." macht weiß ich auch noch nicht !

<p id="content-v2">
<a href="videos.html" class="pfeil_links">[COLOR=#ff0000]&nbsp;[/COLOR]</a><a href="videoss.html" class="pfeil_rechts">[COLOR=#ff0000]&nbsp;[/COLOR]</a>Und füge hier den Text ein.<div style="clear: both;"></div>
</p>

Hier verstehe ich das mit dem   nicht !

Gruß Niklas

 

[threadi]

Wieso solche komischen langen namen und wieso visited hover active u.s.w ?

Weil Du dann sicher sein kannst, dass jeder Browser (selbst der IE6) die Eigenschaften des Links in jedem Zustand einheitlich darstellt. Die Angabe

a { }

die man oft sieht ist zu ungenau und kann bei manchen Browsern zu Abweichungen in der Darstellung führen, wenn diese Browser eigene Standard-Werte für bestimmte Zustände des Links verwenden.

was macht das p davor aus ?

Richtig ist, dass man eine ID nur 1 mal pro Dokument verwenden darf. Man kann jedoch auch eine Webseite bauen auf der eine ID auf mehreren Dokumenten bei unterschiedlichen Elementen vorkommt. In dem Fall kann man hier differenzieren und das Element voranstellen. Außerdem kann man mit dieser Schreibweise ggfs. weitere Definitionen für die ID ohne Element-Angabe überschreiben.

Und wieso after ?

Siehe:
CSS :after Selector

Und was das content: "." macht weiß ich auch noch nicht !

Damit wird einfach nur ein Inhalt hinter dem Element erzwungen, in dem Fall ein . da dieser zusammen mit passenden Farb- und Größenangaben quasi nicht sichtbar ist.

Vorsicht: geht wie gesagt nicht im IE<8.

Hier verstehe ich das mit dem &nbsp; nicht !

Das ist ein geschütztes Leerzeichen wodurch die Browser den Link auch als Link wahrnehmen, obwohl er keinerlei (sichtbare) Inhalte hat.