Padding-top, Padding-left

Status
Nicht offen für weitere Antworten.
F

Fanatico

Mitglied
Hallo!

Ich suche für diese beiden Einstellungen eine Funktion, die mir die Breite und die Höhe des aktuellen Bildschirms liefert, so dass das Bild, dass ich mit dem div-Tag einbinden will immer genau in der Mitte des Bildschirms ist.

Ich würde dann folgendes schreiben padding-top: Hälfte der Höhe; Padding-left: Hälfte der Breite

Kenne das zwar von Javascript, aber das hat nicht funktioniert.

Wäre nett, wenn mir jemand weiterhelfen kann.
 
margin-left: , margin-top:

hallo fanatico,

mit den css-eigenschaften margin-left: ; margin-top: ; left: 50%; top: 50%;
kannst du einen DIV-container im anzeigefenster horizontal und vertikal zentrieren,
der sich beim verändern der browserfenstergrösse automatisch in der mitte ausrichtet.

der trick dabei: die angaben für margin-left und margin-top betragen immer die negative
hälfte von width und height - also:


<style type="text/css">
#layerDiv
{
width: 500px;
margin-left: -250px;
height: 200px:
margin-top: -100px;
position: absolute;
left: 50%;
top: 50%;
}
</style>



greez - maik.l
 
Und wie setzte ich das ganze jetzt in nem div Tagein, bzw. wie wird die Größe des Frames ermittelt, das im Moment geladen wird?

Bei ner Auflösung von 1024*768 hat es ja ne andere Größe als z.B. bei 800*600
 
source

hier der komplette source-code zu meinem tip:


<html>
<head>
<title> </title>

<style type="text/css">
<!--
#centerDiv
{
position: absolute;
left: 50%;
top: 50%;
width: 500px;
margin-left: -250px;
height: 250px;
margin-top: -125px;
border: 1px solid #667788;
}
-->
</style>

</head>
<body>

<div id="centerDiv"> <img src="grafik.jpg" border="0" width="500" height="250"></div>

</body>
</html>


aber was meinst du nun mit der grössenermittlung für den frame?
du willst deine grafik doch in einem DIV-container einbinden?

poste mal bitte deinen source....,
der hilft gegen missverständnisse ;)

greez - maik.l
 
Das ist für einen Preloader:

<script type="text/javascript">
function preload()
{
document.getElementById('preload').style.display = 'none';
}
</script>
</head>

<body bgcolor="#000015" onLoad="preload()">
<div id="preload" style="width:102%; height:100%; top:0px; left:0px; padding-top: 25%; background-color:#000015; position:absolute; z-index:1; display:block; visibility: visible;">
<table align="center">
<tr>
<td align="center"><img src="../images/warten.gif"></td>
</tr>
<tr>
<td align="center">
<font color="#FFFFFF" face="Batang" size="2">Seite&nbsp;lädt</font>
</td>
</tr>
</table>
</div>



padding-top: 25%; ist nur ne Notlösung, aber damit habe ich es hingekriegt, dass das Bild vertikal zentriert ist.

Meine Seite hat oben einen Frame und links am Rand. Im dritten taucht dann dieses Wartebild auf und mit dem derzeitigen Code ist es auch in der Mitte dieses Frames. Allerdings ist meine Lösung weniger elegant.

Vielleicht wißt ihr ja auch inwiefern sie mit anderen Browsern kompatibel ist.
 
verwende einfach meinen obigen seiten-quelltext für deine html-seite (im dritten frame).

die methode des horizontalen u. vertikalen zentrierens eines DIV-containers ( bei dir = 'preload' ) funktioniert auch im frameset.

habe es eben im IE 5.5, Mozilla 1.6, Netscape 7.0 & Opera 7.23 erfolgreich getestet.

du musst einfach nur im style-sheet die werte für width, margin-left, height & margin-top auf die abmessung deiner grafik ´'warten.gif' anpassen - that's all.


good luck & Xperience!
greez - maik.l
 
Das haut mit meinem Preloader aber net hin!

Die Angaben bei Style sind schon wichtig.

Hätte halt nur gerne, die vertikale Zentrierung noch!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück