Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: wrapper div
Forum PHP.pl > Forum > Przedszkole
!Ci
Tworze sobie obramowanie na rozne elementy za pomoca div. Stworzylem okno z 3 contenerami Header, Content, Footer. Do kazdego z nich dodalem po 3 div (top-left, top-middle, top-right,....). Otaczajace elementy zawieraja grafiki obramowania i kiedy dodam do elementu centralnego jakis obiekt, chcialbym zeby z rozszezeniem sie div'a poszerzyly sie rowniez grafiki(odpowiadajace za krawedzie). Jezeli wpisze rozmiary recznie wszystko jest ok, ale nie da sie tego automatycznie zrobic (taki automatyczny padding).

pozdrawiam
devnul
nie wiem czy dobrze rozumiem ale spróbuj użyć wartości wyrażonych w procentrach
!Ci
W takim przypadku div rozszeza mi sie do wielkosci kontenera.
Sebastian003
Podaj jakiś kod albo stronkę będzie łatwiej.
!Ci
Kod
<div style="width: 220px;">
             <div>
                 <div id="top-left-win">
                 </div>
                 <div id="top-middle-win">
                 </div>
                 <div id="top-right-win">
                 </div>
             </div>
             <div id="middle">
                 <div id="left-win">
                 </div>
                 <div id="middle-win">
                        <b>WSTAWIANY OBIEKT</b>
                 </div>
                 <div id="right-win">
                 </div>
             </div>
             <div id="bottom">
                 <div id="bottom-left-win">
                 </div>
                 <div id="bottom-middle-win">
                 </div>
                 <div id="bottom-right-win">
                 </div>
             </div>
            
         </div>


Style wygladaja tak:
Kod
#header,#top-left-win,#top-middle-win,#top-right-win {
     height: 28px;
}

#bottom-left-win,#bottom-middle-win,#bottom-right-win{
     height: 15px;
}

#middle
{
     clear: left;
}  

#bottom{
     clear: left;
}

#top-left-win{
     width: 9px;
     background: url(okno/top-left-blue.png) no-repeat;
     float: left;
}

#top-middle-win{
     /*padding-right: 20px;*/
     background: url(okno/top-middle-blue.png);
     float: left;
}

#top-right-win{
     width: 15px;
     background: url(okno/top-right-blue.png);  
     float: right;
}

#left-win
{
     width: 9px;
     background: url(okno/left-blue.png);  
     float: left;
}

#middle-win{

     float: left;
}

#right-win{
     width: 15px;
     background: url(okno/right-blue.png);
     float: left;
}

#bottom-left-win{
     width: 9px;
     background: url(okno/bottom-left-blue.png);
     float: left;
}

#bottom-middle-win{
    
     background: url(okno/bottom-middle-blue.png);  
     float: left;
}

#bottom-right-win{
     width: 15px;
     background: url(okno/bottom-right-blue.png);
     float: right;
}


Chcialbym, aby np. top-middle-win sam mi sie rozszezal. Moge to zrobic wpisujac styl padding, ale takich obramowan chce wiecej i nie bardzo mam ochote kopiowac ten kod wiele razy. Chcialbym, zeby to sie automatycznie robilo.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.