Suche im Forum:
Suchen


Autor Nachricht
Beitrag22.08.2014 um 11:30 (UTC)    
Titel: Überschriften formatieren

Hallo,

ich würde aus SEO-Gründen gerne einige Texte zu Überschriften formatieren (h2, h3 etc.). Dies klappt zwar auch, nur leider treten bei mir zwei Probleme auf:

1. Um die h2-Überschrift, besser gesagt um die ganze Zeile (ganze Seitenbreite), wird ein farbiger Rahmen gelegt, welcher nicht so schön aussieht.

2. Wenn ich die Überschriften aus meinem Aufklapp-Menü formatiere, rutschen diese zudem unter das Plus/Minus-Zeichen. Bei normaler Formatierung sind die Überschriften, wie es ja auch sein soll, neben dem Plus/Minus-Zeichen.

Wäre es möglich, diese unerwünschten Formatierungen zu entfernen?

Vielen Dank schonmal

Beste Grüße
www.qr-entertainment.de
Beitrag23.08.2014 um 15:34 (UTC)    
Titel:

Hallo qr-entertainment,

im CSS-Code des Designs ist standardmäßig folgender Code enthalten:
Zitat:
h2, h2 a {
font-size: 22px;
font-weight:normal;
box-shadow: 0 0 5px #dfd5c5;
padding-left: 5px;
margin:10px 0;
border-radius:5px;
}

Das orangene bewirkt diesen Rahmen um die h2-Überschrift.

Wenn du nun eine "normale" h2-Überschrift haben möchtest, musst du die Eigenschaften überschreiben.
Das geht am besten, indem du den "normalen" Überschriften eine sogenannte Klasse gibst:
Zitat:
<h2 class="abc">Die Überschrift, die anders dargestellt werden soll</h2>

Das grüne ist der Name der Klasse. Jede Überschrift mit dieser Klasse wird genau gleich formatiert.

Mit diesem Code legst du das Aussehen der Überschrift(en) mit der Klasse abc fest, er kommt in die Style-Tags bei "Text über dem
Zitat:
<style type="text/css"> <!--
h2.abc {
font-size:medium;
font-weight:normal;
font-style:italic;
font-weight:bold;

box-shadow:none;
padding:0;
margin:0;
border-radius:0px;

display:inline;
}
//-->

Das grüne ist wieder der Klassenname, das blaue entfernt den Rahmen.
Mit der violetten Angabe löst du das Problem, dass die Überschrift unter das "Plus" rutscht. Die übrigen Zeilen neutralisieren die Standard-Anweisungen und sorgen dafür, dass die Überschrift genauso dargestellt wird wie der Text jetzt.
Bei mir lässt sich jetzt kein optischer Unterschied mehr feststellen Wink

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beitrag25.08.2014 um 10:49 (UTC)    
Titel: Perfekt!

Hallo Transint,

vielen Dank für deine ausführliche Nachricht - das klappt so wunderbar...

Ein Problem diesbezüglich hätte ich jedoch noch:

In der mobilen Darstellung wirkt die Schrift nun sehr riesig. Dies liegt wohl an der Formatierung. Wäre es möglich die Schrift in der mobilen Version wieder etwas verkleinert darzustellen?

Und ein weiteres Problem, das jedoch auch vorher schon, haben wir mit dem Aufklappmenü in der mobilen Version:
Und zwar werden hier 2 Plus/Minuszeichen, anstatt eines angezeigt. Wäre es möglich dort ein Plus/Minuszeichen zu entfernen?

Vielen Dank nochmal!

Beste Grüße
www.qr-entertainment.de
Beitrag25.08.2014 um 10:58 (UTC)    
Titel: Eine Sache noch...

Mir ist zudem gerade noch aufgefallen, dass auf der mobilen Version die formatierten Überschriften nun unter den Pluszeichen sind. Könnte man das auch noch beheben?

Danke und beste Grüße!
Beitrag25.08.2014 um 15:05 (UTC)    
Titel:

Hallo,

den CSS-Code für die Überschrift kann ich auf deiner mobilen Seite nicht finden.
Ich würde daher empfehlen, den CSS-Code nochmal bei "Text über dem Inhalt einer Unterseite" einzufügen. Dann müsste es eigentlich funktionieren.

Was die beiden Pluszeichen angeht ist die Ursache einfach: Der Code für das Pluszeichen steht auf der mobilen Seite jeweils zweimal drin:
Zitat:
<span class="symbols" style="background-image: url(http://img.webme.com/pic/q/qr-entertainment/a3.png);"></span>
<span class="symbols" style="background-image: url(http://img.webme.com/pic/q/qr-entertainment/a3.png);"></span>

Davon müsstest du eine Zeile löschen.

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon


Zuletzt bearbeitet von transint am 25.08.2014, 16:06, insgesamt einmal bearbeitet
Beitrag01.09.2014 um 15:13 (UTC)    
Titel: ok, aber wie?

Hallo TransInt,

nochmals vielen Dank! Klappt auch alles, aber wie lösche ich eine Zeile bei einer mobilen Seite? Sorry, aber ich weiß es leider nicht...

Beste Grüße
www.qr-entertainment.de


Zuletzt bearbeitet von qr-entertainment am 01.09.2014, 16:16, insgesamt einmal bearbeitet
Beitrag03.09.2014 um 09:18 (UTC)    
Titel:

