1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

suchmaschinen und navigation mit bildern

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von fourty2, 26.11.08.

  1. fourty2

    fourty2 Jonagold

    Dabei seit:
    03.08.08
    Beiträge:
    23
    ich steh gerade vor folgendem problem...
    eigentlich wollte ich eine navigation aus png's und text machen dessen größe sich je nach inhalt dynamisch anpasst.
    dank IE und dessen nicht vorhandenen unterstützng für transparente png's muss ich mir aber was anderes überlegen.
    unabhängig von irgendwelchen schlatern für den IE interessiert mich in dem zusammenhang aber prinzipiell das vorgehen von suchmaschinen.

    das google zB navigationen aus bildern, oder bilder generell nicht auslesen kann ist ja bekannt. aber den 'alt'-text schon. was also wenn ich eine navigation aus bildern mache und in den alt-text zB 'navigation home' reinschreibe?
    hilft mir das? können damit suchmaschinen was anfangen und verfolgen den link auch weiter?
     
  2. MasterofDistres

    MasterofDistres Kleiner Weinapfel

    Dabei seit:
    07.12.06
    Beiträge:
    1.139
    Ich würde einfach folgendes machen:

    Code:
    <div id="navigation"> 
    				<ul> 
    					<li id="current" class="blog"><a href="http://link.de" title="Blog">Blog</a></li> 
    					<li class="about"><a href="/about" title="About">Über</a></li> 
    				</ul> 
    			</div> <!-- End NAVIGATION --> 
    sprich zuerst eine normale Liste als Navigation erstellen + normale Textlinks (für jeden eine eigene Klasse) Danach kann man das ganze via CSS so anpassen, dass der Text sozusagen "verschwindet" und die Links jeweils mit einem eigenen Hintergrundbild (die Link-Grafik) versehen:

    (musste bei der Anpassung des Containers, der Liste und der Elemente etwas rumtricksen, um mein Design auch umsetzen zu können ;) )
    Code:
    /* Allgemeines Anpassen des Containers */
    #navigation {
    	background: url(images/navi-bg.png) repeat-x;
    	height: 51px;
    	margin: 0px 0px 0 115px;
    	width: 680px;
    	padding: 1px 0px;
    	color: #3b2F25;
    }
    
    /* Anpassen der Liste (Breite, Höhe etc.) */ 
    #navigation ul {
    	height: 48px;
    	margin: 1px auto;
    	padding: 0px 0 0 57px;
    	font-size: 24px;
    	border: 1px solid white;
    	border-top: none;
    	border-bottom: none;
    }
    
    /* "Ausblenden" des Textes, weitere Anpassungen */
    #navigation li,
    #navigation a,
    #navigation a:link,
    #navigation a:visited {
    	display: block;
    	float: left;
    	font-size: 1px;
    	text-indent: -9999px;
    	height: 49px;
    	border: none;
    }
    
    hier die Anpassungen für jeden einzelnen Link (eigenes Hintergrundbild normal, hover ...)
    Code:
    /* Blog */
    #navigation .blog,
    #navigation .blog a { width: 130px }
    #navigation .blog a:link,
    #navigation .blog a:visited {
    	background: url(images/navi-blog.png) no-repeat 0 0px}
    #navigation .blog a:hover {
    	background: url(images/navi-blog.png) no-repeat 0 -49px}
    #navigation #current.blog a:link,
    #navigation #current.blog a:visited {
    	background: url(images/navi-blog.png) no-repeat 0 -98px}
     
  3. fourty2

    fourty2 Jonagold

    Dabei seit:
    03.08.08
    Beiträge:
    23
    an die möglichkeit hatte ich auch schon gedacht. einfach textlinks und grafik darüberlegen.

    dennoch würde mich interessieren wie suchmaschinen mit grafischer navigation und einem alt-text umgehen.

    aber danke für deine inspiration :)
     
  4. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    Soweit ich weiß wird der Alt-Text als Link-Text eingestuft.
    Code:
    <a href="blog.html"><img src="bild.jpg" alt="Blog" /></a>
    entspricht also
    Code:
     <a href="blog.html">Blog</a>
    Daher sollten die Links ganz normal verfolgt werden.
     

Diese Seite empfehlen