[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:
(2775 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:
(2766 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:
(2757 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:
(2753 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:
(2751 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:
(2731 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:
(2721 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:
(2718 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:
(2712 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:
(2705 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:
(2704 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:
(2677 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

Aktuell

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
05.02.2021 - 05.11.2021

Digicomp Academy AG, Limmatstrasse 50, 8005 Zürich
Freitag, 05. Feb. 2021, 13.00 Uhr - Freitag, 05. Nov. 2021, 17.00 Uhr

Lehrgang

Bilden Sie sich zum zertifizierten Publishing-Multimedia-Profi aus. Neben Fotografie und Video befassen Sie sich mit der Medienproduktion, digitalen Publikationen und dem Webdesign für Desktop- und mobile Endgeräte.

Preis: CHF 10'500.-
Dauer: 30 Tage (ca. 210 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PM

Veranstaltungen
01.03.2021 - 05.03.2021

Persönlichkeitsentwicklung

Online
Montag, 01. März 2021, 00.17 Uhr - Freitag, 05. März 2021, 00.18 Uhr

Webinar

Personal Power Coaching - Um was geht es? ​ Potenzialentfaltung: Potenzial entdecken und entfalten Talente entdecken: Deine Talente und Fähigkeiten erkennen und loslegen Gewohnheiten: schlechte Gewohnheiten durch Positive ersetzen Selbstbewusstsein stärken: Dein Bewusstsein stärken Eigendynamik entwickeln: Mehr Erfolg durch Eigenverantwortung & Disziplin Ängste kontrollieren: Ängste als Antrieb nutzen Entscheidungen treffen: Mit mehr Mut an die Sache ran! Lebensenergie steigern: Deine Lebensenergie steigern und aufrechterhalten Ziele erreichen: Ziele setzen und übertreffen! Motivationssteigerung: Mehr Erfolg durch Selbstmotivation Selbstvertrauen: Selbstvertrauen auf- und ausbauen

Details:
https://www.snfa.ch/swiss-personal-power-birolisik

Ja

Organisator: Birol Isik

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

https://www.snfa.ch/swiss-personal-power-birolisik

Neuste Foreneinträge


Scriptphänomen alle 16 Steps

Alternative Acrobat Pro

Affinity Designer

Objekte in Texten lassen sich nicht mehr mit Maus auswählen, nurnoch als Text mit Cursor

Welches Grafiktablett wofür?

Affinity Publisher 1.9

Optimierung doc2pdf-withPresets.jsx

Layout / Bildauflösung druckfertig anlegen

Affinity Photo

Open CL-Berschleunigung
medienjobs