Grafiken rutschen ineinander

[TIMΣ™]

Hi Leute,

Momentan befasse ich mich aus Spaß mit einer Website und erstelle dazu ein paar Hintergrundgrafiken für bspw. die Navigation mit Fireworks. Da ich die Navigation jedoch auf beiden Seiten der Website anzeigen möchte, was ganz gut funktioniert rutscht die rechte Navigationsleiste in den Hauptteil, sobald ich die Größe des Browser-Fensters ändere. Bei dem linken Teil der Navigation ist es allerdings nicht so. Die Navigation besteht aus einzelnen Navigationsfenstern welche sich mehrmals wiederholen, sprich einmal kommt die linke Navigation dann die rechte und immer so weiter.

Anfangs hatte ich Probleme das ganze auf beiden Seiten der Website zu bekommen deswegen musste ich ein wenig rumprobieren, bis es gelang.

Hier ein Code ausschnitt:

CSS:

.navigation_links {
    width: 200px; 
    height: 200px;
    display: block;
    float: left;
    clear: left;
    margin: 15px 0 0 15px;
    background-image: url(section.png);
}

.navigation_rechts {
    width: 200px;
    height: 200px;
    display: block;
    float: right;
    clear: right;
    margin: 15px 15px 0 0;
    background-image: url(section.png);
}

HTML:

<nav class="navigation_links">
  <p id="nav_header">Home</p>
  <ul id="links">
    <li><a href="#">News</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

<nav class="navigation_rechts">
  <p id="nav_header">Community</p>
  <div id="login">
    <b id="textfield">Benutzername:</b><input type="name">
    <b id="textfield">Passwort:</b><input type="password">
    <button type="submit">Login</button>
  </div>
</nav>

... // wiederholt sich mehrmals

Ich wäre echt froh wenn wir da jemand helfen könnten, weil ich nicht weiß wie ich das ganze beheben kann.

[Arkensor]

Hallo,

soweit ich das richtig verstanden habe, musst du damit sich deine Bilder anpassen, die breite von rechts und links dynamisch machen. Das geht am einfachsten, wenn du Prozent angaben verwendest

.navigation_links {
width: 25%; <------ damit musst experimentieren
height: 200px;
display: block;
float: left;
clear: left;
margin: 15px 0 0 15px;
background-image: url(section.png);
}
rechts das gleiche.

Ich hoffe ich konnte dir helfen

Hier nochmal links:


MfG Arkensor

[3lue]

Mach einen div-container rum und gebe ihm eine feste Breite, bspw. 1000px;

[TIMΣ™]

Originally Posted by n3xus'

Mach einen div-container rum und gebe ihm eine feste Breite, bspw. 1000px;

Um die komplette Navigation oder was meinst du?

Originally Posted by Arkensor

Hallo,

soweit ich das richtig verstanden habe, musst du damit sich deine Bilder anpassen, die breite von rechts und links dynamisch machen. Das geht am einfachsten, wenn du Prozent angaben verwendest

.navigation_links {
width: 25%; <------ damit musst experimentieren
height: 200px;
display: block;
float: left;
clear: left;
margin: 15px 0 0 15px;
background-image: url(section.png);
}
rechts das gleiche.

Ich hoffe ich konnte dir helfen

Hier nochmal links:


MfG Arkensor

Die Größe der Grafik soll sich beim skallieren des Fensters nicht verändern sondern die Grafiken rechts sprich die Klasse navigation_rechts rutscht in den Hauptteil bzw. die Mitte der Seite sobald sie die mittlere Grafik berührt.

Bzw. du musst es dir so vorstellen,

Wenn ich die rechte Seite des Browserfensters ein Stück auf die Linke Seite ziehe, dann sieht es so aus, dass

Die rechte Navigation unter den Hauptteil rutscht, obwohl es so nicht sein soll.

Am besten wäre es, dass wenn man das Fenster bewegt die Navigation mitscrollt bzw. mitkommt und nur der mittlere Teil verkleinert wird.

Heute Abend lade ich evt. nur einen Screen hoch, damit man es einfacher versteht.

[3lue]

Um das komplette, ja.
Alternativ kannst du auch mal dem body eine min-width zuweisen.

[xEncounter]

