Div-Container soll mit der Seite mitscrollen....

tobm_knows_best · 23. Dezember 2011

Guten Abend zusammen,

so kurz vor Weihnachten noch ne dumme Frage...

Kann mir denn jemand erklären wie ich es denn hinbekomme, dass einen Div-Container, welcher an einer x-beliebigen Stelle meiner Seite "aufgezogen" wurde, auch dort bliebt wenn ich das Browserfenster größer bzw. kleiner mache...?

Beispiel hier, die Ansicht wo der DIV-Containier hin sollte:

Wenn ich aber dann die Seite in der Vorschau bzw. fertig im Browser öffne hängt der Container an ganz anderen Orten

Weiss jemand was damit anzufangen?
Vielen Dank schon mal im Voraus für Eure Hilfe!

MFG
Tobm

live4music · 24. Dezember 2011

kannst du bitte dein Code posten ?

tobm_knows_best · 24. Dezember 2011

Hmm...also hier mal der HTML-Code:
Der Div-Containier den ich meine befindet sich in Zeile 90 des HTML-Codes :/

Code:

<!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>

<link rel="shortcut icon" href="http://www.mediengrafik-online.de/favicon.ico" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- SocialMediaTabs.com START -->
<!--<script type="text/javascript">
var smtabs_id = "1.0@1065@3b33548f5cc1eed2386a8368ab9a69e6@de/m/1065";

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];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<script type="text/javascript" src="http://cdn.socialmediatabs.com/loader/loader.1.0.min.js"></script>-->
<!-- SocialMediaTabs.com STOP -->

<title>mediengrafik &amp; design</title>
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(pics/background_2.gif);
	background-color: #CCC;
	background-repeat: repeat;
}

a:link {
	color: #CBD34D;
	text-decoration: none;
}
a:visited {
	color: #EEE;
	text-decoration: none;
}
a:hover {
	color: #888;
	text-decoration: none;
}
a:active {
	color: #AEB839;
	text-decoration: none;
}

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #cccccc;
	text-align: left;
}
</style>
<link href="mediengrafik_online.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
	position:absolute;
	left:726px;
	top:459px;
	width:200px;
	height:75px;
	z-index:1;
	background-image: url(pics/vita_addon.png);
}
</style>
</head>

<body bgcolor="#cccccc" text="#555555" link="#E8E8E8" vlink="#555555" alink="#CBD34D" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="MM_preloadImages('/pics/sb_icons/active/facebook.png','/pics/sb_icons/active/digg.png','/pics/sb_icons/active/google.png','/pics/sb_icons/active/delicious.png','/pics/sb_icons/active/xing.png','/pics/sb_icons/active/yahoo.png')">

 <div id="apDiv1"></div>
 <div class="div_top" id="div_top">
   <div class="div_top_inner" id="div_top_inner">
     <table border="0" align="center" cellpadding="0" cellspacing="0">
       <tr>
         <td height="21" class="navi_offline"><a href="#">HOME</a></td>
         <td width="100" class="navi_offline"><div align="center" class="Stil19">//</div></td>
         <td class="navi_offline"><a href="#">VITA</a></td>
         <td width="100" class="navi_offline"><div align="center" class="Stil19">//</div></td>
         <td class="navi_offline"><a href="#">LEISTUNGEN</a></td>
         <td width="100" class="navi_offline"><div align="center" class="Stil19">//</div></td>
         <td class="navi_offline"><a href="#">NEWS</a></td>
         <td width="100" class="navi_offline"><div align="center" class="Stil19">//</div></td>
         <td class="navi_offline"><a href="#">KONTAKT</a></td>
         <td width="100" class="navi_offline"><div align="center" class="Stil19">//</div></td>
         <td class="navi_offline"><a href="#">IMPRESSUM</a></td>
       </tr>
     </table>
   </div>
</div>
 <div class="top_schlagschatten" id="top_schlagschatten"></div>
