| |
Vorheriges Thema:
Nächstes Thema: |
| Autor |
Nachricht |
Thunder1985
Anmeldungsdatum: 25.07.2011
Beiträge: 1
|
 Verfasst am: 25.07.2011 08:40:28 Titel: img Stretcher auf fluid Div Container |
 |
|
Hi,
ich habe folgendes Problem. Habe am Browser Rand (oben wie unten) einen Festen Divblock über die gesamte Breite des Browsers. Dies beinhalten irgendeinen Content. Zwischen diesen beiden Containern möchter ich gerne einen neuen Container einsetzen, der die volle Höhe und Breite des freien Raums nutzt und ein beinhaltendes Bild auf die enstprechende Größe skaliert.
HTML:
| Code: |
<body>
<div class="center">
<div id="topcontrainer">
<div id="topmenu">
Inhalt blablub
</div >
</div>
</div>
<div class="image-gallery">
hier soll das gestretchte Bild rein
</div>
<div class="center">
<div id="footercontainer">
<div id="footercontent">
Inhalt blablub
</div>
</div>
</div>
</body>
|
CSS:
| Code: |
body
{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}
.center{
margin: auto 0px;
}
#topcontrainer{
background:#000;
height:50px;
width:100%;
position: fixed;
top: 0px;
left:0px;
}
#topmenu{
margin-left:auto;
margin-right:auto;
height:50px;
width:1000px;
background-image:url(images/bg_topmenu3.png);
}
#topmenu ul{
display:inline;
}
#topmenu li{
list-style-type:none;
display:inline;
}
#topmenu a{
padding:0 12px 0 12px;
color:#fff;
font-size:0.8em;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
}
#topmenu a:hover{
padding:0 12px 0 12px;
color:#396482;
font-size:0.8em;
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
}
#footercontainer{
background:#000;
height:250px;
width:100%;
position: fixed;
bottom: 0px;
left:0px;
}
#footercontent{
margin-left:auto;
margin-right:auto;
background: url(images/bg_header2.png) no-repeat;
height:200px;
width:1000px;
}
|
Ich hatte vorher den bgStretcher von http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html im Einsatz und eigentlich ist es genau das was ich möchte nur für den entsprechenden DivContainer - image-gallery.
Da hier sicherlich nicht nur css von nöten ist sondern auch javascript, wußte ich nicht in welches Forum dies gehört.
Vielen Dank |
|
| Nach oben |
|
 |
Alex...
Häufiger Poster
Anmeldungsdatum: 15.07.2010
Beiträge: 41
|
| Verfasst am: 12.08.2011 10:09:23 Titel: |
|
|
da ich mich mit js nicht sehr gut auskenne würd ich mit css 3 versuchen zu helfen, also: background-size: 100%; wird leider nicht von allen browsern unterstützt. was st denn in dem zentralen div, weshalb man es nicht mit einem normalen img lösen könnte?
oder hab ich es falsch verstanden und du würdest das auch als normale bild reinsetzen, dann einfach <img src="images/xy.jpg" style="width: 100%; height: 100%"> |
|
| Nach oben |
|
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
|
|
FAQ
Suchen
Mitgliederliste
Benutzergruppen
Registrieren
Profil
Einloggen, um private Nachrichten zu lesen
Login
