Einstellen einer minimalen Breite und Höhe für BODY

Ich habe eine Seite mit einem statischen Bild auf der Ride-Seite des Browsers in voller Höhe (mit einem Gradienten darüber) und einem Block von Text auf der linken Seite erstellt. Ich möchte, dass die Größe des Bildes im Browserfenster geändert wird. Ich möchte jedoch nicht, dass das Bild hinter den Text zurückgeht oder kleiner wird als der Text. Wenn ich am Körper eine Mindestbreite und eine Mindesthöhe einstelle, zum Beispiel 1024 x 768, löst dies das Problem nicht. Mache ich etwas falsch? Wie soll ich das machen?Einstellen einer minimalen Breite und Höhe für BODY

Vielen Dank im Voraus!

Hier ist mein Code:

<style type="text/css"> 
html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    min-width: 1024px; 
    min-height: 768px; 
} 
#background-image { 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: 100%; 
    background-image: url('image.jpg'); 
    z-index: -1; 
} 
#background-gradient { 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 0; 
    height: 100%; 
} 
#content { 
    position: absolute; 
    left: 15%; 
    top: 15%; 
    width: 500px; 
    font-family: Georgia; 
    font-size: 16px; 
} 
p.dropcap:first-letter { 
    float: left; 
    font-size: 50px; 
    line-height: 30px; 
    padding-top: 2px; 
    padding-right: 4px; 
    font-family: Georgia; 
} 
h1 { 
    font-size: 55px;  
} 
</style> 
</head> 

<body> 
<img id="background-image" src="image.jpg" /> 
<img id="background-gradient" src="gradient.png" /> 
<div id="content"> 
<h1>[TITLE]</h1> 
<p class="dropcap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh lectus, vehicula quis elementum nec, pellentesque vitae est. In in libero pulvinar felis ultrices varius vel at augue. Suspendisse sollicitudin risus eu mauris ultrices nec auctor neque facilisis. Pellentesque commodo tellus quam. Praesent dictum sodales nisi, id tempor neque hendrerit id. Ut non mi a ante pulvinar tempor. Morbi scelerisque metus eu sem iaculis hendrerit. Integer pulvinar ipsum quis ante tincidunt gravida.</p> 
<p>Nullam vel tellus sed mauris sagittis egestas at sed lacus. Pellentesque sit amet justo felis. Donec sit amet est in urna consectetur convallis vitae id justo. Sed adipiscing accumsan augue, at cursus lorem bibendum nec. Etiam diam odio, sagittis ut tempor fermentum, elementum eu erat. Vivamus pharetra, nibh vel elementum pulvinar, risus leo ornare felis, eget tincidunt velit odio non turpis. Proin semper metus eget nisi varius varius elementum nisl eleifend. Nulla facilisi. Suspendisse urna sapien, pulvinar non porttitor pellentesque, laoreet id leo. Praesent sed tortor quis tellus eleifend ultricies et eu eros. Sed massa eros, hendrerit eu facilisis sed, fermentum sit amet purus. Nulla aliquam eleifend ante, tincidunt pulvinar dolor elementum eu. Proin quis justo in arcu sollicitudin faucibus ac tincidunt ligula.</p> 
</div> 
</body>

Quelle

2012-04-07 jmart

Setzen Sie alle Ihre HTML-Code in einem container div, die direkt in body ist. Anschließend können Sie den CSS-Code von Körper zu #container, wie diese bewegen:

#container { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    min-width: 1024px; 
    min-height: 768px; 
}

IIRC Sie können nicht min-width auf Körper gesetzt. Sie sollten jedoch vorsichtig sein, da die früheren Versionen von IE min-width nicht unterstützen.

Quelle

2012-04-07 15:01:01

Das ist nicht für mich zu arbeiten scheint ... – jmart

@jmart: Sie haben setzen all deinen HTML Code in 'div' mit einer ID von' container', nehme ich an? –

Ja, genau wie Sie es empfohlen haben. – jmart

schweben einfach: rechts und float: left Und eine Marge fügen Sie geben dem vorherigen Blick
Demo

Quelle

2012-04-07 15:08:54 Shreyas

Sorry, das funktioniert nicht. Sehen Sie sich Ihre Demo an, das Bild passt sich immer noch an das Fenster an, egal wie klein und der Text unter die Bilder verschoben wird, wenn sich die beiden überlappen würden. – jmart

@jmart Nun, was willst du genau? – Shreyas

Einstellen einer minimalen Breite und Höhe für BODY

Antwort

Verwandte Themen