#1

W. Reske

Grünschnabel  (20 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tel-shop.de

Hallo an alle,

nachdem ich nun dank Volker und Sven die Navigationsleiste erfolgreich am oberen Bildschirmrand fixieren konnte, frage ich nun nochmals in die Runde, ob es möglich währe einen Rahmen bzw. eine "Unterlinie mit Schattierung" in das Design zu integrieren.

Beachtet bitte, ich nutze Siquando Shop - nicht Web Pro!!

Momentan ist es etwas unglücklich gelöst, siehe Beispiel:

3.jpg

weiss auf weiss, ohne Trennlinie 😕


So wäre es schon deutlich besser:

4.jpg

mit grauem Unterstrich / Rahmen


Dieser grauen Rahmen findet sich auch um die Popups, wenn man z.B. auf die Warengruppen in der Navigationsleiste klickt. Beispiel hier:

5.jpg

Grauer Rahmen


So etwas währe natürlich absolut TOP:
(wie bei siquando.de, oder wie auf Volkers Website)

6.jpg

Unterstrich mit Schattierung

7.jpg

 


Ich danke euch schon mal vielmals vorab für eure Vorschläge und Ideen!


LG, Waldemar

#2

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Ich weiß, was Du meinst. Aber das ist auch nicht mal eben gemacht, insbesondere dann nicht, wenn man wie ich das Design gar nicht besitzt. Die Tipps, die ich Dir HIER gegeben habe, beruhten einzig auf CSS-Code Trickserei direkt im Browser via Rechtsklick -> "Element untersuchen".

Ich empfehle Dir, Dich mit Deinem Anliegen direkt an einen der Experten zu wenden. Die Möglichkeiten liegen entweder in CSS-Schatteneffekten oder in der Intgrierung eines transparenten Schatten-PNGs (wie im Design Bootstrap 3 für Pro Web von Thomas, welches auf meiner Website zum Einsatz kommt).


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#3

W. Reske

Grünschnabel  (20 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tel-shop.de

Danke für die Erläuterungen Volker,

 

gut .. Mein Problem ist, dass ich die Programmiersprache durch reines durchlesen nicht verstehe.

Modifizieren kann ich, das ist kein Problem .. Wenn man mir sagt wo was hinkommt.

 

Gut dann lassen wir das einfach mit den Schattierungen. Wie sieht es denn mit einer simplen Umrandung, bzw. Unterstrich für die Navigationsleiste aus, meinst Du man kann da was machen?

Mit der Umrandung meine ich so wie hier:

5.jpg

 

damit das passiert:

4.jpg

 

statt bisher so:

3.jpg

 

 

Besten Dank im Voraus!

VG, Waldemar


Dieser Beitrag wurde bereits 2 mal bearbeitet, zuletzt von »W.Reske« (15.05.2016, 15:09)
#4

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Dann ergänze doch nav einen border-bottom ;-)

 Klick um zu vergrößern


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#5

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Ersetze in der style_design.css unter nav { mal

background-color: #ffffff;

durch

background-image: linear-gradient(#ffffff, #eeeeee);

Ist nur 'ne Idee. ;-) Das #eeeeee paßt Du bei Bedarf noch wunschgemäß an.


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#6

W. Reske

Grünschnabel  (20 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tel-shop.de

Ja gerne gerne Marjorie!


Wenn ich nur wüsste was und wo ich reinschreiben soll .. Wie gesagt, ich habe NULL Plan vom programmieren .. :-((

Ich brauche da im Prinzip eine dünne Linie unter der Nav. leiste in der Farbe #DDDDDD, das ist alles .. 😉

Besten Dank im Voraus!

VG, Waldemar

#7

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

#8

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Das hat doch mit programmieren rein gar nix zu tun. Das sind reine HTML bzw CSS-Kenntnisse die man erwarten darf wenn man etwas ändern will. Diese Kenntnisse kannst du zB HIER oder HIER lernen. Wir müßen ja nicht DEINE Arbeit machen.

1
2
3
4
nav {
	background-color: #ffffff;
	border-bottom: 1px solid #DDDDDD;
}

 


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#9

W. Reske

Grünschnabel  (20 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tel-shop.de

Danke danke Volker,

gefällt mir sehr !!


Wie nennt sich eigentlich dieser Farbverlauf?

 

8.jpg

 

So etwas bräuchte ich da eher .. Also nicht das "linear-gradient"


Besten Dank im Voraus!


VG, Waldemar


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »W.Reske« (15.05.2016, 15:32)
#10

W. Reske

Grünschnabel  (20 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tel-shop.de

Zitat von: W2D Fan

Das hat doch mit programmieren rein gar nix zu tun. Das sind reine HTML bzw CSS-Kenntnisse die man erwarten darf wenn man etwas ändern will. Diese Kenntnisse kannst du zB HIER oder HIER lernen. Wir müßen ja nicht DEINE Arbeit machen.

1
2
3
4
nav {
	background-color: #ffffff;
	border-bottom: 1px solid #DDDDDD;
}

 

Da hast Du leider Recht .. 😕
Sorry, dass meine Kenntnisse hierbei unzureichend sind .. Tut mir leid

Ich bin aber auch für jede Hilfe wirklich dankbar und versuche auch die Zusammenhänge zu verstehen, aber das gelingt mir noch eben nicht so gut ..

VG, Waldemar

#11

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Dann ergänze doch noch einen border-top mit ähnlichen Angaben wie in der border-bottom und erhöhe LANGSAM die px bis es dir gefällt.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#12

W. Reske

Grünschnabel  (20 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tel-shop.de

@Marjorie, guter TIPP !! Danke ..

Ich verstehe was Du meinst ..

 

VG, Waldemar

#13

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Als letztes für heute. ;-)

nav {
	...
	background-image: linear-gradient(#dddddd, #eeeeee 20%, #ffffff 50%, #eeeeee 80%, #dddddd);
	...
}

"..." steht wie gehabt für die bereits bestehenden Angaben. Mit den Farben und %-Werten kannst Du natürlich beliebig spielen.


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#14

W. Reske

Grünschnabel  (20 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tel-shop.de

Genau so Volker,

DANKE !! Das Thema kann geschlossen werden, hier haben wir nun auch alles durch ..


Danke an Alle für die wertvolle Unterstützung und die genialen Tipps!!

LG, Waldemar

Schöne Pfingsten euch allen!

710 Aufrufe | 14 Beiträge