[GastForen Web allgemein HTML und CSS / Stylesheets Wieder eine "exotische" CSS Frage.

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Wieder eine "exotische" CSS Frage.

Dynamic35de
Beiträge gesamt:

28. Nov 2006, 12:28
Beitrag # 1 von 12
Bewertung:
(2815 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)
X

Wieder eine "exotische" CSS Frage.

FSt
  
Beiträge gesamt: 1961

28. Nov 2006, 12:56
Beitrag # 2 von 12
Beitrag ID: #264129
Bewertung:
(2806 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


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


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: 1961

28. Nov 2006, 13:16
Beitrag # 3 von 12
Beitrag ID: #264137
Bewertung:
(2797 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


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


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:
(2793 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:
(2791 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:
(2771 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:
(2761 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:
(2758 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:
(2752 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:
(2745 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:
(2744 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:
(2717 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]
X

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.

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

Veranstaltungen
21.06.2022

Online
Dienstag, 21. Juni 2022, 10.00 - 10.30 Uhr

Webinar

Viele Druckereien – kleine und große – suchen heute nach Wegen, ihre Effizienz und Produktivität zu steigern. Dabei erkennen sie oft, dass sie sich dringend um die Optimierung, Standardisierung und Automatisierung ihrer Workflows und Prozesse kümmern sollten. In unserer kostenlosen, jeweils ca. 30 minütigen Webinar-Reihe erfahren Sie, wie Sie die Effizienz- und Produktivitätspotenziale Ihrer Druckerei erschließen können – und wie einfach und kostengünstig das sein kann.

kostenlose 3-teilige Webinar-Reihe, 21., 23. und 26. Juni 2022, jeweils 10:00 - 10:30

Ja

Organisator: Impressed GmbH

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://impressed-workflow-server.de/impressed-webinar-reihe-the-big-picture/

Impressed Webinar-Reihe THE BIG PICTURE
Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/