[css][html] jak zrobić taką stopke? Opcje

[kononowicz]

Jak zrobić stopke taką jak jest np. na stronie:

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


Czyli nieruchoma stopka na samym dole... mam nawet ksiązke do CSSa (troche sie chwale ) jednak i tak nie moge do tego dojsc...

[maryaan]

a jakie sa inne stopki? latajace? przeciez mozesz przejrzec zrodlo strony i zalaczone css-y to nie wiem w czym problem

[kononowicz]

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

[maryaan]

podobno masz ksiazke o css-ie to sobie znajdz info w jaki sposob sie dolacza style do strony...

[kononowicz]

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...

Ten post edytował kononowicz 14.01.2007, 17:55:13

[maryaan]

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]

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??

Ten post edytował kononowicz 14.01.2007, 20:21:40

[dr_NO]

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]

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...

Ten post edytował kononowicz 14.01.2007, 20:51:59

[konraddo]

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]

ja niechce nic mówić, ale takie coś nazywa się "kradzież" a ściślej "plagiat"

[kononowicz]

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ł


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

Ten post edytował kononowicz 15.01.2007, 09:18:49

[lopik]

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!

jak robic zeby stopka była nieruchoma cały czas na dole

Wypozycjonować.
http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning

[dr_NO]

ja nie płacze tylko mówię, a plagiatem jest przekopiowanie kodu .....
wywal: position: absolute;
i daj float: left;
powinno pomóc ...

[kononowicz]

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 ... za to trzyma sie cały czas dołu ...

Ten post edytował kononowicz 15.01.2007, 10:27:53

[lopik]

Poczytaj trochę o CSS.

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:

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]

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 :/

[lopik]

http://kurs.browsehappy.pl/Bugi/BrakPositionFixed
http://kurs.browsehappy.pl/Bugi/FloatMargin


Poczytaj trochę o CSS

[babejsza]

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="pl">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 
<style type="text/css">
body, div
{
	margin: 0;
	padding: 0;
}
 
#conteiner
{
	width: 300px;
	margin: 0 auto 0 auto;
	padding: 0 0 100px 0;
}
 
#footer
{
	height: 100px;
	width: 100%;
	position: fixed;
	bottom: 0;
	text-align: center;
	background-color: #CCC;
}
 
</style>
 
</head>
 
<body>
<div id="conteiner">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non risus 
	eu enim pellentesque consectetuer. Duis quam elit, varius vel, ultricies ac, 
	dapibus ac, justo. Vivamus sed justo et turpis faucibus placerat. Aenean tristique, 
	mauris porttitor ultrices accumsan, arcu velit pretium purus, non cursus nibh 
	nulla eu lorem. Donec tristique fermentum orci. Nam tristique, sapien vitae 
	cursus pharetra, ligula magna sodales risus, id adipiscing erat elit eu metus. 
	Sed a urna vel nisl tincidunt adipiscing. Cras elit dolor, condimentum vel, 
	aliquet nec, adipiscing vitae, urna. Vivamus ac lorem. Curabitur in nisi sed 
	nunc mollis egestas. Aliquam laoreet vehicula urna. Suspendisse potenti. Quisque 
	nibh lorem, tempor ac, mollis vel, accumsan et, augue. </p>
	<p>Morbi pretium arcu in velit. Cras at turpis eu velit posuere convallis. Nunc 
	hendrerit, dolor ac dapibus fermentum, sapien massa facilisis enim, sit amet 
	semper neque arcu at velit. Mauris rutrum arcu sed tortor. Pellentesque semper 
	scelerisque ante. Fusce consequat volutpat ipsum. Nunc nec velit. Nullam pulvinar 
	porttitor pede. In id urna. Praesent massa. Aenean ultrices auctor urna. </p>
	<p>Morbi hendrerit odio vel mauris. Integer adipiscing. Aenean consectetuer. 
	Donec lacus nibh, ullamcorper vitae, eleifend a, luctus at, nulla. Donec semper 
	mollis magna. Morbi eu neque. Donec lacus nibh, laoreet id, iaculis ultrices, 
	condimentum eu, sapien. Cras condimentum, est ac dapibus molestie, nunc ipsum 
	aliquet libero, ut pellentesque lectus elit a tortor. Aliquam sagittis dolor 
	et lacus. Pellentesque sem dolor, tincidunt sit amet, feugiat eu, pulvinar id, 
	felis. Nam rutrum est nec nisi. Cum sociis natoque penatibus et magnis dis parturient 
	montes, nascetur ridiculus mus. </p>
	<p>Vivamus eu justo vel arcu feugiat egestas. Mauris mattis massa eget lectus. 
	Quisque pharetra condimentum tellus. Vivamus odio augue, vestibulum ac, sollicitudin 
	ac, accumsan a, justo. Nullam sagittis odio viverra arcu. Sed tortor. Curabitur 
	non justo. Donec dapibus bibendum enim. Maecenas venenatis erat et purus. Morbi 
	suscipit diam in pede. Vestibulum faucibus sollicitudin diam. Sed dolor quam, 
	molestie vel, rutrum at, lacinia eu, nibh. Nam rhoncus risus quis ante. Nullam 
	sed justo. </p>
	<p>Phasellus id orci. Aliquam dui massa, scelerisque vel, dapibus non, posuere 
	vel, mi. Etiam lectus diam, venenatis non, aliquet vel, posuere posuere, tortor. 
	Sed pulvinar gravida risus. Fusce mauris. Vestibulum diam. Suspendisse venenatis 
	lacus non leo. Donec ipsum nunc, ullamcorper et, molestie eget, tempus at, lacus. 
	Proin pellentesque. Integer commodo. Sed fermentum erat a elit. Praesent ornare 
	urna at erat. Phasellus vitae diam ut turpis pharetra commodo. Aliquam elementum. 
	Sed in tortor. Nulla et nisl non augue vulputate aliquet. </p>
</div>
<div id="footer">STOPKA</div>
</body>
 
</html>
[HTML] pobierz, plaintext 

Ten post edytował babejsza 15.01.2007, 21:06:30