CSS Content mittig mittig

[crofthunter]

moinmoin,

suche mal rat bezüglich optimierung eines css snippets
und zwar möchte ich valide content mittig mittig zentrieren

hab 2 varianten

1. Variante:

#horizon {

* background-color : #ddd;
* color : #000;
* position : absolute;
* top : 50%;
* left : 0;
* width : 100%;
* margin-top : -252px;
* text-align : center;
* min-width : 760px;

}
#absolutemiddle {

* background-color : #ddd;
* color : #000;
* position : relative;
* text-align : left;
* width : 760px;
* height : 504px;
* margin : 0 auto;

}

2te Variante:

#horizon{
color: #000;
background-color: #ddd;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#absolutemiddle{
background-color: transparent;
margin-left: -380px;
position: absolute;
top: -252px;
left: 50%;
* width : 760px;
* height : 504px;
visibility: visible;
}

HTML:

<div id="horizon">
<div id="absolutemiddle">
Content
</div>
</div>

Problem der ersten Variante:
im Opera 5-6 klebt der Conten unten am Brauserrand
Problem der 2ten Variaten im NS6 sind in der oberen Hälfte etwaige Link verdeckt und nicht anklickbar

Hat jemand da nen FIX?

Lieben Gruß

 

[Comet]

der schon wieder

Haste bei der ersten schon ein margin-bottom versucht ??
Hab keinen Schimmer, du bist schon so weit mit XHTML da steig ich schön langsam nicht mehr durch, naja, eigentlichs chon aber wenns dann um crossbrowser-xhtml dann ists bei mir auch nur noch probieren.

 

[RoyalKnight]

Ich hab da zwar auch zu wenig Ahnung und ich weiß auch nicht genau, was du eigentlich willst, aber warum machst du nicht 1 Layer, der left und top 0px und width und height 100% gesetzt ist. Und dort richtest du den Text text-align: center; und vertical-align: middle; aus? Dann hast du deinen Text zentriert und mittig - das ist doch das was du haben willst...

 

[crofthunter]

@Royalknight

ok werd ich mal probieren, soweit ich weiß wird in divs vertical align nicht berücksichtigt. naja mal schaun aber trotzdem danke für den tip

 

[dipser]

Hi crofthunter, ich hätte dir folgendes anzubieten:

.mittig {
	position:absolute;
	top:50%;
	height:100px;
	line-height:100px;
	margin-top:-50px;
}

So ähnlich kannste es dann für die Vertikale auch umsetzen.

 

[dkdenz]

body 
{
  padding:0px;
  margin:0px;
}
#inhalt 
{ 	
  position:absolute;
  height:200px; 
  width:400px;
  margin:-100px 0px 0px -200px;
  top: 50%; 
  left: 50%;
  text-align: left;
  padding: 0px;
  overflow: auto;
}

Kannst Du damit was anfangen?
Mußt halt nur noch mit den Werten rumspielen...

 

[crofthunter]

@dipser
klebt im Opera 5-6 am unteren browserrand
wobei die line-height hier etwas seltsam ist
@dkdenz
klebt im Opera 5-6 am unteren browserrand

naja mal schaun ich probiere noch ein wenig rum