Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Nie rozciągające sie tło - 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ł: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Nie rozciągające sie tło (/thread-nie-rozciagajace-sie-tlo)

Nie rozciągające sie tło - Iron22 - 15-04-2010

Co zrobic aby tło w tym wypadku obrazkowe(szare w którym wpisuje tekst) rozciągało się zgodnie z ilością wprowadzanego tekstu?

mój problem wygląda tak:

http://fotoo.pl/hosting-zdjec/2010-04/f ... y.bmp.html

To jest kod


>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bez nazwy 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<!-- ImageReady Styles (Bez nazwy 1) -->
<style type="text/css">
<!--

#Tabela_01 {
position:absolute;
left:100px;
top:0px;
width:760px;
height:800px;
text-align:center


}

Img{ border:none;}
#index-01_ {
position:absolute;
left:0px;
top:0px;
width:1px;
height:246px;
}

#index-02_ {
position:absolute;
left:1px;
top:0px;
width:191px;
height:239px;
}

#index-03_ {
position:absolute;
left:192px;
top:0px;
width:568px;
height:7px;
}

#index-04_ {
position:absolute;
left:192px;
top:7px;
width:59px;
height:239px;
}

#index-05_ {
position:absolute;
left:251px;
top:7px;
width:226px;
height:223px;
}

#index-06_ {
position:absolute;
left:477px;
top:7px;
width:41px;
height:239px;
}

#index-07_ {
position:absolute;
left:518px;
top:7px;
width:212px;
height:232px;
}

#index-08_ {
position:absolute;
left:730px;
top:7px;
width:30px;
height:239px;
}

#index-09_ {
position:absolute;
left:251px;
top:230px;
width:226px;
height:16px;
}

#index-10_ {
position:absolute;
left:1px;
top:239px;
width:191px;
height:7px;
}

#index-11_ {
position:absolute;
left:518px;
top:239px;
width:212px;
height:7px;
}

#index-12_ {
position:absolute;
left:0px;
top:246px;
width:760px;
height:11px;
}

#index-13_ {
position:absolute;
left:0px;
top:257px;
width:1px;
height:105px;
}

#index-14_ {
position:absolute;
left:1px;
top:257px;
width:759px;
height:21px;
}

#index-15_ {
position:absolute;
left:1px;
top:278px;
width:21px;
height:84px;
}

#index-16_ {
position:absolute;
left:22px;
top:278px;
width:110px;
height:63px;
}

#index-17_ {
position:absolute;
left:132px;
top:278px;
width:22px;
height:84px;
}

#index-18_ {
position:absolute;
left:154px;
top:278px;
width:212px;
height:63px;
}

#index-19_ {
position:absolute;
left:366px;
top:278px;
width:15px;
height:84px;
}

#index-20_ {
position:absolute;
left:381px;
top:278px;
width:195px;
height:63px;
}

#index-21_ {
position:absolute;
left:576px;
top:278px;
width:13px;
height:84px;
}

#index-22_ {
position:absolute;
left:589px;
top:278px;
width:143px;
height:63px;
}

#index-23_ {
position:absolute;
left:732px;
top:278px;
width:28px;
height:84px;
}

#index-24_ {
position:absolute;
left:22px;
top:341px;
width:110px;
height:21px;
}

#index-25_ {
position:absolute;
left:154px;
top:341px;
width:212px;
height:21px;
}

#index-26_ {
position:absolute;
left:381px;
top:341px;
width:195px;
height:21px;
}

#index-27_ {
position:absolute;
left:589px;
top:341px;
width:143px;
height:21px;
}

#index-28_ {
position:absolute;
left:0px;
top:362px;
width:760px;
height:11px;
}

