Aussehen der Navigation in verkleinerten Darstellungen

  • Seite 1 von 2
07.02.2013 21:05 (zuletzt bearbeitet: 07.02.2013 21:06)
#1 Aussehen der Navigation in verkleinerten Darstellungen
avatar
Mitglied

Hi,

so:



sieht der Kopf- / Navigationsbereich meines Forums aus, wenn er verkleinert dargestellt wird. Den Screenshot habe ich im Speed Dial vom FF gemacht. Genauso sieht es aber auch auf meinem Smartphone aus.

Würde ich auch hier zeigen, wenn ich wüsste wie man Screenshots beim Smartphone macht.

Muss / kann ich da etwas anders einstellen damit dieser Farbblock nicht auftaucht? Oder ist das vielleicht ein Bug? In dem Fall geht die Bitte an die Technik den Thread in die richtige Rubrik zu verschieben. Danke.

Grüßies
Gudrun


 Antworten

 Beitrag melden
08.02.2013 20:42
avatar  Olaf
#2 RE: Aussehen der Navigation in verkleinerten Darstellungen
Ol
Mitglied

Dein Sreenshot hier oben ist mit der jetzigen Anzeige Deines Forums nicht aktuell.Meine Beschreibung bezieht sich auf den jetzigen aktuellen Kopfbereich Deines Forums.
Du hast Deinen Bannerbereich eine minimale Höhe von 370 Pixel per CSS fest eingestellt.Da aber Dein Banner eine Höhe von 304 Pixel hat,bleibt ein freier Bereich als Hinergrund (Dein Farbblock) sichtbar.
Hier Dein Eintrag in der CSS,der für den Farbblock verantwortlich ist:

1
2
3
 
#obere_leiste .usercontent {
min-height: 370px ! important;
}
 


Da dieser Eintrag mit "! important" erzwungen worden ist,hat er vor allen anderen Einträgen oder Änderungen,die mit diesen Eintrag zu tun haben,Vorrang.
Wenn Du an diesen Eintrag noch ran kommst,dann ändere diesen Eintrag so:

1
2
3
4
 
#obere_leiste .usercontent {
min-height: 304px ! important;
}
 
 


Wenn nicht,dann kannst Du es mal mit diesen neuen Eintrag in der CSS Datei versuchen:

1
2
3
4
 
#obere_leiste div .usercontent {
min-height: 304px ! important;
}
 
 



Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
08.02.2013 22:14 (zuletzt bearbeitet: 08.02.2013 22:16)
#3 RE: Aussehen der Navigation in verkleinerten Darstellungen
avatar
Mitglied

Hallo Olaf,

Danke für Deine Tipps. Und Du hattest Recht damit, dass ich den Screenshot noch mit dem alten Hintergrundbild gemacht hatte. Auf das Ergebnis hat das aber keinen Einfluss.

Deine obigen Tipps habe ich ausprobiert. Leider ohne das gewünschte Ergebnis. Egal ob mit oder ohne "div", die Anzeige sieht im verkleinerten Maßstab immer noch so aus:



Das jetzt hochgeladene Foto hat eine Höhe von 380 Px. Im CSS habe ich als min-height 330 Px eingetragen. Trotzdem gibt es (wieder) das obige Ergebnis.

Grüßies
Gudrun


 Antworten

 Beitrag melden
09.02.2013 11:37
avatar  Olaf
#4 RE: Aussehen der Navigation in verkleinerten Darstellungen
Ol
Mitglied

Wie und wo hast Du denn Dein Bannerbild eingesetzt?Da liegt wahrscheinlich der Anzeigefehler.
Auch per CSS ist bei Dir einiges geändert worden.
Der Banner sollte mit im "usercontent" Div-Container liegen,damit sich das Bild mit den Maßen des Hintergrunds (usercontent) anpasst.So sieht es jetzt aber aus,als ob es zwei verschiedene Sachen sind,die so nicht "zusammen arbeiten".

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
09.02.2013 11:53 (zuletzt bearbeitet: 09.02.2013 11:54)
#5 RE: Aussehen der Navigation in verkleinerten Darstellungen
avatar
Mitglied

Hi Olaf,

das Bild (jetzt also die Blumen im Schnee) lade ich immer im Adminbereich:

