Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css][html] jak zrobić taką stopke?
Forum PHP.pl > Forum > Przedszkole
kononowicz
14.01.2007, 16:31:36
Jak zrobić stopke taką jak jest np. na stronie:

http://www.mozilla-europe.org/pl/products/firefox/
questionmark.gifquestionmark.gif

Czyli nieruchoma stopka na samym dole... mam nawet ksiązke do CSSa (troche sie chwale tongue.gif) jednak i tak nie moge do tego dojsc...
maryaan
14.01.2007, 16:39:13
a jakie sa inne stopki? latajace? przeciez mozesz przejrzec zrodlo strony i zalaczone css-y to nie wiem w czym problem
kononowicz
14.01.2007, 16:42:31
Cytat(maryaan @ 14.01.2007, 16:39:13 ) *
a jakie sa inne stopki? latajace? przeciez mozesz przejrzec zrodlo strony i zalaczone css-y to nie wiem w czym problem



no faktycznie ... zrodlo strony wiem jak sprawdzic a styl questionmark.gif
maryaan
14.01.2007, 16:45:02
podobno masz ksiazke o css-ie to sobie znajdz info w jaki sposob sie dolacza style do strony...
kononowicz
14.01.2007, 16:47:24
Cytat(maryaan @ 14.01.2007, 16:45:02 ) *
podobno masz ksiazke o css-ie to sobie znajdz info w jaki sposob sie dolacza style do strony...



no to forum powinniscie usunąc bo w koncu ksiązki są ... gdybym potrafił zrobić to za pomoća tej ksiązki to bym nie tworzył topicu

a tak poza tym to nawet skopiowałem cały css odpowiedzialny za ta stopke i lipa...
maryaan
14.01.2007, 18:59:51
nie za pomoca ksiazki tylko wlasnego mozgu :] na poczatku masz zlinkowane 5 arkuszy css (ale to juz pewnie wiesz skoro "caly" css skopiowales). Musisz przeczesac je w poszukiwaniu wpisow formatujacych okreslone elementy


btw dolaczaj do postow listingi tego co napisales/skopiowales bo teraz to nie wieadomo czy skopiowales linki, cale cssy, czy walnales literowke w ktoryms elemencie etc etc...
kononowicz
14.01.2007, 19:59:59
Cytat(maryaan @ 14.01.2007, 18:59:51 ) *
nie za pomoca ksiazki tylko wlasnego mozgu :] na poczatku masz zlinkowane 5 arkuszy css (ale to juz pewnie wiesz skoro "caly" css skopiowales). Musisz przeczesac je w poszukiwaniu wpisow formatujacych okreslone elementy
btw dolaczaj do postow listingi tego co napisales/skopiowales bo teraz to nie wieadomo czy skopiowales linki, cale cssy, czy walnales literowke w ktoryms elemencie etc etc...


skopiowałem wszystkie elementy cssa zwiazane z id=footer i to nie dało takiego efektu jak na danej stronie ...

Czy ktos ma po prostu jakis przepis na stopke jak na linku w pierwszym poscie??
dr_NO
14.01.2007, 20:22:23
eh ... prosto:
Kod
#stopka
{ height: 100px;
border-top: 2px solid green;
background: #fff url('obrazki/stopka-bg.gif');
color: dark-green;
padding: 15px 5px 5px 5px;
}

i to wszystko w sumie ... a napisz jeszcze jakiego "efektu" Ci nie daje ?
kononowicz
14.01.2007, 20:33:07
Cytat(dr_NO @ 14.01.2007, 20:22:23 ) *
eh ... prosto:
Kod
#stopka
{ height: 100px;
border-top: 2px solid green;
background: #fff url('obrazki/stopka-bg.gif');
color: dark-green;
padding: 15px 5px 5px 5px;
}

i to wszystko w sumie ... a napisz jeszcze jakiego "efektu" Ci nie daje ?



uff udało sie. wystarczyło dopisac

position: absolute; bottom: 0; left: 0;

ale mam jeszcze pytanie jak zrobić ,zeby tekst na stopce był wysrodkowany ale nie w poziomo tylko pionowo...
konraddo
15.01.2007, 01:14:06
css'a stronki http://www.mozilla-europe.org/pl/products/firefox/ tez mozna latwo sprawdzic

