Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][CSS] Jak usunąć dolny pasek, Top+background zlane w jedną grafike
xfilip1985
post
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)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
by_ikar
post
Post #2





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:

[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 (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
Go to the top of the page
+Quote Post

Posty w temacie
- xfilip1985   [JavaScript][CSS] Jak usunąć dolny pasek, Top+background zlane w jedną grafike   19.01.2012, 00:58:12
- - Ilware   schowaj go za pomocą cssów [HTML] pobierz, plaint...   19.01.2012, 01:26:12
- - by_ikar   W sumie bardzo prosto. Jeżeli dasz overflow: hodde...   19.01.2012, 10:15:28
- - xfilip1985   Dzięki działa uzyskałem identyczny effekt ja...   19.01.2012, 23:54:44
- - by_ikar   Pokaż link do strony, lub pokaż cały kod html + cs...   20.01.2012, 11:56:50
- - xfilip1985   Witam o to link do screena ze strony.. http://ww...   20.01.2012, 13:24:01
- - by_ikar   Niestety kod który dałeś w sumie nic mi nie daje ...   20.01.2012, 15:05:37
- - xfilip1985   Hmmm Pomysł jest dobry, przejrzalem ten kod, na...   20.01.2012, 18:03:36
- - by_ikar   Jasne, zrobisz jak uważasz, to jest tylko przykład...   20.01.2012, 18:23:28
- - xfilip1985   Witam Wrzucam szkielet stronki wg zaleceń użytk...   26.01.2012, 23:42:40
- - by_ikar   No już całkiem całkiem to wygląda. Tyle że ty zrob...   27.01.2012, 09:59:11
- - xfilip1985   Witam oto kod po poprawkach.. wyrzuciłem półprzezr...   27.01.2012, 15:26:42

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 28.12.2025 - 08:35
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn