Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Ein Bild als Layout?“

R

Ran

Guest

Hallo Leute,
ich bin neu hier und habe auch gleich schon eine Frage, die mich schon den gesammten Abend nurnoch löchert.
Ich bin schon eine ganze Weile bei Myspace angemeldet und habe daher auch sehr viele Profile gesehen aber eines hat mich echt schwer beeindruckt (aber dazu gleich mehr)
Ich habe versucht, dieses Layout irgendwie nach zu basteln bzw habe mir ein eigenes gemacht und habe versucht, damit irgendwie umgehen zu können, aber bin dabei kläglich gescheitert.
Und zwar hatte diese Person einfach nur ein Bild im Hintergrund gehabt und den ganzen restlichen schmatz darauf gepackt, aber wie, würde ich echt gerne wissen.
ich zeig euch mal das "Layout" welches ich heute abend gebastelt habe. Ich habe sonen bischen rumprobiert und naja..




Das ist es.. und nun der Knackpunkt, der mich heute schon 3 Kopfschmerztabletten gekostet hat xD
Diese Person hatte einfach auf das Bild (man hat nichts weiter drum herum gesehen, kein Anzeigebild, kein Kontaktkasten rein garnichts, nur das Bild) den Text geschrieben, mit html, nehme ich an und hat dazu dann halt noch scrollbalken und sowas dabei. Aber wie schafft man sowas?
Ich habe dann noch ein Tut gefunden, wo man aaaaaaangeblich diese ganzen Kästchen und das alles verschieben kann, aber HM wie genau?
Ich hoffe mir kann jemand sagen, wie ich mein Bild so in den "vordergrund" bekomme, dass man den rest nicht mehr drum herum sieht und trotzdem noch auf dem Bild einen Text eingeben kann (am besten so dass er im grauen Kästchen ist).
Ich habe schon versucht einfach den html code zu nehmen und bei "über mich" einzufügen aber dann hat man nur dieses Bild an der Stelle und mehr nicht... >_<°
Kennt sich einer so gut damit aus, dass er mir helfen kann?
Vielen Dank an alle die mir versuchen zu Helfen x_X
Ich bin euch sehr dankbar.
See ya Ran
 

Der_Ritter

Nicht mehr ganz neu hier

AW: Ein Bild als Layout?

Guten morgen!
ich denke, er hat es entweder als Hintergrundbild im body genommen oder mit absolut positionierten divs. In css als background-image definiert, absolut positioniert mit einem hohen z-index, so dass es hinter den anderen divs mit dem textlichen Inhalt erscheint.
Hoffe das hilft dir weiter. :)

Gruß
Der_Ritter
 

chillyorker

Weiß_Nix

AW: Ein Bild als Layout?

Da dein Bild ja eine feste Breite, wie auch eine feste Höhe hat:

1x dein Bild:

<div style="background-image:url(DeinBild.xxx); z-index:1; top:0px;">
</div>

//Hier kannst du im Div-Container deinen Text eingeben und formatieren, nach deinen Belieben

<div class="center_column" style="z-index:2;top:0px; height: 350px; overflow: auto; overflow-y: Hidden;
// Folgende Daten beschreiben die Leiste!!!
scrollbar-face-color: maroon; scrollbar-track-color: maroon; scrollbar-3dlight-color: white; scrollbar-darkshadow-color: #FFF; scrollbar-track-color: black; scrollbar-arrow-color: #F45C20; scrollbar-highlight-color: maroon; scrollbar-shadow-color: maroon;">
<hr noshade>Dein Text!!!!!!!
</div>
 
R

Ran

Guest

AW: Ein Bild als Layout?

Da dein Bild ja eine feste Breite, wie auch eine feste Höhe hat:

1x dein Bild:

<div style="background-image:url(DeinBild.xxx); z-index:1; top:0px;">
</div>

//Hier kannst du im Div-Container deinen Text eingeben und formatieren, nach deinen Belieben

<div class="center_column" style="z-index:2;top:0px; height: 350px; overflow: auto; overflow-y: Hidden;
// Folgende Daten beschreiben die Leiste!!!
scrollbar-face-color: maroon; scrollbar-track-color: maroon; scrollbar-3dlight-color: white; scrollbar-darkshadow-color: #FFF; scrollbar-track-color: black; scrollbar-arrow-color: #F45C20; scrollbar-highlight-color: maroon; scrollbar-shadow-color: maroon;">
<hr noshade>Dein Text!!!!!!!
</div>


Ah, und d<as ist das, was ich dazu eingeben muss oder brauch ich einfach nur diesen Code und nichts weiter anderes?
Mit div hab ich noch nicht gebarbeitet nur sonen bischen mit html und so.
Aber wenn das alles ist, dann werd ich das mal ausprobieren.
muss ich dazu auch ein bestimmtes Programm haben?
 

Blackivory

Nicht mehr ganz neu hier

AW: Ein Bild als Layout?

