 [JavaScript][CSS] Jak usunąć dolny pasek, Top+background zlane w jedną grafike |
  |
| [JavaScript][CSS] Jak usunąć dolny pasek, Top+background zlane w jedną grafike |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 14 Pomógł: 0 Dołączył: 21.04.2010 Ostrzeżenie: (0%) 
 |
Witam, jak moge usunąć dolny pasek gdy mam strone szerokosci np 1400 a szerokosć ekranu np 1280, dodam że potrzebuje tego bo po obydwu stronach topu mam grafikę która zlewa sie z TOP'em jak na stronie http://www.50cent.com jednak top i grafika po lewej i prawej to odzielne jpg, ninimalna rozdzielczosc przy jakiej powinien sie pojawic dolny pasek to szerokosc topu czyli 900 px (IMG:style_emoticons/default/closedeyes.gif) oczywiście top i zawartośc strony musi być wyśrodkowana (IMG:style_emoticons/default/ohno-smiley.gif)
|
 |
 
|
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 248 Pomógł: 31 Dołączył: 14.12.2010 Skąd: Wrocław Ostrzeżenie: (0%)
|
|
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 1 798 Pomógł: 307 Dołączył: 13.05.2009 Skąd: Gubin/Wrocław Ostrzeżenie: (0%)
|
W sumie bardzo prosto. Jeżeli dasz overflow: hodden; O którym pisze mój poprzednik, to zniknie ci suwak w przeglądarce co prawda, ale również zniknie ci grafika, nawet jeżeli będzie ustawiona jako tło. Osobiście zrobiłbym dwa divy, o szerokości 100% i auto wysokości. W jednym divie, dałbym tło które byłoby po lewej stronie, w drugim divie dałbym obrazek który jest po prawej stronie.
Tyle że w przypadku strony do której link podałeś, tam została użyta jedna grafika, a nie dwie jak domniemałeś. http://www.50cent.com/images/body.jpg taką grafikę ustawiasz np dla body w taki sposób:
|
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 14 Pomógł: 0 Dołączył: 21.04.2010 Ostrzeżenie: (0%)
|
Dzięki (IMG:style_emoticons/default/arrowheadsmiley.png) działa (IMG:style_emoticons/default/arrowheadsmiley.png) uzyskałem identyczny effekt jak na stronie 50cent'a , przy zmniejszaniu szerokości przeglądarki moja strona zachowuje sie identycznie..
Kod body { margin: 0 auto; padding: 0; outline: none; background: transparent url(images/background.jpg) top center no-repeat; background-color:#000000; } #Tabela_01 { position:relative; margin: 0 auto; padding: 0; outline: none; top:0px; width:900px; height:900px; } Tylko nie wiem dlaczego zawartość wszyskich divów wewnątrz #Tabela_01 mam przesuniętą o 1px w lewo we wszyskich przeglądarkach ale to nic przesunąłem o 1px i jest ok (IMG:style_emoticons/default/arrowheadsmiley.png) tylko nie wiem dlaczego.. (IMG:style_emoticons/default/wstydnis.gif) |
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 1 798 Pomógł: 307 Dołączył: 13.05.2009 Skąd: Gubin/Wrocław Ostrzeżenie: (0%)
|
Pokaż link do strony, lub pokaż cały kod html + css. Bez tego ciężko mi cokolwiek powiedzieć. Śmiało, nie wstydź się (IMG:style_emoticons/default/wink.gif)
|
|
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 14 Pomógł: 0 Dołączył: 21.04.2010 Ostrzeżenie: (0%)
|
Witam o to link do screena ze strony..
http://www.digart.pl/zoom/6839605/P_S_Weld...ml#.TxlYfW-qD-M Oto kod bez footera i zawartosci.. tylko z przyciskami i logo zawartymi w topie.. (jeszcze jej nie skończyłem).. Prosze zauważyć że logo i buttony są przesunięte w prawo o 1px zaczynajac od loga (left:1px) tylko wtedy wszystko idealnie sie zlewa.. tylko nei wiem dlaczego.. (IMG:style_emoticons/default/wstydnis.gif) A i jeszcze jedno.. czy można by stopke ustawic za pomocą css podobnie jak top jako background jak jest tak jak tutaj grafiką o szerokosci 1387 ? bo tutaj stopka i top to jeden jpg, a jakbym to jakoś oddzielił to mółbym zmieniać wysokość strony, czy musze poprostu w takim wypadku zrobić kilka backgroundów o różnej wysokosci dla każdej podstrony i zastosowac instrukcje IF w PHP?? oczywiscie nie moze miec suwaka u dołu ibyc wyśrodkowana (IMG:style_emoticons/default/Lkingsmiley.png) 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"> <head> <title>Spawacz_10_eng</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /> <!-- ImageReady Styles (Spawacz_10_eng.psd) --> <style type="text/css"> <!-- body { margin: 0 auto; padding: 0; outline: none; background: transparent url(images/background.jpg) top center no-repeat; background-color:#000000; } #Tabela_01 { position:relative; margin: 0 auto; padding: 0; outline: none; top:0px; width:900px; height:900px; } #top-logo_ { position:relative; left:1px; top:0px; width:497px; height:247px; } #btn-about_ { position:absolute; left:498px; top:212px; width:101px; height:35px; } #btn-services_ { position:absolute; left:599px; top:212px; width:101px; height:35px; } #btn-realizations_ { position:absolute; left:700px; top:212px; width:100px; height:35px; } #btn-contact_ { position:absolute; left:800px; top:212px; width:101px; height:35px; } --> </style> <!-- End ImageReady Styles --> </head> <!-- ImageReady Slices (Spawacz_10_eng.psd) --> <div id="Tabela_01"> <div id="top-logo_"><img id="top_logo" src="images/top_logo.jpg" width="497" height="247" alt="" /></div> <div id="btn-about_"><img id="btn_about" src="images/btn_about.jpg" width="101" height="35" alt="" /></div> <div id="btn-services_"><img id="btn_services" src="images/btn_services.jpg" width="101" height="35" alt="" /></div> <div id="btn-realizations_"><img id="btn_realizations" src="images/btn_realizations.jpg" width="100" height="35" alt="" /></div> <div id="btn-contact_"><img id="btn_contact" src="images/btn_contact.jpg" width="101" height="35" alt="" /></div> </div> <!-- End ImageReady Slices --> </body> </html> |
|
|
|
|
Post
#7
|
|
|
Grupa: Zarejestrowani Postów: 1 798 Pomógł: 307 Dołączył: 13.05.2009 Skąd: Gubin/Wrocław Ostrzeżenie: (0%)
|
Niestety kod który dałeś w sumie nic mi nie daje (IMG:style_emoticons/default/wink.gif) a layout który chcesz pociąć jest w sumie prosty do pocięcia. Ale pokaże ci na przykładzie jak mogłoby to wyglądać, bo w sumie całość jest prosta:
Skopiuj kod, wrzuć do notatnika, i zapisz jako jakiś plik html i otwórz w przeglądarce. Obrazy tak o wyciąłem paintem, żebyś tylko wiedział o co chodzi. Nie jest to jeden plik, a są to dwa pliki i IMO więcej plików nie potrzebujesz. A widzę po kodzie HTML że wyciąłeś je w photoshopie. Pół przeźroczyste tło (czarne) które masz na stronie można bez problemu osiągnąć w css, a dla IE dać fixa, z jedno pikselowym tylko obrazkiem, który się będzie odpowiednio powielać. Pocięcie takiego layoutu to raptem godzinka roboty (IMG:style_emoticons/default/wink.gif) Tutaj w zasadzie masz już gotowy szkielet, dodać tylko tła dla poszczególnych bloków, odpowiednio sformatować czcionki, dodać padding, dodać kilka innych rzeczy i masz gotowy layout (IMG:style_emoticons/default/wink.gif) tutaj masz oczywiście nie dokładny szkielet, bo robiłem go na szybko, w ramach przedstawienia tego jakby to mogło wyglądać. O podobnym pocięciu layoutu pisałem już tutaj i dałem nawet bardzo podobny kod: http://forum.php.pl/index.php?showtopic=191629 (IMG:style_emoticons/default/wink.gif) EDIT: zapomniałem dodać, w twoim projekcie jest potrzebna tak zwana "przyklejona stopka" (sticky footer), więc to w stylach również uwzględniłem (IMG:style_emoticons/default/wink.gif) Ten post edytował by_ikar 20.01.2012, 15:13:28 |
|
|
|
|
Post
#8
|
|
|
Grupa: Zarejestrowani Postów: 14 Pomógł: 0 Dołączył: 21.04.2010 Ostrzeżenie: (0%)
|
Hmmm (IMG:style_emoticons/default/Lkingsmiley.png) Pomysł jest dobry, przejrzalem ten kod, napisze tym sposobem wg mniej wiecej tego szkieletu wg swoich potrzeb, tylko że mam zamiar do top-menu wstawic aktywne przyciski obrazkowe ( onmouseover / onmouseout ) fajnie że moge zrobić graficzną stopke oddzieloną od backgroundu wyśrodkowaną szerszą niż przeglądarka (IMG:style_emoticons/default/arrowheadsmiley.png) (IMG:style_emoticons/default/arrowheadsmiley.png) jak skoncze to wrzuce kod na forum i linka gdzies na serwer (IMG:style_emoticons/default/Lkingsmiley.png)
|
|
|
|
|
Post
#9
|
|
|
Grupa: Zarejestrowani Postów: 1 798 Pomógł: 307 Dołączył: 13.05.2009 Skąd: Gubin/Wrocław Ostrzeżenie: (0%)
|
Jasne, zrobisz jak uważasz, to jest tylko przykład, jak moim zdaniem dobrze byłoby to zrobić (IMG:style_emoticons/default/wink.gif) a przykład wrzuć, zobaczymy jaki będzie efekt końcowy.
Co do onmouseover / onmouseout to jest ci to zbędne. Wystarczy css. Poczytaj o hover (IMG:style_emoticons/default/wink.gif) |
|
|
|
|
Post
#10
|
|
|
Grupa: Zarejestrowani Postów: 14 Pomógł: 0 Dołączył: 21.04.2010 Ostrzeżenie: (0%)
|
Witam (IMG:style_emoticons/default/arrowheadsmiley.png) Wrzucam szkielet stronki wg zaleceń użytkownika By_ikar, szkielet posiada aktywne przyciski do których użyłem Hover oraz obrazów png z przezroczysrością, nadal nie wiem dlaczego w top-menu musze ustawić margin-right:-1px; żeby button był równo wyrównany do prawej razem z pół-przezroczystym tłem contentu, jak ustawiam margin-right:0px; jest odsuniety o 1px w lewo, prosze o konkretne uwagi co można by zmienić lub "lepiej" zrobić pozdrawiam (IMG:style_emoticons/default/headsetsmiley.png)
Link do strony: http://www.welding.w8w.pl/ 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"> <head> <title>PS Welding Services</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #000; text-align: center; } .wrapper { width: 900px; height: auto; margin: 0 auto; } #top, #bottom { width: 100%; height: auto; clear: both; position: relative; } #top { background: url("images/Top_background.jpg") top center no-repeat; min-height: 500px; padding-top:212px; } #bottom { background: url("images/bottom_background.jpg") top center no-repeat; height: 140px; margin-bottom: 0px; } #top-menu { height: 35px; margin-bottom: 1px; margin-right:-1px; } #btn-about {float: right; display:block; height: 35px; width:101px; background-image:url(images/btn_about.png) } #btn-about:hover {float: right; display:block; height: 35px; width:101px; background-image:url(images/btn_about_light.png); } #btn-services {float: right; display:block; height: 35px; width:101px; background-image:url(images/btn_services.png) } #btn-services:hover {float: right; display:block; height: 35px; width:101px; background-image:url(images/btn_services_light.png); } #btn-realizations {float: right; display:block; height: 35px; width:101px; background-image:url(images/btn_realizations.png) } #btn-realizations:hover {float: right; display:block; height: 35px; width:101px; background-image:url(images/btn_realizations_light.png); } #btn-contact {float: right; display:block; height: 35px; width:101px; background-image:url(images/btn_contact.png) } #btn-contact:hover {float: right; display:block; height: 35px; width:101px; background-image:url(images/btn_contact_light.png); } .left-menu {float: left; width: 299px;} .content {float: right; width: 600px;} #copyright { float:left; padding-top:110px; padding-left:10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #CCC; text-decoration: none; } </style> </head> <body style="background-color:#000000;"> <div id="top"> <div class="wrapper"> <div id="top-menu"> <a id="btn-contact" href="#"></a> <a id="btn-realizations" href="#"></a> <a id="btn-services" href="#"></a> <a id="btn-about" href="#"></a> </div> <div class="left-menu"></div> <div class="content"></div> </div> </div> <div id="bottom"> <div class="wrapper"> <div id="copyright"><a>All rights reserved filipzylka@gmail.com</a></div> </div> </div> </body> </html> Ten post edytował xfilip1985 27.01.2012, 00:15:28 |
|
|
|
|
Post
#11
|
|
|
Grupa: Zarejestrowani Postów: 1 798 Pomógł: 307 Dołączył: 13.05.2009 Skąd: Gubin/Wrocław Ostrzeżenie: (0%)
|
No już całkiem całkiem to wygląda. Tyle że ty zrobiłeś dwa obrazki, i w obu tło "contentu" jest już nałożone na większe tło. Osobiście zrobiłbym to inaczej, i tobie też polecam (IMG:style_emoticons/default/wink.gif) druga sprawa, to jest "przyklejona stopka", o której wcześniej pisałem. Na małej rozdzielczości wygląda fajnie, ale na większej rozdzielczości wygląda to tak: http://dl.dropbox.com/u/36249378/welding.png dlatego dla bottom musisz nadać min-height: 100%; tak jak w moim przykładzie który ci pokazałem. W tym przykładzie stopka wyglądała tak: http://dl.dropbox.com/u/36249378/welding2.png kolejną rzeczą to są dodatkowe obrazki po najechaniu kursorem na menu. One są ci tam zbędne, całość spokojnie jesteś w stanie wykonać w css (IMG:style_emoticons/default/wink.gif) poczytaj o text-shadow, poczytaj o opacity. Jak już robisz to na obrazkach, to rób to jako jeden obrazek, jedynie przesuwaj tło, bo tak przy najechaniu, na chwilę taki obrazek znika i dopiero po chwili wczytuje się ten obrazek który powinien pojawić się po najechaniu.
Za dużo tych psueudo sleektorów hover użyłeś. Tak na prawdę całość można zrobić tylko na jednym hover (IMG:style_emoticons/default/wink.gif) nawet przy takiej ilości obrazków można zrobić to na jednym hover (IMG:style_emoticons/default/wink.gif) Musiałeś dać margines o jeden px dlatego że ja zrobiłem całość na szerokości 900px, a ty w swoim layoucie masz to w szerokości 901, co już nawet wcześniej zauważyłem (IMG:style_emoticons/default/wink.gif) tło contentu masz nałożone na jeszcze inne tło, i to tło jest szerokości 901px, a całość jest ustawiona na 900px w css. Efektem czego jest powstanie jedno pikselowego marginesu. Dlatego lepiej tło contentu robić tam gdzie jest content, a nie w jakiejś podrzędnej warstwie, bo jakbyś chciał przenieść menu na prawą stronę, to musiałbyś zmieniać całą grafikę, w przypacku css to by była zmiana z float: left, na float: right. Także moim zdaniem żeby to konkretnie wyglądało, to jeszcze kilka zmian cię czeka (IMG:style_emoticons/default/wink.gif) |
|
|
|
|
Post
#12
|
|
|
Grupa: Zarejestrowani Postów: 14 Pomógł: 0 Dołączył: 21.04.2010 Ostrzeżenie: (0%)
|
Witam oto kod po poprawkach.. wyrzuciłem półprzezroczyste prostokąty z top_background.jpg (na miejscu left menu i contentu) zamiast tego w .left-menu i .content użyłem opacity które całkiem inaczej działa jak sie wrzuci stronke na serwer a inaczej jak sie odpali ją z dysku, na serwerze tego opacity prawie w ogóle nie widać prostokąty sa prawie czarne i na IE i na Firefox, z dysku opacity widać i wszystko jest OK (IMG:style_emoticons/default/closedeyes.gif)
Do buttonów stworzyłem klase .button_text i uzyłem text-shadow który nie działa w ogóle na starszych wersjach IE. (IMG:style_emoticons/default/wstydnis.gif) W kodzie też mam nie wykorzystaną klase .img_button , chodzi o prostokąty półprzezroczyste które chciałbymwstawić jako tło pod napisy żeby powstał cały button, jak próbowałem zrobić z tego jedną klase dla prostokąta i napisów to opacity nadaje też napisom, i nie mogłem wyrównać napisów w pionie paddingiem, bo mi przesuwało całą klase. Co moge zrobić żeby wsadzić tam ten półprzezroczysty prostokąt (IMG:style_emoticons/default/wstydnis.gif) Pozdrawiam i prosze o konkretne uwagi.. (IMG:style_emoticons/default/Lkingsmiley.png) link do strony ten sam: http://welding.w8w.pl/ Kod: 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"> <head> <title>PS Welding Services</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #000; text-align: center; } .wrapper { width: 900px; height: auto; margin: 0 auto; } #top, #bottom { width: 100%; height: auto; clear: both; position: relative; } #top { background: url("images/Top_background.jpg") top center no-repeat; min-height: 100%; padding-top:212px; } #bottom { background: url("images/bottom_background.jpg") top center no-repeat; min-height: 140px; margin-bottom: 0px; } #top-menu { height: 35px; margin-bottom: 1px; margin-right:0px; } a.button_text{ height: 35px; width:101px; float: right; margin-right:1px; display:block; color: white; text-align: center; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: 600; } .button_text:hover{text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff;} .img_button{ height: 35px; width:101px; float: right; background-color: #000; opacity:0.6; filter:alpha(opacity=60); } .left-menu {float: left; background-color: #000; opacity:0.6; filter:alpha(opacity=60); width: 299px; height:253px} .content {float: right; background-color: #000; opacity:0.6; filter:alpha(opacity=60); width: 600px; height:253px} #copyright { float:left; padding-top:110px; padding-left:10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #CCC; text-decoration: none; } </style> </head> <body style="background-color:#000000;"> <div id="top"> <div class="wrapper"> <div id="top-menu"> <a class="button_text" href="#">Contact us</a> <a class="button_text" href="#">Realizations</a> <a class="button_text" href="#">Services</a> <a class="button_text" href="#">About</a> </div> <div class="left-menu"></div> <div class="content"></div> </div> </div> <div id="bottom"> <div class="wrapper"> <div id="copyright"><a>All rights reserved filipzylka@gmail.com</a></div> </div> </div> </body> </html> Ten post edytował xfilip1985 27.01.2012, 15:36:42 |
|
|
|
|
|
Aktualny czas: 24.08.2025 - 04:20 |
