Zurück   klamm-Forum > klamm-Lose > Lose4Graphics


Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 15.02.2016, 14:06:57   #1 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard Frage zu Grafik Homepage

Hallo,

ich brauche etwas Hilfe.

Es geht um ein Template, das ich für einen Verein nutzen möchte. Es sind aber ein paar Dinge anzupassen. Bei einer Sache komme ich nicht weiter. Ich habe eine Grafik im Header eingefügt, die später noch geändert wird. Mein Problem besteht darin, dass mir die Abstände darüber und darunter zu groß sind. Kann man die etwas verkleinern? Für die meisten von Euch hier wird das sicher kein Problem sein... Für Hilfe würde ich auch eine Kleinigkeit springen lassen.

Hier die Seite um die es geht: http://www.textino.de/Test/index.html

MfG
Wesie
Textbroker 5-Sterne-Texter: www.textino.de
Wesie ist offline   Mit Zitat antworten
Alt 15.02.2016, 20:03:49   #2 (permalink)
Heldenhase
Benutzerbild von FischVolk

ID: 82395
Lose-Remote

FischVolk eine Nachricht über ICQ schicken FischVolk eine Nachricht über AIM schicken FischVolk eine Nachricht über MSN schicken FischVolk eine Nachricht über Skype™ schicken
Reg: 21.04.2006
Beiträge: 34.017
Daumen hoch

In der Datei css/style-desktop.css ab Zeile 151 steht
Zitat:
#header
{
padding: 14em 0 7em 0;
}
Die 14em sind der Außenabstand des Headers nach oben und die 7 nach unten. Wenn du diese Zahlen anpasst bekommst du bestimmt ein Ergebnis, welches dir gefällt.

(falls ich dein Amliegen richtig verstanden habe)
"Große Ereignisse werfen ihre Schatten unter die Augen" Udo Lindenberg
"Du lebst wie ein Amboss und warum zittert dein Kinn? Ich bin das was ich sage. Ich bin das was ich bin." Tomte - Füll deine Lungen mit Feuer
Ich habe keine Lösung, aber ich bewundere das Problem.

FischVolk ist offline   Mit Zitat antworten
Alt 15.02.2016, 21:49:32   #3 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard

Zitat:
Zitat von FischVolk Beitrag anzeigen
In der Datei css/style-desktop.css ab Zeile 151 steht


Die 14em sind der Außenabstand des Headers nach oben und die 7 nach unten. Wenn du diese Zahlen anpasst bekommst du bestimmt ein Ergebnis, welches dir gefällt.

(falls ich dein Amliegen richtig verstanden habe)
Hallo,

darf ich dich noch etwas fragen?

Das Menü der Seite verfügt über Symbole. Diese sind aber nicht in Form einer Datei gespeichert... Wo genau kann man die finden und editieren?

MfG
Wesie
Textbroker 5-Sterne-Texter: www.textino.de
Wesie ist offline Threadstarter   Mit Zitat antworten
Alt 16.02.2016, 14:23:19   #4 (permalink)
Heldenhase
Benutzerbild von FischVolk

ID: 82395
Lose-Remote

FischVolk eine Nachricht über ICQ schicken FischVolk eine Nachricht über AIM schicken FischVolk eine Nachricht über MSN schicken FischVolk eine Nachricht über Skype™ schicken
Reg: 21.04.2006
Beiträge: 34.017
Standard

Dies wird nicht über Icons realisiert sondern über eine Schriftart.

In der CSS Datei werden die Schriftarten Awesome & Awesome-Social geladen.