→ Layout → Bilder & Hintergründe → Global - Hintergrundbild der Kopfzeile

hoch.

Der Forentext (also Windhund ... und etc.) steht im Adminbereich:

→ Layout → Kopf- und Fußzeile → Kopfzeile.

Dort werden auch die Dinge wie weit eingerückt oder mittig platziert usw. gesteuert.

Die Höhe des Bildes habe ich im CSS hinterlegt.

Ich benutze im Prinzip nur die Möglichkeiten, die die Software bietet. Fand ich immer sehr schön, weil schlicht und auch für mich als Laie halbwegs durchschaubar. *grins*

Grüßies
Gudrun


 Antworten

 Beitrag melden
09.02.2013 13:18
#6 RE: Aussehen der Navigation in verkleinerten Darstellungen
avatar
Mitglied

Hallo Gudrun,

also wenn ich auf Dein Portal gehe mit FF, sieht das alles normal aus :)

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business

 Antworten

 Beitrag melden
09.02.2013 13:34
#7 RE: Aussehen der Navigation in verkleinerten Darstellungen
avatar
Mitglied

@Shogun: Klar sieht im "normalen" Internet das Portal okay aus.

Es geht ja auch darum, dass bei verkleinerten Darstellungen (z. B. auf dem Smartphone) dieser Balken / Block oberhalb der Navigation entsteht.

Grüßies
Gudrun


 Antworten

 Beitrag melden
09.02.2013 15:52
#8 RE: Aussehen der Navigation in verkleinerten Darstellungen
avatar
Mitglied

Aha das kann aber keiner riechen. ersichtlich dass das nur mit wie heisst das Ding, Smartphone entsteht, ist nämlich nicht :)

Gestern als ich reingesehen habe, war das Bild nämlich auch mit einen normalen PC, oder wie bei mir Lapi nicht richtig dargestellt.
Vielleicht solltest besser ein Ticket an Xobor schicken, dann helfen sie Dir sicher ;)

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business

 Antworten

 Beitrag melden
09.02.2013 20:23
avatar  Olaf
#9 RE: Aussehen der Navigation in verkleinerten Darstellungen
Ol
Mitglied

Ich habe mal Deinen Banner mit Schriftzug aus Testzwecken in meinem Testforum eingebaut.
Du kannst ja mal schauen,ob er jetzt mit dem Smartphone richtig angezeigt wird.
In FF,IE und Chrome wird er jetzt jedenfalls in 100% Breite und Höhe angezeigt.Ohne Balken!

Wenn alles OK ist,dann bekommst Du den Code dazu.

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
09.02.2013 21:13
#10 RE: Aussehen der Navigation in verkleinerten Darstellungen
avatar
Mitglied

Hallo Olaf,

aaalso im Speed Dial vom FF sieht Dein Testforum so aus:



Auf dem Smartphone sieht es ganz ähnlich aus. Also deutlich besser als bei mir. Nur die (im Screenshot gekennzeichnete) Unterzeile zum Forennamen verdeckt auf demSmartphone die Navigation.

Kann man das noch ändern?

Und übrigens, ganz herzlichen Dank für Deine konstruktiven und hilfreichen Antworten.

Grüßies
Gudrun


 Antworten

 Beitrag melden
09.02.2013 22:22
avatar  Olaf
#11 RE: Aussehen der Navigation in verkleinerten Darstellungen
Ol
Mitglied

So jetzt habe ich den Text etwas verkleinert und die zweite Zeile mehr an die obere Zeile gebracht.

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
09.02.2013 23:47 (zuletzt bearbeitet: 09.02.2013 23:48)
#12 RE: Aussehen der Navigation in verkleinerten Darstellungen
avatar
Mitglied

Jaaaaa

jetzt sieht es prima aus.

Grüßies
Gudrun


 Antworten

 Beitrag melden
10.02.2013 00:32
avatar  Olaf
#13 RE: Aussehen der Navigation in verkleinerten Darstellungen
Ol
Mitglied

