|
|||
Bild verschiebt sich beim verändern der Auflösung
Hallo zusammen,
ich habe in meiner Webseite ein Bild: <div id="header2"><img src="header01.gif"></div> diesem Bild habe ich mittels CSS eine Position zugewiesen: #header2 { POSITION: absolute; Z-INDEX: 1; top:28; left:312;} das funktioniert auch. Nun habe ich aber um komplette Seite einen div-Container gelegt und habe die Seite zentriert. Jetzt habe ich das Problem, dass sich die Grafik je nach Auflösung verschiebt (da sich ja der Abstand zum Seitenrand verändert). Das möchte ich aber nicht, da die Seite eine feste Größe hat. Ich freue mich über eure Hilfe...! |
Sponsored Links |
|
|||
Zitat:
absolute positionierung solltest du vermeiden und stattdessen, float und clear verwenden. mehr dazu findest du unter FAQ Punkt 2. mit mehr beispielcode könnte man dir genauer helfen. eine bessere lösung das bild in deiner seite einzufügen, ist die verwendung als background-image im css. dieses müsstest du in deinem falle dem #header2 zuweisen. |
Sponsored Links |
|
|||
sorry L.Wee wenn ich dich übergehe, aber mir ist noch nicht geholfen.
Hab mir das mit den Floats angesehen, aber es bringt mich nicht weiter. So sieht es aus: Bild von der Webseite Dabei geht es mir zum Beispiel um das rechte blau HBL Logo (id=hbl). Das soll auch bei einer höheren Auflösung da stehen. Quelltext: <body> <div id="seite_komplett"> <div id="header"><img src="hsglogo_hp_transp.gif" hspace=30 vspace=2 width="298" height="153"></div> <div id="header2"><img src="header01.gif"></div> <div id="hbl"><img src="hbl-logo.gif"></div> <div id="breadcrumb" style="height: 22px"><a href="#">home</a>/start</div> <div id="nav" style="width: 283px; height: 201px"> und CSS dazu: #seite_komplett { width:995px; margin:2px auto; text-align:left; } body { text-align: center; /* Für IE 5.01 & 5.5, um die Box #seite_komplett horizontal zu zentrieren */ margin:0px; font-family:verdana,sans-serif; font-size:0.8em; } h1 { font-size: 1.5em; color: #21912e } h2 { font-size: 1.3em; color: #21912e } h3 { font-size: 1.1em; color: #21912e } div { text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */ } #header { height:165px; width:100%; background-image:url('bg1.gif'); } #header2 { POSITION: absolute; Z-INDEX: 1; top:28; left:34%; } #hbl { POSITION: absolute; Z-INDEX: 2; top:96; left:91%; } #breadcrumb { width:70%; font-size:0.8em; color: #21912e; padding-left:30em; padding-bottom:1em; margin-bottom:1em; } #breadcrumb a {color: #3D7D99;} Geändert von hoellix (19.09.2007 um 17:24 Uhr) |
|
|||
Kein problem hoellix.
Hmm aber dein bild kann da stehen bleiben. Wenn du die genauen px rein schreibst. #hbl { position:absolute; toppx; leftpx; } Oder liege ich da falsch? Weil bei mir bleiben die stehen. |
|
|||
Nein, die ändern sich, wenn man die Auflösung ändert. Ist ja klar, da sich der Abstand zum Rand verändert. Und wenn der Rest der Seite fest steht, und nur dir Bilder sich verschieben, passt das Layout nicht mehr.
Habe das mit dem Backround versucht. jedoch bekomme ich auch das noch nicht wirklich hin... bin aber dabei. vll kann mir ja jemand sagen, wie der korrekte Code lauten müsste. |
|
|||
das hilft mir ja nicht bei der Positionierung des Bild-div-Containers. Bei der Ausrichtung orientiert es sich ja immer nach dem Rand.
Inzwischen kann ich es auch als Hintergrund anzeigen. Aber dann verschiebt es sich unter den header in eine neue Zeile. Mir gelingt die Positionierung noch nicht. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bild / Element positionieren & Bildausschnitt je nach Auflösung variabel | 1chris | CSS | 1 | 22.04.2011 23:59 |
Mouseover -wie kann ich ein Bild verändern wenn ich mit der Maus über ein Wort fahre? | hrhr87 | (X)HTML | 3 | 16.03.2010 11:47 |
Bild im Header verschiebt sich | lobalito | CSS | 3 | 22.03.2009 01:42 |
Problem mit Bild bei kleiner Auflösung | black11 | CSS | 3 | 11.01.2009 02:55 |
IE verschiebt das Background Bild | finkenmann | CSS | 3 | 23.10.2004 18:44 |