Thema: Abstand der Kategorien im Content

raubfischfreund · **am:** 08. Januar 2012, 19:45:51

Hallo Leute!

Ich will im Content die Kategorien mit Bildern inkl. Links darstellen. Ein Freund von mir macht mir das alles und kommt grad nicht weiter. Hier seine mail an mich:

Zitat

ich bastel seit ein paar stündchen an deiner Seite rum und bekomme eine Sache nicht hin...

Bei den Buttons kann ich zum verrecken nicht den Abstand verstellen.
Der Befehl lautet "hspace" und "vspace"
Ich habe eine button.html gemacht und diese über "Media" -> "Content" in der Admin eingebunden.
Auch wenn ich da die Abstände verstelle bewegt sich nach dem Speichern nichts.

Frag mal bitte dein Forum woran das liegt.
Gibt die stylesheet.css das alles vor? Kann man das dä ändern? Ich find das nicht.

Hier geht's zur Page: www.raubfischfreund.de

Grüße David

[EDIT Tomcraft 08.01.2012: Zitat kenntlich gemacht! Bitte selber darauf achten!]

Linkback: https://www.modified-shop.org/forum/index.php?topic=17755.0

franky_n · **Antwort #1 am:** 08. Januar 2012, 21:42:46

Hallo raubfischfreund,

vielleicht hilft Euch diese fertige Lösung:
MODUL: Kategorien auf der Startseite anzeigen (c_list Modul)

(bevor man mit dem Dreamweaver da rumexperimentiert und was zusammen matscht)

Die Fehler fangen ja schon dort an das im Content die metas nochmal drin stehen und die tollen Funktionen "function MM_swapImgRestore()" etc.

Viele Grüße

Franky

raubfischfreund · **Antwort #2 am:** 09. Januar 2012, 21:44:48

Hi Franky!

Danke für deine schnelle Antwort! Dies wäre die Notlösung. Es ist schon alles fertig, deswegen wäre es super, wenn wir es anders hinkriegen würden. Hat sonst jemand Rat?

Danke und schöne Grüße aus Köln!

Makrolibelle · **Antwort #3 am:** 09. Januar 2012, 23:15:35

Zitat von: raubfischfreund am 08. Januar 2012, 19:45:51

Hallo Leute!
[...]
Zitat
[...]
Frag mal bitte dein Forum woran das liegt.
Gibt die stylesheet.css das alles vor? Kann man das dä ändern? Ich find das nicht.

Hier geht's zur Page: www.raubfischfreund.de
[...]

Ich würde eine neue Klasse in der "stylesheet.css" erstellen um die Größe und Abstände der Bilder zu bestimmen.
Kannst auch für jede Kategorie eine eigene "class" machen, indem du die Bilder auch gleich einfügen kannst.
Hätte den Vorteil, dass du den onmouseover="MM_swapImage etc. nicht mehr benötigst, kannst du auch per css definieren.

Beispiel:

Code: CSS [Auswählen]

.contentcategory {
height:100px;
width:100px;
margin:10px 10px 10px 10px;
padding: 10px 10px 10px 10px;}

