#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üler für Schü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">Über uns </a></li> <li><a href="beratung.html">Schülerberatung</a></li> </ul> </li> <li><a href="#">Unsere Unterstütztung</a> <ul> <li><a href="#">Persö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ß 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ß 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ß sein. </p> </div> </body> </html> + Multi-Zitat Zitieren
#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? + Multi-Zitat Zitieren
#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; + Multi-Zitat Zitieren
#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". + Multi-Zitat Zitieren
#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> + Multi-Zitat Zitieren
#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">Über uns </a></li> <li><a href="beratung.html">Schülerberatung</a></li> </ul> </li> <li><a href="#">Unsere Unterstütztung</a> <ul> <li><a href="#">Persö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ß 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ß 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ß sein. </p> </div> </div> </body> So, das is der gesamte "Body" code. mit dem eingebauten Div, waer schoen wenn iwer den fehler finden koennte. + Multi-Zitat Zitieren
#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 ... + Multi-Zitat Zitieren
#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 + Multi-Zitat Zitieren
#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 + Multi-Zitat Zitieren
#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 + Multi-Zitat Zitieren