[HTML] Website immer Mittig

Dieses Thema im Forum "Webdesign" wurde erstellt von x4you, 25. Oktober 2010 .

Schlagworte:
  1. 25. Oktober 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Website immer Mittig

    Hey Leute,

    Website sieht bei mir prima aus und alles.
    Bin jetzt in der Firma und hab hier eben ein Breibildbildschrim.


    Bild

    Wie setzte ich jetzt die ganze Website mittig?
     
  2. 25. Oktober 2010
    AW: Website immer Mittig

    Schau dir mal das hier an:
    CSS Layout Generator | CSS Creator

    Mit diesem CSS Layout Generator kannst du deine Grundstruktur erzeugen.
     
  3. 25. Oktober 2010
    AW: Website immer Mittig

    Gib dem Container in dem der Inhalt lieg folgenden CSS Wert:

    margin: auto;
     
  4. 25. Oktober 2010
    AW: Website immer Mittig

    Funktioniert nicht. Ich hab auch schon versucht mit allen Div's auf 50% zu gehen und wenn ich das so sehe passen die 50% gar nicht. Die teile sind überall wo anders, und alle eher auf der rechten seite.
     
  5. 25. Oktober 2010
    AW: Website immer Mittig

    Das würde mich nicht wundern, vor allem wenn du das mit einem Margin links gehandhabt hast. Dann fangen die erst bei 50% der Seite an ...

    Wie das in deinem Bild allerdings funktioniert weiß ich auch nicht - das sieht ja eher linkslastig aus.

    Gruß,
    gen
     
  6. 25. Oktober 2010
    AW: Website immer Mittig

    Würd euch das weiter helfen wenn ich euch den kompletten Quellcode gebe?
     
  7. 25. Oktober 2010
    AW: Website immer Mittig

    Gib zumindest mal das CSS und markier die wichtigen DIV Elemente.

    Gruß,
    gen
     
  8. 25. Oktober 2010
    AW: Website immer Mittig

    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Rallystreifen-Hamburg.de</title>
    
    
    <style type="text/css">
    <!--
    body {background-color:#c4c2c2;}
    
    .bg {position:absolute;
     left:200px;
     top:50px;}
     
    .rally {position:absolute;
     left:280px;
     top:100px;}
     
    .bynato {position:absolute;
     left:400px;
     top:710px;
     border:0;}
     
    .bynato img {
    border:0px;
    }
     
    .streifen {
    background-image: url(Images/streifen.jpg);
    background-repeat: repeat-y; 
    position: absolute;
    height: 818px;
    width: 500px;
    top: 0px;
    left:530px;}
    
    .streifen2 {
    background-image: url(Images/streifen.jpg);
    background-repeat: repeat-y; 
    position: absolute;
    height: 818px;
    width: 500px;
    top: 0px;
    left:640px;}
     
     
     
    .porsche {position:absolute;
     left:300px;
     top:180px;}
     
    .mini {position:absolute;
     left:520px;
     top:180px;}
     
    .mustang {position:absolute;
     left:740px;
     top:180px;}
     
    .trenn1 {position:absolute;
     top:160px;
     left:300px;
     width:650px;}
     
    .trenn2 {position:absolute;
     top:325px;
     left:300px;
     width:650px;}
     
    .context {position:absolute;
     left:300px;
     top:350px;
     height:320px;
     width:645px;}
     
    .porsche2 {position:absolute;
     top:0px;
     left:445px;}
    
    .porsche3 {position:absolute;
     top:160px;
     left:0px;}
    
    .p1 {text-align:right;}
     
    a:link {border::medium;}
    a:visited {border:medium;}
    a:hover {border:medium;}
    a:active {border:medium;}
    -->
    </style>
    
    
    
    </head>
    
    <body>
    <div class="streifen"></div>
    <div class="streifen2"></div>
    <div class="rally"> <img src="Images/Rallystreifen-head.png" /></div>
    <div class="bg"><img src="Images/Background.png" /></div>
    <div class="trenn1"><hr /></div>
    <div class="trenn2"><hr /></div>
    <div class="porsche"> <img src="Images/Porsche.jpg" /></div>
    <div class="mini"> <img src="Images/Mini.jpg" /></div>
    <div class="mustang"> <img src="Images/Mustang.jpg" /></div>
    <div class="bynato"> <a href="http://www.nato-oliv.de"> <img src="Images/bynato.png" /> </a></div>
    
    <div class="context">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean<br />
    commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus<br />
    et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,<br />
     ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa<br />
     quis enim. Donec pede justo, fringilla vel, aliquet nec,<br />
     vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,<br /> venenatis vitae,
     justo. Nullam dictum felis eu pede mollis pretium.
     
    <div class="porsche2"><img src="Images/Porsche2.jpg" /></div>
    <div class="porsche3"><img src="Images/Porsche3.jpg" /></div>
    <br />
    <br />
    <p class="p1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean<br />
    commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus<br />
    et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,<br />
     ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa<br />
     quis enim. Donec pede justo, fringilla vel, aliquet nec,<br />
     vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,<br /> venenatis vitae,
     justo. Nullam dictum felis eu pede mollis pretium.</p>
    
    
    </div>
    
    
    </body>
    </html>
    
    
    
    
    
     
  9. 25. Oktober 2010
    AW: Website immer Mittig

    Naja, so wie ich das verstehe hast du jedes Element einzeln an eine bestimmte Position gesetzt. Das ist nicht nur mühselig sondern auch natürlich nicht flexibel. Pack doch mal alles außer dem Hintergrund in ein div-element und ordne die Elemente darin an statt jedes einzeln zu positionieren. Dann verwende für das div-Element die "margin"-property um es an die richtige Stelle zu setzen (zB margin:0 auto; um es auf 50% horizontal zu bringen und oben keinen Abstand zu lassen ... je nachdem wie du es willst eben).
    Das sollte dann funktionieren. Falls es dann noch nicht geht kannst du ja nochmal nachfragen.

    Gruß,
    gen
     
  10. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.