Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS] Jak usunąć dolny pasek, Top+background zlane w jedną grafike
Forum PHP.pl > Forum > Przedszkole
xfilip1985
19.01.2012, 00:58:12
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 closedeyes.gif oczywiście top i zawartośc strony musi być wyśrodkowana ohno-smiley.gif
Ilware
19.01.2012, 01:26:12
schowaj go za pomocą cssów

[HTML] pobierz, plaintext 
  1. html {
  2. overflow:hidden;
  3. }
[HTML] pobierz, plaintext
by_ikar
19.01.2012, 10:15:28
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:

[CSS] pobierz, plaintext 
  1. body { background: url("http://www.50cent.com/images/body.jpg") top center no-repeat; } 
[CSS] pobierz, plaintext
xfilip1985
19.01.2012, 23:54:44
Dzięki arrowheadsmiley.png działa 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 arrowheadsmiley.png tylko nie wiem dlaczego.. wstydnis.gif

by_ikar
20.01.2012, 11:56:50
Pokaż link do strony, lub pokaż cały kod html + css. Bez tego ciężko mi cokolwiek powiedzieć. Śmiało, nie wstydź się wink.gif
xfilip1985
20.01.2012, 13:24:01
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.. 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 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>
by_ikar
20.01.2012, 15:05:37
Niestety kod który dałeś w sumie nic mi nie daje 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:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         * { margin: 0; padding: 0; }
  6.         html, body { height: 100%; }
  7.         body { background: #000; text-align: center; }
  8.  
  9.         #top, #bottom { width: 100%; height: auto; clear: both; position: relative; }
  10.         #top { background: url("http://img14.imageshack.us/img14/8206/topbackground.jpg") top center no-repeat; min-height: 100%; padding-top: 212px; }
  11.         #bottom { background: url("http://img811.imageshack.us/img811/6596/bottombackground.jpg") top center no-repeat; height: 148px; }
  12.  
  13.         .wrapper { width: 900px; height: auto; margin: 0 auto; }
  14.  
  15.         #bottom .wrapper { height: 147px; border-bottom: none; }
  16.  
  17.         #top-menu { height: 35px; clear: both; margin-bottom: 1px; }
  18.         #top-menu a { float: right; min-width: 90px; height: 25px; margin-left: 1px; text-align: center; padding: 5px; }
  19.         .content { float: right; width: 600px; }
  20.         .left-menu { float: left; width: 299px; }
  21.  
  22.         .clear { width: 100%; clear: both; }
  23.  
  24.         /* ta część jest zbędna, ale dałem wysokość, żeby strona miała jakąś wysokość,
  25.          obraz obramowania pozostalych elementów, wraz z obramowaniami, 
  26.          odjąłem im po 2 pixele wysokości/szerokości, odejmując obramowania */
  27.          .wrapper { border: 1px solid white; }
  28.         .content { height: 540px; width: 598px; }
  29.         .left-menu { height: 330px; width: 297px; }
  30.         #top-menu, #content, .left-menu, .content, #top-menu a { border: 1px solid white; }
  31.     </style>
  32. </head>
  33. <body>
  34. <div id="top">
  35.     <div class="wrapper">
  36.         <div id="top-menu">
  37.             <a href="#">Contact us</a>
  38.             <a href="#">Realizations</a>
  39.             <a href="#">Services</a>
  40.             <a href="#">About</a>
  41.         </div>
  42.         <div class="left-menu"></div>
  43.         <div class="content"></div>
  44.         <div class="clear"></div>
  45.     </div>
  46. </div>
  47. <div id="bottom">
  48.     <div class="wrapper">
  49.         <div id="copyright"></div>
  50.     </div>
  51. </div>
  52. </body>
  53. </html>
[HTML] pobierz, plaintext


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 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 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 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 wink.gif
xfilip1985
20.01.2012, 18:03:36
Hmmm 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 arrowheadsmiley.png arrowheadsmiley.png jak skoncze to wrzuce kod na forum i linka gdzies na serwer Lkingsmiley.png
by_ikar
20.01.2012, 18:23:28
Jasne, zrobisz jak uważasz, to jest tylko przykład, jak moim zdaniem dobrze byłoby to zrobić 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 wink.gif
xfilip1985
26.01.2012, 23:42:40
Witam 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 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>
by_ikar
27.01.2012, 09:59:11
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 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 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 wink.gif nawet przy takiej ilości obrazków można zrobić to na jednym hover 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 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 wink.gif
xfilip1985
27.01.2012, 15:26:42
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 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. 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 wstydnis.gif

Pozdrawiam i prosze o konkretne uwagi.. 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>


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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.