.contentcategory a{color:#333; background:#fff url(images/buttons/virtualbaits_button.jpg);}
.contentcategory a:visited{color:#333; background:#fff url(images/buttons/virtualbaits_button.jpg);}
.contentcategory a:hover,a:active{color:#333; background:#fff url(images/buttons/virtualbaits_button_r.jpg);}

Dann müsstest du eigentlich nur noch an den Stellen, wo du die Bilder haben möchtest:

Code: PHP [Auswählen]

eingeben und bei Änderungen kannst du all dies dann in einer Datei ändern. Ist recht praktisch.

Vielleicht einfach mal zur Unterstützung unter "SELFHTML: Stylesheets / CSS-Eigenschaften" schauen.

raubfischfreund · **Antwort #4 am:** 12. Januar 2012, 00:09:50

Danke Makrolibelle!

Ich habe deinen Post soeben meinem Kumpel und Angelkollegen geschickt. Er wird sich das morgen mal reinziehen und dann werde ich mal berichten, ob es reibungslos geklappt hat! Danke, danke, danke!

Schönen Abend/Nach noch.

Grüße David

raubfischfreund · **Antwort #5 am:** 17. Januar 2012, 23:35:00

So Leute bzw. Makrolibelle. Hier die Antwort von meinem Kollegen und Webmaster, ich hoffe ihr könnt nochmals helfen?

Zitat

Habe die Codes 1zu1 übernommen und es funktioniert nicht.
Da ich überhaupt keine Ahnung von CSS oder PHP habe kann ich dir da nicht weiter helfen.
Kann das nur übernehmen und sehe da keinen Fehler.

Frag mal im Forum ob man es nicht auch mit der HTML-Datei lösen kann die ich schon gemacht habe.
Wieso funktioniert vspace und hspace nicht?

Es ist auch nicht einfacher es in CSS zu lösen weil du dann für jeden Button der später mal dazu kommt oder wenn du was ändern willst die stylesheet.css und die buttons.html bearbeiten musst.
Das einfachste wär ein html-Code den man in der Adminoberfläche als Quelltext einfügt, das kannst du dann auch später selber bearbeiten und musst mich nicht fragen.
Frag mal dein Forum ob es dafür keine Möglichkeit gibt.

Alternativ kann ich die Grafikdateien mit mehr weißem Hintergrund versehen das rein optisch mehr Abstand da ist, aber das ist echt 'ne Notlösung.

Danke im Voraus

Grüße David

[EDIT Tomcraft 18.01.2012: Zitat kenntlich gemacht.]

guensi · **Antwort #6 am:** 18. Januar 2012, 00:13:59

Zitat von: raubfischfreund am 17. Januar 2012, 23:35:00

[...]
Zitat
[...]
Da ich überhaupt keine Ahnung von CSS oder PHP habe kann ich dir da nicht weiter helfen.
Kann das nur übernehmen und sehe da keinen Fehler.

Frag mal im Forum ob man es nicht auch mit der HTML-Datei lösen kann die ich schon gemacht habe.
Wieso funktioniert vspace und hspace nicht?

Es ist auch nicht einfacher es in CSS zu lösen [...]
[...]

Doch, wäre es schon wen es richtig gemacht würde. Aber ok, auf der Basis sehe ich nur eine Lösung, quick aber dafür dirty. Ich bin zwar kein Freund von Inline-Styles im html, aber im Gegensatz zu "vspace" und "hspace" werden die hier funktionieren. Auf deine html-Datei angewandt muss das ganze so aussehen:

Code: PHP [Auswählen]

Die inline-CSS-Angabe wird durch "style" eingeleitet, "margin" erzeugt einen Außenrand um das Element, der erste Wert 10px definiert den oberen und unteren Rand, der zweite Wert 30px den linken und rechten Rand. Damit sollte sich der gewünschte Effekt erzeugen lassen.
Aber das wird von mir zur Nachahmung nicht empfohlen.

Raubfischfreunds Kumpel · **Antwort #7 am:** 23. Januar 2012, 22:57:41

Tach zusammen,
wie mein Pseudo schon sagt, bin ich der mehrfach zitierte Kumpel, der an der Raubfischfreund-Seite bastelt. Ich dachte, ich mach es einfacher und melde mich kurzerhand an ...

Leider komme ich aber mit dem letzten Tipp von guensi auch nicht zurecht.
Quick und dirty würde mir ja gefallen, doch der Rollovereffekt funktioniert leider nicht.

Habe den Code in eine einfache HTML-Datei kopiert wie es auch im Adminbereich oder über Media -> Content der Fall wär.
Das Ergebnis sieht man hier: http://www.mynetcologne.de/~nc-kierdoan/raubfischfreund/

Was hab ich falsch gemacht?
Was bedeutet:

Zitat von: guensi am 18. Januar 2012, 00:13:59

[...]
Die inline-CSS-Angabe wird durch "style" eingeleitet, [...]

Besten Dank vorab für eure Tipps!
Micha

guensi · **Antwort #8 am:** 23. Januar 2012, 23:24:02

Zitat von: Raubfischfreunds Kumpel am 23. Januar 2012, 22:57:41

Leider komme ich aber mit dem letzten Tipp von guensi auch nicht zurecht.
Quick und dirty würde mir ja gefallen, doch der Rollovereffekt funktioniert leider nicht.
[...]
Was hab ich falsch gemacht?
Was bedeutet:

Zitat von: guensi am 18. Januar 2012, 00:13:59
[...]
Die inline-CSS-Angabe wird durch "style" eingeleitet, [...]
[...]

Hi,
ganz einfach, es geht darum wie eine inline-css-Angabe im html eingeleitet wird. style = "hier stehen die Angaben für die Ränder margin: 10px 30px;" Daraus macht dann der Browser folgenden Code:

Code: CSS [Auswählen]

element.style {
margin: 10px 30px;
}

Nur dass der dann nicht im "stylesheet.css" zentral verwaltet werden kann, sondern hardcoded im html direkt angegeben ist. Jede Änderung muss also für jede Angabe im html gemacht werden.

Eins jedenfalls funktioniert definitiv, die Abstände werden jetzt dargestellt. Mehr sollte die style-Anweisung auch nicht machen.

Natürlich funktioniert der Rollover nicht, weil das dazugehörige Javascript fehlt. Soweit ich ich dunkel erinnere, war das MM_swapImage Teil eines Javascripts was vorzugsweise von Dreamweaver für die Rollover-Effekte erzeugt wurde. Das war für statische Seiten gedacht, und das Javascript muss in der Datei oder im Header eingebunden sein, sonst geht das Ganze gar nicht.

In der originalen html-Datei der Seite würden sowohl die Abstände da sein, als auch der Rollover funktionieren (jedenfalls solange der Betrachter Javascript aktiviert hat).
Denn hier ist das javascript direkt in den content eingebunden.

Raubfischfreunds Kumpel · **Antwort #9 am:** 24. Januar 2012, 11:23:45

Das ist nett guensi, dass du dir so viel Mühe machst das ganze zu erklären, ich versteh aber nur Bahnhof.

Ich kann das, was du schreibst, ohne Grundkenntnisse nicht umsetzen. Sobald da ein Leerzeichen zu viel oder ein Punkt zu wenig ist funktioniert es nicht.

Könntest du mir den Code für einen Beispiel-Button komplett fertig machen? Das wär - glaube ich - dass Einfachste.

1. Grafikdatei ist hier: http://www.raubfischfreund.de/images/buttons/pointer_button.jpg
2. Grafik für den Rollovereffekt ist hier: http://www.raubfischfreund.de/images/buttons/pointer_button_r.jpg
Ziel des Links ist hier: http://www.raubfischfreund.de/Pointer:::104.html

Ich weiss, ich verlange viel!
Besten Dank deshalb vorab! Ich finde es super, wie sehr sich die Leute hier Mühe geben!
Ich selber habe einen Shop mit der Software von Bigware aufgebaut und hatte es viel schwerer ohne so einen guten Support im Forum.

Tomcraft · **Antwort #10 am:** 24. Januar 2012, 14:31:11

Jetzt klinke ich mich mal hier ein... geht es hier nicht um ein simples "margin"?

Suche in der "stylesheet.css":

Code: CSS [Auswählen]

a img {
border: medium none;
outline: medium none;
}

und ersetze mit:

Code: CSS [Auswählen]

a img {
border: medium none;
margin: 0 35px 50px 0;
outline: medium none;
}

Das sind wirklich essentielle Grundlagen ohne die du am Shop eigentlich nicht selber bauen solltest!

Grüße

Torsten

guensi · **Antwort #11 am:** 24. Januar 2012, 21:44:34

Ok, seh schon, da kommen wir anders nicht weiter. Hab grade gesehen, du bist sowieso am basteln. Die neuen Köder-Buttons gefallen mir übrigens viel besser als die reine Textversion.

Der Tip von Tomcraft wird eine unangenehme Nebenwirkung haben, denn dann werden alle Bilder in Links diese Randeinstellung haben, was so wohl nicht gewollt ist.

Das mit dem Testbutton wird auch wieder in die Hose gehen, da ja beim Reinkopieren in eine Dummy-html Seite wieder das javascript für den Rollover fehlen wird.

Hier mal die Umsetzung für alle deine aktuellen Links auf der Startseite. Einfach den bestehenden Code der Links im html content mit diesem Code für die Buttons mit Rand ersetzen. Aber vorher Sicherheitskopie machen!!!
Dann werden die Ränder dargestellt und der Rollover wird funktionieren.

Code: PHP [Auswählen]

Viel Spass beim Testen.

Raubfischfreunds Kumpel · **Antwort #12 am:** 24. Januar 2012, 23:11:39

Muss leider sagen, der Rollovereffekt funktioniert immer noch nicht.
Fehlt denn da nicht immer noch die einleitende Style-Geschichte? Hab keine Ahnung von Style und CSS usw.
Egal ob ich deinen Text in eine extra html-Datei setze und die über Content aufrufe, oder ob ich das direkt im Adminbereich als Quelltext eingebe.

Hab das jetzt mal so auf der Startseite gelassen zum gucken -> www.raubfischfreund.de

Schlimmstenfalls setze ich einfach mehr weißen Rand um die Buttons und nehme meinen Rollovereffekt aus Dreamweaver.

franky_n · **Antwort #13 am:** 25. Januar 2012, 09:08:41

Hallo Raubfischfreunds Kumpel,

habe ich bereits oben gesagt, dass man nicht einfach Dreamweaver Klamotten kopieren (reinmatschen) sollte.

Schau Dir den Quelltext mal genau an. Was Du benötigst sind einmal die Bilder und die Links. Alles andere kann weg.

Mal als Beispiel an den ersten beiden Grafiken.
Also so sieht es jetzt aus:

Code: PHP [Auswählen]

und so müsstest Du es machen:

Code: PHP [Auswählen]

Dann in der /templates/xtc5/stylesheet.css folgenden Eintrag hinten anfügen:

Code: CSS [Auswählen]

.platzhalter {
width:300; /* Gesamtbreite des Platzhalters */
height:300; /* Gesamthöhe des Platzhalters */
}

Dann Google benutzen und mal "css" anschauen.

Das ganze machst Du dann für die restlichen Zeilen auch.
Wichtig ist das Du das Prinzip verstehst wie das funktioniert...

All der andere Krempel der oben und unten in Deinem Content steht <DOCTYPE....><head> ist nicht notwendig und von Dreamweaver standardmäßig eingefüllt worden da es eigenständige Seiten erstellt...
Du willst aber "nur" einen Content und keine komplett eigenständige Seite!

Viele Grüße

Franky

Thema: Abstand der Kategorien im Content

raubfischfreund

Abstand der Kategorien im Content

franky_n

Re: Abstand der Kategorien im Content

raubfischfreund

Re: Abstand der Kategorien im Content

Makrolibelle

Re: Abstand der Kategorien im Content

raubfischfreund

Re: Abstand der Kategorien im Content

raubfischfreund

Re: Abstand der Kategorien im Content

guensi

Re: Abstand der Kategorien im Content

Raubfischfreunds Kumpel

Re: Abstand der Kategorien im Content

guensi

Re: Abstand der Kategorien im Content

Raubfischfreunds Kumpel

Re: Abstand der Kategorien im Content

Tomcraft

Re: Abstand der Kategorien im Content

guensi

Re: Abstand der Kategorien im Content

Raubfischfreunds Kumpel

Re: Abstand der Kategorien im Content

franky_n

Re: Abstand der Kategorien im Content

Teile Thema

Ähnliche Themen

Abstand oben Content Startseite

Template Umbau: Rechter Abstand zu Content

Template Umbau: Abstand von Main Content zu Header mit CSS

Shopstat Bug bei Kategorien und Content