mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 16:32 Benutzername: Passwort: Auto-Login

Thema: zentrierter DIV-Container mit DIVs Abstandsproblem vom 13.05.2015


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> zentrierter DIV-Container mit DIVs Abstandsproblem
Autor Nachricht
Reddington69
Threadersteller

Dabei seit: 13.05.2015
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 13.05.2015 13:03
Titel

zentrierter DIV-Container mit DIVs Abstandsproblem

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Mi 13.05.2015 13:49
Titel

Antworten mit Zitat Zum Seitenanfang

Ich will nicht unfreundlich sein, aber das ist alles unnötig kompliziert und mistig.
Es ist möglich das komplette Layout ohne die umständliche absolute Positionierung umzusetzen.

Vielleicht klickst du dich hier einmal durch und beginnst von Vorn? - du wirst es mir in Zukunft danken
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
 
Ähnliche Themen 3 Divs nebeneinander im Container auf einer Höhe?
Abstandsproblem in einer Tabelle
DIV Container bei Mouseover über DIV Container anzeigen
DIV-Container soll anderen DIV-Container verdrängen
(CSS) Zentrierter DIV Conti - Inhalt zentrieren = wie?
Variabler Div-Container bis zum mittigen Div-Container
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.