CSS input unten rechts

...komplette Frage anzeigen

1 Antwort

Du hast folgende Optionen:

  • du benutzt float:right beim ersten div/span und lässt damit das zweite rechts herum fließen zu lassen
  • du benutzt eine HTML-Tabelle (Notlösung)
  • du verwendest absolute Positionen (nicht sehr flexibel, schon gar nicht bei unterschiedlichen Auflösungen)

float zu verstehen und anzuwenden ist nicht ganz einfach, ich hatte anfangs auch Schwierigkeiten damit. Das sollte dir helfen: http://css-technik.de/css-examples/219_9/

Hi,

danke für deine Antwort, ich hab so viel verschiedenen Code! Ich hab momentan eine Lösung mit absoluter Positionierung und einer Tabelle, ich hatte auch schon mit floating gespielt, jedoch hab ich jetzt mein wunsch-Ergebnis, außer der absoluten Positionierung:

HTML:

<div class="info">
            <img src="../include/images/objects/<?php echo $company['imageName']; ?>">
            <h3><?php echo $company['name']; ?></h3>
            <p><?php echo $company[$language['getLanguageShortcut'].'_description']; ?></p>
            <div>
                <table>
                    <tr>
                        <th colspan="2">
                            <span class="clicks"><?php echo $company['clicks']; ?></span>
                        </th>
                    <tr>
                    <tr>
                        <td>
                            <span class="likes"><?php echo $company['likes']; ?></span>
                        </td>
                        <td>
                            <form action="like.php" >
                                <input type="hidden" name="ID" value="<?php echo $type . $ID; ?>" />
                                <input type="submit" value="<?php echo $language['productLike']; ?>" title="<?php echo $likeText; ?>" <?php echo $likeColor; ?>/>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="likes"><?php echo $company['dislikes']; ?></span>
                        </td>
                        <td>
                            <form action="dislike.php">
                                <input type="hidden" name="ID" value="<?php echo $type . $ID; ?>" />
                                <input type="submit" value="<?php echo $language['productDislike']; ?>" title="<?php echo $dislikeText; ?>" <?php echo $dislikeColor; ?>/>
                            </form>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

CSS:

.info {
    position: relative;
    background-color: white;
    color: #5e5e5e;
    padding: 5px;
    border-radius: 3px;
    margin-top: 5px;
    min-height: 500px;
}
.info h3 {
    margin-bottom: 10px;
    color: black;
}
.info img {
    max-width: 300px;
    max-height: 150px;
    display: block;
    margin: 0 auto;
}
.info form {
    display: block;
}
.info input[type="submit"] {
    float: right;
    width: 100%;
}
.info span.likes {
    background-color: #ddd;
    border-radius: 3px;
    margin-top: 6px;
    margin-right: -3px;
    padding: 5px;
    border-top-left-radius: 100px 50px;
    border-bottom-left-radius: 100px 50px;
    float: left;
}
.info span.clicks {
    text-align: center;
    color: #5e5e5e;
    width: 100%;
}
.info div {
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    margin: 5px;
}

Die absolute Positionierung stört mich noch, jedoch bin in mit der Tabelle zufrieden, kannst du mir erklären wie das ohne duWeißtSchon geht?

Ein versuch mit weißt und floating hier: http://jsfiddle.net/yw87ewsn/3/

Danke, schon mal im Voraus!

-Minding

0

Was möchtest Du wissen?