HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - img Stretcher auf fluid Div Container

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

img Stretcher auf fluid Div Container

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
Thunder1985



Anmeldungsdatum: 25.07.2011
Beiträge: 1

BeitragVerfasst am: 25.07.2011 08:40:28    Titel: img Stretcher auf fluid Div Container Antworten mit Zitat

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
Benutzer-Profile anzeigen Private Nachricht senden
Alex...
Häufiger Poster


Anmeldungsdatum: 15.07.2010
Beiträge: 41

BeitragVerfasst am: 12.08.2011 10:09:23    Titel: Antworten mit Zitat

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
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
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.