<div class="div_mid" id="div_mid">
<div class="navigation" id="navigation"></div>
   <div class="div_banner" id="div_banner"><img src="pics/banner_index.png" width="960" height="210" alt="banner_index" /></div>
   <div class="div_intro" id="div_intro">
     <hr size="1" noshade="noshade" class="horizontal_line_content" id="horizontal_line3" />
     <span class="fett_gruen_14px"><span class="fett_grau_14px"><span class="fett_blau_14px">&quot;</span></span></span><span class="fett_gruen_14px"><span class="fett_grau_14px"><span class="fett_blau_14px">Gegen-den-Strom-Schwimmer&quot;</span></span></span> haben es nicht immer leicht, aber Sie haben meistens mehr Erfolg, denn nur durch einzigartige, unverwechselbare und aussergewöhniche Aussenauftritte haben Sie die Chance wahrgenommen zu werden!
     <hr size="1" noshade="noshade" class="horizontal_line_content" id="horizontal_line5" />
   </div>
   <div class="div_content" id="div_content">
     <div class="div_aktuelles" id="div_aktuelles"><span class="div_aktuelles"><span class="fett_weiss_12px"><span class="fett_blau_14px"><span class="fett_gruen_12px"><span class="fett_blau_14px">Aktuelles: </span></span></span></span><br />
       &raquo;    interessante Angebote...<br />
       <br />
       

	<style type="text/css">
	/* <![CDATA[ */
	.image-wrapper {
    border:3px solid #EEE;
    position:relative;
	float:left;
    width:305px;
    height:150px;
    overflow:hidden;
}

.image-wrapper > img {
	    display:block;
}

.image-wrapper {
    box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -moz-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
}

.image-wrapper > .image-details {
	margin:0;
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
    line-height:50px;
    background:#000;
    color:#fff;
    opacity:.7;
}
	/* ]]> */
	</style>
</head>

<body>
	<div class="image-wrapper">
    <img src="http://www.mediengrafik-online.de/Test/pics/aktuelles_305x150px.png" alt="" />
    <p class="image-details">
        *» <a href="#">Erfahren Sie mehr</a>
    </p>
</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	
	$(function() {
    $('.image-details').css('bottom', '-50px').parent().hover(function() {
        $(this).find('.image-details').animate({'bottom': '0px'}, 100);
    }, function() {
        $(this).find('.image-details').animate({'bottom': '-50px'}, 100);
    });
});

	/* ]]> */
	</script>

</div>
     <div class="div_leistungen" id="div_leistungen"><span class="fett_blau_14px">Leistungen</span><span class="div_aktuelles">&raquo; Alles auf einem Blick...<br />
 <br />
       
	<style type="text/css">
	/* <![CDATA[ */
	.image-wrapper {
    border:3px solid #EEE;
	float:left;
    position:relative;
    width:305px;
    height:150px;
    overflow:hidden;
}

.image-wrapper > img {
	    display:block;
}

.image-wrapper {
    box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -moz-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
}

.image-wrapper > .image-details {
	margin:0;
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
    line-height:50px;
    background:#000;
    color:#fff;
    opacity:.7;
}
	/* ]]> */
	</style>
</head>

<body>
	<div class="image-wrapper">
    <img src="http://www.mediengrafik-online.de/Test/pics/leistungen_305x150px.png" alt="" />
    <p class="image-details">
        *» <a href="#">Erfahren Sie mehr</a>
    </p>
</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	
	$(function() {
    $('.image-details').css('bottom', '-50px').parent().hover(function() {
        $(this).find('.image-details').animate({'bottom': '0px'}, 100);
    }, function() {
        $(this).find('.image-details').animate({'bottom': '-50px'}, 100);
    });
});

	/* ]]> */
	</script>


</span></div>
     <div class="div_vita" id="div_vita"><span class="fett_blau_14px">Vita</span><span class="div_aktuelles"><br />
  <br />
       

	<style type="text/css">
	/* <![CDATA[ */
	.image-wrapper {
    border:3px solid #EEE;
	float:left;
    position:relative;
    width:305px;
    height:150px;
    overflow:hidden;
}

.image-wrapper > img {
	    display:block;
}

.image-wrapper {
    box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -moz-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
}

