✔ Layer Mittig ausrichten - Problem

[Maik]

Worauf willst du hinaus?

 

[Reanimated]

der rechte Layer geht jetzt weiter nach unten als der Content-Layer. Und der fotter-layer wird zur Seite geschoben. Wie kann ich das unterbinden.

Wo genau muss ich das hier positionieren?

<div id="content" class="clearfix"> ... </div>

 

[Maik]

In keinem mir zur Verfügung stehenden Browser kann ich die genannten Darstellungsfehler entdecken.

<div id="wrapper">
     <div id="head">
          <h1>Header</h1>
     </div>
     <div id="menu">
          <ul>
              <li><a href="#">Startseite</a></li>
              <li><a href="#">Personal Training</a></li>
              <li><a href="#">Trainingsangebote</a></li>
              <li><a href="#">Trainingspläne</a></li>
              <li><a href="#">Gutscheine</a></li>
              <li><a href="#">Preis</a></li>
              <li><a href="#">Über mich</a></li>
              <li><a href="#">Kontakt</a></li>
          </ul>
     </div>
     <div id="content" class="clearfix">
          <div class="hundert">
               <h4>Personal Training</h4>
               <br>
               <img src="image/test.jpg" width="100" height="67" border="0" alt="" Style="float:left; margin-right: 3px;">Ob Training im Fitnessstudio, zu Hause, im Büro oder an der frischen Luft: Personal Trainer Robert Melzer betreut seine Kunden ortsunabhängig und nach vereinbarten Trainingsterminen. Um die gemeinsam gesteckten Ziele zeitnah, zukunftsorientiert und mit Freude zu erreichen, führt Sie das Personal Trainings Konzept durch folgende Phasen:<br><br>• unverbindliches Erstgespräch<br>• langfristige und individuelle Trainingsplanung<br>• professionelles Personal Training mit Ernährungsoptimierung<br>• regelmäßige Erfolgskontrolle<br>
          </div>
          <div class="left">
               <h4>Test 1</h4>
               <br>
               <img src="image/test.jpg" width="100" height="67" border="0" alt="" Style="float:left; margin-right: 3px;">Ob Training im Fitnessstudio, zu Hause, im Büro oder an der frischen Luft: Personal Trainer Robert Melzer betreut seine Kunden ortsunabhängig und nach vereinbarten Trainingsterminen. Um die gemeinsam gesteckten Ziele zeitnah, zukunftsorientiert und mit Freude zu erreichen, führt Sie das Personal Trainings Konzept durch folgende Phasen:<br><br>• unverbindliches Erstgespräch<br>• langfristige und individuelle Trainingsplanung<br>• professionelles Personal Training mit Ernährungsoptimierung<br>• regelmäßige Erfolgskontrolle<br>
         </div>
         <div class="right">
              <h4>Sieht doch gut aus</h4>
              <br>
              <img src="image/test.jpg" width="100" height="67" border="0" alt="" Style="float:left; margin-right: 3px;">Ob Training im Fitnessstudio, zu Hause, im Büro oder an der frischen Luft: Personal Trainer Robert Melzer betreut seine Kunden ortsunabhängig und nach vereinbarten Trainingsterminen. Um die gemeinsam gesteckten Ziele zeitnah, zukunftsorientiert und mit Freude zu erreichen, führt Sie das Personal Trainings Konzept durch folgende Phasen:<br><br>• unverbindliches Erstgespräch<br>• langfristige und individuelle Trainingsplanung<br>• professionelles Personal Training mit Ernährungsoptimierung<br>• regelmäßige Erfolgskontrolle<br>
         </div>
     </div><!-- END #content -->
     <div id="footer">
          <p>&copy; 2007</p>
     </div>
</div>

.left {
border-style:dashed;
border-width:1px;
border-color:#414141;
color:#414141;
padding:3px;
width:48%;
float:left;
margin-top:20px;
}

.right {
border-style:dashed;
border-width:1px;
border-color:#414141;
color:#414141;
padding:3px;
width:48%;
float:right;
margin-top:20px;
}

erspart die <br>-Tags zwischen den DIVs, und richtet zwischen ihnen einen vertikalen Außenabstand nach oben ein.

 

[Reanimated]

Hi, ich habe wieder ein Problem. geh mal bitte auf http://www.fitdurchfitness.de/personaltraining.php

Jetzt habe ich 2 Layer mit relativ viel Inhat. Beide haben die Klasse "Left". Vorher waren rechts auch noch Bilder. Warum ist der eine Layer jetzt auf der rechten Seite?

Hoffe du kannst mir helfen.

 

[Maik]

Hi,

sollen die beiden Elemente im normalen Textfluss untereinander dargestellt werden?

In diesem Fall dürfen sie wegen der width:48% nicht mit float:left formatiert werden, da sie ansonsten vom nachfolgenden Element auf der rechten Seite umflossen werden.

Übrigens darf das p-Element kein weiteres Blockelement, in deinem Markup sind dies das div- und h4-Element, enthalten.

 

[Reanimated]

Normalerweise sollen noch 2 Bilder auf der Rechten Seite sein.

Das heißt also, wenn kein Element auf der rechten Seite ist bzw. zu wenig Elemente, dann darf ich mit dem Float-befehl nicht arbeiten?



das mit dem P-Elements versteh ich nicht ganz, glaub ich
Oder meinst du das hier....

<div id="test">
<p>


<h4>Hallo</h4>

</p>
</div>

 

[Maik]

Hi,

ich meinte auch dieses p-Element:

<div id="content" class="clearfix">
     <p>
          <div class="left">
                ...
          </div>
          <div class="left">
                ...
          </div>
     </p>
</div>

Siehe http://de.selfhtml.org/html/referenz/elemente.htm#p

Wenn rechts von der Box .left kein Element angeordnet werden soll, ist die float:left-Eigenschaft falsch gewählt.

 

[Reanimated]

Und welche Eigenschaft wäre dann richtig gewählt?

Wie gesagt, ich habe 2 Boxen bzw 2 Elemente die ich nebeneinander anordnen möchte...



Ich verstehs nicht Muss ich dieses <p> jetzt löschen?


<div id="content" class="clearfix">

<div class="left">
...
</div>
<div class="left">
...
</div>

</div>

 

[Maik]

Wenn du zwei Elemente nebeneinander anordnen willst, ist doch alles korrekt, nur musst du eben dann dafür sorgen, dass auch die gewünschten Objekte dort eingebunden werden, damit nicht die zweite Box .left nach oben wandert, und die vorangegangene Box .left umfliesst.

 

[Reanimated]

Ist wohl n Logikproblem
Ich hab da jetzt nen Platzhalter hingesetzt.....

Und das mit dem P Element?