Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
[CSS/HTML] dynamicznie rozciągające się okno z kilkoma grafikami - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS/HTML] dynamicznie rozciągające się okno z kilkoma grafikami (/thread-css-html-dynamicznie-rozciagajace-sie-okno-z-kilkoma-grafikami)

[CSS/HTML] dynamicznie rozciągające się okno z kilkoma grafikami - benassi - 28-02-2011

w załącznikach dałem okienko które chcę uzyskać
aby wyświetlało się tak jak chce trzeba je pociąć na 9 elementów
zależy mi, żeby było ono dynamicznie rozciąganie w pionie jak i poziomie

obecnie mam coś takiego jeśli chodzi o kod:

CSS
Kod:
#okno_top, #okno_content, #okno_bottom {
    clear: both;
}

#okno1 {
    background-image: url('../images/okno1.png');
    width: 12px;
    height: 43px;
    float: left;
}

#okno2 {
    background-image: url('../images/okno2.png');
    width: 300px;
    height: 43px;
    float: left;
}

#okno3 {
    background-image: url('../images/okno3.png');
    width: 12px;
    height: 43px;
    float: left;
}

#okno4 {
    background-image: url('../images/okno4.png');
    width: 12px;
    height: 100px;
    float: left;
}

#okno5 {
    background-image: url('../images/okno5.png');
    width: 300px;
    height: 100px;
    float: left;
}

#okno6 {
    background-image: url('../images/okno6.png');
    width: 12px;
    height: 100px;
    float: left;
}

#okno7 {
    background-image: url('../images/okno7.png');
    width: 12px;
    height: 13px;
    float: left;
}

#okno8 {
    background-image: url('../images/okno8.png');
    width: 300px;
    height: 13px;
    float: left;
}
#okno9 {
    background-image: url('../images/okno9.png');
    width: 12px;
    height: 13px;
    float: left;
}

HTML

Kod:
<div id="okno">
    <div id="okno_top">
        <div id="okno1">
        </div>
        <div id="okno2">
        </div>
        <div id="okno3">
        </div>
    </div>
    <div id="okno_content">
        <div id="okno4">
        </div>
        <div id="okno5">

        TUTAJ UMIESZCZAM TEKST

        </div>
        <div id="okno6">
        </div>
    </div>
    <div id="okno_bottom">
        <div id="okno7">
        </div>
        <div id="okno8">
        </div>
        <div id="okno9">
        </div>
    </div>
</div>

przy stałych wartościach okienko działa ok
ale zależy mi, by ta operacja działała automatycznie

niestety gdy odpowiednio width albo height daję na auto w divach:
2,3,4,5 i 8
nie działa to jak powinno i nie rozciąga mi tabelki względem ilości tekstu
zastosowanie auto nie uwzględnia tutaj żadnej korelacji jednego szerokości/wysokości jednego diva względem drugiego

jak się do tego tematu odpowiednio zabrać by uzyskać pożądany efekt?