• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder anzeigen

B

Bjoern

Neues Mitglied
Hallo

Im Moment habe ich schon wieder ein Problem und zwar geht es um das Einfügen von Bildern auf meine Homepage:
Wenn ich die Bilder ganz normal über die Anweisung <img src="http://www.bildxy.gif"> einfüge, so sehe ich das Bild auf meinem PC an der richtigen Stelle. Wenn ich jedoch an manche anderen PC's mit anderer Auflösung die Seite anschaue, hat sich das Bild über den Text oder sonstwohin geschoben.
Wie kann man das beheben?
 
Werbung:
Das Problem deutet auf absolute Positionierungen hin, die man besser vermeiden sollte, solange man sich ihrer Bedeutung nicht bewusst ist.
Ohne Link ist aber keine konkrete Antwort möglich.
 
Werbung:
Ich kann hinsichtlich der Grafik leider kein Darstellungsproblem erkennen.

Allerdings solltest du noch folgendes korrigieren:
Deine Navi ist im FF viel größer als im IE. Das liegt daran, dass du keine Schriftart definiert hast und evtl. auch die Schriftgröße zu groß eingestellt ist.
Somit finden die browserseitigen Einstellungen Anwendung und die können unterschiedlich sein.

Definiere deshalb am besten für den Body eine einheitliche Schriftart/Größe wie zum Beispiel
Code: 
body {
font-family: Arial, Tahoma, 'sans-serif';
font-size: 100.01%;
}

für die einzelnen Elemente kannst du dann individuelle Schriftgrößen hinterlegen.

Damit ersparst du dir gleichzeitig die vielen unnötigen span-Style-Angaben bzgl. der Schriftformatierung.

Solche Angaben sind unnötig, da inhaltsleer:

Code: 
<p style="text-align: center;"></p>

Auch das sieht unschön aus:
Code: 
<p style="text-align: center;"><big style="font-weight: bold;">

Besser wäre, wenn du in diesem Fall entweder eine CSS-Klasse definierst, die du dann den einzelnen Absätzen zuweist, oder noch besser, einen Div mit den generellen Formatierungsangaben.
dann reicht der normale p-Tag vollkommen aus.
 
Du gibst die Größe des Bildes (zumindest in "Über mich") prozentual an. Dadurch, dass Du außerdem widht UND height angegeben hast, verzerrt sich das Bild, weil das Seitenverhältnis dann nicht gewahrt bleibt.

Mit der Auflösung hat das aber rein gar nichts zu tun, "%" orientiert sich allein an der Größe des Viewports. Das merkst Du, wenn Du Dein Fenster mal in der Größe änderst, das Phänomen tritt natürlich auch bei gleichbleibender Auflösung auf.

Übrigens hat Dein Menü immer noch keine Hintergrundgrafik und keine Rahmen auf der zweiten Zeile.
 
Efchen schrieb:
Du gibst die Größe des Bildes (zumindest in "Über mich") prozentual an. Dadurch, dass Du außerdem widht UND height angegeben hast, verzerrt sich das Bild, weil das Seitenverhältnis dann nicht gewahrt bleibt.
Zum Vergrößern anklicken....

Das mit der prozentualen Angabe war nur ein Versuch, ob es dann geht.

Das mit dem Menü habe ich leider nicht hinbekommen. :(
 
Werbung:
Zum mehrzeiligen Menü:

height vom div#menu raus, in das div#menu hinter die ul ein Element einfügen, das ein clear:left macht und die Hintergrundgrafik des div#menu wiederholen lassen (background-repeat:repeat). Fertig.
 
@Efchen:

So ungefähr?

Code: 
#menu {
width: 886px;
line-height: 48px;
background-image: url(page_images/Menu.gif);
background-repeat:repeat;
}
#menu ul {
list-style-type: none;
padding-left: 19px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
padding: 0 7px 0 0;
text-decoration: none;
font-weight: 600;
font-size: 18px;
color: #ffff;
}
#menu ul li a:hover {
color: #aaaa;
text-decoration: none;
}
 
Probiers doch aus, dann siehst Du es doch :-)
Ist sicher einfacher und schneller, als wenn ich jetzt den Code nehme, Deine Seite suche, die Seite abspeichere, mit die Hintergrundbilder manuell abspeichere, weil das Firefox nicht automatisch macht und dann das selber ausprobiere...
 
Werbung:
Hmm, leider wird wegen der fehlenden Höhe das Menubild nicht angezeigt. Was kann ich dagegen tun?

Sorry, ich hab wirklich noch keine große Erfahrung mit CSS und HTML. Hoffentlich nerve ich euch nicht.
 
Dann hast Du vergessen, hinter die Liste ein Element einzufügen, das ein clear:left macht. Denn sonst umschließt Dein div ja nicht das ul, wo Du die Einzelelemente floatest. Dann brauchst Du nämlich keine Höhe und hast immer die richtige Höhe.
 
Werbung:
prm schrieb:
Ich kann hinsichtlich der Grafik leider kein Darstellungsproblem erkennen.

Allerdings solltest du noch folgendes korrigieren:
Deine Navi ist im FF viel größer als im IE. Das liegt daran, dass du keine Schriftart definiert hast und evtl. auch die Schriftgröße zu groß eingestellt ist.
Somit finden die browserseitigen Einstellungen Anwendung und die können unterschiedlich sein.

Definiere deshalb am besten für den Body eine einheitliche Schriftart/Größe wie zum Beispiel
Code: 
body {
font-family: Arial, Tahoma, 'sans-serif';
font-size: 100.01%;
}
für die einzelnen Elemente kannst du dann individuelle Schriftgrößen hinterlegen.

Damit ersparst du dir gleichzeitig die vielen unnötigen span-Style-Angaben bzgl. der Schriftformatierung.

Solche Angaben sind unnötig, da inhaltsleer:

Code: 
<p style="text-align: center;"></p>
Auch das sieht unschön aus:
Code: 
<p style="text-align: center;"><big style="font-weight: bold;">
Besser wäre, wenn du in diesem Fall entweder eine CSS-Klasse definierst, die du dann den einzelnen Absätzen zuweist, oder noch besser, einen Div mit den generellen Formatierungsangaben.
dann reicht der normale p-Tag vollkommen aus.
Zum Vergrößern anklicken....


So, ich hab das jetzt mal alles gemacht, aber die Bilder (jedenfalls bei Über mich) verschieben sich immer noch.
Wie sollte ich das Bild genau einfügen mit welchem Befehl?


Gruß Björn
 
Warum ist das Bild absolut positioniert? Damit steht es natürlich immer an der selben Stelle, egal, wo der Rest der Seite steht, der Rest der Seite ist nicht absolut positioniert, weswegen sie sich natürlich im Viewport verschiebt.

Nimm also die absolute Positionierung aus dem Bild. Setze es im HTML-Code vor den Textabsatz, neben dem es stehen soll und gib ihm statt der absoluten Positionierung ein "float:left". Fertig.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben