• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie Teaserboxen nebeneinander bekommen?

Schnoop82

Neues Mitglied
Hallo zusammen,
ich bin noch recht neu in der ganzen sache.

Helfe jemanden bei der Überarbeitung der HP. Probleme habe ich nur da wo es um die Teaser geht.
Sie stehen untereinander nicht Nebeneinander.
Code ist gekürzt. Wäre sonst zu lang alles.

vielleicht kann mir da wer nen rat geben. Geht um den folgen code. Ziemlich unten.

Danke im voraus schon mal.

Code:
<!-----    Inhalt   ---->

                <div class="content">

                    <div>

                        <div style="text-align: left;"></div>

<td align="left" width="625"><b><font color="#FF000" face="serif" size="5">Aktuelles</font></b><!-- ********************************* Content ********************************* --><!--11 12 13--><!--21 22 23--><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span>    
<tr>
<td>
<br>
<br>





<table style="width: 560px; height: 400px; text-align: left; margin-left: auto; margin-right: auto;" border="0">
<tbody>

<tr>

<td>


<iframe src="file:///C:/Daten/ADFC/WEB-Auftritt_2012/aktuelles/aktuelleliste.htm" name="A-Liste"
width="550" height="250" scrolling="yes" align="left">
</iframe>

</td>
<tr>
<tr>

<td>

                


<br>    
<hr>
<tr>
<td align="left" width="625"><b><font color="#FF000" face="serif" size="5">Touren und Termine</font></b><!-- ********************************* Content ********************************* --><!--11 12 13--><!--21 22 23--><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span>    
<tr>
<td>
<br>



        

                    


                        <div class="teaserBox">




<h1>Nächste Tour</h1>



<! Die nächste Tour ist: ..............................>                

                    <p>
                    <br>Feierabendtour zu Boltens Biergarten
                    <br>Di     09.08.2011   
                    <br>18:00 Uhr   
                    
                    <br>(bei passendem Wetter)
                    <br>
                    Info:
                    <br>
                    <br><a href="file:///C:/Daten/ADFC/WEB-Auftritt_2012/termine/radtourentabelle.pdf" >[Weitere Tourendaten]</a>

                    </p>


    
<! Die nächste Tour ist: ..................>



                        </div>


    

<div class="teaserBox">




<h1>Nächster Termin</h1>



<! Der nächste Termin ist: ..............................>                

                                        

                    <p>
                    <br>Do     08.09.2011   19:00Uhr   Grevenbroicher Radlertreff
                    <br>Gäste sind Herzlich Willkommen
                    <br>
                    Info:
                    <br>
                    <br><a href="file:///C:/Daten/ADFC/WEB-Auftritt_2012/termine/radtourentabelle.pdf" >[Unser Terminplan]</a>




                    </p>


    
<! Der nächste Termin ist: ..................>



                        </div>
<tr>


</td>

</tr>

</tbody>
</table>




                    </div>



                </div>

   <!-----    Inhalt   ---->

            </div>

      <!---- Rahmen -------->

        </div>

  <!---- master -------->

    </div>



  <!-- Auftritt -->


     <!---- Trennzeile ---->

    <div class="clearer"></div>

     <!---- Trennzeile ---->



  <!-- Fußbereich -->



    <div class="footer">

    <p class="noMargin">&copy;&nbsp;2011&nbsp;ADFC&nbsp;Rhein-Kreis Neuss&nbsp;e.&nbsp;V. Ortsgruppe Grevenbroich</p>

    </div>

  <!-- Fußbereich -->



</div>

</body>


</html>
 
Wenn deine Frage sein sollte wie man 2 Divs nebeneinander plaziert:
HTML:
<div style="float:right;width:50%;">Rechts</div><div style="width:50%;">Links</div>
Kann dann natürlich auch übers CSS laufen. Divs erzeugen grundsätzlich eine "neue Zeile".
 
Wenn deine Frage sein sollte wie man 2 Divs nebeneinander plaziert:
HTML:
<div style="float:right;width:50%;">Rechts</div><div style="width:50%;">Links</div>
Kann dann natürlich auch übers CSS laufen. Divs erzeugen grundsätzlich eine "neue Zeile".


Meine Frage war wie ich es schaffe die beiden Teaser Boxen nebeneinader zu bekommen.
Mit deinem Code bleibt die erste wo sie ist und die 2 Rückt dadrunter nur nach rechts, aber eben nicht in die gleiche Spalte wenn man so will.
 
Gib beiden die Eigenschaft
Code:
float: left;
und cleare, wenn's unterhalb der Boxen wieder weitergehen soll.
 
So nun habe ich es fast soweit.
Nebeneinander sind sie.
ein Problem habe ich noch.
Die 2 Box ist genau eine Zeile Tiefer als die erste.
Woran kann das noch liegen?

Nehm ich oben das </div> raus stimmt die höhe aber dann ist die Box weg, bzw. die farbe und markierung.

Grüße

Code:
<br>    
<hr>
<tr>
<td align="left" width="625"><b><font color="#FF000" face="serif" size="5">Touren und Termine</font></b><!-- ********************************* Content ********************************* --><!--11 12 13--><!--21 22 23--><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span>    
<tr>
<td>
<br>



        

                    </div>


                                <div class="teaserBox">
<div style="float:left;width:50%;">

                                <h1>Nächste Tour</h1>



                                            <! Die nächste Tour ist: ..............................>                

                                                    <p>
                                                    <br>Feierabendtour zu Boltens Biergarten
                                                    <br>Di     09.08.2011   
                                                    <br>18:00 Uhr   
                                                    <br>(bei passendem Wetter)
                                                    <br>
                                                    Info: S. Engels (02165-1714543)
                                                    <br>
                                                    <br><a href="file:///C:/Daten/ADFC/WEB-Auftritt_2012/termine/radtourentabelle.pdf" >[Weitere Tourendaten]</a>
    
                                                    </p>


    
                                            <! Die nächste Tour ist: ..................>


                                                        </div>


                                                                 </div>


                                <div class="teaserBox">
                            
<div style="float:left;width:50%;">

                                <h1>Nächster Termin</h1>



                                            <! Der nächste Termin ist: ..............................>                

                                            <p>
                                            <br>Grevenbroicher Radlertreff
                                            <br>Do     08.09.2011   
                                            <br>19:00Uhr
                                            <br>Gäste sind Herzlich Willkommen
                                            <br>
                                            Info: H. Fiegl (0170 4807224)
                                            <br>
                                            <br><a href="file:///C:/Daten/ADFC/WEB-Auftritt_2012/termine/radtourentabelle.pdf" >[Unser Terminplan]</a>

                                            </p>


    
                                        <! Der nächste Termin ist: ..................>




                                                        </div>

                                                             </div>
<div class="clearer"></div>

<tr>


</td>

</tr>

</tbody>
</table>




                    </div>
 
Zuletzt bearbeitet:
Dieser Div ist unnötig:
Code:
<div style="float:left;width:50%;">
Weise die Eigenschaften der .teaserBox zu.

Auch das davor macht keinen Sinn:
Code:
<br>
                    </div>
 
Zurück
Oben