Homepage an verschiedene größen anpassen

  • Beratung

  • Goos
  • 1463 Aufrufe 8 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Homepage an verschiedene größen anpassen

    Hey,
    also ich hab mir ein Webtemplate gedownloadet, da passt ja auch eich alles.

    Nur jetzt is des für 800X800.
    Kann man das jetzt i-wie anpassen für 1024X786 oder auch auf die anderen größen das es sich dann vllt für jeden einzelnen richtig anpasst, also überprüft was er eingestellt hat und dann so groß wird??

    Kann man das in der .css datei machen, wenn es überhaupt geht.
    Ich Poste sie einfach mal vllt kann mir des dann jemand erklären:

    Quellcode

    1. a {
    2. color: #000;
    3. text-decoration: none;
    4. }
    5. body {
    6. background: #CCC url(img/bg.gif) repeat-y fixed bottom center;
    7. color: #333; margin: 20px 0;
    8. text-align: center; font: normal 0.6em sans-serif,Arial;
    9. }
    10. .gfx a {
    11. background: #F5F5F5 url(img/header.jpg) no-repeat; display: block; height: 240px;
    12. }
    13. .header {
    14. background: #FFF;
    15. border-bottom: 1px solid #E5E5E5;
    16. font: bold 2.6em Arial;
    17. line-height: 3em;
    18. }
    19. .main {
    20. background: #FFF;
    21. border: 3px double #EEE;
    22. border-color: #E4E4E4 #CFCFCF #CCC #CFCFCF;
    23. margin: 20px auto 4px auto;
    24. text-align: left;
    25. width: 620px;
    26. }
    27. .menu a {
    28. background: #EEE;
    29. border-right: 1px solid #CECECE;
    30. border-top: 1px solid #E5E5E5;
    31. color: #888;
    32. float: left;
    33. padding-top: 4px;
    34. width: 149px; height: 36px;
    35. }
    36. .menu a span {
    37. padding-left: 6px;
    38. }
    39. .menu a:hover {
    40. background: #EEE url(img/bgmenu.gif) repeat-x;
    41. color: #555;
    42. }
    43. .menu a#last {
    44. width: 150px;
    45. border-right: none;
    46. }
    47. .container {
    48. margin: 10px;
    49. }
    50. .content {
    51. background: #F5F5F5;
    52. border-top: 1px solid #E5E5E5;
    53. clear: both;
    54. }
    55. .content h1 {
    56. margin: 0;
    57. font: bold 1.1em sans-serif,Arial;
    58. color: #666;
    59. }
    60. .content p {
    61. margin: 3px 0 6px; color: #666;
    62. }
    63. .item {
    64. background: #FCFCFC url(img/bgitem.gif) repeat-x;
    65. padding: 10px;
    66. }
    67. .footer {
    68. padding: 5px;
    69. background: #F5F5F5;
    70. color: #666;
    71. }
    Alles anzeigen


    Würde mich sehr über eine antwort freuen Goos

  • Hi,

    möglich ist alles. Ich selber arbeite immer mit flexiblen Layouts (liquid designs). Hier passt sich dann die Breite automatisch der Bildschirmauflösung und der Browserfenster an. Hierzu müsste sich Mann oder Frau aber mal dein Webtemplate genauer anschauen … ob es auch dafür geeignet ist.

    Hier mal ein weiterführende Link:
    A List Apart: Articles: Multi-Column Layouts Climb Out of the Box

    Und hier kannst du dir mal ein paar desings mit der Option “Fluid Width“ raussuchen und anschauen.
    opendesigns.org/search/

    Table of content - YAML | Examples

    Nun ist guter Rat teuer!? :) ;)

  • Hey,
    danke für die antwort, ein neues Design würde ich nicht gerne nehmen da ich eich gerade alles fertig habe was ich wollte.
    Der erste Link funzt leider nicht, ka warum.

    Wenn du dich damit auskennst, und mir helfen könntest kannst dich gerne mal bei mir in icq melden, würde mich echt freuen.

    Goos

  • Auch eine Möglichkeit wie ich es öfter mache :

    Mit Javascript die Auflösung abfragen, und dementsprechend eine andere Stylesheet Datei laden.

    Flexible Layouts sind natürlich das A und O, aber nicht immer erwünscht.

    mfg, BuLL
    [FONT="Comic Sans MS"][SIZE="2"]Wer ist dieser LAN ?
    Und warum macht der so viele Partys ?[/SIZE][/FONT]
    Up´s: Cracks für Adobe Creative Suite CS3 ; IDM Ultraedit 14.00 inkl. Keymaker ; > 600 Photoshop Erweiterungen und Addons

  • ^Ganz einfach, dazu gibt es das Objekt Screen (Mehr Infos dazu, hier: HTML DOM Screen Object)
    Praktisch würde das dann so ähnlich aussehen:

    Quellcode

    1. <script type="text/javascript">
    2. // <![CDATA[
    3. var s;
    4. switch(screen.width) {
    5. case 1024: s = 'style_for_1024';
    6. break;
    7. case 1280: s = 'style_for_1280';
    8. break;
    9. default: s = 'default_style';
    10. }
    11. document.write('<link rel='stylesheet' type='text/css' href='path/2styles/'+s+'.css' />');
    12. // ]]>
    13. </script>
    Alles anzeigen


    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • 'Ne gute Möglichkeit ist auch, nur den Contentbereich zu vergrößern und im Header ne Hintergrunddatei zu nehmen.

    @Thor66 Ich würd's machen, kann man dich über eMail erreichen?