oder wenn es dann nicht klappt, setze mal in jeden Div ein

position:static;

[TIMΣ™]

Originally Posted by xEncounter

oder wenn es dann nicht klappt, setze mal in jeden Div ein

position:static;

Jetzt rutschen die Grafiken nicht mehr unter den mittleren div-container, sondern überlappen ihn bzw. legen sich auf ihn . Sieht zumindest besser aus als vorher, aber trtz nicht der gewünscht Effekt.

Originally Posted by Arkensor

Hallo,

soweit ich das richtig verstanden habe, musst du damit sich deine Bilder anpassen, die breite von rechts und links dynamisch machen. Das geht am einfachsten, wenn du Prozent angaben verwendest

.navigation_links {
width: 25%; <------ damit musst experimentieren
height: 200px;
display: block;
float: left;
clear: left;
margin: 15px 0 0 15px;
background-image: url(section.png);
}
rechts das gleiche.

Ich hoffe ich konnte dir helfen

Hier nochmal links:


MfG Arkensor

Danke, ich weiß zwar was du meinst und es würde auch den Fehler beheben aber ich will ja eben nicht, dass die Navigation dynamisch ist. Deswegen bleibt es auch bei 200px ^^.

Originally Posted by n3xus'

Um das komplette, ja.
Alternativ kannst du auch mal dem body eine min-height zuweisen.

Das mit dem div werde ich mal ausprobieren, aber in der Mitte der Seite ist ja auch ein div-container und trotzdem rutscht es rein, mal sehen .

Irgendwie komme ich leider mit min-height/width bzw. max-height/width nicht so ganz klar.

Mit width bzw. height gebe ich eine einheitliche Größe.

Und max-width bzw. min-width? Heißt das einfach nur, dass der div-container maximal so groß bzw. minimal so klein sein kann, oder wie habe ich das zu verstehen?

[xEncounter]

Du kannst auch mit position:absoulute arbeiten(dann verschiebt sich nichts mehr beim browser verkleinern).

Allerdings musst du danna auch mit top:,bottom:,right: und left:, arbeiten.
Das würde das Float ersetzen.

Nachteil: wird nicht auf jedem Gerät gleich angezeigt. Daher sollte man eher float anstatt absolute positionierung verwenden.

[TIMΣ™]

Naja ich werde die Navigation dann mal komplett umschreiben. Die kurze Variante ist wohl leider nichts . Statdessen muss ich jetzt jeder einzelnen Navigationsbox eine extra ID geben und diese einzeln positionieren, dann sollte das mit den Elemente verrutschen nicht mehr vorkommen. Mein Grundgedanke bei meinem ersten Versuch war es eigentlich die ganze Navigation (auch wenn sie getrennt ist) mit möglichst wenigen ID's zu versehn, bzw. das man für jede box nicht eine ID nehmen muss.

[xEncounter]

Originally Posted by TIMΣ™

Naja ich werde die Navigation dann mal komplett umschreiben. Die kurze Variante ist wohl leider nichts . Statdessen muss ich jetzt jeder einzelnen Navigationsbox eine extra ID geben und diese einzeln positionieren, dann sollte das mit den Elemente verrutschen nicht mehr vorkommen. Mein Grundgedanke bei meinem ersten Versuch war es eigentlich die ganze Navigation (auch wenn sie getrennt ist) mit möglichst wenigen ID's zu versehn, bzw. das man für jede box nicht eine ID nehmen muss.

Verwende doch einfach klassen statt ID's.

Davon ab klingt deine angepriesene Lösung nicht wirklich richtig.

Schreib mich mal an, ich werde mich dann mal mit befassen.

[TIMΣ™]

Originally Posted by xEncounter

Verwende doch einfach klassen statt ID's.

Davon ab klingt deine angepriesene Lösung nicht wirklich richtig.

Schreib mich mal an, ich werde mich dann mal mit befassen.

Ich würde wenn überhaupt beides verwenden. Die Klasse um das Bild in den Hintergrund zu laden und die Größe des Navigations Fensters zu definieren und die ID um die Position anzugeben.

Die Navigation musst du dir so vorstellen, dass sie aus mehreren Fenstern mit jeweils anderen Links besteht.

Ich pn dich später einfach mal und danke.