tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von Jan-Frederik Stieler
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
723
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 28.12.11 20:01 #1
    tobm_knows_best tobm_knows_best ist offline Mitglied Silber
    Registriert seit
    Dec 2011
    Beiträge
    99
    Hallo zusammen,

    weiss jemand wie ich meinen weissen Hintergrund-DIV, welcher den Seiten-Inhalt etwas *hervorheben* soll entsprechend an den Inhalt der Index-Seite anpassen kann?

    http://mediengrafik-online.de/Test/index.html

    Mit einer automatischen Höhe funktioniert das nicht (es wird wie hier dargestellt leider sehr knapp gehalten ) - und ich möchte auch gleich vorweg erwähnen, dass ich nicht allzu fit im Bereich Web-Design bin - aber ich versuche mein Möglichstes. Bei den Seiten *Impressum* & *Vita* konnte ich komischerweise mit der entsprechenden automatischen Höhe dieses Div´s arbeiten....

    Fein wäre natürlich noch eine Art schwarzer Schein nach Aussen.... oder ist das zuviel des Guten ?! Was meint Ihr?

    Haben die Cracks unter Euch vielleicht eine Lösung parat? Würde mich über jede Hilfe freuen!

    Hier mal der HTML-Code zur Startseite:

    HTML-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 {
	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>
<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];}}
}
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>
</head>

<body bgcolor="#cccccc" text="#555555" link="#E8E8E8" vlink="#555555" alink="#C7D725" 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="#" target="_top">HOME</a></td>
         <td width="100" class="navi_offline"><div align="center" class="Stil19">//</div></td>
         <td class="navi_offline"><a href="vita.html">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.html">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_vita" id="div_intro_index">
     <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">Gegen-den-Strom-Schwimmer</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="#" target="_top">Home</a><br />
  &raquo; <a href="vita.html">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.html">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:XXX@XXXXX.de"> <br />
  XXX@XXXXX.de</a></div>
  </div>
