✔ Ausrichtung Problem?

Status
Nicht offen für weitere Antworten.
Ging dann doch schneller :)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo No-Body</title>

<style type="text/css">
<!--
#main {
width: 1000px;
margin: 20px auto;
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

#leftCol {
float:left;
width:180px;
}

#rightCol {
float:right;
width:180px;
}

#centerCol {
margin:0 200px;
}

#div1 {
background-color:#FF0000;
width:1000px;
height:180px;
}

#div2 {
background-color:#FF0000;
width:180px;
height:250px;
margin-top:20px;
}

#div3 {
background-color:#FF0000;
width:180px;
height:250px;
margin-top:20px;
}

#div4 {
background-color:#FF0000;
height:100px;
margin-top:20px;
}

#div5 {
background-color:#FF0000;
height:200px;
margin-top:20px;
}

#div6 {
background-color:#FF0000;
height:300px;
margin-top:20px;
}

#div7 {
background-color:#FF0000;
width:180px;
height:250px;
margin-top:20px;
}

#div8 {
background-color:#FF0000;
width:180px;
height:250px;
margin-top:20px;
}
-->
</style>

</head>
<body>

<div id="main" class="clearfix">
     <div id="div1">div1</div>
     <div id="leftCol">
          <div id="div2">div2</div>
          <div id="div3">div3</div>
     </div>
     <div id="rightCol">
          <div id="div7">div7</div>
          <div id="div8">div8</div>

     </div>
     <div id="centerCol">
          <div id="div4">div4</div>
          <div id="div5">div5</div>
          <div id="div6">div6</div>
     </div>
</div>

</body>
</html>
 
Finde den fehler nicht

Habe meinen Alten code :
Hallo liebe Tutorialer

Könnte mir in die Finger beißen, da denkt man man könnte so langsam CSS und dann kommt wieder so ein Ding um die Ecke,als will Gott das ich kein CSS lernen soll ,hab auch schon alle in ICQ gefragt und jetzt auch alle TUT´s im Netz durchgelesen

Habe 8 Div Boxen mit Dreamwaver erstehlt und noch eine um die 8Boxen gezogen die die mitte im Brower macht das siht so bei mir aus:

CSS:
PHP-Code:
body {

background-color:#66FF00;
}
#main {
position:relative;
width: 1000px;
margin: 20px auto;
}

#div1 {position:absolute;
background-color:#FF0000;
width:1000px;
height:180px;
top:0px;
left:0px;
z-index:3;
}

#div2 {position:absolute;
background-color:#FF0000;
width:180px;
height:250px;
top:200px;
left:0px;
z-index:3;
}

#div3 {position:absolute;
background-color:#FF0000;
width:180px;
height:250px;
top:470px;
left:0px;
z-index:3;
}

#div4 {position:absolute;
background-color:#FF0000;
width:600px;
height:100px;
top:200px;
left:200px;
z-index:3;
}

#div5 {position:absolute;
background-color:#FF0000;
width:600px;
height:200px;
top:320px;
left:200px;
z-index:3;
}

#div6 {position:absolute;
background-color:#FF0000;
width:600px;
height:300px;
top:540px;
left:200px;
z-index:3;
}

#div7 {position:absolute;
background-color:#FF0000;
width:180px;
height:250px;
top:200px;
left:820px;
z-index:3;
}

#div8 {position:absolute;
background-color:#FF0000;
width:180px;
height:250px;
top:470px;
left:820px;
z-index:3;
}
HTML:
PHP-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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="/test/test.css" type="text/css" />
<title>Unbenanntes Dokument</title>
</head>

<body><div id="main">
<div id="div1"><h1>div1</h1></div>
<div id="div2"><h1>div2</h1></div>
<div id="div3"><h1>div3</h1></div>
<div id="div4"><h1>div4</h1></div>
<div id="div5"><h1>div5</h1></div>
<div id="div6"><h1>div6</h1></div>
<div id="div7"><h1>div7</h1></div>
<div id="div8"><h1>div8</h1></div>
</div>
</body>
</html>
Funktioniert auch so wie ich es will,hier mal ein BILD davon :
ausrichtung-problem-6.jpg

Nur wie ihr seht richtet sich das ganze nach festen maßen ,das soll sich ändern
da ich zb. in Box4 den Inhalt aus der Datenbank mit einer Schleife apfrage und wenn
das Maß
Zitat:
#div4 {position:absolute;
background-color:#FF0000;
width:600px;
height:100px;
top:200px;
left:200px;
z-index:3;
}
height:100px; übertrifft wird alles falsch veschoben(macht sinn )
Ich habe mir das jetzt so gedacht das sich der apstand nicht von allen Boxen berechnet
sondern nur von zb. Box4 zu Box5 in der höhe 10px egal wie groß Box4 ihn der Höhe wird
das sich Box5 mit rutscht und der apstand dann immer noch 10px apstand haben das soll so mit allen Boxen sein untereinander?