.image-wrapper > .image-details {
	margin:0;
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
    line-height:50px;
    background:#000;
    color:#fff;
    opacity:.7;
}
	/* ]]> */
	</style>
</head>

<body>
	<div class="image-wrapper">
    <img src="http://www.mediengrafik-online.de/Test/pics/vita_305x150px.png" alt="" />
    <p class="image-details">
        *» <a href="#">Erfahren Sie mehr</a>
    </p>
</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	
	$(function() {
    $('.image-details').css('bottom', '-50px').parent().hover(function() {
        $(this).find('.image-details').animate({'bottom': '0px'}, 100);
    }, function() {
        $(this).find('.image-details').animate({'bottom': '-50px'}, 100);
    });
});

	/* ]]> */
	</script>


</span></div>
     <div class="div_beratung" id="div_beratung"><span class="fett_blau_14px">Beratung</span><span class="div_aktuelles">&raquo; schnell &amp; einfach...<br />
    <br />
       

	<style type="text/css">
	/* <![CDATA[ */
	.image-wrapper {
    border:3px solid #EEE;
	float:left;
    position:relative;
    width:305px;
    height:150px;
    overflow:hidden;
}

.image-wrapper > img {
	    display:block;
}

.image-wrapper {
    box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -moz-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
}

.image-wrapper > .image-details {
	margin:0;
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
    line-height:50px;
    background:#000;
    color:#fff;
    opacity:.7;
}
	/* ]]> */
	</style>
</head>

<body>
	<div class="image-wrapper">
    <img src="http://www.mediengrafik-online.de/Test/pics/beratung_305x150px.png" alt="" />
    <p class="image-details">
        *» <a href="#">Erfahren Sie mehr</a>
    </p>
</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	
	$(function() {
    $('.image-details').css('bottom', '-50px').parent().hover(function() {
        $(this).find('.image-details').animate({'bottom': '0px'}, 100);
    }, function() {
        $(this).find('.image-details').animate({'bottom': '-50px'}, 100);
    });
});

	/* ]]> */
	</script>


</span></div>
     <div class="div_fachchinesisch" id="div_fachchinesisch"><span class="fett_blau_14px">Fachchinesisch</span><span class="div_aktuelles">&raquo; was heisst eigentlich...<br />
     <br />
       

	<style type="text/css">
	/* <![CDATA[ */
	.image-wrapper {
    border:3px solid #EEE;
	float:left;	
    position:relative;
    width:305px;
    height:150px;
    overflow:hidden;
}

.image-wrapper > img {
	    display:block;
}

.image-wrapper {
    box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -moz-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
}

.image-wrapper > .image-details {
	margin:0;
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
    line-height:50px;
    background:#000;
    color:#fff;
    opacity:.7;
}
	/* ]]> */
	</style>
</head>

<body>
	<div class="image-wrapper">
    <img src="http://www.mediengrafik-online.de/Test/pics/fachchinesisch_305x150px.png" alt="" />
    <p class="image-details">
        *» <a href="#">Erfahren Sie mehr</a>
    </p>
</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	
	$(function() {
    $('.image-details').css('bottom', '-50px').parent().hover(function() {
        $(this).find('.image-details').animate({'bottom': '0px'}, 100);
    }, function() {
        $(this).find('.image-details').animate({'bottom': '-50px'}, 100);
    });
});

	/* ]]> */
	</script>


</span></div>

     <div class="div_kontakt" id="div_kontakt"><span class="fett_blau_14px">Kontakt</span><span class="div_aktuelles">&raquo; hier erreichen Sie mich...<br />
   <br />
       

	<style type="text/css">
	/* <![CDATA[ */
	.image-wrapper {
    border:3px solid #EEE;
	float:left;
    position:relative;
    width:305px;
    height:150px;
    overflow:hidden;
}

.image-wrapper > img {
	    display:block;
}

.image-wrapper {
    box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -moz-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
}

.image-wrapper > .image-details {
	margin:0;
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
    line-height:50px;
    background:#000;
    color:#fff;
    opacity:.7;
}
	/* ]]> */
	</style>
</head>

