Position: absolute und relative

Hallo zusammen,

wenn ich meine seite mit "strg + mausrad" ranzoome dann verschieben sich alle elemente.

Auf der Seite: http://www.ard.de dagegen passiert so was nicht. Das zoomen verläuft gleichmäßig und mittig.

Ich habe eine vermutung dass es an Positionierung von elementen liegt.
Und zwar an der position: absolute

http://tutorials-area.de.tl/Positionierung.htm?PHPSESSID=6161102c1c33f736ff3fe3374d6d4979

Wie kann ich den Counter "relative" positionieren?

MFG,

Nina

Hallo,

es liegt so gesehen nicht an der Art der Positionierung, sondern eher an dem allgemeinen Aufbau.

absolute Positionierung heißt eigentlich, dass es sich am kompletten Bildschirminhalt richtet.
Relative Positionierung wäre, dass es sich am Element über sich richtet.
Würde man etwas innerhalb eines bereits zentriertem Elements relativ weiter nach rechts positionieren, so würde es sich an dem zentrierten Element richten, nicht am Bildschirm.

Aber nach wie vor ist es eine Positionierung, nur die Orientierung hat sich geändert.


Da ich jetzt nicht alle CSS-Dateien der ARD durchsuchen möchte (die haben viel zu viele o_O), behaupte ich hie reinfach mal, dass die gar nicht positionieren. Da die dort ja auch den HTML-Teil im Griff haben, haben die das auch gar nicht nötig. Die haben ja mit der freien Bearbeitung des Quelltextes mehr Möglichkeiten, als wir hier.
So wurde die Positionierung wohl allein durch "float" und Außenabständen gemacht.



Ansonsten kannst du aber alles, was du magst, auch einmal relativ positionieren. Es könnte vielleicht sogar klappen, was ich aber nicht glaube.
Ich kann grad aber schwierig abschätzen, wie sich das Verhältnis zum übergeordneten Element verhält, wenn man zoomt ~
Ob die kleine Änderung die richtigen Auswirken durch "Zufall" bewirken.


Die Änderung von absolut auf relativ ist eigentlicheinfach:

Aus

wird

Liebe Grüße,

Jan aka "Asgar"
______________

Hallo,

danke für die Antwort. Ich habe mit "position: relative;" ausprobiert, der counter hat sich nur nach rechts verschoben

Wenn es nicht an der Positionierung liegt, woran liegt es denn sonst?

Alle Elemente verschieben sich nicht proporzional bei unterschiedlicher Auflösung.

Soll ich mal den Completen Code posten? Oder könnt ihr mit admin rechten den Code ansehen?

Und noch eine Frage: wie bekomme ich die Schrift der Navi FETT?

Danke im Voraus.

MFG, Nina

Hallo,

es könnte vielleicht daran lieben dass einige elemente links ausgerichtet und andere mittig sind.

Vielleicht solltest du den code posten damit sich alle davon ein bild machen können.

Noch eine Sache zu position: absolute;
Es richtet sich nicht am bildschirmrand aus sondern jeweils vom nächst in der rangliste höher liegendem element.

Sprich bei verschachtelten Div box werden sich die innenliegenden Div boxen an der übergeordneten div box ausrichten.

M.F.G
MKaz
______________
[img:44ba5717fb]http://img.webme.com/pic/u/underground-planet/upbanner.png[/img:44ba5717fb]

Ohe, das geht weit über mein Wissensstand...

Also, hier ist der Code, den ich beim Text über Design stehen habe.

Freue mich über Korrekturen:

</style>
<div align="center">
<table border="0" width="70%" id="center">
<tr>
<td>
<tr>



<style type="text/css" media="screen">
<!--
body
{
font-family: Arial, sans-serif;
font-size: 11px;
overflow: auto;
padding: 13px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 490px;
left: 50%;
margin-left:-230px;
width: 100%;
}

.menu li
{
width: 150px;
float: left;
}

.menu a
{
border: 1px solid #000000;
background-color:#FFC0FF;
padding-top: 9px;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px 10px;
display: block;
height: 15px;
color: #000000;
}

.menu a:hover
{
background-color: #DDA0DD;
}

