Reddington69
Threadersteller
Dabei seit: 13.05.2015
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 13.05.2015 13:03
Titel zentrierter DIV-Container mit DIVs Abstandsproblem |
|
|
Hallo, ich habe das Web auf den Kopf gestellt und bereits verschiedene Lösungsansätze
erfolglos ausprobiert. Vielleicht kann mir hier Jemand eine zündene Idee unterbreiten.
Zu meinem Problem: Ich habe ein DIV-Container, den ich mit CSS zentriert habe. In
diesem Container habe ich weitere DIVs integriet. Alles soweit wunderprächtig bis auf
das ein ungewollter Abstand zwischen den innenliegenden einzelnen DIVs entsteht,
den ich einfach nicht weg bekomme. Habe über das Problem auch schon einiges nach-
gelesen und ausprobiert, allerdings geht dabei immer meine Zentrierung des Containers
flöten.
Freue mich auf jede Hilfe und vielen Dank...
Hier habe ich mal zur Ansicht den Code beigefügt:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body,div {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.container {
position: absolute;
height: 1123px;
width: 480px;
border: 1px solid black;
background-color: #CCCCCC;
left: 50%;
margin-left: -240px; /* minus halbe Breite des DIVs */
top: 70px;
}
#apDiv1 {
position: absolute;
left: -489px;
width: 480px;
height: 1350px;
z-index: 1;
background-color: #0066CC;
}
#apDiv2 {
position: absolute;
left: 398px;
width: 71px;
height: 69px;
z-index: 1;
}
#apDiv3 {
position: absolute;
left: 34px;
width: 410px;
height: 225px;
z-index: 3;
font-size: 13px;
color: #CC0000;
top: 81px;
}
#apDiv4 {
position: absolute;
left: 22px;
width: 398px;
height: 260px;
z-index: 3;
font-size: 13px;
color: #FFF;
}
#apDiv5 {
position: absolute;
left: 35px;
width: 410px;
height: 202px;
z-index: 3;
font-size: 13px;
color: #C06;
top: 308px;
}
#apDiv6 {
position: absolute;
left: 35px;
width: 410px;
height: 132px;
z-index: 3;
font-size: 13px;
color: #C03;
top: 511px;
}
#apDiv7 {
position: absolute;
left: 35px;
width: 410px;
height: 66px;
z-index: 3;
color: #C09;
font-size: 13px;
top: 643px;
}
#apDiv8 {
position: absolute;
left: 35px;
width: 410px;
height: 196px;
z-index: 4;
color: #C06;
font-size: 13px;
top: 712px;
}
#apDiv9 {
position: absolute;
left: 36px;
top: 913px;
width: 411px;
height: 199px;
z-index: 1;
font-size: 13px;
}
-->
</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];}}
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_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_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_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 onload="MM_preloadImages('FirmenprofilG.jpg','Getout2.jpg')">
<div class="container">
<div id="apDiv2"><a href="Web4-Version2.html" target="_self" onmouseover="MM_swapImage('Image1','','Getout2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="Getout1.jpg" width="71" height="69" id="Image1" /></a></div>
<div id="apDiv3">Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext</div><br />
<br /><br />
<div id="apDiv5">Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext</div>
<div id="apDiv6">Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext</div>
<div id="apDiv7">Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext</div>
<div id="apDiv8">Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext</div><br />
<div id="apDiv9">Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext<br />
Hier steht ein Mustertext Hier steht ein Mustertext</div>
<div class="content">
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
|
|