Was mus ich ändern bitte gut erklären bin kein Profi

Gruß No-Body
Zum Vergrößern anklicken....

In die div 4-5 und 6 will ich jetzt was einfügen is von einer anderen Seite

Hier mal der neue HTML Teil :
PHP: 
<!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=iso-8859-1" />
<link rel="stylesheet" href="/test/test.css" type="text/css" />
<title>Unbenanntes Dokument</title>
</head>

<body><div id="main">
<div id="div1"><h1>div1</h1></div>
<div id="div2"><h1>div2</h1></div>
<div id="div3"><h1>div3</h1></div>
<div id="div4">
<table class="content_box" cellpadding="0" cellspacing="1">
<tr>
<td style="padding:0Px;">
<div class="content_heading">Bla-Bla</div>
</td>
</tr>
<tr>
<td style='border-top-style:solid; border-top-width:1Px; border-top-color:#000000;'>
<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td>Bl-Bla</td>
<td align="right">
<span class="span_kategorie">Bla-Bla</span>
<span class="span_datum">Bla-Bla</span>			
</td>
</tr>
</table>
</div>

<div id="div5">
<table class="content_box" cellpadding="0" cellspacing="1">
<tr>
<td style="padding:0Px;">
<div class="content_heading">Bla-Bla</div>
</td>
</tr>
<tr>
<td style='border-top-style:solid; border-top-width:1Px; border-top-color:#000000;'>
<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td>Bl-Bla</td>
<td align="right">
<span class="span_kategorie">Bla-Bla</span>
<span class="span_datum">Bla-Bla</span>			
</td>
</tr>
</table>
</div>

<div id="div6">
<table class="content_box" cellpadding="0" cellspacing="1">
<tr>
<td style="padding:0Px;">
<div class="content_heading">Bla-Bla</div>
</td>
</tr>
<tr>
<td style='border-top-style:solid; border-top-width:1Px; border-top-color:#000000;'>
<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td>Bl-Bla</td>
<td align="right">
<span class="span_kategorie">Bla-Bla</span>
<span class="span_datum">Bla-Bla</span>			
</td>
</tr>
</table>
</div>

<div id="div7"><h1>div7</h1></div>
<div id="div8"><h1>div8</h1></div>
</div>
</body>
</html>

Und der neue CSS Code:
PHP: 
body {

background-color:#66FF00;
}
#main {
position:relative;
width: 1000px;
margin: 20px auto;
 }

#div1 {position:absolute;
background-color:#FF0000;
width:1000px;
height:180px;
top:0px;
left:0px;
z-index:3;
}

#div2 {position:absolute;
background-color:#FF0000;
width:180px;
height:250px;
top:200px;
left:0px;
z-index:3;
}

#div3 {position:absolute;
background-color:#FF0000;
width:180px;
height:250px;
top:470px;
left:0px;
z-index:3;
}

#div4 {position:absolute;
background-color:#FF0000;
width:600px;
height:100px;
top:200px;
left:200px;
z-index:3;
}

#div5 {position:absolute;
background-color:#FF0000;
width:600px;
height:200px;
top:320px;
left:200px;
z-index:3;
}

#div6 {position:absolute;
background-color:#FF0000;
width:600px;
height:300px;
top:540px;
left:200px;
z-index:3;
}

#div7 {position:absolute;
background-color:#FF0000;
width:180px;
height:250px;
top:200px;
left:820px;
z-index:3;
}

#div8 {position:absolute;
background-color:#FF0000;
width:180px;
height:250px;
top:470px;
left:820px;
z-index:3;
}

.content_heading
{
	margin:0Px;
	width:100%;
	background-image:url(images/men.gif);
	background-position:left;
	background-repeat:repeat-x;
	padding-top:4Px;
	padding-bottom:4Px;
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-weight:bold;
	text-align:left;
	font-size:12Px;
}
.content_box
{
	border-style:solid; 
	border-width:1Px; 
	border-color:#000000;
	background-color:#FFFFFF;
	margin-bottom:15Px;
	width:577Px;
	font-size:12Px;
}
.content
{
	margin:0Px;
	padding:6Px;
	border-top-style:solid; 
	border-top-width:1Px; 
	border-top-color:#000000;
}
.content_box td
{
	background-color:#F3F3F3;
	font-size:12Px;
}

