Hilfe bei Style-Frage ...

Hier wird über Freewar-Styles und -Designs geredet. Man kann eigene Styles vorstellen oder Fragen zu den CSS-Styles stellen.
Benutzeravatar
Seant
Feuerwolf
Beiträge: 94
Registriert: 3. Feb 2008, 11:28

Hilfe bei Style-Frage ...

Beitrag von Seant » 22. Jul 2009, 20:15

Ich bin gerade dabei, mir aus verschiedenen Styles was eigenes zusammenzuschnippeln, was mir aber ob mangelnder (oder anders gesagt: nicht vorhandener) css-Kenntnisse einige Probleme bereitet.

Ich hab' jetzt so eine Menüleiste aus einem Style eingebaut, da treten aber folgende Probleme auf:

Bild

Wie man sieht, sind links des Menüs diese dämlichen Schrägstriche :evil: . Die sollen da weg.
Ich glaube auch, durch Probieren herausgefunden zu haben, dass die durch folgende Code-Zeile entstehen:

Code: Alles auswählen

.framemenubg div[align="center"] { position: absolute; top: 0px; left: 0px; text-align: left !important; height: 65px; width: 280px; }
Wenn ich die weglasse, sind die Striche weg, aber die Schrift, die in der Box unten angezeigt wird sitzt nicht mehr mittig :|

Bild

Der gesamte Code für das Menü sieht so aus:

Code: Alles auswählen

