✔ div Block Überschneidung!

[Mayjutsu]

Hiho ihr,

bräuchte mal Hilfe im Bezu auf div Container.

Hier mein Problem:
Wie auf dem Bild zu sehen, überschneidet sich der schwaze Block mit der Tabelle, die Tabelle sollte weiter nacht rechts um den schwarz block mit informationen füllen zu können.

Hier mal der Blockcode:

div#mediablock {
   position:absolute;
   top:155px;
   left:0px;
   width:250px;
   height:490px;
   padding:100px;
   float:right;
   clear:none;
   border:4px solid #000000;
}

Dann noch den Tabellencode:

.mediatable {
	width: 100%;
	border: 0px;
	padding: 0px;
	margin: 0px 0px;
	background: #FFFFFF;
	font-size: 15px;
	color: #000000;
}

Danke schon mal im voraus.

MfG Mayjutsu

 

[aGeNET]

Hallo,

dein Fehler ist, dass deine Tabelle normal im Textfluss steht und das Div absolut positioniert ist, also über der Tabelle liegt.

Ich kann jetzt nicht ganz nachvollziehen, was du genau willst, biete dir aber folgenden Lösungsansatz:

CSS:

#mediablock {
 width:250px;
 height:490px;
 padding:100px; /* wirklich so viel? */
 float: left;
 border:4px solid #000000;
}
.mediatable {
 width: 700px;
 border-width: 0px;
 padding: 0px;
 margin: 0px 0px;
 background: #FFFFFF;
 font-size: 15px;
 color: #000000;
 float: left;
}

HTML:

<table cellspacing="0" cellpadding="0" border="0" class="mediatable">
...
</table>
<div id="mediablock"></div>
<br clear="all" />

 

[Mayjutsu]

Funktioniert leider nicht dann steht meine Tabelle unten die soll aber neben dem schwarzen Block stehen.

MfG Mayjutsu

 

[aGeNET]

Funktioniert leider nicht dann steht meine Tabelle unten die soll aber neben dem schwarzen Block stehen.

MfG Mayjutsu

Ich hoffe du hast das CSS nicht nur einfach stupide kopiert und bei dir eingefügt.
Denn die Gesamtbreite des darüberliegenden Elements spielt eine wichtige Rolle.
Angenommen es hat ne Breite von 800px, dann passiert das,, was du grad beschrieben hast, da Tabelle und Div nebeneinander eine Gesamtbreite von 950px! haben.

Alternativlösung wäre, dass du um die Tabelle ein Div legst:

<div class="mediatable">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
...
</table>
</div>
<div id="mediablock">...</div>
<br clear="all" />

Immer die Gesamtbreite der nebeneinandeliegenden Elemnte beachten in Relation zum übergeordneten Element.

 

[Mayjutsu]

Ich hoffe du hast das CSS nicht nur einfach stupide kopiert und bei dir eingefügt.

Natürlich hab ich Dummerchen nur stupide kopiert

Aber jetzt nachdem ich die Größe geändert habe, funktioniert es.

Nun entsteht ein weiteres Problem:
Die Hintergrund Farbe meiner Überschriften sieht man im schwarzen Block...
Wie könnte man das ändern?


Hier der Überschriftencode:

h2 {
	font-family: Times New Roman, sans-serif; 
	font-size: 20px; 
	color: #00305E;
	text-align: justify;
	font-variant: small-caps;
	background-color: #DCDCDC; 
	border-bottom: 2px solid #00305E;
}

Danke schon mal im voraus.

MfG Mayjutsu

 

[aGeNET]

der HTML-Part:

<!-- leicht geändert -->
<div id="mediablock">...</div>
<div class="mediatable">
<h2>Überschrift</h2>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
...
</table>
<h2>Überschrift</h2>
</div>
<br clear="all" />

der CSS-Part:

.mediatable h2 {
 /* deine Optionen */
}

Damit kannst du bestimmte Überschriften ansprechen, in diesem Fall H2 im Div-Container "mediatable"

 

[Mayjutsu]

Hat leider nicht geholfen.... Problem durch Suche behoben... ich Blödmann hab vergessen die Tabelle in einen Div zustecken...

Trotzdem danke !!

Mfg Mayjutsu

 

[aGeNET]

Hat leider nicht geholfen.... Problem durch Suche behoben... ich Blödmann hab vergessen die Tabelle in einen Div zustecken...

Trotzdem danke !!

Mfg Mayjutsu

In meinem Beispiel steht die Tabelle doch in einem Div Sollte eigentlich funktioniert haben.

 

[Mayjutsu]

Das hat mich dazu gebracht meine CSS und HTML Datei nochmals zu durchsuchen und dabei hab ich den Fehler gefunden. Deine Version hab ich so direkt garnicht probiert...

Trotzdem vielen Dank!

MfG Mayjutsu