<body>
	<div class="image-wrapper">
    <img src="http://www.mediengrafik-online.de/Test/pics/kontakt_305x150px.png" alt="" />
    <p class="image-details">
        *» <a href="#">Erfahren Sie mehr</a>
    </p>
</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	
	$(function() {
    $('.image-details').css('bottom', '-50px').parent().hover(function() {
        $(this).find('.image-details').animate({'bottom': '0px'}, 100);
    }, function() {
        $(this).find('.image-details').animate({'bottom': '-50px'}, 100);
    });
});

	/* ]]> */
	</script>


<br />
     </span></div>
 </div>
   <br />
   <br />
   <span class="internetpaesenz"><br />
  </span> <br />
</div>
 <div class="footer_schatten" id="footer_schlagschatten"></div>
<div class="div_footer" id="footer">
  <div class="footer_inner" id="footer_inner">
    <div class="ueber_mich" id="ueber_mich5"><span class="fett_grau_12px"><span class="fett_gruen_12px">Zur Person:</span></span><br />
      <hr size="1" noshade="noshade" class="horizontal_line" id="horizontal_line5" />
      Hallo, mein Name ist <span class="fett_weiss_12px"><a href="#">Tobias Prießner</a></span> - ein junger, gestalterisch, versierter Querdenker.<br />
  <br />
      Ich beschäftige mich mit der <span class="fett_weiss_12px">Erstellung von Digital- und<br />
    Printmedien</span> aller Art.<br />
    <br />
    Vielleicht auch bald für Sie?
    </div>
    <div class="code" id="div_code"><span class="fett_grau_12px"><span class="fett_gruen_12px">Links:</span></span><br />
      <hr size="1" noshade="noshade" class="horizontal_line" id="horizontal_line6" />
  &raquo; <a href="#">Home</a><br />
  &raquo; <a href="#">Vita</a><br />
  &raquo; <a href="#">Leistungen</a><br />
  &raquo; <a href="#">Kontakt</a><br />
  &raquo; <a href="#">News</a><br />
  &raquo; <a href="#">Impressum</a></div>
    <div class="leistungen" id="ueber_mich"><span class="fett_grau_12px"><span class="fett_gruen_12px">Leistungen:</span></span><br />
      <hr size="1" noshade="noshade" class="horizontal_line" id="horizontal_line2" />
  &raquo; Corporate Design<br />
  &raquo; Print Design<br />
  &raquo;*Grafik<br />
  &raquo;*Illustration<br />
  &raquo; neue Medien<br />
  <span id="ueber_mich">»*</span>u.v. m.
  </p>
    </div>
    <div class="folgen" id="ueber_mich3"><span class="fett_grau_12px"><span class="fett_gruen_12px">Bookmark &amp; Sharing:</span></span><br />
      <hr size="1" noshade="noshade" class="horizontal_line" id="horizontal_line4" />
      <a href="http://www.facebook.com/sharer/sharer.php?u=www.mediengrafik-online.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','/pics/sb_icons/active/facebook.png',1)"><img src="pics/sb_icons/non_active/facebook.png" alt="facebook" name="facebook" width="48" height="48" border="0" id="facebook" /></a><a href="http://digg.com/submit?phase=2&amp;url=http://www.mediengrafik-online.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('digg','','/pics/sb_icons/active/digg.png',1)">*<img src="pics/sb_icons/non_active/digg.png" alt="digg it" name="digg" width="48" height="48" border="0" id="digg" />*</a><a href="http://www.google.com/bookmarks/mark?op=add&amp;hl=de&amp;bkmk=http://www.mediengrafik-online.de" onmouseover="MM_swapImage('google','','/pics/sb_icons/active/google.png',1)" onmouseout="MM_swapImgRestore()"><img src="pics/sb_icons/non_active/google.png" alt="google" name="google" width="48" height="48" border="0" id="google" /></a><br />
      <a href="http://del.icio.us/post?&amp;url=http://www.mediengrafik-online.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('delicious','','/pics/sb_icons/active/delicious.png',1)"><img src="pics/sb_icons/non_active/delicious.png" alt="delicious" name="delicious" width="48" height="48" border="0" id="delicious" /></a><a href="https://www.xing.com/app/user?op=share;url=http://www.mediengrafik-online.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('xing','','/pics/sb_icons/active/xing.png',1)">*<img src="pics/sb_icons/non_active/xing.png" alt="xing" name="xing" width="48" height="48" border="0" id="xing" /></a><a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://www.mediengrafik-online.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('yahoo','','/pics/sb_icons/active/yahoo.png',1)">*<img src="pics/sb_icons/non_active/yahoo.png" alt="yahoo" name="yahoo" width="48" height="48" border="0" id="yahoo" /></a></div>
    <div class="kontaktformular" id="ueber_mich4"><span class="fett_grau_12px"><span class="fett_gruen_12px">Kontakt:</span></span><br />
      <hr size="1" noshade="noshade" class="horizontal_line" id="horizontal_line" />
      <span class="fett_grau_12px"><span class="fett_weiss_12px">Inh. Tobias Prießner</span></span><br />
      Wallgasse 4/1<br />
      D-79415 Bad Bellingen<br />
  <span class="wingings_grau_12px"><br />
  ? </span> +49 7635 8244378 (FN)<br />
  <span class="wingings_grau_12px">?</span> +49 1525 4694688 (M)<br />
  <br />
      www.mediengrafik-online.de<a href="mailto:info@mediengrafik-online.de"> <br />
  info@mediengrafik-online.de</a></div>
  </div>
