+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: CSS Problem z nieprzylegającą stopką :( (/thread-css-problem-z-nieprzylegajaca-stopka)
CSS Problem z nieprzylegającą stopką :( - Trax - 02-02-2010
Po pierwsze witam wszystkich na forum. To mój pierwszy post. CSS uczę się od niedawna. Jestem pod wielkim wrażeniem jego możliwości i postanowiłem zrobić pierwszy layout. W tym wypadku jest to szablon do wystawiania aukcji.
Wszystko ładnie pociąłem w PS. A potem wstawiłem w divy. I ładnie wszystko niby wyszło tylko jedna rzecz nie wyszła. Główny problem to ta stopka. Właściwie to mogę ją już nazwać "cholerną stopką"
Żeby przesunąć w dół ten pasek z lewej muszę dawać <p></p> to samo z tym z prawej. Ale to pół biedy. Idealnie było by gdyby się same przesuwały jak rosła by część środkowa i do tego żeby ta stopka się przesuwała góra dół sama z nimi.
Ale zadowoliło by mnie gdyby nie było takiego efektu jak mi wyszedł z tą stopką po prostu. Nie chce się przykleić a jak z lewej dam odpowiednią ilość <p> to się prawie przykleja ( i tak jest przerwa mała) ale za to z prawej jest dzirua. No niech to jasny gwint.
Utkwiłem w miejscu z tym problemem i nie wiem już co dalej. Męczę się z tym już od tygodnia. POMOCY
KOD CSS:
Kod:
body {
margin: 0 auto;
padding:0px;
background:#FFF
}
#top {
width: 942px;
margin-left: auto; /*WYSRODKOWANIE STRONY*/
margin-right: auto; /*WYSRODKOWANIE STRONY*/
}
/*..............................................baner..............................................*/
#baner {
margin:0 0;
width: 942px;
height: 179px;
background:url(http://www.tezaur.republika.pl/allegro/szablonpodstawowy/img/gora.jpg) no-repeat;
}
/*..............................................logo..............................................*/
#logo {
margin:0 auto;
width: 266px;
height: 56px;
background:url(http://www.tezaur.republika.pl/allegro/szablonpodstawowy/img/logo.gif) no-repeat;
}
/*..............................................menu..............................................*/
#omnie {
margin:0 auto;
width: 121px;
height: 56px;
background:url(http://www.tezaur.republika.pl/allegro/szablonpodstawowy/img/do-ciecia_03.gif) no-repeat;
}
#moje_aukcje {
margin:0 auto;
width: 119px;
height: 56px;
background:url(http://www.tezaur.republika.pl/allegro/szablonpodstawowy/img/Moje-aukcje.gif) no-repeat;
}
#komentarze {
margin:0 auto;
width: 118px;
height: 56px;
background:url(http://www.tezaur.republika.pl/allegro/szablonpodstawowy/img/Komentarze.gif) no-repeat;
}
#ulubione {
margin:0 0;
width: 119px;
height: 56px;
background:url(http://www.tezaur.republika.pl/allegro/szablonpodstawowy/img/Ulubione.gif) no-repeat;
}
#pytanie{
margin:0 0;
width: 144px;
height: 56px;
background:url(http://www.tezaur.republika.pl/allegro/szablonpodstawowy/img/Zadaj-pytanie.gif) no-repeat;
}
/*..............................................przewijany lewy bok..............................................*/
#lewybokprzewijany {
margin:0px 0px;
padding:30px 0px;
width: 266px;
height: 100%;
background:url(http://www.tezaur.republika.pl/allegro/szablonpodstawowy/img/index_16.gif) repeat-y;
overflow: hidden;
text-align: left;
}
#prawybokprzewijany {
margin:0 0;
width: 55px;
height: 100%;
background:url(http://www.tezaur.republika.pl/allegro/szablonpodstawowy/img/powtarzanie-prawy-bok.gif) repeat-y;
overflow: hidden;
}
/*..............................................środek..............................................*/
#opis {
margin:0 auto;
width: 621px;
height: 50px;
background:url(http://www.tezaur.republika.pl/allegro/szablonpodstawowy/img/Opis-aukcji.gif) no-repeat;
overflow: hidden;
}
#srodek {
margin:0 auto;
width: 621px;
height: 100%;
background:url(http://www.tezaur.republika.pl/allegro/szablonpodstawowy/img/srodek-do-pisania-powtarzanie-y.gif) repeat-y;
overflow: hidden;
}
#srodkowytekst
{
padding-left:10px;
padding-right:30px;
color:#2E2E2E
}
/*..............................................stopka..............................................*/
#stopka {
clear: both;
margin:0 auto;
width: 942px;
height: 88px;
background:url(http://www.tezaur.republika.pl/allegro/szablonpodstawowy/img/stopka.gif) no-repeat;
overflow: hidden;
}
/*..............................................tekst..............................................*/
#lewytekst
{
padding-left:95px;
padding-right:20px;
color:#ffeeb2;
text-align: left;
}RE: CSS Problem z nieprzylegającą stopką :( - asd5 - 02-02-2010
pobierz sobie wtyczkę FireBug, gdy ja koduje strony, jest mi ona bardzo przydatna, pomaga mi przeanalizować kod i sprawdzić co po drodze zrobiłem źle, szczerze mówiąc przeglądnąłem ten twój kod tak tylko zaspanym okiem i nie bardzo mi się chciało go analizować jakoś szczególnie.
RE: CSS Problem z nieprzylegającą stopką :( - Trax - 02-02-2010
Faktycznie świetna wtyczka
Na razie dalej nie wiem co zrobić żeby to naprawić.
RE: CSS Problem z nieprzylegającą stopką :( - Labsta.com - 02-02-2010
Wałkowaliśmy już to z milion razy na forum. Żeby mieć równe kolumny musisz użyć jakiegoś triku np. http://www.alistapart.com/articles/fauxcolumns/
Tło pójdzie do kontenera, niezależnie od wysokości lewej czy prawej kolumny, będzie widoczne do końca tego kontenera. Wtedy stopka sama się przyklei.
P.S. Proszę używaj znaczników [ code ] do wstawiani kodu. Dzięki.
RE: CSS Problem z nieprzylegającą stopką :( - Trax - 03-02-2010
Dziękuję dziękuję dziękuję! Jestem zachwycony! Wszystko pięknie teraz wygląda. I się nauczyłem fajnego triku. Częściej będę teraz zaglądał na to forum
TEMAT JEST WIĘC JUŻ DO ZAMKNIĘCIA