/* > Menu-Frame */
.framemenubg { font-size: 1px; background: #FFFFFF; color: #ECEAEA; } 
.framemenubg:before { content: ""; display: block; margin: 43px 0px 0px 80px; color: #FAFAFA; width: 118px; height: 13px; border: 1px solid #222222; background: #FAFAFA; }
.framemenubg a { position: absolute; font-size: 1px; color: #F7F7F7; background-color: #F7F7F7 !important; border: 1px solid #222222; opacity: 0.80; line-height: 200%; white-space: nowrap; } 
.framemenubg a:hover { text-decoration: none; opacity: 1.00; }
.framemenubg a:hover:after { display: block; color: #5E5E5E; font-size: 11px; line-height: 100%; white-space: nowrap; }
.framemenubg div[align="center"] { position: absolute; top: 0px; left: 0px; text-align: left !important; height: 65px; width: 280px; }


/* > > Symbole im Menu-Frame */
.framemenubg a[href*="reload=true"] { left: 8px; top: 3px; width: 23px; height: 31px; background: url(menu1.png) no-repeat 1px 2px; padding-left: 6px; border-right: 0px; }
.framemenubg a[href*="reload=true"]:hover:after { content: "Aktualisieren"; margin: 38px 0px 0px 88px; }
.framemenubg a[href*="statsmap.php"] { left: 38px; top: 3px; width: 29px; height: 31px; background: url(menu2.png) no-repeat 1px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="statsmap.php"]:hover:after { content: "Karte"; margin: 38px 0px 0px 87px; }
.framemenubg a[href*="http://forum.freewar.de/index.php"] { left: 67px; top: 3px; width: 29px; height: 31px; background: url(menu3.png) no-repeat 1px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="http://forum.freewar.de/index.php"]:hover:after { content: "Forum"; margin: 38px 0px 0px 56px; }
.framemenubg a[href*="profil.php"] { left: 96px; top: 3px; width: 29px; height: 31px; background: url(menu4.png) no-repeat 0px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="profil.php"]:hover:after { content: "Einstellungen"; margin: 38px 0px 0px 7px; }
.framemenubg a[href*="action=archive"] { left: 125px; top: 3px; width: 30px; height: 31px; background: url(menu5.png) no-repeat 1px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="action=archive"]:hover:after { content: "Archiv"; margin: 38px 0px 0px -2px; }
.framemenubg a[href*="friends.php"] { left: 155px; top: 3px; width: 29px; height: 31px; background: url(menu6.png) no-repeat 1px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="friends.php"]:hover:after { content: "Freunde"; margin: 38px 0px 0px -37px; }
.framemenubg a[href*="stats.php"] { left: 184px; top: 3px; width: 29px; height: 31px; background: url(menu7.png) no-repeat 1px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="stats.php"]:hover:after { content: "Statistik"; margin: 38px 0px 0px -66px; }
.framemenubg a[href*="support.php"] { left: 213px; top: 3px; width: 29px; height: 31px; background: url(menu8.png) no-repeat 1px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="support.php"]:hover:after { content: "Support"; margin: 38px 0px 0px -95px; }
.framemenubg a[href*="logout.php"] { left: 242px; top: 3px; width: 29px; height: 31px; background: url(menu9.png) no-repeat 1px 2px; border-left: 0px; }
.framemenubg a[href*="logout.php"]:hover:after { content: "Logout"; margin: 38px 0px 0px -121px; }
.framemenubg a[href*="admin.php"] { right: 8px; bottom: 5px; width: 23px; height: 17px; background: url(menu10.png) no-repeat 3px 1px; padding: 0px 3px 1px 0px; -moz-border-radius: 6px; -webkit-border-radius: 6px; opacity: 1.00; }
.framemenubg a[href*="admin.php"]:hover:after { content: "Admin"; margin: 1px 0px 0px -123px; }
.framemenubg a[href*="showallmsgs=1"] { position: static; display: block; border: 0px; color: #ECEAEA !important; width: 10px; margin: 42px 0px 0px -25px; background: transparent !important; opacity: 1.00; }
.framemenubg a[href*="showallmsgs=1"]:hover:after { content: "Neue Nachricht"; display: block; margin-left: 124px; }
.framemenubg a[href*="showallmsgs=1&zeromsg=1"] { position: absolute; left: 8px; bottom: 5px; color: #ECEAEA !important; width: 8px; height: 18px; background: url(menu11.png) no-repeat 3px 1px #F7F7F7 !important; margin-left: 0px; padding: 0px 2px 0px 25px; border: 1px solid #222222; }
.framemenubg a[href*="showallmsgs=1&zeromsg=1"]:before { content: "0"; display: block; color: #2C6C98 !important; font-size: 11px; margin-bottom: 25px; padding: 3px 0px 0px 2px; line-height: 100%; }
.framemenubg a[href*="showallmsgs=1&zeromsg=1"]:hover:after { content: "Keine Nachricht"; margin: -38px 0px 0px 64px; }
.framemenubg blink { position: absolute; left: 8px; bottom: 5px; font-size: 11px; color: #D20000; height: 14px; background: url(menu12.png) no-repeat 3px 1px #F7F7F7; padding: 3px 2px 1px 25px; border: 1px solid #222222; line-height: 100%; text-decoration: blink; }
Könnte mir jemand sagen, wie ich diese dämlichen Schrägstriche eliminieren, aber gleichzeitig die Zentrierung des Textes unten behalten kann?

mfg
Seant
Faulheit: der Hang zur Ruhe ohne vorhergehende Arbeit. - Immanuel Kant

Benutzeravatar
Mheatus
Feuervogel
Beiträge: 4093
Registriert: 23. Jun 2005, 19:27
Wohnort: FFM
Kontaktdaten:

Re: Hilfe bei Style-Frage ...

Beitrag von Mheatus » 22. Jul 2009, 20:34

.framemenubg { color: #ffffff; }

Benutzeravatar
Seant
Feuerwolf
Beiträge: 94
Registriert: 3. Feb 2008, 11:28

Re: Hilfe bei Style-Frage ...

Beitrag von Seant » 22. Jul 2009, 20:42

ähhh ... könntest du mir noch sagen, an welcher Stelle ich das reinschreiben muss? Bzw. welchen Teil des Codes ich da verändern muss?
sry, aber hab' quasi keine Ahnung davon ... fange gerade erst an.
Aber danke schonmal :)
Faulheit: der Hang zur Ruhe ohne vorhergehende Arbeit. - Immanuel Kant

Benutzeravatar
Mheatus
Feuervogel
Beiträge: 4093
Registriert: 23. Jun 2005, 19:27
Wohnort: FFM
Kontaktdaten:

Re: Hilfe bei Style-Frage ...

Beitrag von Mheatus » 22. Jul 2009, 20:46

Code: Alles auswählen

.framemenubg { font-size: 0px; background: #FFFFFF; color: #ffffff; } 
statt

Code: Alles auswählen

.framemenubg { font-size: 1px; background: #FFFFFF; color: #ECEAEA; } 
dann ist es auf jeden Fall weg

Benutzeravatar
Po1son
Zauberer der Bergwiesen
Beiträge: 688
Registriert: 11. Mai 2008, 14:02

Re: Hilfe bei Style-Frage ...

Beitrag von Po1son » 22. Jul 2009, 20:48

du fängst grad mit dem schwierigsten an^^ du kannst ja diverse style´s anschaun was aber wichtig ist kopier es nicht blind *was ich nun einfach annehme* versuch es zu verstehen denn erst dann kannst du es später sinnvoll einsetzen.

Benutzeravatar
Mheatus
Feuervogel
Beiträge: 4093
Registriert: 23. Jun 2005, 19:27
Wohnort: FFM
Kontaktdaten:

Re: Hilfe bei Style-Frage ...

Beitrag von Mheatus » 22. Jul 2009, 20:49

Finde so lernt man es dennoch am schnellsten, Po1son - sich andere Codes angucken und dann mit SelfHtml abgleichen, wozu es genau dient. So kann man HTML oder CSS am schnellsten lernen^^

Benutzeravatar
Seant
Feuerwolf
Beiträge: 94
Registriert: 3. Feb 2008, 11:28

Re: Hilfe bei Style-Frage ...

Beitrag von Seant » 22. Jul 2009, 20:55

Hab' den Code jetzt auf das folgende geändert:

Code: Alles auswählen

/* > Menu-Frame */
.framemenubg { font-size: 0px; background: #FFFFFF; color: #ffffff; }  
.framemenubg:before { content: ""; display: block; margin: 43px 0px 0px 80px; color: #FAFAFA; width: 118px; height: 13px; border: 1px solid #222222; background: #FAFAFA; }
.framemenubg a { position: absolute; font-size: 1px; color: #F7F7F7; background-color: #F7F7F7 !important; border: 1px solid #222222; opacity: 0.80; line-height: 200%; white-space: nowrap; } 
.framemenubg a:hover { text-decoration: none; opacity: 1.00; }
.framemenubg a:hover:after { display: block; color: #5E5E5E; font-size: 11px; line-height: 100%; white-space: nowrap; }
.framemenubg div[align="center"] { position: absolute; top: 0px; left: 0px; text-align: left !important; height: 65px; width: 280px; }


/* > > Symbole im Menu-Frame */
.framemenubg a[href*="reload=true"] { left: 8px; top: 3px; width: 23px; height: 31px; background: url(menu1.png) no-repeat 1px 2px; padding-left: 6px; border-right: 0px; }
.framemenubg a[href*="reload=true"]:hover:after { content: "Aktualisieren"; margin: 38px 0px 0px 88px; }
.framemenubg a[href*="statsmap.php"] { left: 38px; top: 3px; width: 29px; height: 31px; background: url(menu2.png) no-repeat 1px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="statsmap.php"]:hover:after { content: "Karte"; margin: 38px 0px 0px 87px; }
.framemenubg a[href*="http://forum.freewar.de/index.php"] { left: 67px; top: 3px; width: 29px; height: 31px; background: url(menu3.png) no-repeat 1px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="http://forum.freewar.de/index.php"]:hover:after { content: "Forum"; margin: 38px 0px 0px 56px; }
.framemenubg a[href*="profil.php"] { left: 96px; top: 3px; width: 29px; height: 31px; background: url(menu4.png) no-repeat 0px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="profil.php"]:hover:after { content: "Einstellungen"; margin: 38px 0px 0px 7px; }
.framemenubg a[href*="action=archive"] { left: 125px; top: 3px; width: 30px; height: 31px; background: url(menu5.png) no-repeat 1px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="action=archive"]:hover:after { content: "Archiv"; margin: 38px 0px 0px -2px; }
.framemenubg a[href*="friends.php"] { left: 155px; top: 3px; width: 29px; height: 31px; background: url(menu6.png) no-repeat 1px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="friends.php"]:hover:after { content: "Freunde"; margin: 38px 0px 0px -37px; }
.framemenubg a[href*="stats.php"] { left: 184px; top: 3px; width: 29px; height: 31px; background: url(menu7.png) no-repeat 1px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="stats.php"]:hover:after { content: "Statistik"; margin: 38px 0px 0px -66px; }
.framemenubg a[href*="support.php"] { left: 213px; top: 3px; width: 29px; height: 31px; background: url(menu8.png) no-repeat 1px 2px; border-left: 0px; border-right: 0px; }
.framemenubg a[href*="support.php"]:hover:after { content: "Support"; margin: 38px 0px 0px -95px; }
.framemenubg a[href*="logout.php"] { left: 242px; top: 3px; width: 29px; height: 31px; background: url(menu9.png) no-repeat 1px 2px; border-left: 0px; }
.framemenubg a[href*="logout.php"]:hover:after { content: "Logout"; margin: 38px 0px 0px -121px; }
.framemenubg a[href*="admin.php"] { right: 8px; bottom: 5px; width: 23px; height: 17px; background: url(menu10.png) no-repeat 3px 1px; padding: 0px 3px 1px 0px; -moz-border-radius: 6px; -webkit-border-radius: 6px; opacity: 1.00; }
.framemenubg a[href*="admin.php"]:hover:after { content: "Admin"; margin: 1px 0px 0px -123px; }
.framemenubg a[href*="showallmsgs=1"] { position: static; display: block; border: 0px; color: #ECEAEA !important; width: 10px; margin: 42px 0px 0px -25px; background: transparent !important; opacity: 1.00; }
.framemenubg a[href*="showallmsgs=1"]:hover:after { content: "Neue Nachricht"; display: block; margin-left: 124px; }
.framemenubg a[href*="showallmsgs=1&zeromsg=1"] { position: absolute; left: 8px; bottom: 5px; color: #ECEAEA !important; width: 8px; height: 18px; background: url(menu11.png) no-repeat 3px 1px #F7F7F7 !important; margin-left: 0px; padding: 0px 2px 0px 25px; border: 1px solid #222222; }
.framemenubg a[href*="showallmsgs=1&zeromsg=1"]:before { content: "0"; display: block; color: #2C6C98 !important; font-size: 11px; margin-bottom: 25px; padding: 3px 0px 0px 2px; line-height: 100%; }
.framemenubg a[href*="showallmsgs=1&zeromsg=1"]:hover:after { content: "Keine Nachricht"; margin: -38px 0px 0px 64px; }
.framemenubg blink { position: absolute; left: 8px; bottom: 5px; font-size: 11px; color: #D20000; height: 14px; background: url(menu12.png) no-repeat 3px 1px #F7F7F7; padding: 3px 2px 1px 25px; border: 1px solid #222222; line-height: 100%; text-decoration: blink; }
Aber trotzdem sind diese verf ... luchten Schrägstriche da :| . Sie sollen brennen. Was hab' ich falsch gemacht?
Faulheit: der Hang zur Ruhe ohne vorhergehende Arbeit. - Immanuel Kant

Benutzeravatar
Po1son
Zauberer der Bergwiesen
Beiträge: 688
Registriert: 11. Mai 2008, 14:02

Re: Hilfe bei Style-Frage ...

Beitrag von Po1son » 22. Jul 2009, 21:29

.framemenubg div[align="center"] { position: absolute; top: 0px; left: 0px; !important; height: 65px; width: 280px; }

wenn du das Text-align einfach raus lässt?


Mheatus klar lernt man so am besten so hab ich´s auch gelernt ich meinte das eher so:

Für mich sah es so aus als wäre es das komplett erste das er mit css anpackt und da hätt ich gesagt wär´s vielleicht erst praktischer zb. das banner bild auszutauschen und ein paar link´s verschieden zu gestalten, denn der menuframe ist nicht ohne da muss man schon ne weile rumprobieren aber man is froh wenn´s dann so klappt wie man will^^

Benutzeravatar
Seant
Feuerwolf
Beiträge: 94
Registriert: 3. Feb 2008, 11:28

Re: Hilfe bei Style-Frage ...

Beitrag von Seant » 22. Jul 2009, 21:39

Also ich hab's gerade ausprobiert ohne das [align="center"] und die Striche waren leider immernoch vorhanden :cry: .
Wieso entstehen die überhaupt? :shock:
Faulheit: der Hang zur Ruhe ohne vorhergehende Arbeit. - Immanuel Kant

Benutzeravatar
Po1son
Zauberer der Bergwiesen
Beiträge: 688
Registriert: 11. Mai 2008, 14:02

Re: Hilfe bei Style-Frage ...

Beitrag von Po1son » 22. Jul 2009, 21:44

die entstehen nicht die waren schon vorher da^^

Benutzeravatar
Seant
Feuerwolf
Beiträge: 94
Registriert: 3. Feb 2008, 11:28

Re: Hilfe bei Style-Frage ...

Beitrag von Seant » 22. Jul 2009, 21:46

:shock: Wie das?
Und vor allem: Wie mach' ich sie tot? :D
Faulheit: der Hang zur Ruhe ohne vorhergehende Arbeit. - Immanuel Kant

Benutzeravatar
Andi90
großer Laubbär
Beiträge: 3872
Registriert: 27. Aug 2006, 20:59

Re: Hilfe bei Style-Frage ...

Beitrag von Andi90 » 22. Jul 2009, 22:41

Das sind die Überbleibsel der alten Link-Liste. Die Links sind da mit Schrägstrichen abgetrennt. Sieh mal nach, wo du die Links ausgeblendet hast, ob da nicht auch irgendwo Trennzeichen definiert sind und setz die dann auf "none" oder "color: #ffffff".

Benutzeravatar
Seant
Feuerwolf
Beiträge: 94
Registriert: 3. Feb 2008, 11:28

Re: Hilfe bei Style-Frage ...

Beitrag von Seant » 22. Jul 2009, 22:50

Habe da soweit leider nichts gefunden :cry: .

Was könnte ich noch versuchen?
SOll ich mal den gesamten Code posten?
Faulheit: der Hang zur Ruhe ohne vorhergehende Arbeit. - Immanuel Kant

Benutzeravatar
Mheatus
Feuervogel
Beiträge: 4093
Registriert: 23. Jun 2005, 19:27
Wohnort: FFM
Kontaktdaten:

Re: Hilfe bei Style-Frage ...

Beitrag von Mheatus » 22. Jul 2009, 22:54

Jap - aber in ner sehr kleinen Schriftgrösse ^^

Benutzeravatar
Trianon
Feuervogel
Beiträge: 5658
Registriert: 15. Okt 2005, 10:22

Re: Hilfe bei Style-Frage ...

Beitrag von Trianon » 23. Jul 2009, 00:52

Hallo

Ich selbst hab die Lösung nicht gefunden, sondern einen Freundin von mir.


Versuch mal bitte:

Code: Alles auswählen

/* > Menu-Frame */
.framemenubg { font-size: 0px; background: #FFFFFF; color: #ffffff; } 
.framemenubg:before { content: ""; display: block; margin: 43px 0px 0px 80px; color: #FAFAFA; width: 118px; height: 13px; border: 1px solid #222222; background: #FAFAFA; }
.framemenubg a { position: absolute; font-size: 1px; color: #F7F7F7; background-color: #F7F7F7 !important; border: 1px solid #222222; opacity: 0.80; line-height: 200%; white-space: nowrap; }
.framemenubg a:hover { text-decoration: none; opacity: 1.00; }
.framemenubg a:hover:after { display: block; color: #5E5E5E; font-size: 11px; line-height: 100%; white-space: nowrap; }
.framemenubg div[align="center"] { position: absolute; top: 0px; left: 0px; text-align: left !important; height: 65px; width: 280px; color: #ffffff; }
Geändert wurde nur etwas in der letzten Zeile. Es wurde einmal eine Schriftfarbe, in diesem Falle Weiß, hinzugefügt
Die Person, die aufsteht und sagt: "Das ist bescheuert!", wird entweder aufgefordert sich zu benehmen, oder, schlimmer noch, wird begrüßt mit einem freudigen: "Ja, das wissen wir. Ist das nicht toll?"
Frank Zappa

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 5 Gäste