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

Image Height relativ zum Elternelemente?

L

Lotus

Mitglied
Hallo, ich habe ein div um ein image und das div bestimmt seine größe automatisch.
ich möchte das sich das bild in der höhe relativ zum div anpasst, geht sowas?
imagerelativ.jpg

Wie man sieht, ist die Karte viel zu groß ^^'
 
mach ich ja, aber dann gibt er die größe relativ zum browserfenster ein und nicht zum elternelement :/
 
HTML: 
<html>
<head>
<style>
    body {
    /*    background-color:F5F5F5;*/
        background-color:#ECEDED;
        font-family: "Myriad Pro", Arial, Helvetica, Tahoma, sans-serif;
    }
.overlay {
    /* must be initially hidden */
    
    /* place overlay on top of other elements */
    z-index:10000;
    
    /* styling */
    background-color:#717274;
    
    width:700px;    
    min-height:200px;
    border:1px solid #666;
/*    height:450px;*/
    height:auto;
    
    /* CSS3 styling for latest browsers */
    /*-moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;    */
    
    border:1px solid #aaaaaa;
    -moz-border-radius:10px;
    -khtml-border-radius:30px;
    }
    
    .overlay div.overlay_links {
        position:relative;
        border:1px solid red;
        float:left;
    }
    
    .overlay div.overlay_rechts {
        position:relative;
        margin-left:325px;
        padding-left:20px;
        padding-top:25px;
        max-height:350px;
        padding-right:25px;
    }

.overlay h1 {
    display:inline;
    color: #009ee0;
}
    
.overlay div.overlay_links img {
    margin-top:25px;
    padding-left:25px;
    width:300px;
    /*height:400px;*/
    height:
    }
    
    .overlay p {
        display:inline;
        color:white;
    }
    
    .overlay p.autor {
        font-size:1.3em;
    }
    
    .overlay div#preisZahl {
        color:white;
        display:inline;
        padding-left:15px;
        font-size:larger;
    }
    
    .overlay div#isbnZahl {
        padding-left:15px;
        color:white;
        display:inline;
    }
    
    .overlay div#beschreibung {
        color:white;
        max-height:250px;
        overflow:auto;
        font-size:smaller;
        min-height:50px;
    }
    
    .overlay div#cartimage {
        padding-top:10px;
        margin-left:325px;
        padding-left:120px;
        padding-bottom:10px;
    }
    .overlay div#seitenZahl {
        display:inline;
        color:white;
        padding-left:15px;
    }

</style>
</head>
<body>
<div class="overlay">
<div class="overlay_links">
    <img src="../../../../Dokumente und Einstellungen/Lotus/Eigene Dateien/Eigene Bilder/Kartenblatt/herzacht.gif" />
</div>
<div class="overlay_rechts">
    <h1>Alle sieben Wellen</h1><br />
    <p class="genre">Roman</p><br />
    <p class="autor">Daniel Glattauer</p><br /><br />
    <p class="isbn">ISBN <div id="isbnZahl">123456789X</div></p><br />
    <p class="preis">Preis <div id="preisZahl">9.99&euro;</div></p><br /><br />
    <div id="beschreibung">Kennen Sie schon Emmi Rothner und Leo Leike</div><br />
    <p class="seiten">Seiten <div id="seitenZahl">321</div></p>
</div>
<div id="cartimage"><img src="../images/addtocartbutton.png" /></div>
</div>
</body>
</html>
 
Wie kommt den bei so einer einfachen Aufgaben dermaßen viel Code Zustande?

Naja, füge mal vor dem letzten </div> einen neuen div hinzu:
HTML: 
<div class="clear"></div>


css:
PHP: 
.clear {
    clear: both;
}
 
Das erzeugt nicht das was ich möchte, jetzt passt sich die rechte Seite der linken Seite an... :/ ich wollte das ja eigentlich genau andersrum q.q
 
Das Bild wird durch das float aus dem Fluss genommen, In deinem Fall hilft wenn #overlay ein position:absolute bekommt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben