XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Teile der Website verschieben sich bei Auflösung (http://xhtmlforum.de/showthread.php?t=61481)

Panamajack 18.06.2010 13:14

Teile der Website verschieben sich bei Auflösung
 
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
und
Code:

position: relative
benutze.

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;
}

Default.css Ausschnitt für Position

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

Panamajack 18.06.2010 15:57

So,

hat sich erledigt, hab es durch länegre probieren, nachdenken, etc selbst hingekriegt :)

Nur so lernt man ja ;)

Kann geclosed werden =)

Thielo 18.06.2010 17:42

Und wie hast du es geschafft das Problem zu lösen?!

Korasu 19.06.2010 03:48

darf ich fragen was die [B]-tags vor jeder id bewirken sollen? :)

heiko_rs 19.06.2010 11:31

Ich schätze, er wollte diese Code-Teile in seinem Post hervorheben.

Panamajack 19.06.2010 13:10

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

heiko_rs 19.06.2010 15:34

Zitat:

Zitat von Panamajack (Beitrag 468450)
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

Ja, das ist der übliche Weg. Horiz. zentr. wird das Ganze dann per margin: 0 auto; für das umgeb. div.

Panamajack 19.06.2010 15:53

Ok danke schön für die Bestätigung =)


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:41 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019