Zitat:
font-face {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
src: url("fonts/fontawesome-webfont.eot?#iefix&v=3.1.0") format("embedded-opentype"), url("fonts/fontawesome-webfont.woff?v=3.1.0") format("woff"), url("fonts/fontawesome-webfont.ttf?v=3.1.0") format("truetype"), url("fonts/fontawesome-webfont.svg#FontAwesome") format("svg");
}
@font-face {
font-family: "Font-Awesome-Social";
font-style: normal;
font-weight: normal;
src: url("fonts/fontawesome-social-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontawesome-social-webfont.woff") format("woff"), url("fonts/fontawesome-social-webfont.ttf") format("truetype"), url("fonts/fontawesome-social-webfont.svg#Font-Awesome-More") format("svg");
}
http://fortawesome.github.io/Font-Awesome/3.2.1/

Im Menü wird dann mitgegeben, dass er - je nachdem welche Klasse der Menüpunkt anspricht ein zeichen aus der Schriftart vor dem Menüpunkt angezeigt wird.

z.B.
ist in der CSS Datei
.icon-pencil
definiert

<li class = "icon-pencil">

zeigt dann das entsprechend definierte Element (Buchstabe) aus der entsprechenden Schriftart an.

http://fortawesome.github.io/Font-Aw...1/icon/pencil/

Zu verwirrend? Dann versuche ich es gerne noch einmal auf Deutsch. :-)
"Große Ereignisse werfen ihre Schatten unter die Augen" Udo Lindenberg
"Du lebst wie ein Amboss und warum zittert dein Kinn? Ich bin das was ich sage. Ich bin das was ich bin." Tomte - Füll deine Lungen mit Feuer
Ich habe keine Lösung, aber ich bewundere das Problem.

FischVolk ist offline   Mit Zitat antworten
Alt 16.02.2016, 22:26:58   #5 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard

Zitat:
Zitat von FischVolk Beitrag anzeigen
Dies wird nicht über Icons realisiert sondern über eine Schriftart.

In der CSS Datei werden die Schriftarten Awesome & Awesome-Social geladen.



http://fortawesome.github.io/Font-Awesome/3.2.1/

Im Menü wird dann mitgegeben, dass er - je nachdem welche Klasse der Menüpunkt anspricht ein zeichen aus der Schriftart vor dem Menüpunkt angezeigt wird.

z.B.
ist in der CSS Datei
.icon-pencil
definiert


<li class = "icon-pencil">

zeigt dann das entsprechend definierte Element (Buchstabe) aus der entsprechenden Schriftart an.

http://fortawesome.github.io/Font-Aw...1/icon/pencil/

Zu verwirrend? Dann versuche ich es gerne noch einmal auf Deutsch. :-)
Hallo du,
hab mit das mal angesehen. Aber ich krieg es nicht hin. Denn wenn ich die Kürzel eines anderen Symbols der Seite http://fortawesome.github.io/Font-Awesome/3.2.1/ angebe, dann erscheint meist nur ein "x", statt der jeweiligen Grafik. So als ob mein Eintrag übgültig wäre. Woran kann das liegen?
Textbroker 5-Sterne-Texter: www.textino.de
Wesie ist offline Threadstarter   Mit Zitat antworten
Alt 17.02.2016, 09:04:02   #6 (permalink)
Heldenhase
Benutzerbild von FischVolk

ID: 82395
Lose-Remote

FischVolk eine Nachricht über ICQ schicken FischVolk eine Nachricht über AIM schicken FischVolk eine Nachricht über MSN schicken FischVolk eine Nachricht über Skype™ schicken
Reg: 21.04.2006
Beiträge: 34.017
Standard

Du hast ja das:



Wenn du jetzt

Zitat:
<a class="icon icon-bar-chart" href="">
ersetzt durch

Zitat:
<a class="icon icon-pencil" href="">
wird ein anderes Icon angezeigt.
"Große Ereignisse werfen ihre Schatten unter die Augen" Udo Lindenberg
"Du lebst wie ein Amboss und warum zittert dein Kinn? Ich bin das was ich sage. Ich bin das was ich bin." Tomte - Füll deine Lungen mit Feuer
Ich habe keine Lösung, aber ich bewundere das Problem.

