• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Die Bildungsoffensive hier im Forum geht weiter! Jetzt sollen Kreativität und technische Möglichkeiten einen neue Dimension erreichen. Das Thema in diesem Monat lautet - Verkehrte Welt - Hier geht es lang --> Klick

Total einmitten mit CSS

wapplegraph

wapplegraph

Normande
Registriert
12.04.06
Beiträge
571
Hallo

Möchte ein Bild auf einer leeren HTML Seite total einmitten.
Habe schon einen Anfang, doch noch kein endgültiges Resultat.
Meinen Anfang habe ich von der CSS Intensivstation abgeleitet.

Bei mir hat es keinen festen Abstand, von unten und von rechts.

Mein Code:

Code: 
body {
background-color:#000000
}

div#foto {
position:absolute;
height:510px;
width:680px;
margin:-255px, 0px, 0px, -340px;
top:25%;
left:25%;

}

</style>

</head>

<body>
<div id="foto">
<img src="fotos pg. web/botellas/botellascoloresbien2g.jpg"/>
</div>

</body>
</html>

Danke wapplegraph
 
Hallo,

müssen die Abstände nicht 50% sein?

Und wenn es nur um ein Bild geht und nicht einen ganzen DIV-Container, dann solltest du mal bei http://cssplay.co.uk vorbeigucken.

viele Grüße,
Max
 
wapplegraph schrieb:
Bei mir hat es keinen festen Abstand, von unten und von rechts.
Zum Vergrößern anklicken....

Ich habe das für dich bei mir mal ausprobiert und habe mit folgendem Code die besten Ergebnisse erzielt. Ohne jetzt auf JavaSript zurückgreifen zu müssen, ist das meiner Ansicht die gescheiteste Variante. Sie ist nicht gegen die CSS-Regeln und wird nahezu von allen Browsern unterstützt. Sogar der alte IE5.

Zu beachten wäre dabei, dass du dein Bild nicht in einer Art und Weise größer oder kleiner skalieren darfst (immer width="100%" verwenden). Sonst stimmen sämtliche Werte dazu nicht mehr. Weiterhin kann man eine total mittige Höhe nie erreichen, da die allgemeine Höhe einer HTML-Seite nie vorher bekannt ist. Also ist 7.5 % eine Alternative dazu, die auf den meißten Bildschirmen die verticale Mitte treffen werden.

Code: 
<HTML>
<HEAD>
<TITLE>MITTIG</TITLE>
<link rel="stylesheet" type="text/css" />
<style>

body {
background-color: #000000;
}

div#foto {
text-align: center;
vertical-align: middle;
margin-top: 7.5%;
margin-left: 25%;
margin-right: 25%;

}

</style>
</HEAD>

<BODY>

<div id="foto" width="100%">
<img src="mittig.jpg" width="100%">
</div>

</BODY>
</HTML>
 
Eine weitere kleine Lösung:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Bild Div u.&auml;. zentrieren</title>
	<style type="text/css" title="text/css">
/* <![CDATA[ */
html, body
{
	margin: 0;
	font-family: verdana, arial, sans-serif;
	font-size: .9em;
	color: #000;
	text-align: center;
	height: 100%;
	background-color: #fff;
}
#abstand {
	height: 50%; 
	width: 700px;
	margin-bottom: -122px;
	}
#container
{
	margin: auto auto;
	width: 728px;
	height: 244px;
	color: #003F70;
	background-color: #FFFFFF;
	text-align: left;
	padding: 0;
}

/* ]]> */
</style>
</head>
<body>
<div id="abstand">

</div>
<div id="container">
<img src="<!--hier das Bild-->" alt="" width="728" height="244" />
</div>
</body>
</html>

Gruss Gregor
 
für firefox und safarie funktioniert es auch wenn du schreibst

margin: 0 auto;

:)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2025 Apfeltalk | Made on a Mac
Oben Unten