Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann

Die Foren sind geschlossen. Für Fragen zu MR, NOF & mehr steht Tommys Forum zur Verfügung. Ich danke für die langjährige Treue und Mitarbeit! Eure Administratorin.

CSS-Spielereien mit Mobirise
#1
(schöne) Spielerei mit CSS:
Durch unterschiedliche Padding-Werte kann man den Button-Text in der Navi animieren!
www.svtheuma.de

.png  2017-04-21.png (Größe: 80,51 KB / Downloads: 74)

Code:
#exCollapsingNavbar a:link,
{
background-image: url(http://www.zaschaller-plauen.de/SVTMob/elemente/button_default30.png);
background-repeat: no-repeat;    
width: 90px; height:30px; padding: 0px 0px;margin-left:10px;
color: #FFFFFF;
font: bold 20px;
letter-spacing: 0pt;    
}
#exCollapsingNavbar a:visited
{  
background: url(http://www.zaschaller-plauen.de/SVTMob/elemente/button_active30.png);
background-repeat: no-repeat;    
width: 90px; height:30px; padding: 0px 0px;margin-left:10px;
color: #ffffff;
letter-spacing: 0pt;    
}
#exCollapsingNavbar a:active
{  
background: url(http://www.zaschaller-plauen.de/SVTMob/elemente/button_active30.png);
background-repeat: no-repeat;    
width: 90px; height:30px; padding: 0px 0px;margin-left:10px;
color: #FF9900;
letter-spacing: 0pt;    
}

#exCollapsingNavbar a:hover
{  
background: url(http://www.zaschaller-plauen.de/SVTMob/elemente/button_hover30.png);
background-repeat: no-repeat;    
width: 90px; height:30px; padding: 4px 30px;margin-left:10px;
color: #FF9900;
letter-spacing: 0pt;    
}

Bei a:hover padding von 4px und 30px anstatt von 0px und 0px!
Alle Beiträge dieses Benutzers finden
#2
thumbs up thumbs up thumbs up
Alle Beiträge dieses Benutzers finden
#3
Moin,

am Handy (Slick-Navi) geht das aber so nicht Sad
Alle Beiträge dieses Benutzers finden
#4
Soll es auch nicht! Am Handy kommt die "kollabierte Navigation" (heißt wohl Hamburger Menü). Es würde ja auch kein Rollover (hover) geben. Am Handy ist das dann nun wirklich zu viel Spielerei.
Alle Beiträge dieses Benutzers finden
#5
Hallo Martin,

so meinte ich das nicht. Es sieht am Handy jetzt gerade sehr fehlerhaft aus - siehe Screenshot:


.png  Navi-Hover.png (Größe: 176,52 KB / Downloads: 35)
Alle Beiträge dieses Benutzers finden
#6
Oh, verdammt, gestern ging es bei mir. Ich habe aber noch einiges verändert und dann nicht mehr geschaut. Danke!
Alle Beiträge dieses Benutzers finden
#7
Vergessen den Cache zu löschen! Da ist die Höhe falsch eingestellt. Bekomme ich nicht hin! Wie kann mach die Schrifthöhe einstellen (über CSS, Linienhöhe)? Oder kann man über Media Queries diese Navigationsformatierung ausschalten?
Alle Beiträge dieses Benutzers finden
#8
Linienhöhe halbiert:
{line-height: 50%;} thumbs up
Alle Beiträge dieses Benutzers finden
#9
Grundsätzlich brauchst Du natürlich in den CSS-Editor nur die Elemente schreiben, die Du auch ändern möchtest (also nicht die gesamten CSS-Anweisungen wiederholen).

Wenn Du das nur für größere Bildschirme gelten lassen wolltest, dann könntest Du eine Media-Anweisung hinzufügen, wie z.B. 768px und größer:

Code:
@media screen and (min-width: 768px) {
  css-klasse {
       Selektor: blablabla;
  }
}

Hier habe ich z.B. lediglich die Links in diesem einen Block unterstrichen und bei Hover in Blau geändert:

http://www.mobirise-tutorials.com/Eigene...#Textanker

Code:
a {
   text-decoration: underline;
}
a:hover {
   text-decoration: underline;
   color: blue;
}



.jpg  CSS-im-Block.JPG (Größe: 144,5 KB / Downloads: 32)
Alle Beiträge dieses Benutzers finden
#10
Na, ich will für kleine Monitore die CSS-Anweisungen für die Navi ausschalten bzw. nur für größer Monitore einschalten. Was kommt dann für Selector:blablabla? Ich habe "#exCollapsingNavbar a:link #exCollapsingNavbar a:visited usw." eingegeben. Funktioniert aber nicht.
Code:
@media screen and (min-width: 768px) {
 css-klasse {
      Selektor: blablabla;
 }
}
Alle Beiträge dieses Benutzers finden
#11
Du solltest dort die gleich CSS einfügen können wie die, die Du ja jetzt auch schon verwendest. Nur sollte diese dann erst ab einer Geräte-Bildschirmbreite von 768px wirken.
Alle Beiträge dieses Benutzers finden
#12
Habe ich gemacht, wird aber nicht umgesetzt:

.png  2017-04-22.png (Größe: 81,73 KB / Downloads: 29)

Die schließende } habe ich nicht vergessen!
Alle Beiträge dieses Benutzers finden
#13
Funktioniert jetzt. Ich musste nur die Daten vom Server löschen und neu hochladen. thumbs up
Alle Beiträge dieses Benutzers finden


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Umstieg auf Mobirise 5 nof15us 67 5.168 16.12.2020, 10:53
Letzter Beitrag: Tommy Herrmann
  NOF 12 und Mobirise kombinieren Petergun 14 854 11.12.2020, 07:50
Letzter Beitrag: Petergun
  Mobirise-MP3 Player einbinden. Soundcloud? Thomas Saake 11 769 08.12.2020, 17:16
Letzter Beitrag: Thomas Saake
  Mobirise-Drop Down Menü verschiedene Farben Thomas Saake 8 536 08.12.2020, 14:42
Letzter Beitrag: Thomas Saake
  Mobirise-Text unter Logo Menüleiste Thomas Saake 14 800 03.12.2020, 17:22
Letzter Beitrag: Thomas Saake
  Mobirise-Noch ein Problem mit Hamburger Menü auf Handy Thomas Saake 23 1.169 30.11.2020, 16:54
Letzter Beitrag: Thomas Saake
  Mobirise-PopUp Modal Text statt Kreuz zum schließen Thomas Saake 3 407 26.11.2020, 15:43
Letzter Beitrag: Thomas Saake
  Mobirise-Timeline Abstand verringern Thomas Saake 2 309 26.11.2020, 14:10
Letzter Beitrag: Thomas Saake
  Position Icons - Mobirise 5.2.0. Markus78 9 626 16.11.2020, 19:03
Letzter Beitrag: Tommy Herrmann
  Mobirise-Abstand Google Maps Thomas Saake 11 847 08.11.2020, 22:25
Letzter Beitrag: AndyNeu



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!