FischVolk ist offline   Mit Zitat antworten
Alt 17.02.2016, 10:01:12   #7 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard

Zitat:
Zitat von FischVolk Beitrag anzeigen
Du hast ja das:



Wenn du jetzt



ersetzt durch



wird ein anderes Icon angezeigt.
o.k., aber das ich habe das gestern mit anderen beliebigen Symbolen von der Seite http://fortawesome.github.io/Font-Awesome/3.2.1/ probiert. Und da hat er meist nichts Richtiges angezeigt. Nur so ein "Fehler-Kreuz". Einige wenige, die ich gestestet habe, wurden zwar gezeigt, aber viel zu klein. Muss da vielleicht noch irgendwas definiert werden oder so?

MfG
Wesie
Textbroker 5-Sterne-Texter: www.textino.de
Wesie ist offline Threadstarter   Mit Zitat antworten
Alt 17.02.2016, 10:51:29   #8 (permalink)
Heldenhase
Benutzerbild von FischVolk

ID: 82395
Lose-Remote

FischVolk eine Nachricht über ICQ schicken FischVolk eine Nachricht über AIM schicken FischVolk eine Nachricht über MSN schicken FischVolk eine Nachricht über Skype™ schicken
Reg: 21.04.2006
Beiträge: 34.017
Standard

Jupp in der css/style-desktop.css sind die definiert.

z.B. .icon-pencil::before

Und was da nicht definiert ist wird nicht angezeigt.
Müsste dann entsprechend ergänzt werden.

edit:
Ich habe jetzt ungefähr 10 beliebig von der Webseite getestet und alle funktionieren. Welches wolltest du denn nutzen?
"Große Ereignisse werfen ihre Schatten unter die Augen" Udo Lindenberg
"Du lebst wie ein Amboss und warum zittert dein Kinn? Ich bin das was ich sage. Ich bin das was ich bin." Tomte - Füll deine Lungen mit Feuer
Ich habe keine Lösung, aber ich bewundere das Problem.

FischVolk ist offline   Mit Zitat antworten
Alt 17.02.2016, 11:07:17   #9 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard

Zitat:
Zitat von FischVolk Beitrag anzeigen
Jupp in der css/style-desktop.css sind die definiert.

z.B. .icon-pencil::before

Und was da nicht definiert ist wird nicht angezeigt.
Müsste dann entsprechend ergänzt werden.

edit:
Ich habe jetzt ungefähr 10 beliebig von der Webseite getestet und alle funktionieren. Welches wolltest du denn nutzen?
Super danke.

Ich hatte verschiedene probiert, die alle nicht gingen (weiß nicht mehr ganau welche -> z.B. ein Brief-Symbol). Aber die hatte ich nicht in der style-desktop.css definiert, sondern lediglich den icon-Eintrag in der Index-Seite verändert. Und dann ist ja klar, dass das nicht richtig funktionieren kann, oder? Ich muss also jedes genutzte Symbol einzeln in der style-desktop.css definieren, damit das jeweilige Symbol in der Index-Datei nutzbar ist... Richtig verstanden?

MfG
Wesie
Textbroker 5-Sterne-Texter: www.textino.de
Wesie ist offline Threadstarter   Mit Zitat antworten
Alt 17.02.2016, 11:59:32   #10 (permalink)
Heldenhase
Benutzerbild von FischVolk

ID: 82395
Lose-Remote

FischVolk eine Nachricht über ICQ schicken FischVolk eine Nachricht über AIM schicken FischVolk eine Nachricht über MSN schicken FischVolk eine Nachricht über Skype™ schicken
Reg: 21.04.2006
Beiträge: 34.017
Standard

Ich glaube (eigentlich) die sind alle definiert und du machst etwas falsch. :-)
Nachgeprüft habe ich dies aber nicht.

