Anzeige

Ein Bild als Layout?

Ein Bild als Layout? | PSD-Tutorials.de

Erstellt von Ran, 29.09.2008.

  1. Ran

    Ran Guest

    Ein Bild als Layout?
    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..

    [​IMG][​IMG]
    [​IMG]

    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
     
    #1      
  2. Der_Ritter

    Der_Ritter Nicht mehr ganz neu hier

    Dabei seit:
    04.03.2008
    Beiträge:
    101
    Geschlecht:
    männlich
    Ein Bild als Layout?
    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
     
    #2      
  3. chillyorker

    chillyorker Weiß_Nix

    Dabei seit:
    04.09.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    Ein Bild als Layout?
    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>
     
    #3      
  4. Ran

    Ran Guest

    Ein Bild als Layout?
    AW: Ein Bild als Layout?


    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?
     
    #4      
  5. Blackivory

    Blackivory Nicht mehr ganz neu hier

    Dabei seit:
    04.06.2007
    Beiträge:
    144
    Geschlecht:
    männlich
    Software:
    Photoshop CS Illustrator CS2 Cinema 4D HTML Editor
    Ein Bild als Layout?
    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.
     
    #5      
  6. Ran

    Ran Guest

    Ein Bild als Layout?
    AW: Ein Bild als Layout?

    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 ^^
     
    #6      
  7. Blackivory

    Blackivory Nicht mehr ganz neu hier

    Dabei seit:
    04.06.2007
    Beiträge:
    144
    Geschlecht:
    männlich
    Software:
    Photoshop CS Illustrator CS2 Cinema 4D HTML Editor
    Ein Bild als Layout?
    AW: Ein Bild als Layout?

    Ich weis ja nicht was du wie vor hast deswegen schwer zu sagen :)
     
    #7      
  8. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Ein Bild als Layout?
    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...
     
    #8      
  9. Ran

    Ran Guest

    Ein Bild als Layout?
    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

    http://i148.photobucket.com/albums/s6/TotchiX/Other/NormalMyspace.jpg

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

    http://i148.photobucket.com/albums/s6/TotchiX/Other/Layout.jpg

    Und so sieht das Bild dann aus, wenn ichs anzeige

    http://i148.photobucket.com/albums/s6/TotchiX/Other/Hintergrund.jpg


    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..
     
    #9      
  10. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Ein Bild als Layout?
    AW: Ein Bild als Layout?

    Gib mir doch mal die Links zu den Profilen die du als Beispiel gefunden hast...
     
    #10      
  11. Ran

    Ran Guest

    Ein Bild als Layout?
    #11      
  12. chillyorker

    chillyorker Weiß_Nix

    Dabei seit:
    04.09.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    Ein Bild als Layout?
    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!
     
    #12      
  13. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Ein Bild als Layout?
    AW: Ein Bild als Layout?

    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...

    Ä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
     
    #13      
  14. Ran

    Ran Guest

    Ein Bild als Layout?
    AW: Ein Bild als Layout?

     
    #14      
  15. chillyorker

    chillyorker Weiß_Nix

    Dabei seit:
    04.09.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    Ein Bild als Layout?
    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!

    SELFHTML: HTML/XHTML / Tabellen / Gestaltung einer Tabelle

    Auf dieser Seite kannst du Dir gleich mit Anzeigebeispielen loslegen!

    Ist nicht viel zu lesen, aber a bissle muß schon sein!
     
    #15      
  16. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Ein Bild als Layout?
    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:
    1. <div id="background"></div>
    2. <div id="content">
    3. Hier deinen Inhalt einfügen!
    4. </div>
    4. Füge im Stylesheet folgendes hinzu:
    Code (Text):
    1. #background {
    2.  z-index:90;
    3.  position:absolute;
    4.  width:860px;
    5.  height:1400px;
    6.  padding:0;
    7.  margin:0 auto;
    8.  top:0px;
    9.  background-image: url(./background.jpg);
    10.  background-repeat:no-repeat;
    11. }
    12.  
    13. #content {
    14.  z-index:100;
    15.  position:absolute;
    16.  left:190px;
    17.  top:400px;
    18.  width:500px;
    19.  height:860px;
    20.  padding:10px;
    21.  text-align:left;
    22.  overflow:auto;
    23.  color:#ff0000;
    24. }
    Das sollte zum gewünschten Erfolg führen... da fehlt jetzt nur noch das Feintuning, da zB die Scrollleiste durch die Bilder geht...
     
    #16      
  17. chillyorker

    chillyorker Weiß_Nix

    Dabei seit:
    04.09.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    Ein Bild als Layout?
    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: 30.09.2008
    #17      
  18. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Ein Bild als Layout?
    AW: Ein Bild als Layout?

    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...

    Ach und sich sogar zweimal in einem Post ins Abseits zu stellen ist auch ne Meisterleistung...
    Ich sagte:
    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...
     
    #18      
  19. Der_Ritter

    Der_Ritter Nicht mehr ganz neu hier

    Dabei seit:
    04.03.2008
    Beiträge:
    101
    Geschlecht:
    männlich
    Ein Bild als Layout?
    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
     
    #19      
  20. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Ein Bild als Layout?
    AW: Ein Bild als Layout?

    Ach Fehler können jedem passieren, war von mir auch nicht böse gemeint ;)
     
    #20      
x
×
×
teststefan