Ich habe mir das nochmal angesehen und dabei bemerkt, dass diese Plus- und Minuszeichen per JavaScript erzeugt werden.
Das heißt, eine der Zeilen zu löschen geht nicht.

Auf der mobilen Seite werden aus mir völlig unklaren Gründen zwei dieser Pluszeichen eingefügt.
(Und zwar nicht nur auf Mobilgeräten, sondern auch bei mir auf dem PC Shocked )
Es muss also auf der mobilen Seite irgendetwas anders sein als auf der normalen. Ich habe da ein JavaScript im Verdacht, das deinem irgendwie in die Quere kommt.

Füge mal testweise ganz oben auf der Seite (so, dass du es einfach wieder löschen kannst) folgendes ein:
Zitat:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://theme.webme.com/designs/mobile/js/mobile.min.js"></script>

Wenn dieses Phänomen dann auch auf der "normalen" Seite auftritt, lösche eine der Zeilen wieder. So kann man (hoffentlich) das "schuldige" Script finden und hätte dann wenigstens die Ursache.

Wenn es das nicht sein sollte, bleibt immer noch das Ausblenden des einen Elementes per CSS-Code.

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beitrag03.09.2014 um 12:44 (UTC)    
Titel:

Hi,

ich habe die beiden Zeilen über dem Style eingefügt. Sind beide drin, erscheinen die 2 Plus-Zeichen auch auf dem PC (bei mir). Nimm ich eine Zeile wieder heraus (egal welche), ist alles genau so wie vorher (auf Handy und PC).

Hast du da eine Idee?

Beste Grüße
www.qr-entertainment.de
Beitrag04.09.2014 um 13:18 (UTC)    
Titel:

Das ist das Ergebnis, das ich mir erhofft habe.
Damit ist nämlich klar, dass die beiden Scripte deines stören.

Ich habe auch eine Vermutung, was es genau ist: Du verwendest an mindestens acht Stellen eine Variable namens "o".
Beide Scripte, die du über die Links eingebunden hast, tun das auch.
Mein Vorschlag wäre nun, die Variable umzubenennen, und zwar, wenn es weiterhin nur ein Buchstabe sein soll, bestenfalls in b, g, x oder z. Denn diese kommen in den anderen Scripten soweit ich das sehen konnte nicht vor Wink
Hast du dir das denn selbst geschrieben oder sonst Ahnung von Javascript?

Alternativ könnte man auch mit einem CSS-Code das zweite Pluszeichen ausblenden, aber da weiß ich nicht, ob diese Anweisung mittlerweile jeder (mobile) Browser versteht.

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beitrag08.09.2014 um 15:22 (UTC)    
Titel:

Ne leider nicht... Ich hab die "o" 's in andere Buchstaben abgeändert. Hab hier auch mal 2 Buchstaben verwendet. Wenn ich dann alle gefunden hatte, war wieder alles so wie vorher. Hatte ich nicht alle gefunden, waren alle Pluszeichen weg...

Das Skript hab' ich nicht selber geschrieben und zu großen Teilen hier aus dem Forum.

Wie würde so eine Ausblendung mit CSS denn aussehen?

Vielen Dank nochmal und großen Respekt für deine bisherigen Ideen...

Beste Grüße
www.qr-entertainment.de
Beitrag09.09.2014 um 09:41 (UTC)    
Titel:

Der CSS-Code wäre der folgende, sinnvollerweise eingebaut auf der Seite, auf der er wirken soll:
Zitat:
<style type="text/css"> <!--
#containerul li > span.symbols:nth-of-type(2) {
display: none;
}
//--> </style>

Das kleine Problem an dieser Stelle ist die sogenannte Pseudoklasse nth-of-type, womit nur das zweite Span-Element jedes Listeneintrags ausgeblendet werden soll. Diese Pseudoklassen sind aber noch relativ neu und ich weiß nicht, ob mobile Geräte sie schon voll unterstützen.
Der Internet Explorer tut das zum Vergleich erst ab Version 9 (ab Windows Vista bzw. 7), Firefox und Chrome aber schon ewig, genauso wie Safari.
Du könntest also Glück haben, dass Apple und Google das auch ihren Smartphones beigebracht haben Wink

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon


Zuletzt bearbeitet von transint am 09.09.2014, 10:41, insgesamt einmal bearbeitet
Beitrag09.09.2014 um 11:34 (UTC)    
Titel:

Ja super, das scheint zu funktionieren (zumindest bei meinem iPhone). Auf anderen Smartphones konnte ich es noch nicht testen.

Eine letzte Frage noch: Ist das zweite Plus-Zeichen auf deinem PC denn jetzt auch verschwunden?

Danke

Beste Grüße
www.qr-entertainment.de
Beitrag09.09.2014 um 12:59 (UTC)    
Titel:

mit windows 7 sehe ich jeweils nur 1 pluszeichen.

gruss gringo
______________
Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell

Beitrag09.09.2014 um 13:52 (UTC)    
Titel:

danke für den Tipp Gringo...
Beitrag09.09.2014 um 16:47 (UTC)    
Titel:

Mit Chrome 37 sowie Internet Explorer 9 (beide Windows 7) funktioniert es erwartungsgemäß bestens. Es funktioniert auch mit der vorinstallierten "Internet"-App meines Galaxy S II (Android 4.0.3).
Der Firefox 31 auf meinem PC weigert sich allerdings standhaft, die mobile Webseite überhaupt anzuzeigen, es sollte aber auch dort funktionieren Smile

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de