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

Inhalt von Listenelementen verschoben

G

GGD

Neues Mitglied
Hallo zusammen.

Ich wende mich nach 5 Stunden überlegen mal an euch. Ich bin gerade dabei mir eine Tutorialseite aufzubauen.
Dafür will ich verschiedene Kategorien haben die sich per js öffnen lassen.
Das funktioniert soweit auch ganz gut.
Allerdings ist der Inhalt der einzelnen Kategorien immer ein wenig nach unten verschoben, je mehr Kategorien es werden...
Woran könnte das liegen ?
LINK

CSS :
Code: 
/*////////////////////////////////////////////////////////
//                        Tutorials                        //
////////////////////////////////////////////////////////*/
.tutCatContainer {
    width: 540px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    padding:10px;
    background: rgba(0,0,0,0.1);
}

.tutCatContainerInner {
    height: 80px;
}

.tutCatImg {
    width: 100px;
    height: 80px;
    float:left;
    vertical-align: center;
    margin: 0 !important;
    padding: 0 !important;
}

.tutCatImg img{
    width: 60px;
    height: 60px;
    vertical-align: center;
}

.tutCatCont {
    width: 370px;
    height: 80px;
    float:left;
}

.tutCatNum {
    width: 70px;
    height: 80px;
    float:left;
    padding-top: 30px;
}

.tutCatNum span {
    font-weight: bold;
    font-size: 26px;
}

.tutCatContainer ul {
    margin-top: 10px;
}

.box_blue {
    padding-top: 20px;
}

.tutListContainer {
    width: 520px;
    height: 60px;
    padding: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding:10px;
    background: rgba(0,0,0,0.1);
}

.tutListImg {
    width: 50px;
    height: 60px;
    float:left;
}

.tutListImg img {
    width: 40px;
    height: 40px;
    padding-top:10px;
}

.tutListContent {
    width: 390px;
    height: 60px;
    float:left;

}

.tutListStats {
    width: 80px;
    height: 60px;
    float:left;
    text-align: right;
}

p.tutDiff {
    font-size: 10px;
    font-style: italic;
    text-align: right;
}

#TCC1, #TCC2, #TCC3, #TCC4, #TCC5, #TCC6, #TCC7, #TCC8, #TCC9 {
    height: 120px !important;
}

body#tutorials li{
    margin-top: 7px;
    margin-bottom: 7px;
}

HTML :
HTML: 
[...]<div id="content">
                        <ul>
                        <?php
                            foreach(get_tut_categories () as $category)
                            {
                                ?>
                                <li>
                                    <div id="tutCat<?php echo $category['id']; ?>">
                                        <div class="tutCatContainer">
                                            <div class="tutCatContainerInner">
                                            <div id="TCC<?php echo $category['id']; ?>">
                                                <div class="tutCatImg"><img src="../style/style_1/img/<?php echo $category['iconname']; ?>" alt="<?php echo $category['iconname']; ?>" /></div>
                                                <div class="tutCatCont">
                                                    <h3><?php echo $category['name']; ?></h3>
                                                    <p><?php echo $category['description']; ?></p>
                                                </div>
                                                <?php $cid = $category['id'];?>
                                                <div class="tutCatNum"><img src="../style/style_1/img/tuts.png" alt="" /><span><?php $counter = mysql_query("SELECT COUNT(*) AS count FROM cyb_tuts_entries WHERE cat_id = {$cid}"); $counter = mysql_fetch_assoc($counter); echo $counter['count']; echo $anz; ?></span></div>
                                                <div style="clear:left;"></div>
                                            </div>
                                            </div>
                                            <div class="box_blue" id="slideToggleBox<?php echo $cid; ?>" style="display: none;">
                                                <?php
                                                $img = $category['iconname'];
                                                $cat = $cid;
                                                ?><ul><?php
                                                foreach(get_tuts_c($cat) as $tut)
                                                {
                                                ?>
                                                        <li>
                                                            <div class="tutListContainer">
                                                                <div class="tutListImg">
                                                                <img src="../style/style_1/img/<?php echo $img; ?>" alt="<?php echo $img; ?>" />
                                                                </div>
                                                                <div class="tutListContent">
                                                                <h3><?php echo $tut['name']; ?></h3>
                                                                <p><?php echo $tut['description']; ?></p>
                                                                </div>
                                                                <div class="tutListStats">
                                                                <p class="tutDiff"><?php if($tut['difficulty'] == 1){echo "Anf&auml;nger";}elseif($tut['difficulty'] == 2){echo "Fortgeschritten";}else{echo "Unbestimmt";} ?></p>
                                                                </div>
                                                                <div style="clear:left;"></div>
                                                            </div>
                                                        </li>
                                                <?php
                                                }
                                                ?>
                                                    </ul>
                                            </div>
                                            <script>$("#TCC<?php echo $cat; ?>").click(function () {$("#slideToggleBox<?php echo $cat; ?>").slideToggle("fast");});</script>
                                        </div>
                                    </div>
                                </li>
                                <?php
                            }
                        ?>
                        </ul>
                    </div>[...]
 
Sorry aber ich verstehe nicht genau was du meinst. Ich sehe da nichts unstimmiges.

Edit:
Falls du den Abstand zwischen den Inhalten der toggle box und der main box meinst
nimm in der main.css in der klasse box_blue das padding raus.
 
Zuletzt bearbeitet:
Das hat keinen Einfluss darauf.

Ich meine die Bilder (Document icons) gaz links. Wenn du die genau anschaust, stellst du fest, dass das das bei der ersten Kategorie fast ganz oben in der Box ist und dann immer ein bisschen weiter unten bei jeder folgenden Kategorie (zuuunterst ist es dann fast in der Mitte)
 
auslöser ist die grafik rechts das kleine buch per firebug siehst du dass dieses
über die normale box hinausläuft und damit das nächste bild nach unten schiebt,
ergo kettenreaktion.
EDIT:
nimm bei .tutCatNum das height: 80px ; raus dann kommts gut.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben