bild und text nebeneinander

[ExBoNd]

folgendes problem: header meiner seite mit anklickbarem logo links und hotlinks (text) rechts (bottom ausgerichtet).

bei verkleinerung der seite sollte sich die höhe nicht ändern und der text sichtbar über das bild wandern.

meine derzeitige lösung ist sicher nicht die optimalste:

css:

#top {
    text-align: right;
    padding: 0px 10px 0px 0px;
    background-color: #333333;
    height: 70px;
    z-index: 1; }

#logo {
    position: absolute;
    z-index: 2;
    margin: 5px 5px 5px 5px; }
#logo[id] {
    margin: 10px 10px 10px 10px; } 

html:

<div id="logo">
  <a href="index.html"><img src="pics/logo.gif" alt="Logo" name="Logo" width="468" height="60" border="0" id="Logo" /></a>
  </div>

<div id="top"><br /><br /><br />
  <a href="#">Text</a> | <a href="#">Text</a> | <a href="#">Text</a> 
  </div>

danke euch schonmal...

[LANtastic]

Hmmm, so verstehe ich das nicht.

Also wenn der Bildschirm verkleiner wird, soll der Text das Bild überdecken, richtig ? Soweit ich das verstanden habe, lässt sich diese Überlappung mit relativen Angaben im Bereich margin/padding erreichen.

Da CSS nicht abfragen kann, wie groß das Browser Fenster ist, musst du mit relativen Angaben (% und em) arbeiten. Du verwendest ja für alle Angaben px.

Beispiel :

Ist der Bildschirm z.B. 1024 x 768 groß, sind 10% entsprechend 102 x 76 Pixel. Ist die Grafik dann z.B. genau 102x76 Pixel groß, dann wird das Bild bei dieser Auflösung nicht überlappt. Bei einer kleineren Auflösung würde dann der Text über das Bild laufen.

Sollte ich dich jetzt vollkommen falsch verstanden haben :
Hast du vielleicht mal eine URL ?

[ExBoNd]

hier ansehen


mein problem ist: ich habe den text jetzt mit <br> bottom ausgerichtet. kann nicht optimal sein.

die links müssen nicht über das logo wandern. es sollte aber kein zeilenumbruch (text wandert unter logo) passieren.

danke...