</div>
</body>
</html>

und das CSS:

CSS:

.fett_weiss_12px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #EEE;
}
.fett_gruen_12px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #AEB839;
	font-size: 12px;
}
.fett_gruen_14px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #CBD34D;
	font-size: 14px;
}
.fett_grau_14px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #555;
	font-size: 14px;
}
.fett_blau_14px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #0070B3;
	font-size: 14px;
}
.fett_blau_12px {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #0070B3;
	font-size: 12px;
}
.div_top {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 100%;
	padding-bottom: 12px;
	padding-top: 13px;
	position: fixed;
	top: 0px;
	background-image: url(pics/background.gif);
	left: auto;
	right: auto;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #EEE;
}
.div_top_inner {
	width: 1024px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.div_mid {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #555;
	width: 1000px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: left;
	float: none;
	padding: 0px;
	height: 768px;
	padding-top: 0px;
	background-image: url(pics/background_4.png);
}
.aufgabenbereich {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #888;
	text-align: center;
	float: left;
	width: 100%;
	margin-top: 10px;
	font-weight: normal;
	text-decoration: none;
}
.ueber_mich {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #EEE;
	text-align: left;
	float: left;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-left: 0px;
	width: 174px;
	height: 180px;
}
.leistungen {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #EEE;
	text-align: left;
	float: left;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-left: 0px;
	width: 174px;
	height: 180px;
}
.folgen {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #DDD;
	text-align: left;
	float: left;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-left: 0px;
	width: 174px;
	height: 180px;
}
.kontaktformular {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #EEE;
	text-align: left;
	float: left;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-left: 0px;
	width: 174px;
	height: 180px;
}
.code {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #EEE;
	text-align: left;
	float: left;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-left: 0px;
	width: 174px;
	height: 180px;
}
.div_mid_linksbuendig_in_table  {
	text-align: left;
	background-image: url(pics/vertical_line.png);
	background-repeat: no-repeat;
	background-position: 260px;
}
.div_mid_rechtsbuendig_in_table {
	text-align: right;
}
.navigation {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
	text-align: center;
	color: #777;
}
.navi_offline {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #CBD34D;
}
.horizontal_line {
	border:none;
	border-top: 1px dotted #EEE;
	background-color: #4B4B4D;
	height: 1px;
}
.horizontal_line_content {
	border:none;
	border-top: 1px dotted #4B4B4D;
	background-color: #cccccc;
	height: 1px;
}
.div_intro {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #555;
	width: 960px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	float: none;
}
.div_content {
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	float: none;
	height: auto;
}
.footer_schatten {
	float: left;
	width: 100%;
	clear: left;
	background-image: url(pics/schlagschatten_footer.png);
	background-repeat: repeat-x;
	background-position: top;
	height: 15px;
}
.div_banner {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #555;
	width: 960px;
	margin-top: 55px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
	float: none;
	height: auto;
	padding-top: 15px;
}
.top_schlagschatten {
	background-image: url(pics/schlagschatten_top.png);
	background-repeat: repeat-x;
	height: 15px;
	width: 100%;
	background-position: bottom;
	position: fixed;
	float: none;
	margin-top: -8px;
	margin-bottom: 0px;
}
.div_footer {
	height: 100%;
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	left: auto;
	right: auto;
	bottom: 0px;
	background-image: url(/Test/pics/background.gif);
	background-repeat: repeat;
	float: left;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #EEE;
}
.footer_inner {
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: 190px;
}
.div_aktuelles {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 309px;
	margin-bottom: 10px;
	padding-right: 0px;
	height: 200px;
}
.div_leistungen {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 309px;
	height: 200px;
	padding-right: 16px;
	padding-left: 16px;
	margin-bottom: 10px;
}
.div_vita {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 309px;
	height: 200px;
	margin-bottom: 10px;
}
.div_beratung {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 309px;
	margin-top: 15px;
	margin-bottom: 15px;
	height: 200px;
}
.div_fachchinesisch {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 309px;
	margin-top: 15px;
	margin-bottom: 15px;
	height: 200px;
	padding-left: 16px;
	padding-right: 16px;
}
.div_kontakt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 309px;
	margin-top: 15px;
	margin-bottom: 15px;
	height: 200px;
}