#smenu1, #smenu2, #smenu3
{
font-size: 13px;
display: none;
width: 200px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a
{
font-size: 13px;
font-weight: bold;
padding-top: 9px;
border-top: 0px;
cursor: pointer;
}
//-->

</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Salon</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href=" http://stellasstudio.de.tl/Pr.ae.sentation.htm " target="_self">Präsentation</a></li>
<li><a href="http://stellasstudio.de.tl/Anfahrt.htm" target="_self">Anfahrt</a></li>
<li><a href="http://stellasstudio.de.tl/Kontakt.htm" target="_self">Kontakt</a></li>
<li><a href="http://stellasstudio.de.tl/Impressum.htm" target="_self">Impressum</a></li>

</ul>
</li>


<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Über uns</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://stellasstudio.de.tl/Personal.htm" target="_self">Personal</a></li>
<li><a href="http://stellasstudio.de.tl/Jobs.htm" target="_self">Jobs</a></li>
<li><a href="http://stellasstudio.de.tl/G.ae.stebuch.htm" target="_self">Gästebuch</a></li>
<li><a href="http://stellasstudio.de.tl/Partner.htm" target="_self">Partner</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Extras</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://www.stellasstudio.de.tl/Umfragen.htm" target="_self">Umfragen</a></li>
<li><a href="http://www.stellasstudio.de.tl/Tell_A_Friend.htm" target="_self">Tell-A-Friend</a></li>
<li><a href="http://www.stellasstudio.de.tl/Newsletter.htm" target="_self">Newsletter</a></li>
<li><a href="http://www.stellasstudio.de.tl/Links.htm" target="_self">Linkkiste</a></li>
</ul>
</li>
</ul>
</div>

<style type="text/css">
<!--

td.edit_header_full{width: 100% !important;background-repeat:no-repeat;background-position:center center;background-image: url(http://img.webme.com/pic/s/stellasstudio/headersw.jpg); height: 363px;background-color: #efe2d9;}

body{background-image: url();background-color: #efe2d9;}

td.edit_content_bottom2{
height: 143px;
background-image: url(http://img.webme.com/pic/s/stellasstudio/unten750.jpg);
background-color: #efe2d9;
background-repeat: no-repeat;
background-position: center;
text-align: left;}

td.edit_navi_headbg {
background-image:url(http://img.webme.com/pic/s/stellasstudio/navi1.jpg);background-repeat:no-repeat;
background-color: #efe2d9; }

td.edit_below_nav img{visibility: hidden;width: 185px;}
td.edit_below_nav{background:url(HIER DAS BILD) no-repeat center center;}

td.nav a:hover{color:#f0f;}


td.nav {
background-image:url();
padding-left:60px; }

td.nav a{font-family: Vivaldi;font-size: 21px;color: #84707c;}

td.nav_heading{background-image: url();background-color: ;}

td.edit_content_top{height: 55px;background-image: url();background-color: #efe2d9;background-repeat: no-repeat;}

td.edit_content {background-image:url();background-color: #efe2d9;
width: 185px}

td.headline2{ color: #efe2d9;}

td.edit_content_bottom{background-image: url();background-color: #efe2d9;}

td.edit_rechts_cbg{margin: 0px;background-image: url();background-color: #efe2d9;}

td.edit_rb_footer{background-image: url();background-color: #efe2d9;border-bottom: 0px solid #;}

td.edit_rechts_bottom{background-image: url();background-color: #efe2d9;}

td.edit_rechts_sbg{background-image: url();width: 0px;}

td.sidebar_heading{background-image: url();background-color: #efe2d9;border-bottom: 0px double #000000;}

td.shouty, .shouty2, .shouty3, .shouty4, .shouty5{background-image: url();background-color: #efe2d9;color: #efe2d9;font-weight: bold;}

td#nav_Abstand1{visibility:hidden;height:60px}

div.Counter{position:absolute;left:50%;top:390px;margin-left: -565px;}


table.edit_main_table{width: 100% !important;}

td.edit_main_tr{width: 100% !important;}

table.edit_second_table{width: 100% !important;}

td.edit_header_full{width: 100% !important;background-position:center;background-repeat:no-repeat; }

td.edit_header_full table{width: 100% !important;}

table.edit_third_table{width: 100% !important;}

td.edit_navi_headbg{width: 15% !important;}

table.edit_rechts_tabelle{width: 100% !important;}

td.edit_rechts_bottom{width: 15% !important;}

td.edit_rechts_cbg{width:100%;}


td[height="102"] {
position:absolute;
left:50%;
margin-left:-376px; }


td.headline{visibility: hidden;}


-->

</style>

<div class="Counter"><a href="http://www.andyhoppe.com/" title="Counter"><img src="http://www.andyhoppe.com/count/?id=1252272528" style="border:none" alt="Counter" /></a></div>


Hier ist Code bei text unter Design:

</td>
</tr>
</table>
</div>

Wie gesagt, ich habe keine Ahnung von dem ganzen Zeug, habe den Code selbst gewürfelt, kann also gut möglich sein, dass er einige Korrekturen wertragen könnte.

Vielen Dank und liebe Grüße,

Nina

Versuch mal so:

Wow! Es geht! Danke schön!!! Der Counter bleibt bei unterschiedlicher Auslösung auf seinem Platz stehen!

Ein Problem besteht leider noch:
- Internet Explorer erkennt die mittig ausgewählte Positionierung des Textfeldes der Startseite nicht
-IE8 erkrnnt die Hintergrundfarbe des Intros nicht.

Woran könnte es liegen?

Danke und Gruß, Nina

P.S: Leider gibt es immer noch Leute, die IE benutzen...