zentrieren und positionieren

**bine** · 30-06-2004, 07:13

Okay, da mach ich mal den Anfang.
Ich möchte ja auch gern tabellenloses Webdesign ausprobieren.
Hatte aber schon ein grundsätzliches Problem.

Ein image in einem div, welches auf position top:125px sitzen soll, und gleichzeitig horizontal zentriert innerhalb des Browserfensters.

zentrieren mit text-align:center war ja nicht das Problem
Aber positon:absolute ging nicht damit zusammen es blieb dann immer links sowie ich position:absolute verwendete.

Wie macht man es richtig?

**Comet** · 30-06-2004, 08:54

hi bine,

das mit position:absolute is so ne Sache, das div sitzt dann immer bei 0, 0 im Browser also ganz links oben.
Die Kombination die du dir wünscht wollte ich auch schon manchmal anwenden hab es aber aufgegeben, da dies, glaub ich, nur in Kombination mit JS möglich ist, also mit JS die Mitte des Bildschirms bestimmen und dann demendsprechend positionieren.
Korrigiert mich wenn ich falsch liege

**dkdenz** · 30-06-2004, 09:01

Das geht schon, ist nur etwas sehr trickey.
Man muß die genaue Bildgröße wissen.
Davon ist es abhängig.
Dann beginnt die Fummelei.
Ist nämlich immer schwierig, absolute und relative Werte zu vermischen.
Ich probiere das nachher mal.
Ergebnis später am Tag...

**dkdenz** · 30-06-2004, 09:40

Aaaaalso,
habe jetzt intensiv probiert und es ist nicht einfach,
vor allem wenn man die übrigen Daten nicht hat.
Fakt ist: ich hab's nicht hingekriegt in der Zeit,
die ich darauf verwendet habe.
Doch dann fiel es mir wie Schuppen aus den Haaren.
Man denkt einfach zu oft zu kompliziert.
Lösungsvorschlag:
Man macht erstmal eine Ebene über 100 Prozent Breite und 125 Pixeln Höhe.
Diese Ebene ist unser "Abstandshalter".
Darunter kommt eine Ebene, in die das Image reinkommt.
Mit text-align:center natürlich.
Und Voila, Bild mittig mit 125 Px Abstand von oben.
Das macht insgesamt auch nur wirklich Sinn,
wenn man sein ganzes Layout mit CSS macht.
Tabellen nur zur Unterstützung, z.B. für Formulare etc., wenn überhaupt.
Will man zusätzlichen Inhalt dazu tun, empfiehlt es sich,
mit z-index zu arbeiten und sich an dem Image zu orientieren.
In dem Fall müßten beide divs einen sehr niedrigen index haben,
damit man andere divs mit einem höheren index drüber positionieren kann.

Code:

<html>
<head>
<title>bine</title>
<style type="text/css">
body
{
  padding:0px;
  margin:0px;
}
div.abstandebene
{
  width:100%;
  height:125px;
  z-index:0;
}
div.bildebene
{
  width:100%;
  height:auto;
  position:absolute;
  text-align:center;
  z-index:0;
}
</style>
</head>
<body>
<div class="abstandebene"></div>
<div class="bildebene">
<img src="demo.jpg" border="0" width="200px" height="200px">
</div>
</body>
</html>

**dipser** · 30-06-2004, 11:51

Vorweg, ich finde es relativ blöd Text/Bilder in die Mitte des Brausers zu bringen, aber gut, viele Musterer stehen drauf, Splashes in die Mitte zu bringen.

Ich hatte vor ein paar Tagen hier dieses gepostet:
http://forum.jswelt.de/showpost.php?...57&postcount=5

Der Nachteil war, dass jemand sagt im Opera wird der Splash am unteren Rand angezeigt.

Eine andere Möglichkeit für Bilder ist, das Bild als Hintergrund festzulegen und dieses dann zu positionieren.

Code:

background-image:url(image.png); 
background-repeat:no-repeat;
background-position:50% 50%;

Tschau

**dkdenz** · 30-06-2004, 12:16

@dipser:
Deine Meinung in allen Ehren, aber das war ja nicht die Frage von bine.
Sie will ja nix center/center haben.
Und wenn das Pic ein Verweis sein soll, nutzt ihr Dein Tipp nix.

