Wieder eine "exotische" CSS Frage.

[Gast] Foren Web allgemein HTML und CSS / Stylesheets Wieder eine "exotische" CSS Frage.

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

Dynamic35de

Beiträge gesamt:

28. Nov 2006, 12:28
Beitrag # 1 von 12
Bewertung:
(2968 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Nachdem mir Sabine bei meiner letzten Frage so toll geholfen hat, möchte ich noch einmal um Hilfe bitten.

Ich habe die Aufgabe, ein Navigationsmenue zu erstellen. Diese Navigation besteht aus Grafiken, die ich über CSS als Background eingebunden habe. Zwecks besserer Suchmaschinentauglichkeit möchte ich jedoch die darüberliegenden Textlinks unsichtbar machen. Solange der Text sichtbar ist, funktioniert alles. Doch sobald ich den Text auf unsichtbar stelle, ist keine Nav möglich.

Jeden einzelnen Textlink mit Hintergrundgrafik habe ich in ein separates Div gelegt. Das Problem ist nämlich, dass vorher nur Grafiken als Links benutzt wurden und der Rest der Seite extrem suchmaschinenfeindlich aufgebaut wurde. Meine Aufgabe besteht nun darin, das Ranking zu verbessern. Darum gehe ich hier ein recht komplizierten Weg. Also bitte nicht wundern.

Hier noch einmal die Struktur:

<div id="bestellung_nav1">
<div id="bestellung_nav1"><h2 id="software"><span> software</span></h2></div>
<div id="bestellung_nav2"><h2 id="software"><span> hardware</span></h2></div>
<div id="bestellung_nav3"><h2 id="software"><span>monitor</span></h2></div>
<div id="bestellung_nav4"><h2 id="software"><span> Kassen</span></h2></div>
<div id="bestellung_nav5"><h2 id="software"><span> Kassenrollen</span></h2></div>
<div id="bestellung_nav6"><h2 id="software"><span> bueromaterial</span></h2></div>
</div>

#registrierkassen_nav1
{ width:630px;
height:29px;
background-image:url(../Bilder/monitor1.gif);
}

#bestellung_nav1
{
height:30px;
width:61px;
float:right;
background-image:url(../Bilder/monitor2.gif);
background-color:inherit;
background-repeat:no-repeat;
text-align: center;

}

// alle weiteren bestellung_nav1 sind identisch //

h2#software
{
font-size:6px;
font-style:normal;
font-weight:100;
font-family: Arial, Helvetica, sans-serif;
line-height: 0px;
text-align: center;
vertical-align: middle;
word-spacing: 10px;
visibility:hidden;
}

(Dieser Beitrag wurde von Dynamic35de am 28. Nov 2006, 12:38 geändert)

Wieder eine "exotische" CSS Frage.

FSt

Beiträge gesamt: 1965

28. Nov 2006, 12:56
Beitrag # 2 von 12
Beitrag ID: #264129
Bewertung:
(2959 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo

Code

<div id="bestellung_nav1"> 
<div id="bestellung_nav1"><h2 id="software"><span> software</span></h2></div>

Du verwendest die id-"bestellung_nav1" zweimal, das ist nicht erlaubt.

Ebenso die id="software". Eine mehrfache Nutzung ist nicht erlaubt. Verwande stattdessen class="software" und ändere auch #software in .software

Zu Deiner Frage:Versuch mal display: block;

Code

#bestellung_nav1, #bestellung_nav2, usw. 
{display: block; 
}

Ich habe noch nie ausprobiert, die Texte nicht angezeigen zu lassen, das div drumherum aber schon. Geh gleich noch einen Schritt weiter und integriere auch gleich die linnks, sonst arbeitest Du doppelt, wenn zusätzlich noch das a-tag auftaucht ...
also:

Code

<div id="bestellung_nav1"><h2 id="software"><a href="#">software</a></h2></div>

Gruss
Martin

als Antwort auf: [#264125]
(Dieser Beitrag wurde von FSt am 28. Nov 2006, 13:06 geändert)

Wieder eine "exotische" CSS Frage.

FSt

Beiträge gesamt: 1965

28. Nov 2006, 13:16
Beitrag # 3 von 12
Beitrag ID: #264137
Bewertung:
(2950 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo

Wie ichs mir gedacht habe, es ist nicht ganz so einfach:

Code

<html> 
 
<head> 
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
<style type="text/css" media="screen"> 
		 
<!--#registrierkassen_nav1  
 { background-image: url(../Bilder/monitor1.gif); width: 630px; height: 29px } 
	 
#bestellung_nav1, #bestellung_nav2, #bestellung_nav3, #bestellung_nav4, #bestellung_nav5, #bestellung_nav6 
 { background: url(../Bilder/monitor2.gif) #f00 no-repeat; text-align: center; float: right; width: 61px; height: 30px display:block;} 
 
.software 
 { font-style: normal; font-weight: 100; font-size: 6px; line-height: 0px; font-family: Arial, Helvetica, sans-serif; text-align: center; word-spacing: 10px; vertical-align: middle; visibility: hidden;} 
--></style> 
 
</head> 
<body bgcolor="#ffffff"> 
<div id="#registrierkassen_nav1 ">  
<div id="bestellung_nav1"><h2 class="software"><a href="#">Software</a></h2></div> 
<div id="bestellung_nav2"><h2 class="software"><a href="#">Hardware</a></h2></div> 
<div id="bestellung_nav3"><h2 class="software"><a href="#">Monitor</a></h2></div> 
<div id="bestellung_nav4"><h2 class="software"><a href="#">Kassen</a></h2></div> 
<div id="bestellung_nav5"><h2 class="software"><a href="#">Kassenrollen</a></h2></div> 
<div id="bestellung_nav6"><h2 class="software"><a href="#">B&uuml;romaterial</a></h2></div> 
</div> 
 
</body> 
 
</html>

Gruss
Martin

als Antwort auf: [#264129]

Wieder eine "exotische" CSS Frage.

Dynamic35de

Beiträge gesamt:

28. Nov 2006, 13:29
Beitrag # 4 von 12
Beitrag ID: #264138
Bewertung:
(2946 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Martin

super abgekürtzt das ganze. Bei mir steht ca. 2/3 mehr. Werde es umgehend testen und logisch nachvollziehen. Werde dann berichten, wie es funktioniert hat, vielen Dank

Gruß Dy

als Antwort auf: [#264137]

Wieder eine "exotische" CSS Frage.

SabineP

Beiträge gesamt: 7586

28. Nov 2006, 13:29
Beitrag # 5 von 12
Beitrag ID: #264139
Bewertung:
(2944 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Dynamic,

>> Zwecks besserer Suchmaschinentauglichkeit
>> möchte ich jedoch die darüberliegenden Textlinks unsichtbar machen.

Was haben denn unsichtbare Links mit besserer Suchmaschinentauglichkeit zu tun?
Wie kommst Du auf diese "exotische" Idee?

Unsichtbare Texte vermindern die Qualität Deiner Webseite.
Nicht sichtbare Texte sollte man unbedingt vermeiden.
Ansonnsten riskierst Du, daß Google Dich ganz aus dem Index entfernt.

http://www.google.com/...swer.py?answer=35769
Zitat:"Avoid hidden text or hidden links. ...
If a site doesn't meet our quality guidelines, it may be blocked from the index."

>> <div id="bestellung_nav1"><h2 id="software"><span> software</span></h2></div>

Soll das eine Navigation sein?
Da fehlen die Links, also ein a-Tag mit gefülltem href-Attribut.

Gruß Sabine

als Antwort auf: [#264125]
(Dieser Beitrag wurde von SabineP am 28. Nov 2006, 13:45 geändert)

Wieder eine "exotische" CSS Frage.

Dynamic35de

Beiträge gesamt:

28. Nov 2006, 15:00
Beitrag # 6 von 12
Beitrag ID: #264165
Bewertung:
(2924 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Martin

ne, funktioniert leider nicht, da ja hinter jedem div ein anderes Bild liegt.

Ist es möglich, ein div mit einem link auszustatten? Also so, dass ein Hintergrundbild (ein optisch simulierter Button), und der div selbst mit einem Link ausgestattet wird? Es sind ja 6 kleine div's, die rechts mit float ausgestattet sind. Die einzelnen Bezeichnungen werden noch unterschiedlich sein. also heißen nicht alle "bestellung 1"
Der unsichtbare Text ist nur für die Suchmaschinen. Den <span> bereich in den einzelnen div's habe ich die h2 Überschriften mit visibility:hidden; unsichtbar gemacht und wollte die als Links nehmen.

als Antwort auf: [#264138]
(Dieser Beitrag wurde von Dynamic35de am 28. Nov 2006, 15:05 geändert)

Wieder eine "exotische" CSS Frage.

SabineP

Beiträge gesamt: 7586

28. Nov 2006, 15:34
Beitrag # 7 von 12
Beitrag ID: #264170
Bewertung:
(2914 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

>> Ist es möglich, ein div mit einem link auszustatten?

Wozu?
In Deinem Fall reicht es, wenn Du die Bilder verlinkst.
Warum legst Du DIVs mit Hintergrundbildern an?

Gruß Sabine

als Antwort auf: [#264165]

Wieder eine "exotische" CSS Frage.

ganesh

Beiträge gesamt: 1981

28. Nov 2006, 16:10
Beitrag # 8 von 12
Beitrag ID: #264188
Bewertung:
(2911 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

ja, du hast da einen fundamentalen Denkfehler. Du kannst doch einfach folg. machen:

<div class="blah"><a href="abc.html" title="News"><img src="blah.gif" alt="News" width="150" height="20"></div>

Das "sehen" die Suchmaschinen dann schon, keine Angst...

als Antwort auf: [#264125]

Wieder eine "exotische" CSS Frage.

Dynamic35de

Beiträge gesamt:

28. Nov 2006, 16:41
Beitrag # 9 von 12
Beitrag ID: #264193
Bewertung:
(2905 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

@Sabine , Ganesh

also, ich habe einen Suchmaschinenscheck gemacht, da wurden die Bilder als Problem dargestellt.

Aber ich probier gleich mal den tipp aus. Der Auftrag ist, die Grafiken so zu belassen wie sie sind, also als "Buttons/Links" mitzuverwenden. Leider besteht die Hauptnavi genauso wie die Subnavi aus Grafik. Darum wollte ich unsichtbare Wörter in den divs platzieren.

als Antwort auf: [#264188]

Wieder eine "exotische" CSS Frage.

SabineP

Beiträge gesamt: 7586

28. Nov 2006, 16:59
Beitrag # 10 von 12
Beitrag ID: #264200
Bewertung:
(2898 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Ganesh hat noch das schließende </a> vergessen:

<div class="blah"><a href="abc.html" title="News"><img src="blah.gif" alt="News" width="150" height="20"></a></div>

>> also, ich habe einen Suchmaschinenscheck gemacht, da wurden die Bilder als Problem dargestellt.

Das ist Unsinn, Du mußt nur zu jedem Bild ein alt-Attribut hinzufügen (siehe oben).

>> Darum wollte ich unsichtbare Wörter

Genau das wäre ein Problem, denn damit fliegst Du aus dem Index der Suchmaschine.

Gruß Sabine

als Antwort auf: [#264193]

Wieder eine "exotische" CSS Frage.

ganesh

Beiträge gesamt: 1981

28. Nov 2006, 16:59
Beitrag # 11 von 12
Beitrag ID: #264201
Bewertung:
(2897 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Ein Link zum ganzen Dokument wäre natürlich schon nützlich, damit man das ganze im Kontext sehen könnte...

als Antwort auf: [#264193]

Wieder eine "exotische" CSS Frage.

Dynamic35de

Beiträge gesamt:

30. Nov 2006, 12:56
Beitrag # 12 von 12
Beitrag ID: #264604
Bewertung:
(2870 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

leider ist das ganze noch nicht online. Melde mich kurz mit PN bei euch

als Antwort auf: [#264201]

Aktuell

PDF / Print

MadeToTag mit neuer Vorgaben-Funktion und umfangreichen Verbesserungen

| 04.04.2024

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen

17.04.2024

Und es geht doch: Automatisierung im Großformatdruck!

Online
Mittwoch, 17. Apr. 2024, 10.00 - 10.30 Uhr

Webinar

Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Günther Business Solutions und Impressed treten in einem Webinar den Gegenbeweis an. Experten beider Unternehmen zeigen, wie Großformatdrucker vom Einsatz zweier bewährter Lösungen profitieren können: • von advanter print+sign von Günther Business Solutions, dem ERP-System für den Großformatdruck, dass alle Phasen der Wertschöpfung im Large Format Printing abdeckt • von Impressed Workflow Server, der smarten PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt Über die Kombination beider Lösungen können Großformatdrucker ihre Prozesse mit modernen Workflows Schritt für Schritt automatisieren – und so zügig deutliche Zeit- und Kosteneinsparungen realisieren. Das Webinar sollten Sie sich nicht entgehen lassen – damit Sie keine Effizienzpotenziale mehr liegen lassen. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Organisator: Impressed / Günther Business Solutions

https://www.impressed.de/schulung.php?c=sDetail&sid=326

Und es geht doch: Automatisierung im Großformatdruck!

Weitere Events

Neuste Foreneinträge

Lizenzfrage – Windows-Schriften in Linux einsetzen

Eizo Monitorkalibrierung auf Windows

Fußnoten zu Endnoten konvertieren

Mehrfach geschichtete und übereinander gelagerte PDFs bereinigen

Platzierte Vektorgrafiken skalieren

SMS ab Server senden? Wie geht das?

WebShare Verzeichnisse im SharePoint erstellen

Buchsrabensteuerung

Klickbare Links zu Seiten in einem Buch aus extern erzeugtem Index erstellen

Gleiche Ebene mit untersch. Fonts in Text + autom. IHVZ: Probleme mit Kursivierung

Weitere Stellenangebote