Sie sind nicht angemeldet.

Grafik im Beitrag

  • 1
  • 2

meru

Schüler

  • »meru« ist der Autor dieses Themas

Beiträge: 30

  • Nachricht senden

1

Samstag, 31. Juli 2010, 22:07

Grafik im Beitrag

Ich suche mich heute schon hier und in anderen Foren dumm und dämlich, aber ich finde es nicht mehr.

Ich möchte im Beitrag eine Grafik drin haben.

Screenshot :

index.php?page=Attachment&attachmentID=1107

Die Grafik bekomme ich rein, ist ein Farbverlauf der eigentlich mit der Hintergrundfarbe der Kästen 1 & 2 endet. Der soll sich jetzt aber nur Horizontal wiederholen, nicht auch noch vertikal.

Das ist der CSS Code den ich im Moment habe :

Quellcode

 
1
2
3
4
5

.messageContentInner{
background-image: url(http://i31.tinypic.com/347toab.jpg);
repeat-x;important;

}


Kann mir bitte jemand sagen wo da der Fehler ist bevor ich in den Schreibtisch beiße?

_MaX_

Moderator

  • »_MaX_« ist männlich

Beiträge: 1 319

Forenversion: WBBLite 2.1.x

  • Nachricht senden

2

Samstag, 31. Juli 2010, 23:43

Dein CSS Code ist der Fehler.

Cascading Style Sheet

 
1
2
3

.messageContentInner{
background: url(http://i31.tinypic.com/347toab.jpg) repeat-x !important;
}


oder

Cascading Style Sheet

 
1
2
3
4

.messageContentInner{
background-image: url(http://i31.tinypic.com/347toab.jpg) !important;
background-repeat: repeat-x !important;
}
______

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »_MaX_« (1. August 2010, 08:21)

meru

Schüler

  • »meru« ist der Autor dieses Themas

Beiträge: 30

  • Nachricht senden

3

Samstag, 31. Juli 2010, 23:49

Hmm...danke aber ich habe beide versucht und bei beiden wurde dann gar keine Grafik mehr angezeigt.

_MaX_

Moderator

  • »_MaX_« ist männlich

Beiträge: 1 319

Forenversion: WBBLite 2.1.x

  • Nachricht senden

4

Sonntag, 1. August 2010, 08:21

Hups mein Fehler *g*

vor ein important gehört immer ein ! ^^

Also !important

Habs oben geändert ^^
______

meru

Schüler

  • »meru« ist der Autor dieses Themas

Beiträge: 30

  • Nachricht senden

5

Sonntag, 1. August 2010, 10:22

Funktioniert prima, dankeschön! :thumbsup:

meru

Schüler

  • »meru« ist der Autor dieses Themas

Beiträge: 30

  • Nachricht senden

6

Sonntag, 1. August 2010, 11:17

Und noch eine Frage hinterher :

Ich habe den gleichen CSS Code für die Container 1 + 2 genommen.
Klappt soweit auch. Nur wenn die Foren etwas größer sind, zb noch eine Beschreibung haben unter dem Titel, dann sieht das aus als ob die Grafik verrutscht wäre.
Auf dem Screenshot wäre das bei den Testforen 1 und 2. 3 bis 6 sind ok.

index.php?page=Attachment&attachmentID=1111

Kann man das irgendwie noch ändern?

_MaX_

Moderator

  • »_MaX_« ist männlich

Beiträge: 1 319

Forenversion: WBBLite 2.1.x

  • Nachricht senden

7

Sonntag, 1. August 2010, 11:37

Kannst du mir mal die BG Grafik zeigen? ^^
______

meru

Schüler

  • »meru« ist der Autor dieses Themas

Beiträge: 30

  • Nachricht senden

8

Sonntag, 1. August 2010, 13:06

Klar, das ist hier diese : http://i28.tinypic.com/332p4hx.jpg

_MaX_

Moderator

  • »_MaX_« ist männlich

Beiträge: 1 319

Forenversion: WBBLite 2.1.x

  • Nachricht senden

9

Sonntag, 1. August 2010, 15:45

Hmmm....
vielleicht musst du da nen

.klassennameODERidname {
background-position: top;
}

oder so hinzufügen ^^

Hätte vielleicht mal nach dem URL zum Forum fragen sollen >.<
______

meru

Schüler

  • »meru« ist der Autor dieses Themas

Beiträge: 30

  • Nachricht senden

10

Sonntag, 1. August 2010, 16:17

Ich habe das in den Klammern mal zu dem CSS Code dazu gepackt, hat aber keine veränderung gebracht.
Der Code sieht im Moment so aus:

Quellcode

 
1
2
3
4
5

.container-1, .container-2  { 
background-image: url(http://i28.tinypic.com/332p4hx.jpg) !important;
background-repeat: repeat-x !important;
background-position: top;
}


Hier ist der Link zum Testforum : http://www.vision-board.de/boards/grafik….php?page=Index

_MaX_

Moderator

  • »_MaX_« ist männlich

Beiträge: 1 319

Forenversion: WBBLite 2.1.x

  • Nachricht senden

11

Sonntag, 1. August 2010, 16:36

Cascading Style Sheet

 
1
2
3
4
5

.container-1, .container-2 {
background-image:url("http://i28.tinypic.com/332p4hx.jpg") !important;
background-position:top !important;
background-repeat:repeat-x !important;
}


Das löst dein Problem ^^

So hat aber jeder container-1 und container-2 diesen BG

mit

Cascading Style Sheet

 
1
2
3
4
5

.boardlistInner .container-1, .boardlistInner .container-2 {
background-image:url("http://i28.tinypic.com/332p4hx.jpg") !important;
background-position:top !important;
background-repeat:repeat-x !important;
}


Ist es nur in der Forenliste ^^
______

meru

Schüler

  • »meru« ist der Autor dieses Themas

Beiträge: 30

  • Nachricht senden

12

Sonntag, 1. August 2010, 17:23

Dankeschön, der erst funktioniert einwandfrei. Sieht gut aus. :thumbsup:
Beim zweiten wird leider keine Grafik mehr angezeigt.
Ich habe jetzt den ersten Code drin gelassen, mir ist so auch noch nicht aufgefallen wo das vielleicht stören könnte. :)

meru

Schüler

  • »meru« ist der Autor dieses Themas

Beiträge: 30

  • Nachricht senden

13

Dienstag, 21. September 2010, 15:35

Ich hätte dazu noch ne Frage.

Ich möchte gerne in dem Bereich eine Grafik unten rechts rein machen. Die soll sich auch nicht wiederholen.
Ich hatte das ganze dann mit bottom und right auch in die unter Ecke bekommen, aaaaber nun hängt die Grafik unter den Buttons.
Kann mir jemand sagen wie ich die Grafik über die Trennlinie bekomme?

Das ist der Code den ich versucht habe :

Quellcode

 
1
2
3
4
5
6

.messageContentInner{
background-image: url(http://i51.tinypic.com/nf0llu.jpg) !important;
background-repeat: no-repeat !important;
background-position:  right bottom  !important;

}


index.php?page=Attachment&attachmentID=1207

Gandalf

Moderator

Beiträge: 1 337

Forenversion: WBBLite 2.1.x

  • Nachricht senden

14

Dienstag, 21. September 2010, 17:42

Am einfachsten stellst du das Hintergrundbild nicht für messageContentInner sondern für messageBody rein.

Hier findest du ein paar erklärungen zu background-images.

Übrigens sollten die !importants eher sparsam eingesetzt werden. Wenn du sauber codest brauchst du sie fast nie, es sei denn du schreibst für Stylish oder so.
» How to post a good question (engl.)
·:· MakroGFX ·:· deviantArt ·:·

»Darf ich dir mal eine Metafrage stellen?«

meru

Schüler

  • »meru« ist der Autor dieses Themas

Beiträge: 30

  • Nachricht senden

15

Dienstag, 21. September 2010, 18:14

Danke Dir. :)

Das mit dem !important werd ich mir merken. Im Grunde hab ich ja absolut keine Ahnung davon und versuche mir immer aus funktionierenden Sachen was raus zu suchen was dann auch funktionieren könnte. :S

Gandalf

Moderator

Beiträge: 1 337

Forenversion: WBBLite 2.1.x

  • Nachricht senden

16

Dienstag, 21. September 2010, 20:26

Die Reihen folge in der CSS Deklarationen einander überstimmen ist etwas kompliziert. Allgemein kann man sagen je genauer der Selektor (das vor der Klammer) desto *wichtiger* werden enthaltenen Anweisungen behandelt. Mit !important kann man das übertrumpfen, allerdings nur wenn nicht wieder eine weitere !important Anweisung widerspricht.
Wenn also überall !important steht dann geht dessen wirksamkeit verloren und unübersichtlich wirds auch.

Beispiel:
Wir haben einen link <a <, den wir einfärben wollen. Dem Link wird außerdem eine Klasse und eine ID zugewiesen:

PHP-Quelltext

 
1

<a href="..." class="linkklasse" id="linkid" >Link</a>

Dafür haben wir verschiedene Möglichkeiten:

Quellcode

 
1
2
3
4

* {color: black;} //der Universal Selector wählt alle Elemente an und hat die niedrigste Priorität
a {color: blue;} //der normale Selector für das a-Element steuert sämmtliche Links an
a.linkklasse {color: red;} //die Klasse ist genauer und hat damit eine höhere Priorität.
a#linkid {color: green;} //die ID ist noch wichtiger
Die Anweisungen für Schriftfarben widersprechen einander, die über den ID-Selector übertrumpft alle anderen.

Mit !important kann man wiederum diesen übertrumpfen.

Quellcode

 
1
2
3

* {color: white !important;} //wichtiger als die bisherigen
a {color: violet !important;} //wiederum wichtiger als der "wichtige" Universal-Selector
...
Falls bei zwei sich widersprechenden Anweisungen gleichstand herrscht überschreibt die Anweisung die weiter unten steht die darüber:

Quellcode

 
1

p {color: black; color: red;} //Text ist rot


Übrigens bedeuten .class und a.class nicht unbedingt das gleiche. Man kann Element-, Klassen- und ID-Selectoren beliebig kombinieren:
.class#id, a.class#id funktionieren ebenfalls und sind auch sehr genau und damit "wichtig".
» How to post a good question (engl.)
·:· MakroGFX ·:· deviantArt ·:·

»Darf ich dir mal eine Metafrage stellen?«

Karretto

Schüler

  • »Karretto« ist männlich

Beiträge: 49

  • Nachricht senden

17

Donnerstag, 14. Oktober 2010, 18:36

Und wie bekomme ich ein Hintergrundbild links hin? Also da wo Avatar usw. sind? Hab mich schon dran versucht, aber ich kriegs einfach nicht hin. ICh weiß auch nicht woran es scheitert..

Gandalf

Moderator

Beiträge: 1 337

Forenversion: WBBLite 2.1.x

  • Nachricht senden

18

Donnerstag, 14. Oktober 2010, 19:11

Quellcode

 
1
2
3
4
5

.messageSidebar {
background-image: url('...');
background-repeat: none;
background-position: top left;
}
Die unteren beiden Zeilen geben an ob die Grafik wiederholt werden soll und wo sie ausgerichtet werden soll.
» How to post a good question (engl.)
·:· MakroGFX ·:· deviantArt ·:·

»Darf ich dir mal eine Metafrage stellen?«

Karretto

Schüler

  • »Karretto« ist männlich

Beiträge: 49

  • Nachricht senden

19

Donnerstag, 14. Oktober 2010, 19:37

Hatte ich doch acuh so...:(...
Und wie mach ich das, das es auch hinter dem Eingabefeld sich wiederholt? Also wie hier, mit dem Karierten?

Gandalf

Moderator

Beiträge: 1 337

Forenversion: WBBLite 2.1.x

  • Nachricht senden

20

Donnerstag, 14. Oktober 2010, 19:42

Meinst du mit Eingabefeld da wo der Text vom Beitrag steht? Dann müsstest du den Transparent machen:

Quellcode

 
1
2
3
4

.message {
background: ...
}
.messageInner, .messageSidebar, .messageContent {background: transparent none;}

Leg dir am besten das Firefox Plugin 'Firebug' zu, damit kann man das ziemlich schön auseinanderklamüsern.
» How to post a good question (engl.)
·:· MakroGFX ·:· deviantArt ·:·

»Darf ich dir mal eine Metafrage stellen?«
  • 1
  • 2

Ähnliche Themen