Problem mit Zentrieren?! (position: absolute; width: auto;)
bearbeitet von ChristophHallo,
schon wieder habe ich ein Problem, welches ich nicht umgehen kann und zwar möchte dass sich ein DIV Container je nach Inhalt seitlich verlängert.
Hier mein Code:
CSS-Datei:
~~~
#subnavi_bg {
z-index:1;
}
#subnavi {
text-align:center;
padding-left:10px;
padding-right:10px;
height:112px;
width:auto;
max-width:940px;
margin-right: auto;
margin-left: auto;
position: absolute;
z-index:2;
background-color:#FFF;
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
opacity: 0.5;
-moz-box-shadow:1px 1px 6px #292929;
-webkit-box-shadow:1px 1px 6px #292929;
-khtml-box-shadow:1px 1px 6px #292929;
box-shadow:1px 1px 6px #292929;
}
~~~
HTML Datei:
~~~
<!-- Subnavi Anfang -->
<div id="subnavi">testtesttesttesttesttesttesttesttest</div>
<div id="subnavi_bg"><img src="images/gesundheit.png" alt="Gesundheit" width="100%"></div>
<!-- Subnavi Ende -->
~~~
Ich habe schon mit left:0; right:0; versucht jedoch ist es dann von links bis rechts bzw. springt direkt auf die max-width und mit left:50% hab ich es auch schon versucht aber es ist daher nicht möglich weil man nie weiß wie lang der Inhalt ist.
Liebe Grüße
Problem mit Zentrieren?! (position: absolute; width: auto;)
bearbeitet von ChristophHallo,
schon wieder habe ich ein Problem, welches ich nicht umgehen kann und zwar möchte dass sich ein DIV Container je nach Inhalt seitlich verlängert.
Hier mein Code:
CSS-Datei:
#subnavi_bg {
z-index:1;
}
#subnavi {
text-align:center;
padding-left:10px;
padding-right:10px;
height:112px;
width:auto;
max-width:940px;
margin-right: auto;
margin-left: auto;
position: absolute;
z-index:2;
background-color:#FFF;
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
opacity: 0.5;
-moz-box-shadow:1px 1px 6px #292929;
-webkit-box-shadow:1px 1px 6px #292929;
-khtml-box-shadow:1px 1px 6px #292929;
box-shadow:1px 1px 6px #292929;
}
HTML Datei:
<!-- Subnavi Anfang -->
<div id="subnavi">testtesttesttesttesttesttesttesttest</div>
<div id="subnavi_bg"><img src="images/gesundheit.png" alt="Gesundheit" width="100%"></div>
<!-- Subnavi Ende -->
Ich habe schon mit left:0; right:0; versucht jedoch ist es dann von links bis rechts bzw. springt direkt auf die max-width und mit left:50% hab ich es auch schon versucht aber es ist daher nicht möglich weil man nie weiß wie lang der Inhalt ist.
Liebe Grüße