Dein Bannerbild hat für die meisten User eine Überbreite,denn nicht jeder hat eine Auflösung von 1600 Pixel in der Breite.
Ein Hintergrundbild,das mit "background-image" in der CSS eingesetzt wurde und Deins wurde so eingesetzt,das lässt sich in älteren Browsern nicht so einfach skalieren.In neueren Browsern berechnet das der Browser mit den CSS3-Zusatzeintrag "background-size:100% auto;" auf jede gewünschte Auflösung am Monitor.Diesen Eintrag hast Du zwar auch schon in Deiner CSS gemacht,wird aber nur von den aktuellen Browsern unterstützt.
Aus diesem Grund mußt Du Dein Bild aus den Eingabefeld "Global > Hintergrundbild der Kopfzeile" wieder entfernen und den folgenen Code in das Eingabefeld bei "Layout→Kopf- & Fußzeile→Kopfzeile" einsetzen.Dabei solltest Du auch Deinen alten Code für die Überschrift dort löschen.Vorher vielleicht sichern,falls Du ihn wieder einsetzen möchtst.

1
2
3
4
5
6
7
 
<div>
<img src="https://files.homepagemodules.de/b561037/a_341_e11fc751.jpg" width="100%">
</div>
<div style="top:20px; left:40px; position:absolute; z-index:200; border:0px; font-family:'Tempus Sans ITC'; font-weight:bolder; text-shadow:black 3px 2px; font-size:600%">
<p>Windhund&nbsp;...&nbsp;und</p>
<span style="font-size:26px;"><p>Forum für die Freunde von Windhunden, Pudeln&nbsp;&nbsp;&&nbsp;&nbsp;Co.</p></span>
</div>
 


Du könntest jetzt auch den CSS Eintrag löschen:

1
2
3
 
#obere_leiste .usercontent {
min-height: 370px ! important;
}
 


Und diesen Code wieder Neu eintragen:

1
2
3
 
.header, .footer {
text-align: center; !important;
}
 



Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
10.02.2013 12:16 (zuletzt bearbeitet: 10.02.2013 12:17)
#14 RE: Aussehen der Navigation in verkleinerten Darstellungen
avatar
Mitglied

Suuuuper!
Olaf, ganz herzlichen Dank. Jetzt sieht das Ganze in Verkleinerungen viiiiiiel besser aus.

Eine Frage habe ich aber noch: Den Abstand zwischen dem Forennamen und dem Untertitel hätte ich gerne ein bißchen größer. Mache ich das mit < br> oder <h ></h > dann wird der Untertitel (in Verkleinerungen) bis weit unterhalb der Navigation geschoben und im normalen Internet sieht der Abstand zu groß und deshalb unharmonisch aus. Ich vermute dass liegt an "top:20px", oder?

Gibt es dafür auch eine Lösung? *ganzliebguck*

Grüßies
Gudrun


 Antworten

 Beitrag melden
10.02.2013 13:02
avatar  Olaf
#15 RE: Aussehen der Navigation in verkleinerten Darstellungen
Ol
Mitglied

Wer sooo lieb guckt,da kann man(n) doch nicht wiederstehen...

Machen wir aus beiden Schriftzügen zwei Frames,dann kannst Du beide Schriftzüge einzeln hinschieben,wo Du sie hinhaben möchtest.
Hier der neue Code für die Eingabe in der "Kopfzeile" (alten Code löschen):

1
2
3
4
5
6
7
8
9
 
<div>
<img style="max-width: 1263px;" src="https://files.homepagemodules.de/b561037/a_341_e11fc751.jpg" width="100%">
</div>
<div style="top:20px; left:40px; position:absolute; z-index:200; border:0px; font-family:'Tempus Sans ITC'; font-weight:bolder; text-shadow:black 3px 2px; font-size:600%">
Windhund&nbsp;...&nbsp;und
</div>
<div style="top:100px; left:40px; position:absolute; z-index:200; border:0px; font-family:'Tempus Sans ITC'; font-weight:bolder; text-shadow:black 3px 2px; font-size:250%">
Forum für die Freunde von Windhunden, Pudeln&nbsp;&nbsp;&&nbsp;&nbsp;Co.
</div>
 


Mit dem unteren Eintrag "top:100px" kannst Du bei Änderung der 100 nun die untere Zeile in der Höhe verschieben,wohin Du sie haben möchtest.

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!