Header mit 2 Grafiken

30.05.2012 18:10
avatar  Dell
#1 Header mit 2 Grafiken
De
Mitglied

Huhu,

ich bin hier neu und habe mir vor kurzem das kostenlose Forum für meine Gilde erstellt. Leider habe ich keine HTML oder CSS Kenntnisse bin aber mehr als breit dazu zu lernen. Habe auch schon hier gesucht sowie mir Tutorials angeschaut die vom Forum verlinkten sind und auf W3Schools aber nichts dergleichen gefunden wie es am besten machen kann, es sei den ich hab was übersehen.
Zu meinem Problem:
Ich habe 2 Grafiken für meinen Header. Eins das als Hintergrund dient und das andere was der Gilden Name ist das links drüber schweben soll. Dies funktioniert auch allerdings ist mir aufgefallen das unter anderen Auflösungen sich das Logo verschiebt. Ich möchte aber das es für alle gleich aussieht egal welche Auflösung. Wenn ich das aber richtige sehe wird die Positionierung der Auflösung des jeweiligen User angepasst und nicht an der header Größe.

Zitat
Kopf und Fusszeile:
<img src="https://files.homepagemodules.de/b579575/a_7_f5e28051.png"width="1000px" height="250px" border="4" alt="DemonSlayers">
<img src="https://files.homepagemodules.de/b579575/a_9_21fcb502.png" width="375px" height="120px" style="position:absolute;top:65px;left:379px;" />



So habe ich es bei mir eingefügt.
Ich hoffe mir kann da vielleicht jemand helfen ohne das ich das Bild als ein Bild machen muss.

Noch eine kleine frage am Rande: Ich habe das gaia als design gewählt und würde eigentlich gern das der header transparent ist da ich ja eine Grafik nutze und habe hier auch im Forum gelesen das man wohl unter den Farbeinstellungen einfach transparent eingegeben könnte allerdings funktioniert das bei mir nicht. Vielleicht hat da jemand noch ein Tipp für mich wie es bewerkstelligen könnte.

Link zu meinem Forum:
DemonSlayers


 Antworten

 Beitrag melden
30.05.2012 19:37
#2 RE: Header mit 2 Grafiken
avatar
Maid

Ich hab jetzt nicht die Codes dafür hier (schon gar nicht im Kopf), aber mein Weg wäre:

a) Pack das Ganze in eine Tabelle. Das Bild als Hintergrund der Tabelle und das Logo als Inhalt einer Tabellenzeile. Die Tabelle zentriert platzieren.

b) Das Teilchen ist Deine Kopfgrafik. Warum fügst Du nicht Logo und Hintergrund zu einem Bild zusammen und nutzt es gleich als "Komplettbild"? Wäre einfacher.

www.rabendolch.com

...ich nutze den Chat hier nicht, bitte berücksichtigen...

 Antworten

 Beitrag melden
30.05.2012 19:51 (zuletzt bearbeitet: 30.05.2012 19:52)
avatar  Ingmar
#3 RE: Header mit 2 Grafiken
avatar
Technik

versuch's mal mit:

1
2
3
 

<div style="background-image:url(https://files.homepagemodules.de/b579575/a_7_f5e28051.png) top left no-repeat; width:1000px; height:250px;">
<img src="https://files.homepagemodules.de/b579575/a_9_21fcb502.png" width="375px" height="120px" style="margin-left:10%" /></div>
 

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
30.05.2012 20:00
#4 RE: Header mit 2 Grafiken
avatar
Maid

Oder, falls Du doch das "nur eine Bild" haben möchtest... büdde...



Ich war mal so frei, ist auf die Abmessungen aus Deinem Code reduziert. Ganz nebenbei ist das Bild so auch ein wenig kleiner (lädt schneller) von vorher zusammen 1,5MB auf ca. 180 kb ;)

Hab nur einen Schatten hinters Logo gelegt wegen Lesbarkeit...

www.rabendolch.com

...ich nutze den Chat hier nicht, bitte berücksichtigen...

 Antworten

 Beitrag melden
30.05.2012 22:12 (zuletzt bearbeitet: 30.05.2012 22:13)
avatar  Dell
#5 RE: Header mit 2 Grafiken
De
Mitglied

Vielen Dank schon mal für eure Antworten

Mit der Tabelle hab ich es mal versucht bin aber dran gescheitert das er mir mir den Hintergrund so darstellt. Allerdings hat es mir doch ein wenig geholfen das ganze ein wenig mehr zu verstehen :lol: bin dadurch über die Element Gruppierung in css gestolpert

Und habs mal so eingegeben in Kopf-und Fußzeile:

1
2
3
4
5
6
7
8
9
10
11
12
 

<div class="head_left">
<img src="https://files.homepagemodules.de/b579575/a_7_f5e28051.png" border="4px" border-style="ridge" width="1000px" height="250px"/>
</div>
<div class="head_center">
<img width="262px" height="53px" src="https://files.homepagemodules.de/b579575/a_5_f9a55590.png">
</div>
<div class="head_right">
</div>
<div class="clear">
</div>
 
 



und in CSS dieses hier:

1
2
3
4
5
6
7
8
9
10
11
12
13
 

.head_left,
.head_center,
.head_right
{
width: 10%;
hight: 15%;
float: left;
}
.clear
{
clear:both;
 
 



zu Kopf-und Fußzeile: das einzige was er jetzt nicht macht ist der Border style was mach ich da falsch?
zu CSS: sobald ich Höhe einbaue setzt er mir das logo wieder runter aber es sieht jetzt wenigstens gleich aus auf meinem gr. Monitor 1920x1080 und lappi: 1027x768

@Ingmar: das hat leider nicht funktioniert

Ich weiß es wäre viel einfach es als "ein bild" zu machen was kein Problem ist aber ich weiß halt auch das es anders geht und da ich zum ersten mal ein Forum hab das kostenlos ist mir eine solche Möglichkeit bietet will ich es ja doch probieren


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!