Autor Beitrag
Heiko
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 3169
Erhaltene Danke: 11



BeitragVerfasst: Do 24.05.07 14:18 
Hallo,

ich schreibe wieder an einem größerem PHP-Projekt. Da bin ich jetzte am Login-Skript (wieder einmal). Optisch am schönsten würde das ganze natürlich am schönsten aussehen, wenn das Login-Fenster nicht nur horizontal zentriert ist, sondern auch horizontal. Da das nicht so ohne weiteres geht (schließlich weiß der Interpreter nicht wie hoch das Fenster ist), habe ich ein Div gebaut, was 100% der Browserhöhe einnimmt. In diesem Div soll nun das Login-Div liegen, aber wie macht man das (nur mit CSS also nicht mi JS)? ICh habe es schon mit vertical-align: middle probiert, aber leider hat das nicht funktioniert.

Grüße
Heiko
Christian S.
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 20450
Erhaltene Danke: 2263

Win 10
C# (VS 2019)
BeitragVerfasst: Do 24.05.07 14:22 
Hallo!

Ich weiß nicht, ob's auch vertiakl geht, aber für horizontal habe ich das hier gemacht:
ausblenden Quelltext
1:
2:
3:
4:
5:
6:
7:
div#container {
position:relative;
margin-top: 50px;
margin-left:auto; margin-right:auto;
border-width: 1px 1px 1px 1px; border-color: black; border-style: solid;
width: 900px; height: 600px; background-image:url(../images/background.jpg);
}


Grüße
Christian

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".
Heiko Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 3169
Erhaltene Danke: 11



BeitragVerfasst: Do 24.05.07 14:26 
Hallo Christian,

horizontal habe ich schon (ist ja Elementar ;) ). Hatte nur vergessen das so zu formulieren, dass nicht das horizontale das Problem ist, sondern nur das vertikale.

Grüße Heiko
Christian S.
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 20450
Erhaltene Danke: 2263

Win 10
C# (VS 2019)
BeitragVerfasst: Do 24.05.07 14:28 
Ich dachte eigentlich, dass Du mal versuchst, margin-top und margin-bottom auf auto zu setzen. ;-)

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".
UGrohne
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Veteran
Beiträge: 5502
Erhaltene Danke: 220

Windows 8 , Server 2012
D7 Pro, VS.NET 2012 (C#)
BeitragVerfasst: Do 24.05.07 14:33 
Dazu musst Du einen kleinen Trick anwenden. Du musst erstmal definieren, dass 100% des Browserfensters verwendet werden sollen:
ausblenden Quelltext
1:
2:
3:
html,body{
  height:100%;
}

Dann kannst Du mit height:100% arbeiten. Aber der IE behandelt sowas immer noch ein wenig anders als Firefox. Vertikales Zentrieren ist nicht ganz einfach.
GTA-Place
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
EE-Regisseur
Beiträge: 5248
Erhaltene Danke: 2

WIN XP, IE 7, FF 2.0
Delphi 7, Lazarus
BeitragVerfasst: Do 24.05.07 14:35 

_________________
"Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)


Zuletzt bearbeitet von GTA-Place am Do 24.05.07 14:39, insgesamt 1-mal bearbeitet
Heiko Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 3169
Erhaltene Danke: 11



BeitragVerfasst: Do 24.05.07 14:39 
user profile iconChristian S. hat folgendes geschrieben:
Ich dachte eigentlich, dass Du mal versuchst, margin-top und margin-bottom auf auto zu setzen. ;-)


Hab eich schon probiert mit einer css-Datei (div {margin: 0Px auto}). Horizontal macht er es ja auch, aber vertikal nicht.

@Ugrohne: Das hatte ich sowieos schon (siehe Startpost) ;)

@GTA: Ich gucks mir nach dem abschicken an ;).
UGrohne
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Veteran
Beiträge: 5502
Erhaltene Danke: 220

Windows 8 , Server 2012
D7 Pro, VS.NET 2012 (C#)
BeitragVerfasst: Do 24.05.07 14:44 
Hab das mal ausprobiert: So funktioniert es einigermaßen (nur hingeschludert ;)):
ausblenden volle Höhe Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
html,body{
  height:100%;
  margin:0;
  padding:0;
}
#container{
  height:100%;
  width:100%;
  text-align:center;
  vertical-align:middle;

}
#login {
  position:relative;
  top:50%;
  border:1px solid red;
  display:block;  
}
</style>
</head>

<body>
  <div id="container"><div id="login">Test</div></div>
</body>

</html>
Heiko Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 3169
Erhaltene Danke: 11



BeitragVerfasst: Do 24.05.07 15:06 
Hallo Christian,

das mit top: 50% habe ich schon an verschiedenen Quellen gesehen, allerdings ist es ungeeignet, da er dann bei 50% erst anfängt. Es gibt varianten, wo margin negativ ist und die es somit zentrieren. Aber das Problem ist: ich kenne die Größe nicht...

Grüße
Heiko
Heiko Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 3169
Erhaltene Danke: 11



BeitragVerfasst: Do 24.05.07 15:14 
Für FF habe ich es jetzte hinbekommen (html und body auf 100% versteht sich):

ausblenden Quelltext
1:
2:
3:
4:
5:
<div style="height: 100%; display: table;">
<div style="display: table-cell; vertical-align: middle;">
...
</div>
</div>
rd3
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: Do 24.05.07 15:23 
wenn ich ein DIV-tag zentriere, mach ich das immer so im style-sheet; angenommen, es ist 600px breit und 600 px hoch:

//Edit:aber zuerst mach ich alle paddings und margins weg, damit ich das später leichter habe, die site für alle browser anzupassen
ausblenden Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
* {
  padding: 0px;
  margin: 0px;
}

#zentri {
 position:absolute;
 top:50%;
 left:50%;
 width:600px;
 height:600px;
 border:0px; 
 margin-top:-300px;
 margin-left:-300px
}


Zuletzt bearbeitet von rd3 am Do 24.05.07 15:26, insgesamt 1-mal bearbeitet
Heiko Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 3169
Erhaltene Danke: 11



BeitragVerfasst: Do 24.05.07 15:26 
user profile iconHeiko hat folgendes geschrieben:
Es gibt varianten, wo margin negativ ist und die es somit zentrieren. Aber das Problem ist: ich kenne die Größe nicht...