So siht das jetzt aus :

http://anti3.kilu.de/test/test.html

Irgetwas verursacht im neuen Code das sich alles verschiebt ,kann mir jemand mal sagen wodran das liegt ?

Gruß No-Body:confused:
 
Morgen No-Body,

also ehrlich gesagt Blick ich bei deiner Problemschilderung nicht so ganz durch.

Was mir jedoch auffällt, ist, warum die eine große Box um die anderen hängts. Okay, eigentlich leuchtet es mir ein, dass alles zentriert wird. Aber wieso machst du das nicht ganz einfach über folgende Angaben:

Jetzt nur mal als Beispiel für eine Box:
PHP: 
#div5 {
      position:absolute;
      background-color:#FF0000;
      width:600px;
      height:100%; 
      min-height:100%; // an den Inhalt angepasste Höhenangaben, falls Abstand zum Rand (padding: ...px;)
      top:320px;
      left:50%; // Damit das nun mittig platziert wird, regelst du das über margin-left 
      margin-left: -300px; // Einfaches prinzip, die gesamt-länge, also 600px / 2 und ein - davor
      z-index:3;
   }

Somit wäre die "große" Box absolut überflüssig und du könntest die einzelnen Elemente direkt ihrem Platz zuordnen.

Ich hoffe deine Frage konnte hiermit geklärt werden, das oben ist nur ein Beispiel. Du löscht "quasi" die "große" Box und wendest das oben auf alle "unterboxen" an.

Bei Fragen einfach nochmal melden.

Grüße,

Fabian F.

Edit: Was mir nebenbei auffällt: Wieso erstellst du einen neuen Thread mit dem selben Inhalt ?
 
Zuletzt bearbeitet:
Hi.

Wo der Fehler liegt?

Du hast vergessen, in den drei Boxen #div4, #div5 und #div6 jeweils die Tabelle .content_box wieder zu schliessen:

Code: 
<div id="div4">
<table class="content_box" cellpadding="0" cellspacing="1">
<tr>
<td style="padding:0Px;">
<div class="content_heading">Bla-Bla</div>
</td>
</tr>
<tr>
<td style='border-top-style:solid; border-top-width:1Px; border-top-color:#000000;'>
<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td>Bl-Bla</td>
<td align="right">
<span class="span_kategorie">Bla-Bla</span>
<span class="span_datum">Bla-Bla</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div id="div5">
<table class="content_box" cellpadding="0" cellspacing="1">
<tr>
<td style="padding:0Px;">
<div class="content_heading">Bla-Bla</div>
</td>
</tr>
<tr>
<td style='border-top-style:solid; border-top-width:1Px; border-top-color:#000000;'>
<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td>Bl-Bla</td>
<td align="right">
<span class="span_kategorie">Bla-Bla</span>
<span class="span_datum">Bla-Bla</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div id="div6">
<table class="content_box" cellpadding="0" cellspacing="1">
<tr>
<td style="padding:0Px;">
<div class="content_heading">Bla-Bla</div>
</td>
</tr>
<tr>
<td style='border-top-style:solid; border-top-width:1Px; border-top-color:#000000;'>
<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td>Bl-Bla</td>
<td align="right">
<span class="span_kategorie">Bla-Bla</span>
<span class="span_datum">Bla-Bla</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Bei einem eingerückten Quelltext wäre dir dieser Fehler aber selbst gleich aufgefallen bzw. erst garnicht unterlaufen:

Code: 
<div id="div4">
     <table class="content_box" cellpadding="0" cellspacing="1">
            <tr>
                <td style="padding:0Px;">
                    <div class="content_heading">Bla-Bla</div>
                </td>
            </tr>
            <tr>
                <td style='border-top-style:solid; border-top-width:1Px; border-top-color:#000000;'>
                    <table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF">
                           <tr>
                               <td>Bl-Bla</td>
                               <td align="right">
                                   <span class="span_kategorie">Bla-Bla</span>
                                   <span class="span_datum">Bla-Bla</span>
                               </td>
                           </tr>
                    </table>
                </td>
            </tr>
     </table>
</div>
Da dieser Quellcode die "Ausbaustufe" aus deinem vorherigen Thread "Ausrichtung Problem?" ist, führe ich die beiden Threads an dieser Stelle zusammen.
 
Omg jetzt rege ich mich aber auf ,erst mal 1000send dank Maik habe micht so auf den CSS der anderen seite konzentriert das ich den HTML Code schon garnicht mehr beachtet hab,echt supper Forum kann man viel lernen !

Gruß No-Body :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück