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

Like Tree1Likes

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 21.06.2016, 09:07:47   #16 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard

Super. Danke dir für die ausführliche Erklärung. Ich teste das heute oder morgen Abend mal.
Noch eine abschließende Frage: Wenn ich die "Container"-Änderungen mache, dann greifen die natürlich für alle Seiten, oder - also auch für die index-Seite, oder? Da soll der Header nämlich bleiben und wäre dann ja auch weg...

Zitat:
Zitat von saitho Beitrag anzeigen
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">.

Anhang 8939

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:
Anhang 8940

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
Textbroker 5-Sterne-Texter: www.textino.de
Wesie ist offline Threadstarter   Mit Zitat antworten
Alt 21.06.2016, 19:51:49   #17 (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
Standard

Wenn du die Änderungen in eine eigene CSS-Datei packst, greifen die nur auf den Seiten wo du diese CSS-Datei einbindest.
saitho ist offline   Mit Zitat antworten
Alt 29.06.2016, 23:06:21   #18 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard

Zitat:
Zitat von saitho Beitrag anzeigen
Wenn du die Änderungen in eine eigene CSS-Datei packst, greifen die nur auf den Seiten wo du diese CSS-Datei einbindest.
Kann ich dich noch einmal abschließend was fragen?

Es geht noch einmal um die Heade-Grafik -> Seite ist jetzt auch unter www.kenia-musikprojekt.de erreichbar.

De Grafik hat eine feste Breite und Höhe. Wie kann ich die so einstellen, dass sie sich automatisch an die Breite des jeweiligen genutzten Gerätes anpasst? Die restliche Seite tut das problemlos. Habe eine Weiche eingebaut (php), durch welche die Seite auch auf Mobiltelefonen u.s.w. gut dargestellt wird. Aber die feste Breite der Header-Grafik ist da natürlich Murks. Wie kann ich die entsprechend flexibel gestalten?
Textbroker 5-Sterne-Texter: www.textino.de
Wesie ist offline Threadstarter   Mit Zitat antworten
Alt 29.06.2016, 23:20:34   #19 (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
Standard

Zitat:
Zitat von Wesie Beitrag anzeigen
Wie kann ich die entsprechend flexibel gestalten?
Hab mir mal dein Template angesehen... Deine Seite ist soweit responsive, zumindest auf der mobilen Ansicht... Die anderen Bilder befinden sich in der Klasse "image", dadurch werden die auf Mobil nicht in voller Größe angezeigt... An sich könntest du die Klasse noch dem <h1> das das Headerbild umgibt hinzufügen - die Breite wird angepasst, nur die Höhe irgendwie nicht...
Das liegt daran, dass du dem Bild im HTML eine feste Höhe und Breite zuweist - nimm das einfach raus, das wird alles automatisch vom CSS geregelt.
saitho ist offline   Mit Zitat antworten
Alt 30.06.2016, 07:51:39   #20 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard

Zitat:
Zitat von saitho Beitrag anzeigen
Hab mir mal dein Template angesehen... Deine Seite ist soweit responsive, zumindest auf der mobilen Ansicht... Die anderen Bilder befinden sich in der Klasse "image", dadurch werden die auf Mobil nicht in voller Größe angezeigt... An sich könntest du die Klasse noch dem <h1> das das Headerbild umgibt hinzufügen - die Breite wird angepasst, nur die Höhe irgendwie nicht...
Das liegt daran, dass du dem Bild im HTML eine feste Höhe und Breite zuweist - nimm das einfach raus, das wird alles automatisch vom CSS geregelt.
Sag nochmal kurz, wie ich das Headerbild zu <h1> hinzufüge. Ich bin da noch nicht wirklich erfahren.
Textbroker 5-Sterne-Texter: www.textino.de
Wesie ist offline Threadstarter   Mit Zitat antworten
Alt 30.06.2016, 08:56:13   #21 (permalink)
finanzfieber.de

ID: 53661
Lose-Remote

Reg: 18.06.2006
Beiträge: 1.986
Standard

Zitat:
Zitat von saitho Beitrag anzeigen
Hab mir mal dein Template angesehen... Deine Seite ist soweit responsive, zumindest auf der mobilen Ansicht... Die anderen Bilder befinden sich in der Klasse "image", dadurch werden die auf Mobil nicht in voller Größe angezeigt... An sich könntest du die Klasse noch dem <h1> das das Headerbild umgibt hinzufügen - die Breite wird angepasst, nur die Höhe irgendwie nicht...
Das liegt daran, dass du dem Bild im HTML eine feste Höhe und Breite zuweist - nimm das einfach raus, das wird alles automatisch vom CSS geregelt.
Mit einem Eintrag in die css-Datei habe ichs hinbekommen.

img {
max-width: 100%;
height: auto;
}

Aber: Das gilt jetzt für alle Bild-Dateien in der Seite, was natürlich ein Problem ist für die Sponsoren-Buttons am Ende der Seite. Kann ich das irgendwie nur für den Header gelten lassen?
Textbroker 5-Sterne-Texter: www.textino.de
Wesie ist offline Threadstarter   Mit Zitat antworten
Alt 01.07.2016, 15:41:54   #22 (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
Standard

Zitat:
Zitat von Wesie Beitrag anzeigen
Aber: Das gilt jetzt für alle Bild-Dateien in der Seite, was natürlich ein Problem ist für die Sponsoren-Buttons am Ende der Seite. Kann ich das irgendwie nur für den Header gelten lassen?
Klar, statt img schreibst du einfach #header img. ^^

Weiterführende Links:
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 14:34:42 Uhr.