Anzeige

Layout Problem bei meiner kleinen Homepage

Layout Problem bei meiner kleinen Homepage | PSD-Tutorials.de

Erstellt von myknoppers, 06.06.2013.

  1. myknoppers

    myknoppers Noch nicht viel geschrieben

    Dabei seit:
    29.11.2009
    Beiträge:
    6
    Geschlecht:
    männlich
    Layout Problem bei meiner kleinen Homepage
    Hallo,

    ich erstelle momentan meine eigene kleine Website nur leider will das Layout nicht so wie ich des möchte.

    HTML-Code
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    3. <title>Fotografie Dominik Rühl</title>
    4. <link href=".\stylesheet\style.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
    5. <style>
    6. .content { margin-right: -1px; } /* Dieser negative Rand mit 1 Pixel hat in jeder Spalte in diesem Layout die gleiche korrigierende Auswirkung. */
    7. ul.nav a { zoom: 1; }  /* Mit der zoom-Eigenschaft erhält IE den Auslöser hasLayout, der erforderlich ist, um den zusätzlichen Leerraum zwischen den Hyperlinks zu korrigieren. */
    8. </style>
    9. <![endif]-->
    10. </head>
    11.  
    12.  
    13. <div class="container">
    14.   <div class="header">
    15.     <!-- end .header --></div>
    16.   <div class="leftsidebar">
    17.     <!-- end .leftsidebar --></div>
    18.   <div class="content">
    19.     <div class="headercontent">
    20.     <p>hay</p>
    21.     <div class="logo">
    22.     test
    23.     </div>
    24.     <div class="containernav">
    25.         <ul class="nav">
    26.         <li><a href="Index.html">Home</a></li>
    27.         <li><a href=".\subsites\aboutme.html">About Me</a></li>
    28.         <li><a href=".\subsites\kamera.html">Meine Kamera</a></li>
    29.         <li><a href=".\subsites\fotos.html">Meine Fotos</a></li>
    30.         </ul>
    31.         </div>
    32.     </div>
    33.     test
    34.     <!-- end .content --></div>
    35.   <div class="rightsidebar">
    36.     <!-- end .rightsidebar --></div>
    37.   <div class="footer">
    38.     <!-- end .footer --></div>
    39.   <!-- end .container --></div>
    40. </body>
    41. </html>
    42.  
    Css Code
    Code (Text):
    1. @charset "utf-8";
    2. body {
    3.     font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    4.     background-color: #4E5869;
    5.     margin: 0;
    6.     padding: 0;
    7.     color: #000;
    8. }
    9.  
    10.  
    11. ul, ol, dl {
    12.     padding: 0;
    13.     margin: 0;
    14. }
    15. h1, h2, h3, h4, h5, h6, p {
    16.     margin-top: 0;   
    17.     padding-right: 15px;
    18.     padding-left: 15px;
    19. }
    20. a img {
    21.     border: none;
    22. }
    23.  
    24. a:link {
    25.     color:#414958;
    26.     text-decoration: underline;
    27. }
    28. a:visited {
    29.     color: #4E5869;
    30.     text-decoration: underline;
    31. }
    32. a:hover, a:active, a:focus {
    33.     text-decoration: none;
    34. }
    35.  
    36.  
    37. .container {
    38.     width: 100%;
    39.     background-color: #f5f5f5;
    40.     margin: 0 auto;
    41. }
    42.  
    43. .header {
    44.     background-color: #4169E1;
    45.     width: 100%;
    46.     height: 80px;
    47. }
    48.  
    49. .leftsidebar {
    50.     float: left;
    51.     width: 25%;
    52.     padding-bottom: 10px;
    53. }
    54. .content {
    55.     position: relative;
    56.     padding: 10px 0;
    57.     width: 50%;
    58.     float: left;
    59. }
    60. .rightsidebar {
    61.     float: left;
    62.     width: 25%;
    63.     padding: 10px 0;
    64. }
    65.  
    66.  
    67. .content ul, .content ol {
    68.     padding: 0 15px 15px 40px;
    69. }
    70.  
    71. .headercontent {
    72.     width: 100%;
    73.     float: left;
    74.     position: relative;
    75. }
    76. .containernav {
    77.     width: 60%;
    78.     position: relative;
    79. }
    80.  
    81. .logo {
    82.     width:40%;
    83.     float: left;
    84.     position: relative;
    85. }
    86.  
    87. .nav {
    88.       width: 100%;
    89.       float: left;
    90.       margin: 0 0 3em 0;
    91.       padding: 0;
    92.       list-style: none;
    93.       background-color: #f2f2f2;
    94.       border-bottom: 1px solid #ccc;
    95.       border-top: 1px solid #ccc; }
    96.      
    97. .nav li {
    98.       float: left; }
    99.      
    100. .nav li a {
    101.       display: block;
    102.       padding: 8px 15px;
    103.       text-decoration: none;
    104.       font-weight: bold;
    105.       color: #069;
    106.       border-right: 1px solid #ccc; }
    107.      
    108. .nav li a:hover {
    109.       color: #c00;
    110.       background-color: #fff; }
    111.  
    112.  
    113. .footer {
    114.     height: 80px;
    115.     padding: 10px 0;
    116.     background-color:#4169E1;
    117.     position: relative;
    118.     clear: both;
    119. }
    120.  
    121.  
    122. .fltrt {  
    123.     float: right;
    124.     margin-left: 8px;
    125. }
    126. .fltlft {
    127.     float: left;
    128.     margin-right: 8px;
    129. }
    130. .clearfloat {
    131.     clear:both;
    132.     height:0;
    133.     font-size: 1px;
    134.     line-height: 0px;
    135. }
    Hier ist mal ein Foto wie ich es eigentlich haben möchte.


    Ich möchte das die Fußzeile immer am unteren Rand ist egal wie Groß der Content-container ist.

    Hat jemand einen Rat für mich?

    Viele Grüße
     
    Zuletzt von einem Moderator bearbeitet: 06.06.2013
    #1      
  2. FlashZange

    FlashZange Nicht mehr ganz neu hier

    Dabei seit:
    12.12.2008
    Beiträge:
    74
    Geschlecht:
    männlich
    Layout Problem bei meiner kleinen Homepage
    AW: Layout Problem bei meiner kleinen Homepage

    .footer {
    width: 100%; /*muss (zumindest für FF) definiert werden*/
    height: 80px;
    padding: 10px 0;
    background-color:#4169E1;
    position: fixed; /*bleibt immer an der gleichen Stelle auf der Seite*/
    bottom: 0; /*von unten weg 0 Pixel*/
    clear: both;
    }

    Wenn die Höhe zu klein wird, hast du natürlich nur noch footer im Bild! ;)
     
    #2      
  3. deha

    deha Noch nicht viel geschrieben

    Dabei seit:
    19.11.2010
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    MVP
    Software:
    Photoshop, Illustrator, Rhino 3D, Bryce
    Layout Problem bei meiner kleinen Homepage
    AW: Layout Problem bei meiner kleinen Homepage

    Du musst die Klasse footer einfach nur um die roten Einträge ergänzen:

    .footer {
    background-color: #4169E1;
    bottom: 0;
    clear: both;
    height: 80px;
    padding: 10px 0;
    position: absolute;
    width: 100%;


    }
     
    #3      
  4. FlashZange

    FlashZange Nicht mehr ganz neu hier

    Dabei seit:
    12.12.2008
    Beiträge:
    74
    Geschlecht:
    männlich
    Layout Problem bei meiner kleinen Homepage
    AW: Layout Problem bei meiner kleinen Homepage

    ups, ja ich glaub, ich hab das Problem falsch verstanden.
    position: absolute ist natürlich das Richtige :)
     
    #4      
  5. ben3plus

    ben3plus Member

    Dabei seit:
    18.06.2010
    Beiträge:
    265
    Geschlecht:
    männlich
    Layout Problem bei meiner kleinen Homepage
    AW: Layout Problem bei meiner kleinen Homepage

    Es kommt noch darauf an, wie Du es genau haben möchtest.
    Vielleicht ist position: absolute; doch nicht das Richtige.
    Vielleicht auch position: fixed;.
    Aber das darfst Du selber entscheiden:
    http://www.css4you.de/position.html
     
    #5      
  6. deha

    deha Noch nicht viel geschrieben

    Dabei seit:
    19.11.2010
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    MVP
    Software:
    Photoshop, Illustrator, Rhino 3D, Bryce
    Layout Problem bei meiner kleinen Homepage
    AW: Layout Problem bei meiner kleinen Homepage

    Ja, fixed oder absolute vergass ich zu erwähnen, verhalten sich von der anfänglichen Positionierung her gleich. Wobei 'position: fixed;' sogar beim scrollen an der anfänglichen Position stehen bleibt.
     
    #6      
x
×
×