[HTML] Website auf der rechten Seite begrenzen.

Dieses Thema im Forum "Webdesign" wurde erstellt von gluBs, 23. Oktober 2010 .

  1. 23. Oktober 2010
    Website auf der rechten Seite begrenzen.

    Hallo,

    ich habe grade meine eigene Website erstellt, was auch ganz gut klappt, allerdings moechte ich diese auf der rechten seite begrenzen. Soll heissen, das man nicht ewig nach rechts scrollen kann.

    Ausserdem wuerde ich die Seite gerne immer zentriert im Browser haben, damit meine ich, egal wie gross (oder selbst wenn er verkleinert ist) der browser ist, die website soll immer mittig sein.

    Ueber hilfe wuerde ich mich riesig freuen und ne BW is immer drin.


    Spoiler
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html >


    <head>


    <title>
    Faire Austauschberatung: von Sch&uuml;ler f&uuml;r Sch&uuml;ler.
    </title>



    <style type="text/css">

    A:link, A:visited{
    color:#191970;
    text-decoration:none;
    background:transparent
    }

    A:hover{TEXT-DECORATION: underline ;background:white;
    }







    .dropdown {
    position:relative;
    top:139px;
    left:181px;
    font-family: Avantgarde;
    width:9000px;
    height:0px;
    border:0px solid white;
    font-size:15px;
    color:#191970;
    background:#FFFFFF;
    }





    .dropdown ul {padding:0; margin:0; list-style: none;}

    .dropdown ul li {float:left; position:relative;}

    .dropdown ul li a { padding:17px 17px 17px 17px; display:block; text-decoration:none; color:#191970; text-align:top;font-weight:bold}

    .dropdown ul li a:hover {color:#708090; background:transparent; font-size:17px;text-decoration:underline}





    .dropdown ul li ul {display: none;}

    .dropdown ul li:hover ul { font-size:12px; display:block; position:absolute; top:40px; min-width:150px; left:0; }

    .dropdown ul li:hover ul li a {display:block ; background:#FFFFFF; color:#191970 ; width:110px; text-align:top; padding:10px}

    .dropdown ul li:hover ul li a:hover { color:#708090;font-size:12px; text-decoration:none}







    .companylogo {
    position:absolute;left:400px
    }



    </style>

    </head>

    <body>



    <div style="line-height: 0px; position:absolute;top:95px;left:847px; line-height:0px;text-align:center; border-style:solid; border-width:1px; padding:20px;padding-top:2px;background-image:url(images/blauweiss2.png)">
    <p style:"tEXT-DECORATION:underline">

    <p style:"x;marigin><form target="_blank" action="http://www.facebook.com/home.php#!/profile.php?id=100001383156738&ref=search"><input name="Go Abroad" type="hidden" value="1001383156738" /><input type="image" value="1001383156738" src="http://www.bloganol.com/wp-content/uploads/2010/03/addmefb.png" style="width:111px;height:25px;margin:0px;padding:0px;" /></form>
    </p>

    <p style:"tEXT-DECORATION:underline">


    <p>
    <a href="mailto ennisDinkelmeyer@googlemail.com" title="email us">Email</a>
    </p>





    <a href="www.google.de/kontakt" title="Helfende Hand"><h3>Kontakt</h3></a>
    </p>
    </div>







    <p style="position:absolute;top:50px;left:180px"><img src="images/logo.header.png" alt="logo1"></p>









    <p style="position:absolute; top:175px; left:200px"><img src="images/banner2.gif" alt="banner2"></p>







    <div class="dropdown">
    <ul>
    <li><a href="index.html">Home</a></li>
    <ul>

    </ul>

    <li><a href="#">Welcome</a>
    <ul>
    <li><a href="idee.html">Unsere Idee </a></li>
    <li><a href="uns.html">&Uuml;ber uns </a></li>
    <li><a href="beratung.html">Sch&uuml;lerberatung</a></li>

    </ul>

    </li>

    <li><a href="#">Unsere Unterst&uuml;tztung</a>
    <ul>
    <li><a href="#">Pers&ouml;nliche Beratung</a>

    </li>
    <li><a href="#">Seminare</a>

    </li>
    <li><a href="#">Vermittlung</a>


    <li><a href="#">Schulbesuche</a>

    </li>

    </ul>
    </li>

    <li><a href="#">Programme</a>
    <ul>
    <li><a href="#">Abitur im Auslaund</a></li>
    <li><a href="#">Sprachkurse</a></li>
    <li><a href="#">Summerschool</a></li>
    <li><a href="#">Aupair</a></li>
    </ul>
    </li>

    <li><a href="#">Warum ins Ausland?</a>
    <ul>
    <li><a href="#">Lebenserfahrung</a></li>
    <li><a href="#">Sprachkenntnisse</a></li>
    <li><a href="#">Horizont und neue Leute</a></li>
    <li><a href="#">Job-Perskeptive</a></li>
    </ul>
    </li>

    </div>




    <div style="
    background-image:url(images/blauweiss.png);position:absolute;top:490px;left:200px;border-style:solid;border-width:1px;width:250px;height:150px">

    <a href="http://youtube.com/">
    <h3>Diesen September</h3>
    </a>
    <p style="font-size:8pt;">
    Dieser Text sollte 18 Punkte gro&szlig; sein.
    </p>

    </div>


    <div style="background-image:url(images/blauweiss.png);position:absolute;top:490px;left:475px;border-style:solid;border-width:1px;
    border-width:1px;width:250px;height:150px">
    <a href="http://youtube.com/">
    <h3>Seminare</h3>
    </a>
    <p style="font-size:8pt;">
    Dieser Text sollte 18 Punkte gro&szlig; sein.
    </p>
    </div>

    <div style="background-image:url(images/blauweiss.png);position:absolute;top:490px;left:749px;border-style:solid;border-width:1px;width:250px;height:150px">
    <a href="http://youtube.com/">
    <h3>Beratung</h3>
    </a>
    <p style="font-size:8pt;">
    Dieser Text sollte 18 Punkte gro&szlig; sein.
    </p>
    </div>




    </body>

    </html>
     
  2. 23. Oktober 2010
    AW: Website auf der rechten Seite begrenzen.

    um deinen code etwas übersichtlicher zu machen solltest du erst mal den ganzen css code entweder oben in deinen <style> bereich schreiben oder ihn auslagern in eine style.css

    du hast nämlich einen teil oben im <style> bereich und dann wieder was direkt bei den div elementen ....

    hast das selber geschrieben oder mit einem programm erstellt?
     
  3. 23. Oktober 2010
    AW: Website auf der rechten Seite begrenzen.

    Für die Begrenzung nach rechts erstellst du einen DIV um die gesamte Website (sprich, der DIV fängt nach dem <body> an und endet direkt vor dem </body>) und gibst ihm den stylesheet width="...px". Dadurch hat deine Website schonmal eine feste Breite. Wenn sich dich Breite variabel an den Browser anpassen soll, benutzt du anstatt "px" einfach "%".

    Um die Seite dann noch zentriert im Browser zu haben gibst du dem selben DIV noch diese stylesheets:
    position: relative;
    margin-left: auto;
    margin-right: auto;
     
  4. 23. Oktober 2010
    AW: Website auf der rechten Seite begrenzen.

    Spoiler
    <body>

    <div style="width:1000px;position:relative;margin-left: auto;margin-right:auto"</div>

    So, ich hab den Code jetzt eingefuegt, es klappt aber immer noch nicht. Wodran liegt es. Bei mir kommt ne fehlermeldung "Marked invalid because it's missing a closing bracket or quote".
     
  5. 23. Oktober 2010
    AW: Website auf der rechten Seite begrenzen.

    Ja, weil genau das der Fall ist. So sollte es gehen:

    Spoiler
    <body>

    <div style="width:1000px;position:relative;margin-left: auto;margin-right:auto">Inhalt der Webseite</div></body>
     
  6. 23. Oktober 2010
    AW: Website auf der rechten Seite begrenzen.

    Nope, funktioniert immer noch nicht.

    Spoiler
    <body>

    <div style="width:1000px;position:relative;margin-left:auto;margin-right:auto">

    <div style="line-height: 0px; position:absolute;top:95px;left:847px; line-height:0px;text-align:center; border-style:solid; border-width:1px; padding:20px;padding-top:2px;background-image:url(images/blauweiss2.png)">
    <p style:"tEXT-DECORATION:underline">

    <p style:"x;marigin><form target="_blank" action="http://www.facebook.com/home.php#!/profile.php?id=100001383156738&ref=search"><input name="Go Abroad" type="hidden" value="1001383156738" /><input type="image" value="1001383156738" src="http://www.bloganol.com/wp-content/uploads/2010/03/addmefb.png" style="width:111px;height:25px;margin:0px;padding:0px;" /></form>
    </p>

    <p style:"tEXT-DECORATION:underline">


    <p>
    <a href="mailto ennisDinkelmeyer@googlemail.com" title="email us">Email</a>
    </p>





    <a href="www.google.de/kontakt" title="Helfende Hand"><h3>Kontakt</h3></a>
    </p>
    </div>









    <a href="http://goabroad.solidwebhost.com/" target="_self"><img src="images/logo.header.png" alt="Dein Text" border="0" style="position:absolute;top:50px;left:200px"/></a>










    <p style="position:absolute; top:175px; left:200px"><img src="images/banner2.gif" alt="banner2"></p>







    <div class="dropdown">
    <ul>
    <li><a href="index.html">Home</a></li>
    <ul>

    </ul>

    <li><a href="#">Welcome</a>
    <ul>
    <li><a href="idee.html">Unsere Idee </a></li>
    <li><a href="uns.html">&Uuml;ber uns </a></li>
    <li><a href="beratung.html">Sch&uuml;lerberatung</a></li>

    </ul>

    </li>

    <li><a href="#">Unsere Unterst&uuml;tztung</a>
    <ul>
    <li><a href="#">Pers&ouml;nliche Beratung</a>

    </li>
    <li><a href="#">Seminare</a>

    </li>
    <li><a href="#">Vermittlung</a>


    <li><a href="#">Schulbesuche</a>

    </li>

    </ul>
    </li>

    <li><a href="#">Programme</a>
    <ul>
    <li><a href="#">Abitur im Auslaund</a></li>
    <li><a href="#">Sprachkurse</a></li>
    <li><a href="#">Summerschool</a></li>
    <li><a href="#">Aupair</a></li>
    </ul>
    </li>

    <li><a href="#">Warum ins Ausland?</a>
    <ul>
    <li><a href="#">Lebenserfahrung</a></li>
    <li><a href="#">Sprachkenntnisse</a></li>
    <li><a href="#">Horizont und neue Leute</a></li>
    <li><a href="#">Job-Perskeptive</a></li>
    </ul>
    </li>

    </div>




    <div style="
    background-image:url(images/blauweiss.png);position:absolute;top:490px;left:200px;border-style:solid;border-width:1px;width:250px;height:150px">

    <a href="http://youtube.com/">
    <h3>Diesen September</h3>
    </a>
    <p style="font-size:8pt;">
    Dieser Text sollte 18 Punkte gro&szlig; sein.
    </p>

    </div>


    <div style="background-image:url(images/blauweiss.png);position:absolute;top:490px;left:475px;border-style:solid;border-width:1px;
    border-width:1px;width:250px;height:150px">
    <a href="http://youtube.com/">
    <h3>Seminare</h3>
    </a>
    <p style="font-size:8pt;">
    Dieser Text sollte 18 Punkte gro&szlig; sein.
    </p>
    </div>

    <div style="background-image:url(images/blauweiss.png);position:absolute;top:490px;left:749px;border-style:solid;border-width:1px;width:250px;height:150px">
    <a href="http://youtube.com/">
    <h3>Beratung</h3>
    </a>
    <p style="font-size:8pt;">
    Dieser Text sollte 18 Punkte gro&szlig; sein.
    </p>
    </div>


    </div>

    </body>


    So, das is der gesamte "Body" code. mit dem eingebauten Div, waer schoen wenn iwer den fehler finden koennte.
     
  7. 23. Oktober 2010
    AW: Website auf der rechten Seite begrenzen.

    du hast überall eine genaue postion mit left und top angegeben ... somit kannst du auch nichts mittig setzen, da es FEST ist.

    heißt: du musst das alles raus machen ... ich würd den code allgemein neu schreiben ... und übersichtlicher gestalten ... wie ich oben schon geschrieben hab ... css komplett auslagern und mit divs arbeiten ...
     
  8. 24. Oktober 2010
    AW: Website auf der rechten Seite begrenzen.

    um ehrlich zu sein hab ich keine ahnung vom html oder css. den code hab ich mir so zusammen geklaupt.

    ich versuch mal das zu versuchen was du meinst.

    wenn iwer mal ganz viel naechstenliebe verspuert, koennte derjenige mir dann vielleicht den code so umschreiben, dass das allles passt?

    waere super dankbar dafuer xD
     
  9. 24. Oktober 2010
    AW: Website auf der rechten Seite begrenzen.

    achso ist das .... hehe ......

    gibts dazu keine bilder? wenn du mir mal den gesamten ordner schickst mit html und bildern usw as du hast ... schau ichs mir mal an wenn ich zeit hab und versuch was für dich zu machen
     
  10. 24. Oktober 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Website auf der rechten Seite begrenzen.

    cool danke

    Album: Get-Abroad | www.xup.in

    so da sind die dateien drin, normalerweise sind die bilder in nem ordner "images", so sind die auch auf den seiten verlinkt
     
  11. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.