• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Es regnet, ist neblig und kalt, alle sind krank und der Chef wird zunehmend cholerisch. Das Thema des Monats ist also folgerichtig --> Das Grau(en)
    Wir sind gespannt, war Euch dazu einfällt! Zum Wettbewerb --> 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
 

maxg

Prinzenapfel
Registriert
16.10.06
Beiträge
553
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
 

Terminal

Gast
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>
 
bluba

bluba

Bismarckapfel
Registriert
10.06.04
Beiträge
144
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
 
Haley

Haley

Carola
Registriert
10.10.06
Beiträge
111
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-2024 Apfeltalk | Made on a Mac
Oben Unten