CSS,HTML i dynamiczna szerokość div'ów.

kt1117 · 8 Lutego 2013

Cześć, chciałem sobie trochę potrenować css, bo jestem w nim trochę słaby i napotkałem na problem. Ogólnie nie wiem jak powinno się pisać tak, żeby div "dziecko" "rozciągał" "przodka". Może wrzucę kod:

HTML:

    
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
    <html xmlns='http://www.w3.org/1999/xhtml'>




            <head>
            <meta http-equiv='content-type' content='text/html; charset=utf-8' />
            <link href='style.css' rel='stylesheet' type='text/css' />

        </head>

        <div>
            głupia reklama
        </div>

        <div id='baner'>
            jakiś dziwny obrazek
        </div>

        <div id='menu'>
            <ul>
                <li> gjhdfjkghjfg </li> 
                    <li> | </li> 
                <li> djskhfsjkd </li> 
            </ul>
        </div>




    

                 <div id='strona'>

                           <div id='struktura'>
                                    jakies dane</br>
                                    sdfhkdfksjhfsjkdfhsdhkfsldhfskljlkhfsjk</br>
                                    sdfsdfsd</br>
                                    dsfhdsjhfk</br>
                           </div>


                           <div id='duzy'>


                                           <div id='nbs'>
                                                    tekst
                                           </div>


                                           <div id='maly'>
                                                     tekst malego diva
                                           </div>

                                           <div id='maly'>
                                                     tekst malego diva
                                           </div>

                             </div>

                        </div>

            <div id='stopka'>
                Stworzone przez kt1117
            </div>
        
    </html>

CSS:

div
{
position:relative;

height:auto;
//text-align:center;

}

#baner
{
height:60px;
position:relative;
text-align:left;
}

#menu
{
height:auto;
position:relative;
background: red;

    text-align:center;
}



#menu ul {
    height:7px;
    margin-top:2px;
    //text-align: center;
    text-align:justify;
    list-style: none;
    display:inline-block;
    
}

#menu li {
    display: inline;
}

#strona
{
min-height:20px;
display:block;
text-align:left;
background:black;
}

#strona #struktura
{
position:relative;
display:inline-block;
width:20%;
height:100%;
background:#ABAEC7;
float:left;
}

#strona #duzy
{
position:relative;
display:inline-block;
background:blue;
text-align:left;
width:80%;
float:right;
height:100%;
}


#strona #duzy #maly
{
display:inline-block;
background:blue;
width:50%;
float:left;
height:50%;
}


#strona #duzy #nbs
{
display:block;
background:green;
height:50%;
}

#stopka
{
display:block;
background:brown;
float:left;
text-align:center;
width:100%;
}

I mam pytanie, co zrobić, żeby bez podawania wysokości w div'ie strona dostosowała się ona sama do największego dziecka?

Dawka83 · 8 Lutego 2013

Z wysokością zawsze są problemy ... Istnieje taki jeden patent na ustawianie paddingu na jakąś kosmiczną liczbę a marginu na minusowy, lub odwrotnie teraz nie pamiętam.

kt1117 · 8 Lutego 2013

A.. To wiele wyjaśnia. To po prostu załatwię to tak jak załatwiałem przedtem, JavaScriptem. Ogólnie ktoś mi kiedyś powiedział, że to powinienem ogarnąć w CSS, a tak to mam czyste sumienie. Dzięki.

Lysander · 9 Lutego 2013

div#strona ma się rozciągać do wysokości div#struktura? Jeżeli tak to wystarczy wyczyścić floaty np w taki sposób: http://jsfiddle.net/Lysander/cdqv7/

Da się to też osiągnąć w samym cssie: http://www.quirksmode.org/css/clearing.html

kt1117 · 9 Lutego 2013

Dzięki, to jest fajne. Szkoda, że rozciąga str. przez wrzucenie niewidocznego elementu, bo nie da się tego później wykorzystać jako wyrównania div'ów do najwyższego, ale jakoś to ogarnę.

E:Nie wiem dlaczego, ale taki kod działa:

HTML

    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
    <html xmlns='http://www.w3.org/1999/xhtml'>




        <head>
            <meta http-equiv='content-type' content='text/html; charset=utf-8' />
            <link href='style.css' rel='stylesheet' type='text/css' />

        </head>

        <div>
            głupia reklama
        </div>

        <div id='baner'>
            jakiś dziwny obrazek
        </div>

        <div id='menu'>
            <ul>
                <li> gjhdfjkghjfg </li> 
                    <li> | </li> 
                <li> djskhfsjkd </li> 
            </ul>
        </div>




    

<div id='strona'>

<div id='struktura'>
jakies dane</br>
sdfhkdfksjhfsjkdfhsdhkfsldhfskljlkhfsjk</br>
</div>


<div id='duzy'>


<div id='nbs'>
tekst
tekst malego diva<br/>
tekst malego diva<br/>
</div>


<div id='maly'>
tekst malego diva<br/>
tekst malego diva<br/>
tekst malego diva<br/>
</div>

<div id='maly'>
tekst malego diva<br/>
tekst malego diva<br/>
tekst malego diva<br/>
</div>

</div>

</div>

            <div id='stopka'>
                Stworzone przez kt1117
            </div>
        
    </html>

CSS:

div
{
position:relative;

height:auto;
//text-align:center;

}

#baner
{
height:60px;
position:relative;
text-align:left;
}

#menu
{
height:auto;
position:relative;
background: red;

    text-align:center;
}



#menu ul {
    height:7px;
    margin-top:2px;
    //text-align: center;
    text-align:justify;
    list-style: none;
    display:inline-block;
    
}

#menu li {
    display: inline;
}

#strona
{
position:relative;
overflow:auto;
min-height:20px;
display:block;
text-align:left;
background:black;
scrolling:no;
}

#strona #struktura
{
position:absolute;
display:inline-block;
width:20%;
height:100%;
background:#ABAEC7;
clear:none;
float:left;
}

#strona #duzy
{
position:relative;
display:inline-block;
background:yellow;
text-align:left;
clear:none;
width:80%;
float:right;
height:100%;
border:0px;
}


#strona #duzy #maly
{
position:relative;
border:0px;
display:inline-block;
background:blue;
width:50%;
float:left;
height:50%;
}


#strona #duzy #nbs
{
display:block;
background:green;
height:50%;
}

#stopka
{
display:block;
background:brown;
float:left;
text-align:center;
width:100%;
}

Jeśli większy div ma relative a mniejszy absolute. Na dodatek jak div struktura jest większy to div duzy dzieli się na połowy ;)

Zaloguj się

CSS,HTML i dynamiczna szerokość div'ów.

Rekomendowane odpowiedzi

kt1117

Odnośnik do komentarza

Udostępnij na innych stronach

Dawka83

Odnośnik do komentarza

Udostępnij na innych stronach

kt1117

Odnośnik do komentarza

Udostępnij na innych stronach

Lysander

Odnośnik do komentarza

Udostępnij na innych stronach

kt1117

Odnośnik do komentarza

Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników

Przeglądaj

GMCLAN.ORG

Cała aktywność

Ranking

Discord