w kodzie sa linki do plikow css'a
tu akurat jeden z nich bo jest kilka to:

http://www.mozilla-europe.org/style/base/template.css
dr_NO
15.01.2007, 01:25:54
ja niechce nic mówić, ale takie coś nazywa się "kradzież" a ściślej "plagiat"
kononowicz
15.01.2007, 08:47:33
Cytat(dr_NO @ 15.01.2007, 01:25:54 ) *
ja niechce nic mówić, ale takie coś nazywa się "kradzież" a ściślej "plagiat"


ja nie chce nic mowic ale nie płacz... to jest tylko do celów edukacyjnych... w takim razie plagiatem jest uzywaniem np. znacznika <p></p> bo w koncu już ktoś go kiedys uzył tongue.gif


ps. mam jeszcze jedno pytanie. stopka jest juz na dole ale jezeli tresc stronki jest dluzsza niz ekran to stopka nachodzi na tekst i gdy ruszam suwakiem to reszta tekstu jest za stopka. a jak robic zeby stopka była nieruchoma cały czas na dole questionmark.gif
lopik
15.01.2007, 10:00:40
Cytat
w takim razie plagiatem jest uzywaniem np. znacznika <p></p> bo w koncu już ktoś go kiedys uzył tongue.gif

Haha, ale sie uśmiałem - dobre! biggrin.gif


Cytat
jak robic zeby stopka była nieruchoma cały czas na dole questionmark.gif

Wypozycjonować.
http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning
dr_NO
15.01.2007, 10:01:44
ja nie płacze tylko mówię, a plagiatem jest przekopiowanie kodu .....
wywal: position: absolute;
i daj float: left;
powinno pomóc ...
kononowicz
15.01.2007, 10:23:24
Cytat(dr_NO @ 15.01.2007, 10:01:44 ) *
wywal: position: absolute;
i daj float: left;
powinno pomóc ...


o fajnie pomogło ...

ale...

mam jakiś dziwny mały odstęp miedzy stopka a dolną czescią strony. jak go usunać??


tylko jeszcze byłoby fajnie gdyby stopka podczas przesuwania całej strony była cały czas na dole (o to chodziło mi od samego poczatku)

czesc od stopki:

#stopka
{
background-image: url(images/stopka.jpg);
float: left
width: 100%;
height: 4em;
font-size: 70%;
background-color: #1B5171;
color: #FFFFFF;
border-bottom: 2px solid #FFFFFF;
text-align: center;

}
#stopka p
{
margin: 0,5em 0 1em 2em;
padding: 0;
}

prawie dobry efekt dało mi uzycie position: fixed; jednak ucieło mi pół stopki i nie widac napisów tongue.gif ... za to trzyma sie cały czas dołu ...
lopik
15.01.2007, 10:27:09
Poczytaj trochę o CSS.

Cytat
fajnie gdyby stopka podczas przesuwania całej strony była cały czas na dole

Pewno chodzi Ci o to żeby nie zakrywała tekstu jak napisałeś tu:
Cytat
jezeli tresc stronki jest dluzsza niz ekran to stopka nachodzi na tekst


Zobacz:
http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
kononowicz
15.01.2007, 10:44:03
position: fixed; bottom: 0; starczyło zeby działało pod mozilla i netscape... tylko dlaczego pod IE robi mi wielki odstep miedzy stopka a dolna krawedzia strony :/ questionmark.gifquestionmark.gif
lopik
15.01.2007, 18:19:12
http://kurs.browsehappy.pl/Bugi/BrakPositionFixed
http://kurs.browsehappy.pl/Bugi/FloatMargin


