zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild verschiebt sich beim verändern der Auflösung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.09.2007, 12:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.09.2007
Beiträge: 7
hoellix befindet sich auf einem aufstrebenden Ast
Standard 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...!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.09.2007, 14:06
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hoellix
<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;}
die positionierung hast du nicht dem bild, sonderm dem umgebenden <div> zugewiesen.

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.09.2007, 15:29
Neuer Benutzer
neuer user
 
Registriert seit: 19.09.2007
Beiträge: 3
L.Wee befindet sich auf einem aufstrebenden Ast
Standard

Moin ich hab eine frage auch wegen div und verändern bei versciedene Auflösung.
Aufgabe

Also:
Ich will es so haben, das er immer in der mitte ist.
Wie geht das?
Mit Zitat antworten
  #4 (permalink)  
Alt 19.09.2007, 16:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.09.2007
Beiträge: 7
hoellix befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 19.09.2007, 16:14
Neuer Benutzer
neuer user
 
Registriert seit: 19.09.2007
Beiträge: 3
L.Wee befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 19.09.2007, 16:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.09.2007
Beiträge: 7
hoellix befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 19.09.2007, 16:23
Neuer Benutzer
neuer user
 
Registriert seit: 19.09.2007
Beiträge: 3
L.Wee befindet sich auf einem aufstrebenden Ast
Standard

Achso,
Das ist weil ich mehre div habe.

z.B <div><div></div></div>
Das sollte doch passen
Mit Zitat antworten
  #8 (permalink)  
Alt 19.09.2007, 16:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.09.2007
Beiträge: 7
hoellix befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 19.09.2007, 16:45
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

gib mal #seite_komplett position:relative;
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.09.2007, 17:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.09.2007
Beiträge: 7
hoellix befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hubert17 Beitrag anzeigen
gib mal #seite_komplett position:relative;
Prima, vielen Dank! Jetzt funktioniert es bestens!!!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:45 Uhr.