✔ Probleme mit Layern in verschiedenen Auflösungen?

[soyo]

Huhu ihr ...

... Ich arbeite momentan an einer Seite und hab die Anordnung des Designs nur mit Layern realisiert. In meiner Auflösung(1024x768) hab ich mit der Darstellung kein Problem, wenn ich aber 800x600 nutze verschiebt sich das Menü teilweise unter das Logo, so dass ein Link nicht mehr lesbar ist.

hier ein kleiner Auszug meiner CSS-Klassen:

#logo {
  position:absolute;
  top: 0px;
  left: 10px;
  height: 220px;
  width: 66px;
  overflow: hidden;
  z-index: 1
}
#menu {
  position: absolute;
  top: 110px;
  left: 0px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  z-index: 0
}

Ich habe schon probiert die Layergrößen mit Prozent anzugeben, das war 1. Nicht gerade einfach und 2. nicht gerade erfolgbringend.
Habt Ihr vielleicht eine Idee wie ich das Problem lösen kann, ohne dabei auf Layer zu verzichten. JavaScript ist natürlich ausgeschlossen.

Wenn wer einen Screenshot braucht, kann ich den auch machen. Aber ich hoffe ihr versteht was ich meine.

Gruß Thomas

 

[soyo]

Ich hätte nun eine Lösung, und zwar habe ich einfach die Schriftgröße der Links verändert, was nun natürlich das Lesen der Links in einer hohen Auflösung ungemein erschwert, aber es ist erstmal eine Lösung.

Über eine andere Lösung, welche nicht die Größe der Links ändern, wär ich sehr glücklich.

 

[Maik]

Könntest du den dazugehörigen HTML-Code zeigen, und wenn es sich bei dem Stylesheet um einen kleinen Auszug handelt, am besten auch gleich den Rest nachreichen, damit man sich ein Gesamtbild von der Situation machen kann.

Achja, bei den beiden Selektoren handelt es sich nicht um CSS-Klassen, sondern um IDs.

 

[soyo]

Das mit den Klassen und IDs vertausch ich immer wieder.

Leider bin ich jetzt zuhaus und der Code ist auf Arbeit. Ich meld mich dann Dienstag wieder.

 

[hela]

Huhu soyo ...

... offensichtlich ein kleines Wochenendrätsel von dir. Du hast nur vergessen dazuzuschreiben, ob man bei richtiger Lösung was gewinnen kann

Falls die HTML-Elemente mit der ID "logo" und "menu" im gleichen Elternelement sitzen, dann hast du sie m.E. überlappend positioniert.

#logo {
  position:absolute;
  top: 0px;
  left: 10px;
  height: 220px;
  width: 66px;
  overflow: hidden;
  z-index: 1
}
#menu {
  position: absolute;
  top: 110px;
  left: 0px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  z-index: 0
}

 

[soyo]

Ich habe nun schon eine andere Lösung gefunden, trozdem danke für deine Mühe, du gewinnst das Messerset und einen 2 Meter langen Schnürsenkel... viel Spaß damit