✔ Abstand zwischen Divs

Status
Nicht offen für weitere Antworten.
S

subaia

Grünschnabel
Und auch ich muss dann mal fragen, warum bei der folgenden Page eine Lücke entsteh :rolleyes: . Hat hier jemand Ahnung, welcher Fehler vorliegt Wäre klasse, wenn jemand Hilfe wüsste *schonechtverzweifeltist*...

p.s.: Eigentlich dachte ich, dass sich das Problem in der .box-secondbody verstecken würde... Aber vielleicht auch nicht Hilfäääää

Die grässliche Farbe dient nur der Veranschaulichung des Problems :p

LG, sub





body {
text-align:center;
background:#CC33CC;
}
.box-header {
margin:0px;
padding:0px;
width:930px;
height:51px;
}
.box-firstbody {
margin:0px;
width:930px;
height:172px;
}
.box-sublinks {
float:left;
width:106px;
height:172px;
background:url(../img/sublinks.jpg) no-repeat;
}
.box-print {
float:left;
width:197px;
height:172px;
background:url(../img/print_background.jpg) no-repeat;
}
.print {
padding-top:30px;
text-align:right;
}
.box-zeichuvideo {
float:left;
width:393px;
height:172px;
background:url(../img/zeichuvideo_background.jpg) no-repeat;
}
.box-subrechts {
float:left;
width:234px;
height:172px;
background:url(../img/subrechts.jpg) no-repeat;
}

.box-secondbody {
text-align:center;
margin:0px;
width:930px;
height:323px;
}
.box-links {
margin:0px;
padding:0px;
float:left;
width:106px;
height:323px;
background:url(../img/links.jpg) no-repeat;
}
.box-web {
margin:0px;
padding:0px;
display:block;
float:left;
width:197px;
height:323px;
background:url(../img/web_background.jpg) no-repeat;
}
.box-content {
float:left;
margin:0px;
width:393px;
height:323px;
background:url(../img/content_background.jpg) no-repeat;
}
.content {
padding:0px;
margin-right:30px;
margin-left:30px;
font-family:verdana;
font-size:0.6em;
line-height:1.6em;
text-align:left;
overflow:auto;
}
.box-rechts {
padding:0px;
border:0px;
margin:0px;
height:323px;
background:url(../img/rechts_background.jpg) no-repeat;
}


.box-postscriptum {
margin:0px;
width:930px;
height:73px;
}
.box-footer {
width:930px;
height:93px;
margin:0px;
padding:0px;
}
 

Anhänge

  • postscriptum.jpg
    postscriptum.jpg
    108,5 KB · Aufrufe: 136
Schwer zu sagen, was der Grund für den Abstand zwischen den DIVs ist, denn anhand deiner Vorschau-Grafik und dem CSS-Code lässt sich (als Aussenstehender) nicht nachvollziehen, welche der vielen DIVs (bzw. deren CSS-Eigenschaften) für das Problem überhaupt relevant, sprich verantwortlich sind.
 
Könntest Du uns passend dazu auch noch den HTML Code zeigen?
Und zwischen welchen beiden Div's taucht der Fehler denn auf?

redlama
 
Hier dann der Text :)

Der Fehler dort in der Mitte rechts auf, wo doch noch der vertikale "Strich" (die grässliche Farbe des Bodys/ der Backgroundcolor) sichtbar ist. Dieser entsteht scheinbar innerhalb des divs "box-secondbody" (zwischen .box-content und .box-rechts?!)

Nochmal Danke für jegliche Bemühung

Lg, sub



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>post scriptum : home</title>
<meta name="Keywords" content="Post, Scriptum, P.S., Petra Stiegler">
<meta name="Description" content="p.s.: post scriptum">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="StyleSheet" href="css/styles_forum.css" type="text/css" media="screen">
<script language="JavaScript" src="js/index.js" type="text/javascript"></script>
</head>
<body>
<div class="box-header">
<img src="img/header1.jpg" width="106" height="51" border="0" alt=""><img src="img/header2.jpg" width="197" height="51" border="0" alt=""><img src="img/header3.jpg" width="95" height="51" border="0" alt=""><img src="img/header4.jpg" width="532" height="51" border="0" alt=""></div>
<div class="box-firstbody">
<div class="box-sublinks"></div>
<div class="box-print">
<div class="print">
<a href="print.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('print','','img/print_over.jpg',1);"><img src="img/print.jpg" width="126" height="30" border="0" alt="" vspace="2" id="print"></a></div>
</div>
<div class="box-zeichuvideo"></div>
<div class="box-subrechts"></div>
</div>

<div class="box-secondbody">
<div class="box-links"></div>
<div class="box-web"></div>
<div class="box-content">
<div class="content">
Lorem ipsum dos orci luctus et ultrices posuere cubilia Curae;
In venenatis, nunc quis semper tincidunt, dolor arcu laoreet nisl, non eleifend ligula neque nec orci. Morbi tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Cu.blalasdkeie adoiawer aweoianwedn aowein e oiawende. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus consectetuer. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec scelerisque leo quis felis eleifend vestibulum.
Mauris eleifend interdum mauris. Sed faucibus iaculis nulla.<p>Lorem ipnastibulum. Mauris eleifend interdum mauris. Sed faucibus iaculis nulla.orem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellusorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellusorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellusorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellusorem ipsum d</div>
</div>
<div class="box-rechts"></div>
</div>
<div class="box-postscriptum">
<img src="img/postscriptum1.jpg" width="106" height="73" border="0" alt=""><img src="img/postscriptum2.jpg" width="197" height="73" border="0" alt=""><img src="img/postscriptum3.jpg" width="393" height="73" border="0" alt=""><img src="img/postscriptum4.jpg" width="234" height="73" border="0" alt=""></div>
<div class="box-footer"><img src="img/footer1.jpg" width="106" height="93" border="0" alt=""><img src="img/footer2.jpg" width="197" height="93" border="0" alt=""><img src="img/footer3.jpg" width="82" height="93" border="0" alt=""><img src="img/footer4.jpg" width="311" height="93" border="0" alt=""><img src="img/footer5.jpg" width="234" height="93" border="0" alt=""></div>
</body>
</html>
 
Der Abstand zwischen den beiden floatenden DIVs .box-content und .box-rechts verschwindet, wenn für letzteres die markierten CSS-Eigenschaften hinzugefügt werden:

Code: 
.box-rechts {
padding:0px;
border:0px;
margin:0px;
float:right;
width:234px; /* = 930px - 106px - 197px - 393px */
height:323px;
background:url(../img/rechts_background.jpg) no-repeat;
}
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23
 
Hey michaelsinterface!

Ein riesiges Dankeschön für die Mühe Es hat echt gefunzt! *jetztganzglücklichist :)

Lg, sub
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück