Hallo Leute bin ganz neu im Forum ^^
Weiß nicht ob es mit CSS geht bzw ob dies überhaupt geht was ich vorhabe.
Und zwar möchte ich ein Bild (bei mir jetzt die Navigation) genau ausrichten.
geht sowas?
Zum beispiel ganz links oben in der Ecke, aber bei mir ist es nicht richtig links oben,
sondernrichtig am rand haben oder halt ein wenig nach unten und nach rechts.
Hier meine Testseite: http://talk-about-it.net/start2.php
PS: Habe HTML und ein wenig PHP Kenntnise.
Forum.EvoComp.de
Forum zum Thema Webprogrammierung
Bilder genau ausrichten
6 Beiträge • Seite 1 von 1
Bilder genau ausrichten
von Hotgoblin am Mo 12. Okt 2009, 15:37
- Hotgoblin
- Beiträge: 3
- Registriert: Mo 12. Okt 2009, 15:31
von alm am Mo 12. Okt 2009, 18:37
Hallo und Willkommen,
der Link funktioniert leider nicht, so dass ich mir kein Bild machen kann. Normalerweise lassen sich Bilder wie auch andere Elemente mittels CSS-Angaben an einer beliebigen Position im Browserfenster darstellen. Einfach mittels der CSS-Eigenschaften das gewünschte HTML-Elemente absolut positionieren und die Koordinaten angeben. Etwa in der Form:
Wenn das Element als Erstes im Body eingefügt ist, dann kann es sein, dass der Margin des BODY-Elements oder ein Margin beim IMG-Tag zu einer Verschiebung führt. Folgendes sollte auch funktionieren:
Natürlich sollten die Styles nicht unbedingt in der HTML-Datei ausgeliefert werden.....
Gruß
Alex
der Link funktioniert leider nicht, so dass ich mir kein Bild machen kann. Normalerweise lassen sich Bilder wie auch andere Elemente mittels CSS-Angaben an einer beliebigen Position im Browserfenster darstellen. Einfach mittels der CSS-Eigenschaften das gewünschte HTML-Elemente absolut positionieren und die Koordinaten angeben. Etwa in der Form:
- Code: Alles auswählen
<img style="position:absolute;left:0;top:0;" src="...."/>
Wenn das Element als Erstes im Body eingefügt ist, dann kann es sein, dass der Margin des BODY-Elements oder ein Margin beim IMG-Tag zu einer Verschiebung führt. Folgendes sollte auch funktionieren:
- Code: Alles auswählen
...
<body style="margin:0;padding:0>
<img style="margin:0;padding:0;border:0;" src="...."/>
......
Natürlich sollten die Styles nicht unbedingt in der HTML-Datei ausgeliefert werden.....
Gruß
Alex
von Hotgoblin am Di 13. Okt 2009, 12:33
Okay danke für die Antwort.
also in Dreamweaver hab ich es (um es gleich anschaun zu können)
den Code eingefügt beim zweiten Bild in der Navigation eingefügt und
180 (breite vom ersten Bild) eingetragen und es rutscht neben das erste super,
aber wenn ich es hochlade ist es ein bisschen nur verruckt (ca 5 Pixel).
Hier der richtige Link zur Seite: http://www.talk-about-it.net/ggt/start2.php
also in Dreamweaver hab ich es (um es gleich anschaun zu können)
den Code eingefügt beim zweiten Bild in der Navigation eingefügt und
180 (breite vom ersten Bild) eingetragen und es rutscht neben das erste super,
aber wenn ich es hochlade ist es ein bisschen nur verruckt (ca 5 Pixel).
Hier der richtige Link zur Seite: http://www.talk-about-it.net/ggt/start2.php
- Hotgoblin
- Beiträge: 3
- Registriert: Mo 12. Okt 2009, 15:31
von alm am Di 13. Okt 2009, 13:11
Bei mir sieht das etwas anders aus. Im Firefox wird das zweite (news) Bild gar nicht angezeigt bzw. liegt direkt hinter dem ersten Bild. Wenn dieses neben dem Startseitenbild stehen soll, dann sollte da nicht right:... sondern left:180 stehen. Ansonsten hängt die Position des Bildes ohnehin davon ab, wie breit das Browserfenster beim Seitebesucher ist. Wenn das Bild am rechten oberen Rand angezeigt werden soll, dann muss es "top:0;right:0" heissen.
Wenn es Online anders aussieht also Offline, dann ist meistens der Browsercache dafür verantwortlich. Dann den Cache des Browsers leeren und aktualisieren oder die Aktualisierung erzwingen (was je nach Browser anders erreicht wird).
Ich nehme an, dass der Rahmen, der bei einem Mouseover-Event angezeigt wird auch so gehört.
Übrigens funktioniert das Ganze in dieser Form überhaupt nicht, wenn JavaScript ausgeschaltet ist - was bei mir und vielen anderen normalerweise der Fall ist.
Wenn es Online anders aussieht also Offline, dann ist meistens der Browsercache dafür verantwortlich. Dann den Cache des Browsers leeren und aktualisieren oder die Aktualisierung erzwingen (was je nach Browser anders erreicht wird).
Ich nehme an, dass der Rahmen, der bei einem Mouseover-Event angezeigt wird auch so gehört.
Übrigens funktioniert das Ganze in dieser Form überhaupt nicht, wenn JavaScript ausgeschaltet ist - was bei mir und vielen anderen normalerweise der Fall ist.
von Hotgoblin am Di 13. Okt 2009, 17:25
alm hat geschrieben:Bei mir sieht das etwas anders aus. Im Firefox wird das zweite (news) Bild gar nicht angezeigt bzw. liegt direkt hinter dem ersten Bild. Wenn dieses neben dem Startseitenbild stehen soll, dann sollte da nicht right:... sondern left:180 stehen. Ansonsten hängt die Position des Bildes ohnehin davon ab, wie breit das Browserfenster beim Seitebesucher ist. Wenn das Bild am rechten oberen Rand angezeigt werden soll, dann muss es "top:0;right:0" heissen.
Wenn es Online anders aussieht also Offline, dann ist meistens der Browsercache dafür verantwortlich. Dann den Cache des Browsers leeren und aktualisieren oder die Aktualisierung erzwingen (was je nach Browser anders erreicht wird).
Ich nehme an, dass der Rahmen, der bei einem Mouseover-Event angezeigt wird auch so gehört.
Übrigens funktioniert das Ganze in dieser Form überhaupt nicht, wenn JavaScript ausgeschaltet ist - was bei mir und vielen anderen normalerweise der Fall ist.
Genau das wird bei mir auch angezeigt und bei mir ist Java an.
Habe auch left gemacht, aber es ist immer so egal welche zahl in eintippe
Also habe schon 180, 250 und 500 versucht, aber sie liegen immernoch so übereinander.
- Hotgoblin
- Beiträge: 3
- Registriert: Mo 12. Okt 2009, 15:31
von marco am Mi 14. Okt 2009, 11:37
Hi,
Java ist nicht JavaScript. Abgesehen davon geht es um den Mouseover-Effekt. Der wird nicht funktionieren, wenn JavaScript ausgeschaltet ist. Schon mal ausprobiert, was passiert, wenn der ganze Schwachsinn von Dreamweaver nicht im Dokument steht und die Bilder einfach so integriert werden?
Als erstes würde ich die umgebenden P-Tags weglassen und statt dessen mal mit DIV-Elementen arbeiten. Das macht das ganze etwas einfacher und man kann alle Menupunkte in ein Element packen. Die Folge ist weniger HTML- und CSS-Code. Damit ist die Positionierung recht einfach und man kann den Block auf einmal einbauen ohne groß jedem Bild eine eigene Formatierung zu verpassen.
Normalerweise geht das auch ohne absolute Postionierung, aber wenn es denn sein muss, dann ist folgende Struktur möglich:
Java ist nicht JavaScript. Abgesehen davon geht es um den Mouseover-Effekt. Der wird nicht funktionieren, wenn JavaScript ausgeschaltet ist. Schon mal ausprobiert, was passiert, wenn der ganze Schwachsinn von Dreamweaver nicht im Dokument steht und die Bilder einfach so integriert werden?
Als erstes würde ich die umgebenden P-Tags weglassen und statt dessen mal mit DIV-Elementen arbeiten. Das macht das ganze etwas einfacher und man kann alle Menupunkte in ein Element packen. Die Folge ist weniger HTML- und CSS-Code. Damit ist die Positionierung recht einfach und man kann den Block auf einmal einbauen ohne groß jedem Bild eine eigene Formatierung zu verpassen.
Normalerweise geht das auch ohne absolute Postionierung, aber wenn es denn sein muss, dann ist folgende Struktur möglich:
- Code: Alles auswählen
<html>
<head>
<style type="text/css">
body {
margin:0;
}
#topnav {
position:absolute;
left:0;top:0;
}
#content {
margin-top:60px;
}
.left {
float:left;
}
</style>
</head>
<body>
<div id="topnav"><img class="left" src="..." /><img class="left" src="..." /></div>
<div id="content">
<p>
bla bla bla
</p>
</div>
</body>
</html>
6 Beiträge • Seite 1 von 1