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

bildposition mit top:0px ?? HILFE

Cyberbob

Cyberbob

Mitglied
Nabend,
ich möchte ein Bild positionieren mit den Befehl top: 0px; aber das geht nicht. Trotzdem ist ein Rand drüber und der muss weg! Ist dafür vielleicht noch left oder right nötig?
Bitte um Hilfe, Danke :)

EDIT: Hier nochmal mein Code:
HTML: 
<html>
<head>
<title>PIXipp - Startseite</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="header"><img src="images/header_ford.png" border="0" height="200" width="750"></div>
</body>
</html>
Code: 
/*index*/
 body {
  }
 div#header { text-align: center;
			top: 0px;
			left: 0px;
			margin: 0 0;
  }
 
Werbung:
Koennte es vielleicht was mit padding/margin zu tun haben?

vielleicht klappts hiermit
Code: 
* {
    margin: 0;
    padding: 0;
}
 
danke, aber entschuldige, ich habs schon gelöst.
position:absolute hat gefehlt

Jetzt habe ich aber ein ganz anderes Problem, das Bild soll mittig sein und das bekomme ich nicht hin. Nicht mit align="center" und auch nicht mit text-align:center;
Und nun??
HTML: 
<html>
<head>
<title>PIXipp - Startseite</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<center><img src="http://www.html.de/images/header_ford.png" border="0" height="200" width="750" id="header"></center>
</body>
</html>
Code: 
/*index*/
 body {
  }
 img#header { 
	top: 0px;
	position: absolute;
  }

Denn linken Rand des Bildes setzt er in die Mitte... :?
 
Zuletzt bearbeitet:
Werbung:
top und left sind genau wie bottom und right CSS-Eigenschaften die nur wirken, wenn ein Element ungleich static positioniert wird. Für den Wert "position" ist der Standard-Wert nämlich static

Code: 
position: static;

Dein Bild wird dadurch momentan positioniert. Wenn Du es an eine bestimmte Stelle haben willst, ergänze entweder

Code: 
position: relative;

oder

Code: 
position: absolute;

zu den Eigenschaften des Bildes. Informiere dich auch darüber was die einzelnen Eigenschaften bedeuten.

Und: fange am Besten nicht damit an irgendwas auf deiner Seite absolut positionieren zu wollen, wenn Du nicht genau weißt was Du machst. Der o.g. Tipp mit dem Nullen der Abstände ist schon sehr gut um vermutlich dein eigentliches Problem zu lösen.
 
Bin nicht gerade der html/css-Held aber ich glaub position:absolute ist genau dass was man unter absolut im allgemeinen versteht.
Wenn ich mich nicht irre ist die Anwendung von text-align fuer Text an sich, oder glaub inline-Elemente im Allgemeinen gedacht.
Meist sehe ich eher diese Version zum zentrieren

Code: 
    margin-left: auto;

    margin-right: auto;
 
das funktioniert alles irgendwie nicht, das Bild ist nur bei absolute und fixed im Browsebereich. bei relative bzw. static beachtet er nicht mal top (was glaube ich auch so soll). Wie gesagt
Denn linken Rand des Bildes setzt er in die Mitte...
Zum Vergrößern anklicken....
 
Werbung:
Zeig mal bitte deinen kompletten Quellcode oder besser einen Link zur Seite. Den Satz verstehe ich nämlich inzwischen nicht mehr wirklich, gerade auch weil Du wie gesagt absolute Positionierung vermeiden solltest.
 
HTML: 
<html>
<head>
<title>PIXipp - Startseite</title>
</head>
<body>
<style>
/*index*/
 body {
  }
 img#header { 
	top: 0px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
  }
</style>
<center><img src="images/header_ford.png" border="0" height="200" width="750" id="header"></center>
</body>
</html>
 
Dem Code fehlt ein Doctype.

<center> ist veraltet, lass es weg, bringt dir in diesem Fall hier sowieso rein gar nichts.

Und wo soll das Bild nun genau hin?
 
Werbung:
Ich hab das hier noch gefunden..vielleicht hilfts


Centering images using CSS

This will center all images on the page

Code: 
<html>
<head>
<style type="text/css">
img
   {
   display:block;[B] /*images must be set to block in order use auto margins*/[/B]
   margin:0 auto; /*centers images in most browsers*/
   text-align:center; /*centers images in older browsers*/
   } 
</style>
</head>

<body>
<img src="http://www.html.de/images/example1.jpg" alt="This is an example1" />
<img src="http://www.html.de/images/example2.jpg" alt="This is an example2" />
</body>
</html>
Zum Vergrößern anklicken....
 
das sieht schon sehr gut aus, danke, aber ein problem ist der rahmen über dem bild, der müsste noch verschwinden. Denn wäre alles prima :) Aber muss auch nicht. Ich find mich sonst damit ab...
 
Werbung:
Ich glaub er meint den Standard-Innenabstand von body. Also noch das ins CSS vor den anderen Eigenschaften ergänzen (wurde oben schon genannt):

Code: 
* { margin: 0;padding: 0; }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben