Suche im Forum:
Suchen


Autor Nachricht
Beitrag24.09.2009 um 10:53 (UTC)    
Titel: 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
Beitrag24.09.2009 um 12:56 (UTC)    
Titel:

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
Code:
position:absolute;

wird
Code:
position:relative;



Liebe Grüße,

Jan aka "Asgar"
______________
Beitrag30.09.2009 um 18:48 (UTC)    
Titel:

Hallo,

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

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
Beitrag30.09.2009 um 20:44 (UTC)    
Titel:

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]
Beitrag01.10.2009 um 07:13 (UTC)    
Titel:

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
Beitrag01.10.2009 um 10:49 (UTC)    
Titel:

Versuch mal so:
Zitat:

</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}

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.headline{visibility: hidden;}

div.Counter{position:absolute;left:5%;top:390px;}

-->

</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>
Beitrag02.10.2009 um 04:53 (UTC)    
Titel:

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

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...
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de