Seite 1 von 2
Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 20:15
von Seant
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:
Wie man sieht, sind links des Menüs diese dämlichen Schrägstriche
. 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
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
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 20:34
von Mheatus
.framemenubg { color: #ffffff; }
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 20:42
von Seant
ä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
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 20:46
von Mheatus
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
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 20:48
von Po1son
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.
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 20:49
von Mheatus
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^^
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 20:55
von Seant
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?
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 21:29
von Po1son
.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^^
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 21:39
von Seant
Also ich hab's gerade ausprobiert ohne das [align="center"] und die Striche waren leider immernoch vorhanden
.
Wieso entstehen die überhaupt?
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 21:44
von Po1son
die entstehen nicht die waren schon vorher da^^
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 21:46
von Seant
Wie das?
Und vor allem: Wie mach' ich sie tot?
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 22:41
von Andi90
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".
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 22:50
von Seant
Habe da soweit leider nichts gefunden
.
Was könnte ich noch versuchen?
SOll ich mal den gesamten Code posten?
Re: Hilfe bei Style-Frage ...
Verfasst: 22. Jul 2009, 22:54
von Mheatus
Jap - aber in ner sehr kleinen Schriftgrösse ^^
Re: Hilfe bei Style-Frage ...
Verfasst: 23. Jul 2009, 00:52
von Trianon
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