Wątek przeniesiony 2015-11-16 15:51 z Webmastering przez dzek69.

Wyjeżdżający za diva fragment obrazka

0

Mam taki problem mam sobie fragment divów coś takiego

<div id=strona>

    <div id=srodek>

        <div id=gora>
            <div align=center><font class=tytul>Milionerzy</font></div>
        </div>
        <div id=srodek2>
            <div id=lewo>
                <div id=gora_lewo>
                
                </div>
                <div id=dol_lewo>jak tutaj coś wstawie to to wyjeżdza mi za obrazek

i teraz problem w tym, że jak tam coś wsadze jakieś napisy i cztery br to obrazek mi wyjedzie po za fragment diva, który jest po prawej stronie tiutaj mam plik typu css

#bg {
background-color: #acc1c4;
width: 300px;
height: 350px;
margin: left;
float: left;

}
#bg3 {
background-color: #acf1c4;
width: 300px;
height: 350px;
margin: justify;
float: right;
}
#bg2 {
background-color: #ac01c4;
width: 772px;
height: 400px;
margin: center;

}

#strona {

height: 300px;
text-align: center;
background-color: #ac01c4;

}

#srodek {
background-color: #FFF000;
width: 1100px;
height: 700px;
text-align: center;
margin: 0 auto;


}

#gora {

background-color: #002B4F;
width: 1100px;
height: 100px;
text-align: center;
margin: 0 auto;



}

#srodek2 {

background-color: #002B4F;
width: 1100px;
height: 600px;
text-align: center;
margin: 0 auto;



}

#odpowiedzi {

width: 690px;
height:150px;

}

#odpowiedz_a {
background-image: url('./Bez nazwy2.jpg');
width: 318px;
height:53px;
float: left;
text-align: left;
margin-left: 50px;
box-sizing: border-box;
padding: 14px;

}
#odpowiedz_b {
background-image: url('./Bez nazwy2.jpg');
width: 318px;
height:53px;
float: right;
text-align: left;
box-sizing: border-box;
padding: 14px;
padding-bottom: 10px;
}

#lewo {

background-image: url('./2.jpg');
width: 800px;
height: 500px;
margin: 0 auto;
float: left;


}
#odstep {
background-color: #FFFFFF;
width: 30px;
clear: both;
float: right;
}
#gora_lewo {

width: 800px;
height:240px;

}

#pytanie {
background-image: url('./pytanie.jpg');
width: 690px;
height: 78px;
margin-left: 50px;
margin-right: 50px;

}

#dol_lewo {
width: 800px;
height: 300px;
}

#td {

text-align: right;
}

#td2 {

background-color: red;
text-align: right;
}

#prawe_menu {
width: 99%;
}
#prawe_menu2 {
width: 99%;
height: 70px;
}

#prawo {

background-color: #002B4F;
width: 1100px;
height: 500px;
margin: 0 auto;



}

a.odpo {
    
 color: white;   
 text-decoration:none;
}
font.pytanie {
    color: white;   
}
font.odpo {
 color: #E0E722;
 font-size: 21px;
}
#czerwony {
background-color: #FCC0AA;

}

font.tytul {
    font-size: 62px;
    color: #FFFFFF;
    
}

font.menu {
    
 color: #F2E739;   
}

font.menu2 {
    
 color: #FFFFFF;   
}
font.menu3 {
 background-color: #FFFFFF;   
}

można to zrobić w taki sposób, że css #gora_lewo zmiejszyć wysokość i to działą, ale problem w tym, że jak nie ma napisów to ten obrazek jest za wysoko i trzeci sposó” jest taki, że można dodać instrukcje warunkową, żeby sprawdzał jak nie ma stringa to dodać tylko puste br, ale czy jest jakieś rozwiązanie, żeby nie dawać instrukcji warunkowej ?

0

Może dam cały gragment pliku HTML

<div id=strona>

    <div id=srodek>

        <div id=gora>
            <div align=center><font class=tytul>Milionerzy</font></div>
        </div>
        <div id=srodek2>
            <div id=lewo>
                <div id=gora_lewo>
                s
                </div>
                <div id=dol_lewo>
                Tutaj w tym miejscu jak dam kilka <br> to obrazek wyjedzie po za <div>
                    <div id=pytanie>
                     ten obrazek
                    asdasd asdasbdubasdas asbdubhasudbasd uasdbuasbdasd asdbuashdbuasd uasdh sdfs 
                    </div>
                    <div id=odpowiedzi>
                        <div id=odpowiedz_a>
                        ss
                        </div>
                        <div id=odpowiedz_b>
                        ss
                        </div>
                        <div id=odpowiedz_a>
                        ss
                        </div>
                        <div id=odpowiedz_b>
                        ssaaaaaaaadddddddddddddddddddd ddd
                        </div>
                    </div>
                </div>
            </div>
            <div id=prawo>
            saddddd
            </div>
        ss
        </div>
    </div>
</div>
0

align, font? A moze lepiej klasa i span?

Nie moge teraz wrzucic tego i sprawdzic wiec strzelam: overflow: hidden?

0

<font class="tytul">??
A nie lepiej użyć elementu do tego sprzeznaczonego Hx?

0

Tutaj zrobiłem linka https://jsfiddle.net/bs8k7h3c/

0

Daj screena bo nic nie kapuję.

0

To jest screen.

0

ok i z którym obrazkiem jest problem? Pytam, bo obrazek (tlo) nie powinno miec wplywu na rozmiar diva. Moze ew. postarzac sie (repeat) niz rozszerzac istniejacy kontener.

0

KTÓRY?

1 użytkowników online, w tym zalogowanych: 0, gości: 1