Würde es mit ein normalen Editor machen oder halt Phase 5. HTML-Editor Phase 5 (Portal) Ansonsten würde ich das ganze auch in 2 Divs packen.
Wobei du dir hierbei überlegen kannst ob du den Bereich in der mitte nich Transparent machst so das das Geschriebene evtl ein wenig von den beiden figuren rechts verdeckt wird.
 
R

Ran

Guest

AW: Ein Bild als Layout?

Würde es mit ein normalen Editor machen oder halt Phase 5. HTML-Editor Phase 5 (Portal) Ansonsten würde ich das ganze auch in 2 Divs packen.
Wobei du dir hierbei überlegen kannst ob du den Bereich in der mitte nich Transparent machst so das das Geschriebene evtl ein wenig von den beiden figuren rechts verdeckt wird.

Das mit den Überdecken hab ich mir auch schon überlegt und ich dachte schon, ob ich vielleicht den Text auch einfach schon auf das Bild schreibe und das ganze Ding dann einfach irgendwie versuche hoch zu laden und zwar eben in den Vordergrund, aber ob das klappen würde, weiß ich auch nicht xD
Ich werd einfach mal sehen, wie ich das so hinbekomme >___< Irgendwie muss das schließlich zu schaffen sein °_°
Aber danke für den Link, ich schaus mir gleich ma an ^^
 

Top_Gun

Aktives Mitglied

AW: Ein Bild als Layout?

Also, mal abgesehen davon, dass ich weder die Antworten verstehe noch nachvollziehen kann (ein hoher z-index verdeckt die niedrigen, nicht umgekehrt) und auch immernoch nicht weiß, was man bei myspace alles selber machen darf, will ich mal eine Lösung angehen:

Die myspace Seite ist immer zentriert?
Das Loch für den Inhalt auf deinem Bild ist an der Stelle wo bei der myspace-Seite der Text steht?

Wenn du beides mit ja beantworten kannst, erstelle ein div, definiere dein Bild als Hintergrund und lege es mit einem höheren z-index mittig über alles andere.
Danach nur noch Feintuning...
 
R

Ran

Guest

AW: Ein Bild als Layout?

Ah ich hab nen gutes Beispiel.. und zwar wollte ich das eben so machen..
So sieht Myspace ja eigentlich aus, ne.. so mit den vielen kleinen Blöcken und dem Bild im Hintergrund



Aber ich habe heute wieder sonen Profile gesehen mit dem Bild im Vordergrund und Text drauf



Und so sieht das Bild dann aus, wenn ichs anzeige




Und sowas möchte ich auch mit meinem Bild machen xD
Aber das Prob ist, ich bin nicht die schlauste was html angeht aber das wird schon, wenn ich erstmal weiß wie das geht, kanns nimmer schwer sein xD Denke ich..
 
R

Ran

Guest

AW: Ein Bild als Layout?

Ich weiß nicht, ob du sie sehen kannst, weil manche auf Friends only sind aber ich geb dir mal die Links...

<-- das mit dem normalen layout

<-- das mit dem "extra" layout..
 

chillyorker

Weiß_Nix

AW: Ein Bild als Layout?

Das ist doch genau das was, ich dir gepostet habe!

Probiere es doch mal aus! Du kannst die Styles ergänzen um width: 300px;

für die Breite! und mit Top:xxpx; Die Position von oben bestimmen!

@TopGun: Das war doch alles richtig! Bild im Hintergrund mit z-index:1
darüber ein Div-Container, der erhält z-index:2 und ist farblos, also, nur der Text, der sich über das Bild legt!

Damit wir Dir weiter helfen können, kannst du uns den Quellcode:

Diese Hyroklphen, die kein Mensch versteht, einfach hierein kopieren und dann passen wir es an!
 

Top_Gun

Aktives Mitglied

AW: Ein Bild als Layout?

Das ist doch genau das was, ich dir gepostet habe!
Wenn du nicht nur halben Quelltext reinkopierst und das ganze ein bissl "Newbiefreundlich" verpacken könntest, könnte man damit was anfangen, ich habe deinen Post gar nicht erst gelesen...

Diese Hyroklphen, die kein Mensch versteht, einfach hierein kopieren und dann passen wir es an!
Ähm, meiner Meinung nach, kannst du nicht alles bei mySpace ändern, also wirst du auch den kompletten QT nicht bekommen können...


@Ran, kann ich sehen, ich mach jetzt erstmal Feierabend, in ca 30 mins dann setz ich mich mal dran
 
R

Ran

Guest

AW: Ein Bild als Layout?

@Ran schrieb:
Okay tu das, bin mal gespannt, was dabei raus kommen wird. Ich hab jetzt mal so ganz "nichtskönnerlike" den div-text genommen und das irgendwie versucht aber das will nich so, wie ich will, das Bild wird garnicht erst angezeigt u__U°

Und @chillyorker Ich hab ja die Links gepostet kannst ja mal gucken mit dem Quelltext ^^

 

chillyorker

Weiß_Nix

AW: Ein Bild als Layout?

Den ersten Link, den du gepostet hast. Die/Derjenige baut alles mit Tabellen auf. Schwarzer Hintergrund. Text drüber!

