Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > DIV Container
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > DIV Container

Pages: [1] 2 ... nächste » ... Letzte »
geschrieben von René am 28.07.2004 - 12:49
Hi @all,

jetzt muss ich auch mal was fragen, habe einen Div in fester breite, höhe bzw. absolut positioniert.

Wie kann ich dessen Inhalt vertical und horizontal zentrieren ?

CSS:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 

#cont
{
	vertical-align: middle;
	text-align: center;
	position: absolute;
	left: 170px;
	top: 50px;
}


"text-align: center;" funktioniert
"vertical-align: middle;" funktioniert nicht die Sache steht immer auf top

geschrieben von Cluster am 28.07.2004 - 13:15
Hallo!

Hilft Dir das vielleicht weiter:

http://css.talky.de/text.php#sample

Da steht auch was von wegen, welcher Browser das kann usw. usf.

geschrieben von Armin am 28.07.2004 - 15:26
Hi,

schaust Du hier. Entweder im Body festlegen. Oder mit zwei Layern, wo der eine in dem anderen steckt.

Armin

geschrieben von René am 28.07.2004 - 16:20
@Cluster,

hat leider nicht geholfen.

------------------

hier mal das Problem im Anhang.

geschrieben von Armin am 28.07.2004 - 17:21
@Rene,

lös es doch einfach mit padding-top: 20%; im cont.

Armin

geschrieben von René am 28.07.2004 - 17:47
Hi Armin,

der Inhalt im cont ist ja nicht immer gleich hoch. Das in der "test.zip" war nur ein Beispiel.

geschrieben von starleos am 29.07.2004 - 11:16
Hi René,

hier findest du verschiedene Beispiele um dieses Problem zu lösen.

Centering Block Element

http://css-discuss.incutio.com/?pag....ockElement


Vertical Centering

http://www.hicksdesign.co.uk/journa....g-with-css

http://vmalek.murphy.cz/

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 

<html>
   <head>
      <title>Victoria's Vertical Centering - Test Page</title>
      <style type="text/css">
         html, body   { background-color: red; height: 100%; margin: 0; padding: 0;
                        color: white; text-align: center; }
         div#centered { border: 0; background-color: white; height: 50%; width: 50%;
                        position: absolute; left: 25%; top: 25%; color: black; }
      </style>
   </head>
   <body>
      <div id="centered">
         Vertically centered div
            (<a href="http://vmalek.murphy.cz" title="Victoria's Vertical Centering">see comments</a>).
      </div>
   </body>
</html>

geschrieben von René am 29.07.2004 - 13:24
Hi Rafael,

in der waagerechten ist das zentrieren ok. aber in der senkrechten gehts nicht! In dem wie in deinem Code-Beispiel ist z.B.

<div id="centered">...</div>

wieder ein Div oder eine Tabelle. Die Höhe der Tabelle oder des divs passt sich dynamisch nach dem Inhalt an also keine feste Höhe vorgegeben.

geschrieben von starleos am 29.07.2004 - 13:38
Hi Rene,

wenn ich mir vorhin nicht verlesen habe brauchts du eine Angabe in % so dass es sich automatisch anpaßt oder nicht?

Könntest du einen spezifischen Quelltext hier posten so daß ich genauer weiss wie du es brauchts?

geschrieben von René am 29.07.2004 - 13:52
Hi Rafael,

zweiter Beitrag oben von mir "test.zip"

Das ist jetzt nur ein Beispiel aus der HP. Die drei Zeilen Text wie im Beispiel kann auch ein Kontaktformular sein oder oder. Breite ist fest immer 590px aber höhe ist dynamisch je nach Inhalt.

geschrieben von Klaush am 29.07.2004 - 21:17
Ich habe mal ein wenig in meinem Archiv gestöbert und habe da was gefunden was dich interessieren könnte.


<BODY BGCOLOR="white" text="#FFCC00">


</head>

<body onResize="makeLiquid()">

<script language="JavaScript">
<!--
function BrowserCheck() {
var b = navigator.appName
if (b=="Netscape") this.b = "ns"
else if (b=="Microsoft Internet Explorer") this.b = "ie"
else this.b = b
this.v = parseInt(navigator.appVersion)
this.ns = (this.b=="ns" && this.v>=4)
this.ns4 = (this.b=="ns" && this.v==4)
this.ns5 = (this.b=="ns" && this.v==5)
this.ie = (this.b=="ie" && this.v>=4)
this.ie4 = (navigator.userAgent.indexOf('MSIE 4')>0)
this.ie5 = (navigator.userAgent.indexOf('MSIE 5')>0)
if (this.ie5) this.v = 5
this.min = (this.ns||this.ie)
}
is = new BrowserCheck()

function css(id,left,top,width,height,color,vis,z,other) {
if (id=="START") return '<STYLE TYPE="text/css">\n'
else if (id=="END") return '</STYLE>'
var str = (left!=null && top!=null)? '#'+id+' {position:absolute; left:'+left+'px; top:'+top+'px;' : '#'+id+' {position:relative;'
if (arguments.length>=4 && width!=null) str += ' width:'+width+'px;'
if (arguments.length>=5 && height!=null) {
str += ' height:'+height+'px;'
if (arguments.length<9 || other.indexOf('clip')==-1) str += ' clip:rect(0px '+width+'px '+height+'px 0px);'
}
if (arguments.length>=6 && color!=null) str += (document.layers)? ' layer-background-color:'+color+';' : ' background-color:'+color+';'
if (arguments.length>=7 && vis!=null) str += ' visibility:'+vis+';'
if (arguments.length>=8 && z!=null) str += ' z-index:'+z+';'
if (arguments.length==9 && other!=null) str += ' '+other
str += '}\n'
return str
}
function writeCSS(str,showAlert) {
str = css('START')+str+css('END')
document.write(str)
if (showAlert) alert(str)
}

function findWH() {
winW = (is.ns)? window.innerWidth : document.body.offsetWidth-20
winH = (is.ns)? window.innerHeight : document.body.offsetHeight-4
}
function makeLiquid() {
if ((is.ns && (winW!=window.innerWidth || winH!=window.innerHeight)) || is.ie)
history.go(0)
}
findWH()

writeCSS (
css('middleCenter',(winW-100)/2,(winH-20)/2,100,20,'#000040')
)

//-->
</script>
<div id="middleCenter">middle center</div>

schaus dir an .....

geschrieben von René am 29.07.2004 - 21:30
Hi Klaus,

dürfte leider auch nicht das sein was ich suche, da in deinem Code ja die Höhe auch übergeben wird die kenne ich aber nicht.

geschrieben von starleos am 30.07.2004 - 11:01
Hi René,

ist eine schwierige Nuss da Höhe unbekannt ist, alle Möglichkeiten die ich bis jetzt gefunden hatte brauchen jedoch diese Angabe.

Versuche es aber weiter und melde mich bei Erfolg.

geschrieben von René am 30.07.2004 - 11:08
Danke Rafael,

aber ich glaub da kommen wir auf keinen grünen Zweig. Habe hier nochmal eine neue Version von meinen Dateien als Anhang.

geschrieben von René am 07.08.2004 - 17:53
Bitte mal mir Mozilla o. Firefox ansehen:

http://test.sangermann.com/index.php?pid=4

wer weis Rat wegen der Sache unten bzw. was macht der IE besser oder ich falsch ?


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.