**dipser** · 30-06-2004, 12:29

Ich habe es so verstanden, dass sie das bild zentriert unter dem ersten div haben möchte. Wenn dem der Fall sein sollte, sollte es schon helfen, was ich gepostet habe, ansonsten ignorier mich.

**dkdenz** · 30-06-2004, 12:33

Zitat von bine

Ein image in einem div, welches auf position top:125px sitzen soll, und gleichzeitig horizontal zentriert innerhalb des Browserfensters.

@dipser:
Ich kann Dich nicht ignorieren.
Dazu sind Deine Beiträge viel zu interessant...

**planet4** · 30-06-2004, 13:29

hallo,
@dkadenz: dein Vorschlag mit dem 100% breiten div klappt ja, aber du brauchst die Abstandsebene nicht, wenn du diese bildebene noch positionierst:

HTML-Code:

div.bildebene{
{
  width: 100%;
  height: auto;
  position: absolute;
  top: 125px;
  text-align: center;
  z-index: 0;
}

und dass es anders als mit solchen Tricks nicht funktionieren kann, is eigentlich logisch, wenn in css bei Positionierung die obere linke Ecke genommen wird... ...
css muss noch verbessert werden

planet4.

**dkdenz** · 30-06-2004, 13:43

@planet4:
Nee, geht nicht im NS und Mozilla.

Zitat von planet4

...und dass es anders als mit solchen Tricks nicht funktionieren kann, is eigentlich logisch, wenn in css bei Positionierung die obere linke Ecke genommen wird...

Die Aussage kann ich nun gar nicht nachvollziehen.
Fängt es bei HTML unten-rechts an???

**Comet** · 30-06-2004, 13:45

Das is ja das tolle daran, da glaubt man man hats geschafft und dann sowas, ne du, ich bin noch immer bei tables, da kenn ich die Tücken der Browser.

**dkdenz** · 30-06-2004, 13:47

@Comet:
Dann probier mal die Vorgabe von bine,
ohne Blindgifs und Styles zu nehmen...

**planet4** · 30-06-2004, 15:06

Zitat von dkdenz

@planet4:
Nee, geht nicht im NS und Mozilla.

doch, muss ich dir wohl screenshot schicken, mein neuester Mozilla, siehe Anhang...
der völlig unbegreifliche Trick dabei ist:
schreibe ich:
top: 125px; dann geht es, schreibe ich
top: 125 px; also mit Leerzeichen, dann geht es nicht im NS und Mozilla,
probier's mal, das Ergebnis würd mich interessieren

...und das mit dem "oben links": wenn ich in 'einfachem' html mit align="center"
irgendein div oder Bild zentriere, dann sitzt es doch in der Mitte, oder? da ist also
nicht der obere linke Punkt entscheidend...

planet4.

**dkdenz** · 30-06-2004, 16:05

Aaaalso, bei IE 7.11, Firefox 0.8 und NS 7 geht da nix.
Opera trau' ich mich erst gar nicht zu gucken.
Im Übrigen schreibe ich immer ohne Leerzeichen.

@planet4:
Nachtrag:
Muß mich berichtigen.
Habe Dein Bsp. genommen und getestet:
Opera 7.11 geht nicht.
Moz 1.8a1 geht nicht.
NS 7.0 geht nicht.
Firefox 0.8 geht nicht.
IE 6.0 geht.

**planet4** · 30-06-2004, 16:27

...war jetzt nicht firefox so ungefähr dasselbe wie Mozilla? Moz. als Nur-Browser??

also es geht bei mir im Mozilla 1.7, im Netscape 6.1, im Opera 7.11...
(

Browserkompatibilitätsabchecken

das hab ich ja so was von satt ...)

planet4.

Thema: zentrieren und positionieren

LinkBack

Themen-Optionen

Anzeige

zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

AW: zentrieren und positionieren

Ähnliche Themen

Tabelle zentrieren

webgallerie mit css positionieren

Positionieren von Teilgrafiken mit Layer oder in Tabelle?

seite zentrieren

bild positionieren

Lesezeichen

Lesezeichen

Berechtigungen

json Datei parsen

const prefix

json Datei parsen

json Datei parsen

json Datei parsen

const prefix