|
|||
![]()
Hallo zusammen,
Ich bin recht neu in der XHTML und CSS Welt und muss gerade für mein Studium eine Website erstellen. Ich habe das Buch von Michael Jendryschick durchgelesen und auch halbwegs verstanden (denke ich). Jetzt habe ich allerdings mehrere Probleme und ich habe leider absolut keine Ahnung wie ich da weiterkomme. Kurz zu meiner Umgebung: Auflösung: 1920*1080 Die Website sieht so aus wie geplant, alles sitzt so wie ich wollte. (Siehe Bild: http://www.bilder-hochladen.net/files/7it4-4-jpg.html) Danach wollte ich die Website unetr der Auflösung 800*600 ansehen und musste feststellen, dass sie total verzogen ist. (Siehe Bild: http://www.bilder-hochladen.net/file...-5-jpg-nb.html ) Ich verstehe, dass es an der Auflösung liegt. Jetzt frage ich mich als Neuling nur: Wie kriegen das andere Websites hin, dass diese in jeder Auflösung( und Fenstergröße ) gleich gut aussehen? Wieso haut mir mein Content (bei den Bildern :"SCHÖN DASS SIE VORBEI SCHAUEN!) nach rechts ab, wenn ich eine kleinere Auflösung nehme ? Wieso wird das Bild über dem Menüeintrag "Veranstaltungen" kleiner, aber nicht die anderen Teile der Website ? Und zu guter letzt: Ich habe schon nach meinem Fehler gegoogelt und habe gelesen, dass es wahrscheins daran liegt, dass ich Code:
position: absolute Code:
position: relative In dem Beispiel meines Buches, nutzt Herr Jendryschick allerdings auch diese Angaben und bei ihm sieht die Website in jeder Auflösung gleichgut aus, was mache ich also falsch? So, nach meinem ganzen Geschwalle kommt jetzt noch mein Code, da ihr mir ja sonst schlecht helfen könnt *g*. Ausschnitt aus meiner Index.html: HTML-Code:
<!-- Navigationsleiste oben --> <div class="menu" [B]id="topm[/B]"> <ul> <li class="zwischen"> <strong title="Hier befinden Sie sich gerade." id="start">Startseite</strong> <!-- Navigationsleiste an der Seite --> <div class="menu" [B]id="sidem"[/B]> <ul> <li><a href="Veranstaltungen.html">Veranstaltungen</a> <!-- Hintergrund überhalb der Sidebar --> <div id=[B]"log"[/B]></div> <!-- Inhalt --> <div id=[B]"content[/B]"> <h2>Schön, dass Sie vorbei schauen!</h2> Inhalt meiner default.css (nur Ausschnitt für das Sidemenü!) HTML-Code:
/** * Länge auf 250 pixel setzen ( bündig mit dem image oben drüber) * 1 pixel großer weißer Rand zwischen den einzelnen "Buttons" * Text ausrichtung rechts. * */ #sidem { width: 250px; background-color: #93d50d; } #sidem ul{ list-style: none; margin: 0; padding: 0; } #sidem a { font: normal 100%/100% Georgia, Palatino, "Times New Roman", serif; display: block; border-width: 1px 0px 1px 0px; border-style: solid; border-color: #ffffff; margin: 0; padding: 8px 12px; text-align: right; background: #fff; } #sidem a{ color: #93d50d; text-decoration: none; } /** * die ausgeklappten Puntke werden absolut an den Überpuntken positioniert * */ #sidem li { position: relative; } #sidem ul ul{ position: absolute; top: 0%; left: 100%; width: 100%; border-width: 0px 0px 0px 2px; border-color: #ffffff; border-style: solid; } HTML-Code:
div#head { width: 932px; margin: auto; position: relative; } #head h1 { margin: 0; padding: 0; background: #EBE9DF url(pics/bg_logo.gif) left bottom no-repeat; text-align: right; } /** * @section Topmenü * */ #topm ul { position: absolute; bottom: 80px; left: 0px; z-index: 2; } /** * @section Sidemenü * */ #sidem ul { position: absolute; margin: 0; padding: 0; text-align: right; width: 250px; top: 265px; z-index: 2; } Oh mann, das ist ganz schön viel... ich weiß wieviel ich euch da zumute -.- Hoffe aber trotzdem mir kann jemand helfen. Allein schonmal fürs Durchlesen vielen Dank! Gruß Panama |
Sponsored Links |
|
||||
![]()
Und wie hast du es geschafft das Problem zu lösen?!
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege ![]() www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
|||
![]()
So,
also die IDs wollte ich nur herovrheben, deswegen die [B]'s . Nun zur Problemlösung: Ich habe mir im Netz noch ein paar Tutorials durchgelesen zu dem Thema "position", da ich der Meinung war, dass der Fehler wohl dort lag und in dem Buch von Michael Jendryschik dieser Teil, meiner Meinung nach, nicht sehr gut erklärt wird ( zumidnest für totale Anfänger). Nach mehreren Tutorials bin ich dann auf die Idee gekommen folgendes zu machen: in der Index.html: HTML-Code:
body { <div id=[B]"website"[/B]> <!-- Website inhalt, Navigation, etc --> </div> <!-- Ganz am Ende das div schließen --> In der css Datei habe ich danach dieses div auf eine feste Größe gesetzt und da der Rest der Website innerhalb dieses divs ist, verschiebt sich auch nichts mehr, egal welche Auflösung ich habe und wie groß ich das Browserfenster ziehe. Jetzt hätte ich nur noch eine Frage an euch: Ist das eine "gute" Lösung oder gibt es eine bessere? Zuerst bin ich auch noch auf die Idee gekommen alles in mehrere Tabellen zuordnen, aber davon rät Jendryschick in seinem Buch ab. (Tabellenmurks halt ![]() P.S.: Da ich meistens sehr große Textblöcke in Foren schreib, markiere ich meistens meine Fragen kursiv und wichtige Aussagen oder ähnliches mit fettschrift *g* . So werdet ihr mich halt ertragen müssen :P |
|
||||
![]()
Ja, das ist der übliche Weg. Horiz. zentr. wird das Ganze dann per margin: 0 auto; für das umgeb. div.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hintergrundgrafik verschieben bei Änderung der Auflösung | Trixi | CSS | 3 | 30.03.2009 16:38 |
ie 6 seite: einige teile der Seite verschieben sich! | unicorn | CSS | 10 | 13.02.2009 15:20 |
Positionierung von Bildern bei geringerer Auflösung verschieben sich | tetrismaster | (X)HTML | 4 | 25.04.2007 12:48 |
IE verschiebt Teile der Website | phpX | CSS | 1 | 04.05.2006 10:29 |