</div>
</body>
</html>
    und das CSS
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424

    .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: #C7D725;
    font-size: 12px;
}
.fett_grau_12px {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
    font-size: 12px;
}
.fett_gruen_14px {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #C7D725;
    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;
}
.normal_grau_12px {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #555;
    font-weight: normal;
}
.normal_hellgrau_10px {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #888;
}
.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: auto;
    background-image: url(pics/background_4.png);
}
.div_mid_index {
    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: auto;
    background-image: url(pics/background_4.png);
}
.div_mid_vita {
    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: auto;
    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: #C7D725;
}
.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_index {
    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_intro_vita {
    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_intro_impressum {
    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;
    background-image: url(pics/Logo.png);
    background-repeat: no-repeat;
    background-position: 200px 0px;
}
.div_vita_comment {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #555;
    width: 960px;
    margin-top: 15px;
    margin-right: auto;
    margin-bottom: 15px;
    margin-left: auto;
    float: none;
}
.div_vita_table {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #555;
    width: 960px;
    margin-top: 15px;
    margin-right: auto;
    margin-bottom: 15px;
    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;
}

    MFG
    Geändert von Jan-Frederik Stieler (28.12.11 um 22:01 Uhr) Grund: Mailadresse zensiert. Wir wollen dir doch kein Spam zu Neujahr schenken :)
     
    Zitieren Zitieren
  2. 28.12.11 22:19 #2
    Avatar von Jan-Frederik Stieler
    Jan-Frederik Stieler Jan-Frederik Stieler ist offline JFS - aka DirtyWorld
    tutorials.de Moderator
    Registriert seit
    Nov 2003
    Ort
    Darmstadt
    Beiträge
    4.934
    Blog-Einträge
    1
    Hi,
    also der Hintergrund wird von der Höhe nicht angepasst weil du deine Bildchen etc floatest. Floaten heißt die Elemente werden in ein Blockelement umgewandelt und aus dem Zeilenfluss genommen dies wiederum bedeutet aber auch dass dein Hintergrund nicht auf diese Elemente reagieren kann.
    Da dies ja statische Elemente sind gib doch dem
    HTML-Code:
    <div id="div_content" class="div_content">
    eine Feste Höhe mit dann funktioniert es auch wieder mit deinem Hintergrund.
    Noch was, versuche Klassen und IDs nicht gleich zu benennen, es ist zwar erlaubt aber führt zu Verwirrungen.

    Was du nicht so wirklich beachtest ist auch ein vernünftiges Clearen der Floats. Das kann zu komischen Problemen führen welche man auch nur schwer debuggt weil man einfach nicht dran denkt das es vielleicht an einem Float liegt. Hab mir dabei schon mal eine ganze Nacht für nicht um die Ohren geschlagen.

    Von dem Schatten würde ich abraten.

    Viele Grüße

    PS: Ich habe deinen Quelltext mal etwas zensiert, siehe Oben.
    Geändert von Jan-Frederik Stieler (28.12.11 um 22:24 Uhr)
     
    Dirt is my World
    www.janstieler.de coming soon!
    Xing Profil (OpenBC)
    del.icio.us Profil
    flickr Profil

    Portfolio

    Bitte bewerte mich wenn ich dir weitergeholfen habe. Und makiere dein Beitrag als erledigt wenn das Problem geklärt wurde.
    Information zum neuen Bewertungsmodell.
    Zitieren Zitieren
  3. 29.12.11 08:02 #3
    tobm_knows_best tobm_knows_best ist offline Mitglied Silber
    Registriert seit
    Dec 2011
    Beiträge
    99
    Zitat Zitat von Jan-Frederik Stieler Beitrag anzeigen
    Hi,
    also der Hintergrund wird von der Höhe nicht angepasst weil du deine Bildchen etc floatest. Floaten heißt die Elemente werden in ein Blockelement umgewandelt und aus dem Zeilenfluss genommen dies wiederum bedeutet aber auch dass dein Hintergrund nicht auf diese Elemente reagieren kann.
    Hat denn die Eigenschaft "float:left" nicht schon dem Element dann gesagt es soll mehr od. weniger *floaten* ?

    Zitat Zitat von Jan-Frederik Stieler Beitrag anzeigen
    Da dies ja statische Elemente sind gib doch dem
    HTML-Code:
    <div id="div_content" class="div_content">
    eine Feste Höhe mit dann funktioniert es auch wieder mit deinem Hintergrund.
    Noch was, versuche Klassen und IDs nicht gleich zu benennen, es ist zwar erlaubt aber führt zu Verwirrungen.
    OK - diesbezüglich hab ich sogar das Gegenteil gehört - damit man weiss welcher DIV zu welcher Eigenschaft gehört bzw. umgekehrt - den Sinn warum es dabei zu Verwirrungen kommen kann habe ich leider noch nicht ganz verstanden :/

    Zitat Zitat von Jan-Frederik Stieler Beitrag anzeigen
    Was du nicht so wirklich beachtest ist auch ein vernünftiges Clearen der Floats. Das kann zu komischen Problemen führen welche man auch nur schwer debuggt weil man einfach nicht dran denkt das es vielleicht an einem Float liegt. Hab mir dabei schon mal eine ganze Nacht für nicht um die Ohren geschlagen.
    Hmm...was genau meinst du denn mit clearen? Ich habe bereits den ein oder anderen DIV mit dieser Option versehen - nur um zu sehen wie´s wirkt - teilw. musste ich um dann eine zentrierte Darstellung zu erreichen entsprechend "clear:left" als Eigenschaft hinterlegen - aber so recht bewusst was ich mit dieser anfangen kann weiss ich wirklich nicht.

    So nebenbei gefragt....Soll ich bei entsprechendem Aufbau bleiben oder ratest du mir gleich generell bei solchen Dingen zu einer horiziontal angeordneten Liste...?!

    PS. Merci für die Zensur soweit habe ich da nicht mitgedacht... :/
     
    Zitieren Zitieren
  4. 29.12.11 22:32 #4
    Avatar von Jan-Frederik Stieler
    Jan-Frederik Stieler Jan-Frederik Stieler ist offline JFS - aka DirtyWorld
    tutorials.de Moderator
    Registriert seit
    Nov 2003
    Ort
    Darmstadt
    Beiträge
    4.934
    Blog-Einträge
    1
    Hallo,
    Hat denn die Eigenschaft "float:left" nicht schon dem Element dann gesagt es soll mehr od. weniger *floaten* ?
    Also „Floaten“ bedeutet im Deutschen Umfließen dies ist ein Begriff aus dem Textsatz.
    Die heißt du hast ein Bild und der Text umfließt das Bild, nicht das Bild den Text.
    Durch das Floatattribut bekommt das Element halt bestimmte Eigenschaften und auf die musst du dann reagieren.
    OK - diesbezüglich hab ich sogar das Gegenteil gehört - damit man weiss welcher DIV zu welcher Eigenschaft gehört bzw. umgekehrt - den Sinn warum es dabei zu Verwirrungen kommen kann habe ich leider noch nicht ganz verstanden :/
    Die Verwirrungen entstehen weil du eine Klasse mehren Elementen zuweisen darfst, IDs aber nur einem. Und wenn du deine Klasse so nennst wie deine ID lässt es sich durch die Bezeichnung von dir aus der Systematik nicht mehr eindeutig identifizieren. Technisch natürlich schon.
    Ich bin halt ein Freund des OOCSS.
    Aber wie ich schon geschrieben hatte ist es nicht verboten und wenn du damit klar kommst dann mach es so.
    Hmm...was genau meinst du denn mit clearen? Ich habe bereits den ein oder anderen DIV mit dieser Option versehen - nur um zu sehen wie´s wirkt - teilw. musste ich um dann eine zentrierte Darstellung zu erreichen entsprechend "clear:left" als Eigenschaft hinterlegen - aber so recht bewusst was ich mit dieser anfangen kann weiss ich wirklich nicht.
    Es geht darum einem Element zu sagen das es nicht auf Elemente reagiert welche gefloatet sind. Da dies dann auch vererbt wird kannst du somit auch Problemen bei verschachtelten Elementen vorbeugen.

    Aber so wie es mir scheint hast du das Thema Float noch nicht verstanden und ich würde dir zu etwas Lektüre raten: http://www.thestyleworks.de/ref/float.shtml

    So nebenbei gefragt....Soll ich bei entsprechendem Aufbau bleiben oder ratest du mir gleich generell bei solchen Dingen zu einer horiziontal angeordneten Liste...?!
    Generell kann man so was eigentlich nciht beantworten da eine Ul ja auch eine Semantik hat und somit von deinem Inhalt abhängt.
    In dem Aktuellen Fall wäre es wohl keine schlechte Idee da du über display:inline wahrscheinlich dein float-Problem umgehen könntest.

    Viele Grüße
    tobm_knows_best bedankt sich. 
    Dirt is my World
    www.janstieler.de coming soon!
    Xing Profil (OpenBC)
    del.icio.us Profil
    flickr Profil

    Portfolio

    Bitte bewerte mich wenn ich dir weitergeholfen habe. Und makiere dein Beitrag als erledigt wenn das Problem geklärt wurde.
    Information zum neuen Bewertungsmodell.
    Zitieren Zitieren
« Webseite soll sich "selbst aktualisieren" (Browser-Cache)? | CSS styles werden von Dreamweaver nicht geladen »

Ähnliche Themen

  1. Indesign - Tabellen mit abgerundeten Ecken
    Von julchen im Forum Desktop Publishing (DTP)
    Antworten: 9
    Letzter Beitrag: 11.11.09, 19:59
  2. Problem mit abgerundeten Ecken
    Von Oetzicool im Forum CSS
    Antworten: 1
    Letzter Beitrag: 15.03.08, 01:47
  3. Box mit abgerundeten Ecken
    Von nephix im Forum CSS
    Antworten: 2
    Letzter Beitrag: 06.10.06, 17:32
  4. Rechteck mit abgerundeten Ecken
    Von kmlgze im Forum 3D Studio Max
    Antworten: 13
    Letzter Beitrag: 01.01.05, 16:14
  5. Box mit abgerundeten Ecken+Tabellen darüber
    Von Jan-Frederik Stieler im Forum CSS
    Antworten: 2
    Letzter Beitrag: 02.09.04, 11:14