Poczytaj trochę o CSS
babejsza
15.01.2007, 21:02:17 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html lang="pl">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title></title>
  7.  
  8. <style type="text/css">
  9. body, div
  10. {
  11. 	margin: 0;
  12. 	padding: 0;
  13. }
  14.  
  15. #conteiner
  16. {
  17. 	width: 300px;
  18. 	margin: 0 auto 0 auto;
  19. 	padding: 0 0 100px 0;
  20. }
  21.  
  22. #footer
  23. {
  24. 	height: 100px;
  25. 	width: 100%;
  26. 	position: fixed;
  27. 	bottom: 0;
  28. 	text-align: center;
  29. 	background-color: #CCC;
  30. }
  31.  
  32. </style>
  33.  
  34. </head>
  35.  
  36. <body>
  37. <div id="conteiner">
  38. 	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non risus 
  39. 	eu enim pellentesque consectetuer. Duis quam elit, varius vel, ultricies ac, 
  40. 	dapibus ac, justo. Vivamus sed justo et turpis faucibus placerat. Aenean tristique, 
  41. 	mauris porttitor ultrices accumsan, arcu velit pretium purus, non cursus nibh 
  42. 	nulla eu lorem. Donec tristique fermentum orci. Nam tristique, sapien vitae 
  43. 	cursus pharetra, ligula magna sodales risus, id adipiscing erat elit eu metus. 
  44. 	Sed a urna vel nisl tincidunt adipiscing. Cras elit dolor, condimentum vel, 
  45. 	aliquet nec, adipiscing vitae, urna. Vivamus ac lorem. Curabitur in nisi sed 
  46. 	nunc mollis egestas. Aliquam laoreet vehicula urna. Suspendisse potenti. Quisque 
  47. 	nibh lorem, tempor ac, mollis vel, accumsan et, augue. </p>
  48. 	<p>Morbi pretium arcu in velit. Cras at turpis eu velit posuere convallis. Nunc 
  49. 	hendrerit, dolor ac dapibus fermentum, sapien massa facilisis enim, sit amet 
  50. 	semper neque arcu at velit. Mauris rutrum arcu sed tortor. Pellentesque semper 
  51. 	scelerisque ante. Fusce consequat volutpat ipsum. Nunc nec velit. Nullam pulvinar 
  52. 	porttitor pede. In id urna. Praesent massa. Aenean ultrices auctor urna. </p>
  53. 	<p>Morbi hendrerit odio vel mauris. Integer adipiscing. Aenean consectetuer. 
  54. 	Donec lacus nibh, ullamcorper vitae, eleifend a, luctus at, nulla. Donec semper 
  55. 	mollis magna. Morbi eu neque. Donec lacus nibh, laoreet id, iaculis ultrices, 
  56. 	condimentum eu, sapien. Cras condimentum, est ac dapibus molestie, nunc ipsum 
  57. 	aliquet libero, ut pellentesque lectus elit a tortor. Aliquam sagittis dolor 
  58. 	et lacus. Pellentesque sem dolor, tincidunt sit amet, feugiat eu, pulvinar id, 
  59. 	felis. Nam rutrum est nec nisi. Cum sociis natoque penatibus et magnis dis parturient 
  60. 	montes, nascetur ridiculus mus. </p>
  61. 	<p>Vivamus eu justo vel arcu feugiat egestas. Mauris mattis massa eget lectus. 
  62. 	Quisque pharetra condimentum tellus. Vivamus odio augue, vestibulum ac, sollicitudin 
  63. 	ac, accumsan a, justo. Nullam sagittis odio viverra arcu. Sed tortor. Curabitur 
  64. 	non justo. Donec dapibus bibendum enim. Maecenas venenatis erat et purus. Morbi 
  65. 	suscipit diam in pede. Vestibulum faucibus sollicitudin diam. Sed dolor quam, 
  66. 	molestie vel, rutrum at, lacinia eu, nibh. Nam rhoncus risus quis ante. Nullam 
  67. 	sed justo. </p>
  68. 	<p>Phasellus id orci. Aliquam dui massa, scelerisque vel, dapibus non, posuere 
  69. 	vel, mi. Etiam lectus diam, venenatis non, aliquet vel, posuere posuere, tortor. 
  70. 	Sed pulvinar gravida risus. Fusce mauris. Vestibulum diam. Suspendisse venenatis 
  71. 	lacus non leo. Donec ipsum nunc, ullamcorper et, molestie eget, tempus at, lacus. 
  72. 	Proin pellentesque. Integer commodo. Sed fermentum erat a elit. Praesent ornare 
  73. 	urna at erat. Phasellus vitae diam ut turpis pharetra commodo. Aliquam elementum. 
  74. 	Sed in tortor. Nulla et nisl non augue vulputate aliquet. </p>
  75. </div>
  76. <div id="footer">STOPKA</div>
  77. </body>
  78.  
  79. </html>
[HTML] pobierz, plaintext
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.