Hoffe das war jetzt richtig so... ?!

live4music · 24. Dezember 2011

Wenn ich dein Screen und dicht richtig verstanden habe willst du so haben wie es jetzt bei mir auf dem Screen ist. Wenn ja dann musst du dein Div-Container von Zeihle 90 auf Zeihle 253 kopieren und dein Css ändern auf das.

Code:

#apDiv1 {
    position:absolute;
	margin-top: -30px;
    width:200px;
    height:75px;
    z-index:1;
    background-image: url(pics/vita_addon.png);
}

tobm_knows_best · 27. Dezember 2011

Vielen Dank für deine Antwort, und sorry erstmal für meine verspätete - ich bin zu Weihnachten nicht online gewesen, da keine Möglichkeit....

ich glaube du hast das falsch verstanden, denn der Pfeil mit dem Text, welchen ich im ersten Beitrag gezeigt habe, soll auch so als Pfeil mit Text auf genau der Position bleiben, wie er zu sehen ist. Nicht als Textzusatz oder Subheader...

Wenn ich den Div-Containier erstelle und den Text (bzw. die als Hingrund definierte Grafik - bestehend aus Pfeil und Text) so wi im ersten Post positioniere, dann verschiebt es mir alles wenn die Seite im Browser aufrufe - kann man das irgendwie verstehen.... ?!

Habe hier nochmal eine Grafik angehängt, vielleicht is das einigermassen ersichtlich - die rot eingerahmte Pfeil-Text Grafik soll da hin, wo der rote Pfeil hinzeigt

Und auch dort bleiben - das ist dann mein eigentliches Problem...

Munch · 29. Dezember 2011

Die absolute Positionierung positioniert dein Element in abhängigkeit zu dem ersten Elternknoten der die Positionierung auf Standard (static) hat. D.h. wenn du dein Element in das Div-Element "Vita" verschiebst und das keine position-angabe hat, kannst du es mit left,right,top und bottom dementsprechend verschieben, dass es so wirkt als wäre es nicht im Textfluss integriert. Alle anderen Elemente werden bei position:absolute nicht beeinflusst...

Ganz gute Beispiele dafür kannst du hier finden: http://www.css4you.de/position.html

Div-Container soll mit der Seite mitscrollen....

tobm_knows_best

Erfahrenes Mitglied

live4music

Mitglied

tobm_knows_best

Erfahrenes Mitglied

live4music

Mitglied

tobm_knows_best

Erfahrenes Mitglied

Munch

Mitglied

Neue Beiträge