1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Total einmitten mit CSS

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von wapplegraph, 17.10.06.

  1. wapplegraph

    wapplegraph Normande

    Dabei seit:
    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
     
  2. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
  3. maxg

    maxg Prinzenapfel

    Dabei seit:
    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
     
  4. Terminal

    Terminal Gast

    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>
    
     
  5. bluba

    bluba Bismarckapfel

    Dabei seit:
    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
     
  6. Haley

    Haley Carola

    Dabei seit:
    10.10.06
    Beiträge:
    111
    für firefox und safarie funktioniert es auch wenn du schreibst

    margin: 0 auto;

    :)
     

Diese Seite empfehlen