 [CSS][HTML]problem z wyświetlaniem tła tekstu w znacznikach <div> |
  |
| [CSS][HTML]problem z wyświetlaniem tła tekstu w znacznikach <div> |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 3 Pomógł: 0 Dołączył: 22.09.2013 Ostrzeżenie: (0%) 
 |
Jako że to mój pierwszy post, to się przywitam. Powitać (IMG:style_emoticons/default/wink.gif)
A teraz do rzeczy. Jak już napisałem w temacie, mam pewien problem z wyświetlaniem tekstu na stronie http://www.geodraszek.cba.pl/index.html, a nawet nie tyle tekstu, co tła w pewnym miejscu. Jak widać po wejściu na stronę, w tej szarej części z tekstem, ustawione jest w CSSie tło, rozmiarów 864x1 px. Problem polega na tym, że wyświetla go za dużo na stronie, chciałbym, żeby za tą dolną częścią szarego pola, z zaokrąglonymi rogami, nie wyświetlała się jeszcze jedna linia tła (a tak jest). Coś zapewne jest nie tak w kodzie, a że nie jestem zbyt mocny jak na razie w html-u i użyciu arkuszy css, prosiłbym o podpowiedź, co by tutaj zmienić, żeby było dobrze. Kod strony: Kod <!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" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="Description" content="Geodezja na wysokim poziomie, w konkurencyjnych cenanch. Działamy na terenie powiatu janowskiego i okolicznych, jednak przy większych zleceniach możliwe jest zwiększenie zakresu działalności. Geodeta uprawniony Grzegorz Draszek" /> <meta name="Keywords" content="expert, geodezja Janów Lubelski, geodeta Janów Lubelski, Grzegorz Draszek, geodezja usługi, geodezja Nisko, geodeta Nisko, geodezja Stalowa Wola, geodeta Stalowa Wola, geodezja Biłgoraj, geodeta Biłgoraj, usługi geodezyjne, lubelskie, podkarpackie, geodeta, geodeci, geodeta uprawniony, firmy geodezyjne, znaki geodezyjne, geodezja, geodeta, wytyczenie działki, inwentaryzacja budynku, Janów Lubelski, Nisko, Stalowa Wola, Biłgoraj, powiat janowski, gmina Janów Lubelski " /> <meta name="author", content="Mikołaj Draszek" /> <title>Strona główna - Usługi Geodezyjno - Kartograficzne Grzegorz Draszek</title> <link type="text/css" href="images/styles.css" rel="stylesheet" /> </head> <body> <div id="container"> <div id="header"> <a href="index.html"><img src="images/glowna.png" alt="O nas" /></a><a href="o_firmie.html"><img src="images/ofirmie.png" alt="O firmie" /></a><a href="oferta.html"><img src="images/oferta.png" alt="Oferta" /></a><a href="realizacje.html"><img src="images/realizacje.png" alt="Nasze realizacje" /></a><a href="kontakt.html"><img src="images/kontakt.png" alt="Kontakt" /></a> </div> <div id="main-gora"> </div> <div id="left"> <div class="normal"> <div class="pad1"> Nasze usługi: <br /> - usługi geodezyjne (np. wytyczenia budynków, geodezyjna obsługa inwestycji)<br /> - usługi kartograficzne (np. sporządzanie map do celów projektowych). </div> </div> </div> <div id="right"> <div class="normal"> <div class="pad1"> Zapewniamy wysoką jakość usług, którą doceniło już wielu. Daj nam szansę, a my sprawimy, że dołączysz do grona zadowolonych klientów. </div> </div> </div> <div id="main-dol"> </div> </div><!--// end of container //--> <div id="footer"> </div> </body> </html> Kod arkusza CSS: Kod #container { width: 864px; height: auto; background-image: url(tlo-main.png); margin: 0px auto; border: 0px; } * { padding: 0; margin: 0; border: 0; } #header { width: 864px; height: 256px; } #main-gora { width: 864px; height: 19px; background-image: url(tlo-main-gora.png); } #main-dol { width: 864px; height: 19 px; background-image: url(tlo-main-dol.png); clear: both; } #left { width: 630px; float: left; } #right { width: 234px; float: right; } #footer { width: 864px; height: 116px; background-image: url(footer.png); margin: 0px auto; border: 0px; } .normal { font: normal 13px arial, tahoma; color: #222; line-height: 18px } .normal2 { font: normal 13px arial, tahoma; color: #e5e5e5; line-height: 18px; } .pad1 { padding: 10px 30px 10px 30px; } Problemowy plik tła to tlo-main.png, umieszczony jest na początku arkusza css. |
 |
 
|
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 264 Pomógł: 54 Dołączył: 31.08.2007 Skąd: Tychy Ostrzeżenie: (0%)
|
Użyj dobrodziejstw CSS3 i zaokrąglij te rogi w CSS, nie używając żadnych obrazków
|
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 133 Pomógł: 4 Dołączył: 7.11.2012 Skąd: Połaniec Ostrzeżenie: (0%)
|
nie wstawiaj obrazkow tylko zrob to stylami css3
usun te divy main gora main dol wstaw wszystko w jeden div i daj mu w sytlach border-radius 10px; to ci samo zaookragli rogi |
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 3 Pomógł: 0 Dołączył: 22.09.2013 Ostrzeżenie: (0%)
|
Dzięki za podpowiedź, jutro zmienię i dam znać, co wyszło. Chociaż szczerze mówiąc, wolałbym zachować kompatybilność ze starszymi przeglądarkami, więc fajnie byłoby to wyprostować, nie używając CSS3. Ale jak nie będzie innego sposobu, to zostanie w CSS3. Co ciekawe, odpalając tą stronę w IE, problem znika, tak samo jak w androidowych przeglądarkach, typu Dolphin Browser, czy nawet Chrome w wersji dla androida. Problem występuje w desktopowej wersji Chrome i Firefoxie, co do Opery nie wiem, bo nie korzystam.
|
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 1 335 Pomógł: 34 Dołączył: 9.11.2005 Skąd: Wrocław Ostrzeżenie: (10%) 
|
Jeśli potrzebujesz kompatybilności wstecznej (tj. IE6, IE7, IE8, IE9), to skorzystaj z CSS3 PIE. Akurat obsługuje border-radius'a.
Ten post edytował in5ane 24.09.2013, 08:22:20 |
|
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 3 Pomógł: 0 Dołączył: 22.09.2013 Ostrzeżenie: (0%)
|
CSS3 PIE to było właśnie to, czego potrzebowałem - dzięki wielkie! Teraz to ma już ręce i nogi, a pomimo tego, że bez żadnych wodotrysków, to wydaje mi się, że nie jest źle, jak na pierwszą konkretniejszą stronę.
Co ciekawe, jak połączyłem divy main-gora i main-dol w jeden main, to całe formatowanie się rozsypywało i nie wyświetlało w efekcie żadnego tła. Zostawiłem to w takim razie tak jak jest, w oddzielnych div'ach, usunąłem tylko komendy dotyczące tła w nich. |
|
|
|
|
|
Aktualny czas: 4.10.2025 - 06:52 |
