Witam,
jak zrobić aby obrazek tła wydłużał się według ilości tekstu, a nie powielał kilka razy?
Mam problem, że jak mam obrazek i wymiary ma np. 300x200 i gdy chcę dać, aby był długi bardziej, żeby było więcej tekstu i daje 300x220 to po prostu obrazek powiela się, czyli 300pixeli jest obrazek i następne 20 to obrazek pokazany od początku. A mam takie cienie, że u góry ciemne i schodzi w jasny do białego. No i brzydko to wygląda, bo jest białe i nagle robi się czarne i znów jaśnieje :/
Proszę o pomoc.
Tak to wygląda:
http://i40.tinypic.com/m29le.jpg
Pełna wersja: [PHP][CSS]Automatyczne wydłuzanie tla wedlug tekstu
Musisz dać jako IMG i stylami nadać wysokość na 100%.
Ale IMHO lepiej by było, gdybyś zablokował powielanie i ustawił na tło dolny kolor. ;]
Ale IMHO lepiej by było, gdybyś zablokował powielanie i ustawił na tło dolny kolor. ;]
Tło jest białe, jest niebieska ramka na tytuł, następnie taki szary i to przechodzi w białe. Więc tło mogę ustawić na białe. Tylko jak zablokować powielanie?
repeat ?
repeat ?
Najprościej tak:
Kod
background: url('plik.jpg') #ffffff no-repeat;
Dałem sobie radę, tylko teraz mam problem z bocznymi belkami, które są pod osobnymi divami. Nie rozciągają się według długości strony 
Powstaje przerwa. Jak temu zaradzić?
Zdjęcie:
http://i44.tinypic.com/2nbv809.jpg
Zaznaczone belki powinny się łączyć.
@edit:
Mam jeszcze problem. Chciałbym, aby te pole background miało cały czas ustaloną długość 200px, a po prostu gdy tekstu wiecej to wychodzi tekst za, ale żeby nie powielało. Bo gdy ustawie height: 200px; to mi tekst wyskakuje na koniec strony gdy jest za dużo. :/
Jak zrobić, aby obrazek tła był tylko do 200px; pokazany a dalej białe tło?
Powstaje przerwa. Jak temu zaradzić?Zdjęcie:
http://i44.tinypic.com/2nbv809.jpg
Zaznaczone belki powinny się łączyć.
@edit:
Mam jeszcze problem. Chciałbym, aby te pole background miało cały czas ustaloną długość 200px, a po prostu gdy tekstu wiecej to wychodzi tekst za, ale żeby nie powielało. Bo gdy ustawie height: 200px; to mi tekst wyskakuje na koniec strony gdy jest za dużo. :/
Jak zrobić, aby obrazek tła był tylko do 200px; pokazany a dalej białe tło?
pokaz html i css
Teraz to wygląda tak:
http://i41.tinypic.com/b3v3ad.png
HTML:
<body>
<div class="head"></div>
<div class="top"></div>
<div class="ps"></div>
<div id="container">
<div class="logo"></div><div class="log"></div>
</div>
<div id="menu">
<div class="m1"></div><div class="m2"></div>
<a href=""><div class="m8">Home</div></a>
<a href=""><div class="m3">Link2</div></a>
<a href=""><div class="m3">Link3</div></a>
<div class="m4"></div>
<div class="mend"></div>
</div>
<div id="banner">
<div class="ban_listwa"></div>
<div class="ban_rama"></div>
<div class="ban_listwa_l"></div>
<div class="ban_listwa_l2"></div>
<div class="ban_text">
<?php include('info.txt') ?>
</div>
<div class="ban_spacer"></div>
<div class="ban_text2">
<?php include('info2.txt') ?>
</div>
<div class="ban_listwa_r"></div>
<div class="ban_listwa_rr"></div>
<div class="ban_listwa_r2"></div>
<div class="ban_listwa_dol"></div>
<div class="ban_listwa_dol2"></div>
</div>
<div id="center">
<div id="lewa">
<div class="txt_lew"></div>
<div class="txt_tyt">TYTUŁ1</div>
<div class="txt_spacer"></div>
<div class="txt_lew2"></div>
<div class="txt_tekst">Twój tekst.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Ciąg dalszy. Test. :]</div>
<div class="txt_spacer3"></div>
</div>
<div id="prawa">
<div class="menu_tyt">Menu:</div>
<div class="txt_spacer2"></div>
<div class="menu_tekst">Link 1, Link2, Link3,</div>
<div class="txt_praw"></div>
</div>
</div>
<div id="stopka">
<div class="stopka_listwa"></div>
<div class="stopka_bok_l"></div>
<div class="stopka_text"></div>
<div class="stopka_bok_r"></div>
<div class="stopka_dol"></div>
</div>
</div>
</body>
</html>
a tutaj CSS:
http://www.speedyshare.com/527727124.html
Jest za długi, nie mogę dać go jako post.
Wiem, trochę bałagan może według was. Ale ja sobie znajduje i układałem to dla Siebie.
<br><br>Proszę o pomoc, już tylko z tym mam problemy. Ułożyć to i mogę wtedy już coś pisać na stronie. 
<br>
http://i41.tinypic.com/b3v3ad.png
HTML:
<body>
<div class="head"></div>
<div class="top"></div>
<div class="ps"></div>
<div id="container">
<div class="logo"></div><div class="log"></div>
</div>
<div id="menu">
<div class="m1"></div><div class="m2"></div>
<a href=""><div class="m8">Home</div></a>
<a href=""><div class="m3">Link2</div></a>
<a href=""><div class="m3">Link3</div></a>
<div class="m4"></div>
<div class="mend"></div>
</div>
<div id="banner">
<div class="ban_listwa"></div>
<div class="ban_rama"></div>
<div class="ban_listwa_l"></div>
<div class="ban_listwa_l2"></div>
<div class="ban_text">
<?php include('info.txt') ?>
</div>
<div class="ban_spacer"></div>
<div class="ban_text2">
<?php include('info2.txt') ?>
</div>
<div class="ban_listwa_r"></div>
<div class="ban_listwa_rr"></div>
<div class="ban_listwa_r2"></div>
<div class="ban_listwa_dol"></div>
<div class="ban_listwa_dol2"></div>
</div>
<div id="center">
<div id="lewa">
<div class="txt_lew"></div>
<div class="txt_tyt">TYTUŁ1</div>
<div class="txt_spacer"></div>
<div class="txt_lew2"></div>
<div class="txt_tekst">Twój tekst.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Ciąg dalszy. Test. :]</div>
<div class="txt_spacer3"></div>
</div>
<div id="prawa">
<div class="menu_tyt">Menu:</div>
<div class="txt_spacer2"></div>
<div class="menu_tekst">Link 1, Link2, Link3,</div>
<div class="txt_praw"></div>
</div>
</div>
<div id="stopka">
<div class="stopka_listwa"></div>
<div class="stopka_bok_l"></div>
<div class="stopka_text"></div>
<div class="stopka_bok_r"></div>
<div class="stopka_dol"></div>
</div>
</div>
</body>
</html>
a tutaj CSS:
http://www.speedyshare.com/527727124.html
Jest za długi, nie mogę dać go jako post.
Wiem, trochę bałagan może według was. Ale ja sobie znajduje i układałem to dla Siebie.
<br><br>Proszę o pomoc, już tylko z tym mam problemy. Ułożyć to i mogę wtedy już coś pisać na stronie. <br>
pokaz css'a, bo z tego to Ci nikt fusów nie wywróży...
1. Piszesz całkiem niezgodnie ze standardami (a to zły nawyk):
<a href="#"><div></div></a> ...
2. Masz totalny chaos w kodzie
3. Niektórych klas i identyfikatorów w ogóle nie używasz, a masz w kodzie.
4. Po co dzielisz na tyle obrazków?
5. Jeśli chcesz, żeby coś się wyświetliło obok czegoś drugiego (np. div), to musisz użyć 'display:inline;' a dopiero później wypozycjonować float. (to jest powód dla którego źle Ci się wyświetla)
<a href="#"><div></div></a> ...
2. Masz totalny chaos w kodzie
3. Niektórych klas i identyfikatorów w ogóle nie używasz, a masz w kodzie.
4. Po co dzielisz na tyle obrazków?
5. Jeśli chcesz, żeby coś się wyświetliło obok czegoś drugiego (np. div), to musisz użyć 'display:inline;' a dopiero później wypozycjonować float. (to jest powód dla którego źle Ci się wyświetla)
To:
<a href="#"><div></div></a>
zrobiłem tylko dlatego, żeby cały obrazek (tło) było linkiem, ponieważ używam hover. A tak to było tło z hover, a żeby przejść do linku to trzeba było kliknąć na napis. Próbowałem z a:link i a:hover ale wtedy z czcionkami problem. Zrobiłem tak, ważne że działa.
Z tym inline sprawdzę zaraz, bo jadę coś załatwić. Ale coś mi się przypomina i chyba dam rade.
A co do tego, aby te boczne linie się wydłużały wraz z treścią, co zrobić?? :/
Proszę o lekką korekte tego kodu.
Dodałem inline:
#prawa {
display: inline;
overflow: hidden;
margin-left:0px;
padding:0px;
width:334px;
height:100%;
}
I nic z tego, nadal jest jedno pod drugim. :/
<a href="#"><div></div></a>
zrobiłem tylko dlatego, żeby cały obrazek (tło) było linkiem, ponieważ używam hover. A tak to było tło z hover, a żeby przejść do linku to trzeba było kliknąć na napis.
Próbowałem z a:link i a:hover ale wtedy z czcionkami problem. Zrobiłem tak, ważne że działa.Z tym inline sprawdzę zaraz, bo jadę coś załatwić.
Ale coś mi się przypomina i chyba dam rade.A co do tego, aby te boczne linie się wydłużały wraz z treścią, co zrobić?? :/
Proszę o lekką korekte tego kodu.
Dodałem inline:
#prawa {
display: inline;
overflow: hidden;
margin-left:0px;
padding:0px;
width:334px;
height:100%;
}
I nic z tego, nadal jest jedno pod drugim. :/
display:inline zadziała tylko wtedy:
mamy dwa divy:
____ _______
[div1] [div----2]
------ -----------
powyższy przykład wyświetli się jedynie wtedy, kiedy:
pierwszy i drugi div będzie miał:
display:inline;
i lewy:
float:left;
prawy:
float:right;
jeśli mają do siebie przylegać to oba mogą mieć float: (right albo left).
Polecam także dodawać diva, który 'obleje' oba divy, czyli
mamy dwa divy:
____ _______
[div1] [div----2]
------ -----------
powyższy przykład wyświetli się jedynie wtedy, kiedy:
pierwszy i drugi div będzie miał:
display:inline;
i lewy:
float:left;
prawy:
float:right;
jeśli mają do siebie przylegać to oba mogą mieć float: (right albo left).
Polecam także dodawać diva, który 'obleje' oba divy, czyli
Męczę się i męczę... nie mam siły już na to. :/ Za chiny nie chce iść w jedną linie. :/
Może mi ktoś to poprawić, aby było okej? :/ No i żeby height był rozciągany według ilości textu.
@edit:
Wylukałem, że nie chce to się połączyć bo przerwa pomiędzy oknami jest za duża. Jednak nie mogę tego zmniejszyć. ; ///
Może mi ktoś to poprawić, aby było okej? :/ No i żeby height był rozciągany według ilości textu.
@edit:
Wylukałem, że nie chce to się połączyć bo przerwa pomiędzy oknami jest za duża. Jednak nie mogę tego zmniejszyć. ; ///
Jeżeli chodzi o odstępy po bokach to proponuje poczytać Ci o faux columns.
Niestety, ale ten cały faux columns rozwala mi całą stronę.
Odstępy pomiędzy treścią a menu powoduje obrazek SPACER.JPG który w CSSie ma ustalone wielkości 17x45 pikseli, nie wiem z jakiego powodu on się powiększa, przez to menu się nie mieści w określonej szerokości (1200px).
No i co teraz? :/ Gdy zmniejszam szerokości tych SPACERów to nic nie daje, dalej jest to samo.
Odstępy pomiędzy treścią a menu powoduje obrazek SPACER.JPG który w CSSie ma ustalone wielkości 17x45 pikseli, nie wiem z jakiego powodu on się powiększa, przez to menu się nie mieści w określonej szerokości (1200px).
No i co teraz? :/ Gdy zmniejszam szerokości tych SPACERów to nic nie daje, dalej jest to samo.
Wiesz co, wyślij mi na email marianex@gery.pl obrazki i pokaz jak to ma wyglądać a potem ci kod wklepę tutaj
Cytat(marian2299 @ 4.07.2009, 14:04:06 ) 
Wiesz co, wyślij mi na email marianex@gery.pl obrazki i pokaz jak to ma wyglądać a potem ci kod wklepę tutaj
Wysłałem obrazki, PHP + CSS.
Proszę o pomoc... ;(
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.