Anzeige

Aufteilung der Seite und Layout-Probleme

Aufteilung der Seite und Layout-Probleme | PSD-Tutorials.de

Erstellt von papiertiger, 23.02.2006.

  1. papiertiger

    papiertiger Aktives Mitglied

    Dabei seit:
    12.08.2005
    Beiträge:
    364
    Geschlecht:
    weiblich
    Aufteilung der Seite und Layout-Probleme
    Hallo Ihr!

    Ich würde aus dieser Grafik gern eine Seite machen, auf der das Design mittig ist und sich der Content-Bereich nach unten beliebig ausdehnen lässt - je nach Platzbedarf also. Allerdings soll dieser Bereich eine Mindesthöhe haben.

    Hier mal der Entwurf:
    [​IMG]

    Ich hab mir gedacht ich Schneide das Stück mit den vertikalen Balken aus und speicher das als header.jpg diese Linkleiste, auf der später der Text keine Grafik sondern eben Text sein wird schneide ich ebenfalls aus und speicher sie als menue.jpg. Nun würde ich gern von dem dunkelbraunen Stück (wo später der Content stehen wird) ein kleines Stück ausschneiden (ein paar Pixel hoch und über die gesamte Breite), welches entweder nach unten wiederholt oder eben langgestreckt wird. Das wäre dann content.jpg. Nun hab ich noch den unteren helleren Balken, auf dem später mit Text diese Copyright-Info stehen soll, bzw. ein Link zum Impressum oder ähnliches... Den würde ich ebenfalls ausschneiden und footer.jpg nennen.

    Das einzige Problem, das ich habe ist, dass ich nicht weiß, wie ich die einzelnen Grafiken so untereinander bekomme, dass sie pixelgenau aufeinander passen, sich das Stück content.jpg wiederholt oder streckt und darauf der Text liegt. Das alles würde ich gern mit div-Tags machen und in einer CSS-Datei stehen haben!

    Wäre für eure Hilfe superdankbar!

    LG papiertiger
     
    #1      
  2. torbstoff

    torbstoff Nicht mehr ganz neu hier

    Dabei seit:
    29.11.2005
    Beiträge:
    215
    Geschlecht:
    männlich
    Aufteilung der Seite und Layout-Probleme
    alles soweit richtig.

    definiere ersteinmal 4 div-boxen
    1. logo
    2. menu
    3. content
    4. footer

    dann schreibst du in jedes <div> ein id="". zum bleistift <div id="logo">, wobei in jeder div-box eine andere id ist. dann mit css die ids bestimmen:
    z.b.:
    div#logo{
    background-image:url(BILD_DES_LOGO);
    width:BREITE;
    height:HÖHE;
    position:absolute;
    left:ENTFERNUNG_VOM_LINKEN_RAND;
    top:ENTFERNUNG_VON_DER_OBEREN_KANTE;
    }

    das machst du für jede div-box.
    ich setze hier ein paar html/css kenntnisse voraus. mach mal bitte soweit du kommst

    EDIT: bei dem footer solltest du entweder mit fixed arbeiten oder statt bottom statt top verwenden - wobei ich nicht weiß, ob das jeder browser kennt. vielleicht wäre ne tabelle angemessener.
     
    #2      
  3. papiertiger

    papiertiger Aktives Mitglied

    Dabei seit:
    12.08.2005
    Beiträge:
    364
    Geschlecht:
    weiblich
    Aufteilung der Seite und Layout-Probleme
    Hi Torbstoff!

    Danke schon mal für deine Hilfe!

    Bis auf das mit dem footer klappt alles prima! ;)

    Ich wollte das alles eigentlich in ne Tabelle von 100% schreiben und dann eben die einzelnen Grafik-Streifen als bg für die einzelnen td-Tags angeben. Aber mir hat jemand gesagt, dass man Tabellen eigentlich nicht mehr verwendet für Layout-Zwecke und div-Tags flexibler sind!? Jetzt bin ich verwirrt!?

    Es geht mir hier auch einfach darum, dass ich es mit Tabelle und div-Tags kann. Dann hab ich wieder was, worüber ich mich freuen kann! :p

    Edit: Ich hab das footer-div-Tag ins content-div rein und mit bottom: 0px geht es wunderbar!

    Vielen Dank noch mal!

    LG papiertiger
     
    #3      
  4. torbstoff

    torbstoff Nicht mehr ganz neu hier

    Dabei seit:
    29.11.2005
    Beiträge:
    215
    Geschlecht:
    männlich
    Aufteilung der Seite und Layout-Probleme
    hm... also besser finde ich tabellen, auch wenn das viele andere - aus welchen gründen auch immer - anders sehen. einer hier im forum meinte mal, mit div und css wäre das besser, weil man dann seiten z.b. flexibel im pda oder dergleichen betrachten kann. aber ich gehe davon aus, dass niemand deine seite im pda oder geräten mit geringen auflösungen betrachten will.
     
    #4      
  5. papiertiger

    papiertiger Aktives Mitglied

    Dabei seit:
    12.08.2005
    Beiträge:
    364
    Geschlecht:
    weiblich
    Aufteilung der Seite und Layout-Probleme
    Vielleicht könntest du mir dann auch bzgl. Tabellen weiter helfen!? Wie würde das für eine Tabelle aussehen?

    Ich hätte das ganze jetzt so gemacht:

    Code (Text):
    1.  
    2. <table width="100%" border="0" cellpadding="0" cellspacing="0">
    3.     <tr>
    4.         <td background="header.jpg"></td>
    5.     </tr>
    6.     <tr>
    7.         <td background="menue.jpg"></td>
    8.     </tr>
    9.     <tr>
    10.         <td background="content.jpg"></td>
    11.     </tr>
    12.     <tr>
    13.         <td background="footer.jpg"></td>
    14.     </tr>
    15. </table>
    16.  
    So hab ich aber das Problem, dass nichts angezeigt wird, wenn nichts in der Tabelle steht...!?

    LG papiertiger
     
    #5      
  6. torbstoff

    torbstoff Nicht mehr ganz neu hier

    Dabei seit:
    29.11.2005
    Beiträge:
    215
    Geschlecht:
    männlich
    Aufteilung der Seite und Layout-Probleme
    also mit tabelle hätte ich das so gemacht:
    Code (Text):
    1. <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
    2.    <tr>
    3.       <td background="header.jpg">
    4. </td>
    5.    </tr>
    6.    <tr>
    7.       <td background="menue.jpg"></td>
    8.    </tr>
    9.    <tr>
    10.       <td background="content.jpg"></td>
    11.    </tr>
    12.    <tr>
    13.       <td background="footer.jpg"></td>
    14.    </tr>
    15. </table>
    wobei ich jetzt nicht weiß, ob das height="" in tr oder td-tag gehört. aber damit hätte ich jetzt die höhe jeder zeile angegeben und da, wo der inhalt rein soll einfach n * gesetzt, sodass das variabel ist.
    wenn da nichts drin ist, musst du da was rein machen. z.b.
    EDIT: ach mensch... wieso geht das mit dem leerzeichen nicht
    EDIT2: kann mir mal jemand erklären, wie man ein Leerzeichen im htmlcodestil (kp wie das jetzt richtig heißt) einfügt - ihr wisst schon & n b s p ; nur ohne leerzeichen zwischen den buchstaben. irgendwie klappt das in diesem forum nicht

    eleganter wäre das jetzt mit ein wenig css statt background="" und width="" aber hier reicht das wohl auch[/quote]
     
    #6      
  7. papiertiger

    papiertiger Aktives Mitglied

    Dabei seit:
    12.08.2005
    Beiträge:
    364
    Geschlecht:
    weiblich
    Aufteilung der Seite und Layout-Probleme
    DANKE! Werd ich gleich mal ausprobieren :wink:

    Meine nächsten Probleme:

    Ist es möglich den Content-Streifen (content.jpg) wiederholen zu lassen, statt ihn in die Länge zu ziehen?

    Im Mozilla funktioniert alles... Im IE nicht :( Warum?

    Code (Text):
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    3. "http://www.w3.org/TR/html4/loose.dtd">
    4.  
    5. <html>
    6. <head>
    7. <title>TEST</title>
    8. <style type="text/css">
    9. <!--
    10. #header
    11. {
    12. background-image:url(Bilder/entwurf01_01.jpg);
    13. width:780px;
    14. height:153px;
    15. position:absolute;
    16. left:0px;
    17. top:0px;
    18. }
    19.  
    20. #menue
    21. {
    22. background-image: url(Bilder/entwurf01_02.jpg);
    23. width:780px;
    24. height:46px;
    25. position:absolute;
    26. left:0px;
    27. top:153px;
    28. }
    29.  
    30. #content
    31. {
    32. background-image: url(Bilder/entwurf01_03.jpg);
    33. width:780px;
    34. height:auto;
    35. position:absolute;
    36. left:0px;
    37. top:199px;
    38. min-height: 400px;
    39. }
    40.  
    41. #footer
    42. {
    43. background-image: url(Bilder/entwurf01_05.jpg);
    44. width:780px;
    45. height:44px;
    46. position: absolute;
    47. left:0px;
    48. bottom:0px;
    49. }
    50. -->
    51. </style>
    52. </head>
    53. <body>
    54.     <div id="header">
    55.     </div>
    56.     <div id="menue">
    57.     </div>
    58.     <div id="content">test
    59.         <div id="footer">
    60.         </div>
    61.     </div>
    62. </body>
    63. </html>
    Wie gesagt, ich würde mich riesig freuen, wenn ich das hinbekommen würde mit eurer Hilfe!

    LG papiertiger
     
    #7      
  8. fanttomas

    fanttomas Guest

    Aufteilung der Seite und Layout-Probleme
    Nur so nebenbei, ich weiss nicht wie es den anderen ergeht, aber meine Augen leiden unter der Farbe.

    gruss
     
    #8      
  9. Eskayp

    Eskayp Something

    Dabei seit:
    29.01.2006
    Beiträge:
    235
    Geschlecht:
    männlich
    Aufteilung der Seite und Layout-Probleme
    Ich würde es auch mit Tabellen machen, also meinetwegen so:

    Code (Text):
    1.  
    2. <table width="xxx" border="0" cellpadding="0" cellspacing="0">
    3.   <tr>
    4.     <td background="header.jpg"></td>
    5.   </tr>
    6.   <tr>
    7.     <td background="menue.jpg"></td>
    8.   </tr>
    9.   <tr>
    10.     <td background="content.jpg"></td>
    11.   </tr>
    12.   <tr>
    13.     <td background="footer.jpg"></td>
    14.   </tr>
    15. </table>
    16.  
    Das (=festes Leerzeichen) bewirkt, dass in der Zelle etwas steht und diese so in jedem Browser auf jeden Fall angezeigt wird.

    Allerdings kann man das Bild auch direkt als IMG einfügen, wenn ansonsten in der Zelle nichts mehr stehen soll.

    Also z.B. so:

    Code (Text):
    1.  
    2. <html>
    3.   <head>
    4.     <style type="text/css">
    5.       [...]
    6.       td.content {
    7.         background-image:url(bilder/content.jpg);
    8.         background-repeat:repeat-y;
    9.         height:100px;
    10.         vertical-align:top;
    11.       }
    12.     </style>
    13.   </head>
    14.   <body>
    15.     <div align="center"><table cellspacing="0" cellpadding="0" border="0" width="xxx">
    16.       <tr>
    17.         <td>
    18.           [img]bilder/header.jpg[/img]
    19.  
    20.           [img]bilder/menu.jpg[/img]
    21.  
    22.         </td>
    23.       </tr>
    24.       <tr>
    25.         <td class="content">
    26.           Blabla
    27.         </td>
    28.       </tr>
    29.       <tr>
    30.         <td>
    31.           [img]bilder/footer.jpg[/img]
    32.  
    33.         </td>
    34.       </tr>
    35.     </table></div>
    36.     <map name="menumap">
    37.       [...]
    38.     </map>
    39.   </body>
    40. </html>
    41.  
     
    #9      
  10. papiertiger

    papiertiger Aktives Mitglied

    Dabei seit:
    12.08.2005
    Beiträge:
    364
    Geschlecht:
    weiblich
    Aufteilung der Seite und Layout-Probleme
    Entschuldigung an deine Augen :D. Das ist ein auf die Schnelle zusammen geschusterters Etwas, was nicht dafür gedacht ist schön auszusehen ;)!

    @Eskayp: Ja, so hatte ich es versucht... WEnn ich in die Tabelle ein festes Leerzeichen setze, dann wird eben genau eine Zeile angezeigt und der Rest abgeschnitten...
    Und als img will ich sie nicht einfügen, weil wie gesagt überall Text drauf liegen soll...

    LG papiertiger
     
    #10      
  11. Eskayp

    Eskayp Something

    Dabei seit:
    29.01.2006
    Beiträge:
    235
    Geschlecht:
    männlich
    Aufteilung der Seite und Layout-Probleme
    Naja, dann machst Du eben alle als Hintergrundbilder, wie in meinem Beispiel der "content"-Bereich und notierst im Stylesheet den Befehl "height:100px;" (bzw. so hoch, wie die Zelle eben sein soll).
     
    #11      
  12. s-janssen

    s-janssen Noch nicht viel geschrieben

    Dabei seit:
    11.02.2006
    Beiträge:
    5
    Aufteilung der Seite und Layout-Probleme
    jo aber die farbe kannste echt niemanden anbieten ;)
     
    #12      
  13. papiertiger

    papiertiger Aktives Mitglied

    Dabei seit:
    12.08.2005
    Beiträge:
    364
    Geschlecht:
    weiblich
    Aufteilung der Seite und Layout-Probleme
    Hi Ihr!

    So, ich hab es mit Tabellen geschafft! ;) Ich hatte gestern nicht 100px sondern 100% angegeben! Das war der ganze Fehler da dran! Im Firefox, Opera und IE kann man es schon mal ansehen - abgesehen von der schrecklichen Farbe ;)!

    Ich würde mich freuen, wenn jemand noch eine Idee hätte, wie ich das mit div-Tags machen kann... So dass es auch der IE richtig anzeigt...!

    LG papiertiger
     
    #13      
x
×
×