#index-29_ {
position:absolute;
left:0px;
top:373px;
width:760px;
height:427px;
}
#Tabela_01 #index-29_ {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
background-image: url(Obrazki/index_29.jpg);
background-repeat:repeat
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (Bez nazwy 1) -->
<div id="Tabela_01">
<div id="index-01_">
<img id="index_01" src="Obrazki/index_01.jpg" width="1" height="246" alt="" />
</div>
<div id="index-02_">
<img id="index_02" src="Obrazki/index_02.jpg" width="191" height="239" alt="" />
</div>
<div id="index-03_">
<img id="index_03" src="Obrazki/index_03.jpg" width="568" height="7" alt="" />
</div>
<div id="index-04_">
<img id="index_04" src="Obrazki/index_04.jpg" width="59" height="239" alt="" />
</div>
<div id="index-05_">
<img id="index_05" src="Obrazki/index_05.jpg" width="226" height="223" alt="" />
</div>
<div id="index-06_">
<img id="index_06" src="Obrazki/index_06.jpg" width="41" height="239" alt="" />
</div>
<div id="index-07_">
<img id="index_07" src="Obrazki/index_07.jpg" width="212" height="232" alt="" />
</div>
<div id="index-08_">
<img id="index_08" src="Obrazki/index_08.jpg" width="30" height="239" alt="" />
</div>
<div id="index-09_">
<img id="index_09" src="Obrazki/index_09.jpg" width="226" height="16" alt="" />
</div>
<div id="index-10_">
<img id="index_10" src="Obrazki/index_10.jpg" width="191" height="7" alt="" />
</div>
<div id="index-11_">
<img id="index_11" src="Obrazki/index_11.jpg" width="212" height="7" alt="" />
</div>
<div id="index-12_">
<img id="index_12" src="Obrazki/index_12.jpg" width="760" height="11" alt="" />
</div>
<div id="index-13_">
<img id="index_13" src="Obrazki/index_13.jpg" width="1" height="105" alt="" />
</div>
<div id="index-14_">
<img id="index_14" src="Obrazki/index_14.jpg" width="759" height="21" alt="" />
</div>
<div id="index-15_">
<img id="index_15" src="Obrazki/index_15.jpg" width="21" height="84" alt="" />
</div>
<div id="index-16_">
<a href="o nas.html"target="_blank" rel="nofollow"><img id="index_16" src="Obrazki/index_16.jpg" width="110" height="63" alt="" /></a>
</div>
<div id="index-17_">
<img id="index_17" src="Obrazki/index_17.jpg" width="22" height="84" alt="" />
</div>
<div id="index-18_"> <a href="http://www.allegro.pl/show_user_auctions.php?uid=9581771" target="_blank" rel="nofollow">
<img id="index_18" src="Obrazki/index_18.jpg" width="212" height="63" alt="" /></a>
</div>
<div id="index-19_">
<img id="index_19" src="Obrazki/index_19.jpg" width="15" height="84" alt="" />
</div>
<div id="index-20_"> <a href="http://www.allegro.pl/show_user.php?uid=9581771" target="_blank" rel="nofollow">
<img id="index_20" src="Obrazki/index_20.jpg" width="195" height="63" alt="" /></a>
</div>
<div id="index-21_">
<img id="index_21" src="Obrazki/index_21.jpg" width="13" height="84" alt="" />
</div>
<div id="index-22_">
<img id="index_22" src="Obrazki/index_22.jpg" width="143" height="63" alt="" />
</div>
<div id="index-23_">
<img id="index_23" src="Obrazki/index_23.jpg" width="28" height="84" alt="" />
</div>
<div id="index-24_">
<img id="index_24" src="Obrazki/index_24.jpg" width="110" height="21" alt="" />
</div>
<div id="index-25_">
<img id="index_25" src="Obrazki/index_25.jpg" width="212" height="21" alt="" />
</div>
<div id="index-26_">
<img id="index_26" src="Obrazki/index_26.jpg" width="195" height="21" alt="" />
</div>
<div id="index-27_">
<img id="index_27" src="Obrazki/index_27.jpg" width="143" height="21" alt="" />
</div>
<div id="index-28_">
<img id="index_28" src="Obrazki/index_28.jpg" width="760" height="11" alt="" />
</div>
<div id="index-29_">
<p><br />Doskonale zdajemy sobie sprawę


<img id="index_29" src="Obrazki/index_29.jpg" width="760" height="427" alt="" /> </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

RE: Nie rozciągające sie tło - Dhofca - 15-04-2010

Po pierwsze link ucięty, po drugie kod wstawiaj z użyciem bbcode.

RE: Nie rozciągające sie tło - Kartofelek - 15-04-2010

Szkoda ze na polskich forach tak czesto ludzie nie potrafia nawet zadac pytania. Ozcywiście każdy specjalista wiec który to div jest tym szarym, o co w ogóle chodzi autorowi itp.
Zasadniczo powinieneś użyć background-repeat:repeat-y; ale to wszystko zalezy od tego jak pociales dany layout. Patrzac na kod jest on opciety bardzo zle, wiec nie mam pewnosci ze bedziesz w stanie uzyc tego stylowania.
Nastepnym razem gdy zadajesz pytanie daj linka do strony, bo z takiego kodu, ktory opiera sie w zasadzie na obrazkach tylko magik bedzie potrafil wyciagnac sedno Smile

RE: Nie rozciągające sie tło - Iron22 - 16-04-2010

To jest ten fragment kodu:

#index-29_ {
position:absolute;
left:0px;
top:373px;
width:760px;
height:427px;
}
#Tabela_01 #index-29_ {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
background-image: url(Obrazki/index_29.jpg);
background-repeat:repeat
}

I oto chodzi żebym mógł wprowadzac nieograniczona ilośc tekstu żeby to tło się nie przesuwało w dół jak na obrazku że tekst jest nieruchomy a tło sie przesuwaSad

RE: Nie rozciągające sie tło - Iron22 - 16-04-2010

(16-04-2010, 00:24)Iron22 napisał(a): To jest ten fragment kodu:

#index-29_ {
position:absolute;
left:0px;
top:373px;
width:760px;
height:427px;
}
#Tabela_01 #index-29_ {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #333333;
background-image: url(Obrazki/index_29.jpg);
background-repeat:repeat
}

I oto chodzi żebym mógł wprowadzac nieograniczona ilośc tekstu żeby to tło się nie przesuwało w dół jak na obrazku że tekst jest nieruchomy a tło sie przesuwaSad

Nawet zmieniłem dzisiaj to
#index-29_ {
position:absolute;
left:0px;
top:373px;
width:760px;
height:427px;

na takie wartości

#index-29_ {
position:absolute;
left:0px;
top:373px;
width:100%;
height:100%;

Pomogło na chwilę bo po wprowadzeniu większej ilości tektu tło znowu rodzielało się jak na obrazuku. CO ciekawe ten efekt mam tylko W Firefoxie i Operze w Internet Expolrer już nie.

RE: Nie rozciągające sie tło - Haden - 18-04-2010

Daj długość zamiast 100% na auto czyli,

height: auto;

Jak Ty się łapiesz dając wszędzie index-nr to niewiem no ale szczegół. Smile

RE: Nie rozciągające sie tło - Pedro84 - 18-04-2010

Wszystko pozycjonowane absolutnie? Ups... Poczytaj jakiś kurs, html + css...

RE: Nie rozciągające sie tło - Haden - 18-04-2010

position:absolute;

no tego nie zauważyłem bo nie przeglądałem cssa Big Grin