Ich kann über die Developer Tools des IE oder Firebug im Firefox die Icons alle anpassen und bekomme immer das richtige angezeigt. Bei zig verschiedenen Tests.
Deshalb liegt es meiner Meinung nach Nahe, dass du irgendwas falsch machst.
"Große Ereignisse werfen ihre Schatten unter die Augen" Udo Lindenberg
"Du lebst wie ein Amboss und warum zittert dein Kinn? Ich bin das was ich sage. Ich bin das was ich bin." Tomte - Füll deine Lungen mit Feuer
Ich habe keine Lösung, aber ich bewundere das Problem.

FischVolk ist offline   Mit Zitat antworten
Alt 17.02.2016, 12:16:30   #11 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard

Zitat:
Zitat von FischVolk Beitrag anzeigen
Ich glaube (eigentlich) die sind alle definiert und du machst etwas falsch. :-)
Nachgeprüft habe ich dies aber nicht.

Ich kann über die Developer Tools des IE oder Firebug im Firefox die Icons alle anpassen und bekomme immer das richtige angezeigt. Bei zig verschiedenen Tests.
Deshalb liegt es meiner Meinung nach Nahe, dass du irgendwas falsch machst.
Mist, naja, ich schau mir das heute Abend oder morgen noch einmal genau an.
Wenn ich nicht klarkomme, dann schreib ich dir noch einmal ganz konkret, was genau ich probiert habe und was nicht geht... Dann siehst du bestimmt, warum ich mich so glatt angestellt habe.
Textbroker 5-Sterne-Texter: www.textino.de
Wesie ist offline Threadstarter   Mit Zitat antworten
Alt 17.02.2016, 16:51:34   #12 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard

Zitat:
Zitat von FischVolk Beitrag anzeigen
Ich glaube (eigentlich) die sind alle definiert und du machst etwas falsch. :-)
Nachgeprüft habe ich dies aber nicht.

Ich kann über die Developer Tools des IE oder Firebug im Firefox die Icons alle anpassen und bekomme immer das richtige angezeigt. Bei zig verschiedenen Tests.
Deshalb liegt es meiner Meinung nach Nahe, dass du irgendwas falsch machst.
Ich habs hinbekommen.
Aus irgendwelchen Gründen muss ich eine andere Schreibweise nutzen:

icon fa-dropbox zum Beispiel
FischVolk gefällt das.
Textbroker 5-Sterne-Texter: www.textino.de
Wesie ist offline Threadstarter   Mit Zitat antworten
Alt 19.06.2016, 17:24:00   #13 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard

Hallo,