Kann man dem Quelltext entnehmen!

Der 2. gehe ich recht in der Annahme, der gehört zu Dir!

Nicht schlecht für den Anfang. Dein Ziel, ist es also, der 1. ähnlich es nachzumachen! Bild und feste Länge?

Am einfachsten, auch wenn es Ärger von Anderen hier geben wird, wegen oh nein, Tabellen!!!

Dort kannst du Spalte und Zeile vereinen! Daneben eine Spalte frei lassen! Dann wieder eine Spalte/Zeile mit Hintergrundfarbe oder einem Hintergrundbild!



Auf dieser Seite kannst du Dir gleich mit Anzeigebeispielen loslegen!

Ist nicht viel zu lesen, aber a bissle muß schon sein!
 

Top_Gun

Aktives Mitglied

AW: Ein Bild als Layout?

@chillyorker das ist mal völlig falsch. Du hast weder das Problem verstanden, noch alle folgenden Posts...

@Ran sorry für gestern, mir kam leider was dazwischen. Hab mir das jetzt mal angeschaut und kann dir folgende Lösung anbieten:

1. Bennenne dein Bild: background.jpg

2. Lade dein Bild in den MySpace-Ordner wo auch der Quelltext zu finden ist.

3. Füge im Quelltext dieses direkt unter der Zeile die mit <body beginnt ein:
HTML:
<div id="background"></div>
<div id="content">
Hier deinen Inhalt einfügen!
</div>
4. Füge im Stylesheet folgendes hinzu:
Code:
#background {
 z-index:90;
 position:absolute;
 width:860px;
 height:1400px;
 padding:0;
 margin:0 auto;
 top:0px;
 background-image: url(./background.jpg);
 background-repeat:no-repeat;
}

#content {
 z-index:100;
 position:absolute;
 left:190px;
 top:400px;
 width:500px;
 height:860px;
 padding:10px;
 text-align:left;
 overflow:auto;
 color:#ff0000;
}
Das sollte zum gewünschten Erfolg führen... da fehlt jetzt nur noch das Feintuning, da zB die Scrollleiste durch die Bilder geht...
 

chillyorker

Weiß_Nix

AW: Ein Bild als Layout?

@TopGun:

Wenn man deinen Worten nicht entnehmen kann, daß du ein Provokateur bist!

Hättest du mal den Quelltext angeschaut, würdest du auch verstehen, was gemeint ist!

Also, immer schön den Ball flach halten.

P.S.: Auf einmal, hat der Hintergrund einen niedrigeren Index-Wert. Komisch, sagtest du nicht auf Seite:1, es wäre umgekehrt! :lol:
 
Zuletzt bearbeitet:

Top_Gun

Aktives Mitglied

AW: Ein Bild als Layout?

Wenn man deinen Worten nicht entnehmen kann, daß du ein Provokateur bist!

Hättest du mal den Quelltext angeschaut, würdest du auch verstehen, was gemeint ist!
Ich hätte das gemerkt, klar aber jemand der von HTML keine Ahnung hat nicht und darum ging es. Aber schön, dass du dich selber disqualifizierst...

Auf einmal, hat der Hintergrund einen niedrigeren Index-Wert. Komisch, sagtest du nicht auf Seite:1, es wäre umgekehrt! :lol:
Ach und sich sogar zweimal in einem Post ins Abseits zu stellen ist auch ne Meisterleistung...
Ich sagte:
ein hoher z-index verdeckt die niedrigen, nicht umgekehrt
Mein Hintergrund hat den Wert 90 und liegt damit über der Seite die einen niedrigeren Wert nämlich 0 hat. Der Text, der ja sichtbar sein soll, bekommt den Wert 100 damit er darüber liegt.
Das ist genau das was ich gesagt habe...
 

Der_Ritter

Nicht mehr ganz neu hier

AW: Ein Bild als Layout?

... (ein hoher z-index verdeckt die niedrigen, nicht umgekehrt) ...

Jo, da hast du Recht. Hatte eben in aller Frühe noch keinen Kaffee getrunken und das vertauscht. Bitte höflichst um Entschuldigung das mir dieser Fauxpas passieren konnte. Zum Glück gibt es so aufmerksame Forenmitglieder wie dich die das berichtigen. Hoffentlich passiert mir nicht nocheinmal so ein gravierender Fehler. :)

Gruß
Der_Ritter
 

Top_Gun

Aktives Mitglied

AW: Ein Bild als Layout?

Jo, da hast du Recht. Hatte eben in aller Frühe noch keinen Kaffee getrunken und das vertauscht. Bitte höflichst um Entschuldigung das mir dieser Fauxpas passieren konnte. Zum Glück gibt es so aufmerksame Forenmitglieder wie dich die das berichtigen. Hoffentlich passiert mir nicht nocheinmal so ein gravierender Fehler. :)

Gruß
Der_Ritter
Ach Fehler können jedem passieren, war von mir auch nicht böse gemeint ;)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.858
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben