mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 16.07.2020 02:51 Benutzername: Passwort: Auto-Login

Thema: AP Div verschiebt sich wenn sich die Fensterbreite ändert vom 25.04.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> AP Div verschiebt sich wenn sich die Fensterbreite ändert
Autor Nachricht
berti44
Threadersteller

Dabei seit: 25.04.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 25.04.2012 16:14
Titel

AP Div verschiebt sich wenn sich die Fensterbreite ändert

Antworten mit Zitat Zum Seitenanfang

Hallo ich brauche Hilfe von einem Fachmann/Frau

Ich (Anfänger mit Dreamweaver) möchte über ein Flash (Header) ein AP Div für ein News Ticker legen.
Leider wird das AP Div nicht an der Position angezeigt wo ich es hin zeichne, es verschiebt sich mit der Fenster breite.
Hier die Seite die ich für meinen Schwiedervater gemacht habe um ein paar Punkte zu sammeln denn der mag mich nicht so richtig.
Der Ticker soll links über der Navigation in den Header
Was mach ich falsch?

Gruß Berti



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

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

html {min-height: 100%;}

* {
margin: 0;
padding: 0;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

body {
margin-top: 11px;
background-image: url(bilder/hg_gras.jpg);
background-color: #030;
}

.clearer {clear: both; font-size: 0;}
.left {float: left;}

.inner-container {
font-size: 12px;
padding: 0px;
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
text-align: center;
background-repeat: repeat-y;
background-position: center;
background-image: url(bilder/hg_all.jpg);
}

.outer-container {
padding-bottom: 0px;
}

.header {
height: 211px;
margin-bottom: 5px;
width: 992px;
background-repeat: no-repeat;
background-image: url(bilder/wald_a.jpg);
}
#content {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFF;
float: right;
width: 760px;
margin-top: 8px;
margin-right: 25px;
height: 690px;
line-height: 15px;
}
##mitte {
width: 760px;
padding-top: 20px;
}
##oben {
height: 200px;
padding-bottom: 10px;
}
#inhalt {
width: 740px;
margin-left: 10px;
}
.outer-container .inner-container div #content #rechts3 div p {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
color: #FFF;
}
.abstand {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 18px;
font-weight: normal;
color: #FFF;
text-align: justify;
}

.navigation {
float: left;
width: 160px;
height: auto;
margin-top: 8px;
margin-left: 30px;
background-image: url(bilder/rahmen%20navi.jpg);
padding-top: 38px;
padding-left: 7px;
background-repeat: no-repeat;
}
.font1 {
font-family: "Comic Sans MS", cursive;
font-size: 12px;
font-weight: bold;
color: #FFC;
}

.footer {
color: #FFFFFF;
background-repeat: no-repeat;
width: 1000px;
height: 70px;
background-image: url(bilder/spruch/unten_01.jpg);
background-color: #030;
padding: 0px;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
font-size: 12px;
text-align: justify;
line-height: 18px;
vertical-align: super;
color: #FFF;
}
font12 {
font-size: 12px;
font-weight: normal;
color: #FFF;
}
.outer-container .inner-container div #content #links div p {
font-size: 12px;
text-align: justify;
}
.outer-container .inner-container div #content #rechts div {
font-size: 12px;
}
.outer-container .inner-container div #content #rechts div p {
font-size: 12px;
text-align: justify;
}
.outer-container .inner-container div #content table tr td div {
font-size: 12px;
}
.normal {
font-size: 12px;
font-weight: normal;
color: #FFF;
}
##unten {
width: 760px;
margin-top: 5px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
color: #600;
}
#zaehler {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
color: #600;
}
.font14 {
font-size: 14px;
}
.outer-container .inner-container div #content table tr td {
text-align: left;
}
.outer-container .inner-container div #content table tr td {
text-align: justify;
}
.outer-container .inner-container div #content table tr td p {
font-size: 12px;
}
.font10 {
color: #600;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-weight: normal;
}
.outer-container .inner-container div #content ##unten {
font-size: 10px;
}
.outer-container .inner-container .navigation table tr .font10 {
color: #FFC;
}
#aktualisieren {
float: left;
height: 100px;
width: 185px;
margin-left: 20px;
background-image: url(bilder/aktualisierung.png);
}
.abstand {
line-height: 11px;
}
.outer-container .inner-container #aktualisieren p {
}
.outer-container .inner-container #aktualisieren p {
font-family: "Comic Sans MS", cursive;
font-size: 14px;
font-weight: bold;
color: #FFC;
}
.outer-container .inner-container #aktualisieren p {
text-align: center;
line-height: 16px;
}

-->
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position:absolute;
left:372px;
top:188px;
width:312px;
height:32px;
z-index:1;
font-size: 14px;
}
#apDiv2 {
position:absolute;
left:34px;
top:193px;
width:327px;
height:27px;
z-index:1;
font-size: 12px;
}
</style>
</head>

<body>
<div id="apDiv2">Hier soll der Ticker hin</div>
<div class="outer-container">
<div class="inner-container">
<div class="header">
<h1>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="211">
<param name="movie" value="bilder/kopf.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie dieses Tag. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="bilder/kopf.swf" width="1000" height="211">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
<div>
<h4>F&uuml;r den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</h1>
</div>
<div align="center">
<div id="content">
<div id="#oben"><img src="bilder/willkommen.png" width="550" height="185" border="0" /></div>
<div id="#mitte"><a href="karte.htm"><img src="bilder/karte_1.jpg" width="550" height="398" border="0" /></a></div>
<div id="#unten"><span class="font10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Klick vergr&ouml;&szlig;ert</span> die Karte<br />
<br />
</div>
<div id="zaehler">&nbsp;&nbsp;&nbsp;&nbsp;<a id="225848" href="http://www.gratis-kontaktformular.de">Kostenlose Homepage</a>
<script type="text/javascript" language="JavaScript" src="http://www.gratis-kontaktformular.de/kjsdfijsd.php?drgdgsdsf=225848&hth3sfhdh=6"></script><br></div>
<p>&nbsp;</p>
</div>
</div>
<div align="center"></div>
<div class="navigation">
<table width="155" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" valign="top"><ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.htm">Startseite</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Vorstand</a>
<ul>
<li><a href="vorstand.htm">Vorstand</a></li>
<li><a href="jagdbehoerde.htm">Jagdbeh&ouml;rde</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Termine</a>
<ul>
<li><a href="termine.htm">Termine</a></li>
<li><a href="ehrungen.htm">Ehrungen</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Information</a>
<ul>
<li><a href="grafik.htm">Grafik</a></li>
<li><a href="satzungen.htm">Satzung</a></li>
<li><a href="jagdberater.htm">Jagdberater</a></li>
<li><a href="waffenrecht.htm">Waffenrecht</a></li>
<li><a href="jagdgesetz.htm">Jagdgesetz</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Aktuelles</a>
<ul>
<li><a href="aktuell.htm" class="MenuBarItemSubmenu">Das Neueste</a>
<ul>
<li><a href="hegeschau2012.htm">Hegeschau 2012</a></li>
</ul>
</li>
<li><a href="sitzungen.htm">V - Sitzungen</a></li>
<li><a href="wildbret.htm">Wildbret</a></li>
<li><a href="trauer.htm">Trauer</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Ausbildung</a>
<ul>
<li><a href="jaegerausbildung.htm">J&auml;ger</a></li>
<li><a href="hundeausbildung.htm">Hunde</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Aussch&uuml;sse</a>
<ul>
<li><a href="schiesswesen.htm">Schie&szlig;wesen</a></li>
<li><a href="blaeserkorps.htm">Bl&auml;serkorps</a></li>
<li><a href="presse.htm">Presse (PR)</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Hegeringe</a>
<ul>
<li><a href="hegegemeinschaft.htm">Hegeringe</a></li>
<li><a href="revierliste.htm">Revierliste</a></li>
</ul>
</li>
<li><a href="galerie.htm">Bilder</a> </li>
<li><a href="formulare.htm"> Formulare</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Links</a>
<ul>
<li><a href="links.htm">Links</a></li>
</ul>
</li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="gaestebuch.htm">G&auml;stebuch</a></li>
<li><a href="impressum.htm">Impressum</a></li>
</ul></td>
</tr>
<tr>
<td width="143" class="font10">&nbsp;</td>
<td width="12">&nbsp;</td>
</tr>
</table>
<h1 align="left">&nbsp;</h1>
</div>
<div id="aktualisieren">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="abstand">18.04.2012</p>
</div>
<p><br />
</p>
<div class="clearer"></div>
<div class="footer">
<div class="clearer"></div>
</div>
</div>
</div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
</script>
</body>
</html>
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mi 25.04.2012 16:22
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn sich ein abs. pos. Element nicht am Viewport ausrichten soll, sondern an der eigentlichen Seite bzw. einem Element darin, braucht dieses position: relative; - das kann bei Dir .inner-container oder .header sein (sofern das abs. pos. Element Nachfahre von .header ist).
  View user's profile Private Nachricht senden
Anzeige
Anzeige
berti44
Threadersteller

Dabei seit: 25.04.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 25.04.2012 16:41
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen Dank für deine Hilfe. Nur versteh ich das nicht ganz was du da meinst.
Ist es zuviel verlang wenn du mir das hier im Code verdeutlichst, dann versteh ich das bestimmt.

#apDiv2 {
position:absolute;
left:34px;
top:193px;
width:327px;
height:27px;
z-index:1;
font-size: 14px;
}

Wie gesagt ich habe noch keine Erfahrng, bin noch fest am lernen

Gruß aus Weilburg (Hessen)
Berti
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mi 25.04.2012 17:11
Titel

Antworten mit Zitat Zum Seitenanfang

2 geeignete Elemente habe ich bereits genannt, stelle den Ticker dort hinein (derzeit ist er Kind von body und kann dadurch nicht an der eigentlichen Seite ausgerichtet werden) und gib dem betr. Element pos. rel.

Nebenbei: News-Ticker waren schon immer ein No-Go, siehe Digitales Ungeziefer: Ticker *zwinker*
  View user's profile Private Nachricht senden
dstN

Dabei seit: 29.09.2011
Ort: Freiburg im Breisgau
Alter: 29
Geschlecht: Männlich
Verfasst Fr 04.05.2012 11:54
Titel

Antworten mit Zitat Zum Seitenanfang

Ohne jetzt zynisch oder beleidigend werden zu wollen, sieht die Seite aber aus wie aus dem letzten Jahrhundert.

Flash sollte - eigentlich - vermieden werden, wenn möglich. Vor allem in Zeiten von iPhone & iPad, da diese *hust* schlauen Geräte ja kein Flash verstehen, und nebenbei stirbt es natürlich auch noch aus.

Bei Tickern ist es ähnlich wie heiko_rs es schon sagte, sie sind Digitales Ungeziefer.... und glücklicherweise habe ich in den letzten 2 Jahren keine Seite mit einem Ticker mehr besuchen müssen.


Kurz gesagt: Ich würde ihn weglassen.

Zur Not kann man stattdessen lieber ein Newssystem einbauen.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Div Element bei bestimmter Fensterbreite verschwinden lassen
Falsh video mit div überblenden, der ie verschiebt den div
<p> mit Abstandswerten verschiebt div
div verschiebt sich bei anderer auflösung
Div verschiebt sich bei verkleinerung der Fenstergröße.
CSS Layout - Problem - Div verschiebt sich bei längerem Text
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.