Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Problem z nieprzylegającą stopką :(
#1
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;
}
#2
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.
Negatywny (-1): Cytuje: "suabe"... Lubię poprawne pisanie. [Obrazek: emoticon_lol.gif]
#3
Faktycznie świetna wtyczka Smile

Na razie dalej nie wiem co zrobić żeby to naprawić.
#4
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.
#5
Shy 
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 Smile

TEMAT JEST WIĘC JUŻ DO ZAMKNIĘCIA


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  problem ze stopką rapek 4 3,889 25-01-2013, 14:54
Ostatni post: atp
  Fluid layout i problem ze stopką Mtk 5 3,204 21-09-2012, 02:54
Ostatni post: kornell
  Pomocy uciekła mi stopka jaka1977 7 4,150 30-08-2012, 00:16
Ostatni post: jaka1977
  prblem ze stopką insomniac_krk 3 2,322 11-03-2012, 02:08
Ostatni post: kornell
  Stopka rafciorb 2 2,337 13-04-2011, 20:28
Ostatni post: Pedro84

Skocz do:


Użytkownicy przeglądający ten wątek:
Sponsorzy i przyjaciele
SeoHost.pl