ich brauche noch einmal Hilfe. Es geht nach wie vor um die Vorlage http://www.textino.de/Test/index.html
bzw. der Bereich, in dem "Strongly Typed" steht, ist auch auf jeder Unterseite zu sehen. Zumindest auf den Unterseiten soll das aber nicht so sein (zum Beispiel auf http://www.textino.de/Test/left-sidebar.html). Dort soll der ganze Bereich inkl. Doppelstrich verschwinden. Die Seite soll also praktisch weiß bleiben.

Da komme ich aber nicht weiter. Wäre Klasse, wenn mir jemand gegen ein paar Lose helfen könnte.

MfG
Wesie
Textbroker 5-Sterne-Texter: www.textino.de

Geändert von Wesie (19.06.2016 um 17:24:43 Uhr)
Wesie ist offline Threadstarter   Mit Zitat antworten
Alt 20.06.2016, 16:56:20   #14 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard

Kann mir keiner von euch helfen? Ist mir auch Lose wert, wenn ich eine Lösung hätte...
Textbroker 5-Sterne-Texter: www.textino.de
Wesie ist offline Threadstarter   Mit Zitat antworten
Alt 20.06.2016, 23:36:11   #15 (permalink)
OtakuLoot.de
Benutzerbild von saitho

ID: 305784
Lose-Remote

saitho eine Nachricht über ICQ schicken saitho eine Nachricht über MSN schicken
Reg: 10.01.2008
Beiträge: 1.678
Beitrag

Zitat:
Zitat von Wesie Beitrag anzeigen
Aus irgendwelchen Gründen muss ich eine andere Schreibweise nutzen:
icon fa-dropbox zum Beispiel
Die Schreibweise hat sich mal geändert. ^^ Je nach Version von FontAwesome die du nutzt...

---

Wenn du z.B. unter Chrome Rechtsklick auf den Bereich machst und "Untersuchen" auswählst, siehst du den ausgewählten Bereich im HTML-Code. Im Tab "Styles" kannst du dann die CSS-Eigenschaften ausblenden und anschauen wie das dann aussehen würde. Der ganze "Strongly Typed"-Kram steht im <div id="header">.

screen1.jpg

Wie du vielleicht sehen kannst enthält der Header auch die Navigation - du kannst also nicht den gesamten Headerbereich rauslöschen. Du könntest aber die CSS-Eigenschaften so verändern dass der Text nicht mehr erscheint bzw. der Headerbereich sich nur auf die Navigation beschränkt.

Im CSS findest du dazu unter #header die passenden Styles, wie z.B. die beiden Striche die du nicht mehr haben willst: border-bottom und box-shadow. Wenn du dort einmal die Haken rausnimmst, siehst du wie das ganze ohne diese Angaben aussehen wird.

Bleibt noch der eigentliche Text. Der befindet sich im <h1> und im <p>-Tag. Wenn du die im HTML markierst kannst du unter Styling bei element.style direkt das Objekt verändern, so auch z.B. mit display: none; ausblenden.

Die Größe des Headerbereichs wird durch padding: 14em 0 7em 0; bestimmt - auch damit kannst du im Developer Tool etwas rumspielen, bis es dir gefällt (z.B. padding: 0 0 7em 0;).

So sieht das ganze jetzt aus:
ergebnis.jpg

Allerdings sind diese Änderungen nur temporär und werden beim nächsten Neuladen wieder zurückgesetzt. Jetzt musst du deine Änderungen nur noch in CSS-Code formulieren. Allerdings solltest du das nicht in der CSS-Datei sondern in einer neuen machen, da die Änderung sonst auf allen Seiten vorhanden wäre. Wenn du den Text nicht da haben willst, bindest du einfach zusätzlich noch deine neue CSS-Datei nach der Haupt-CSS-Datei ein. :)

Nochmal die Änderungen:
- #header: border-bottom deaktiviert
- #header: box-shadow deaktiviert
- h1: versteckt
- p: versteckt
- #header: padding verändert

Und als CSS-Code:
Code:
1:
2:
3:
4:
5:
6:
7:
8:
#header { border-bottom: none; box-shadow: none; padding: 0em 0 7em 0; } #header h1, #header p { display: none; }
Wichtig ist hier, dass du für h1 und p das #header davor schreibst: Das sagt aus, dass h1 und p innerhalb der ID header liegen. Wenn du das weglässt werden alle <h1> und <p>-Tags ausgeblendet.

Vielleicht wärst du in einem reinen HTML/CSS-Forum besser aufgehoben, denke nicht dass das hier das richtige Forum dafür ist. :P
Aber ich hoffe trotzdem dass ich dir weiterhelfen konnte.

LG saitho
saitho ist offline   Mit Zitat antworten
Antwort

Gesponsorte Links

Anzeige


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind an
Pingbacks sind an
Refbacks sind an


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
(S) Grafik für Homepage & Sig lammeroX Lose4Graphics 2 01.03.2009 17:23:42
Homepage Entwurf inkls Grafik Gesucht Fabian17 Lose4Scripts (erledigt) 7 24.11.2007 15:44:09
FLASH HOMEPAGE mit GRAFIK schlopy Lose4Graphics 1 06.03.2007 21:12:12


Alle Zeitangaben in WEZ +1. Es ist jetzt 00:15:45 Uhr.