Pomoc w wyśrodkowaniu stopki HTML & CSS

Dla specjalistów Webmastering
#1

Witam mój problem jest taki że gdy próbuję wyśrodkować stopkę ona tak jakby “nie reaguje” na nic. 

Cały czas jest na dole z lewej strony + tworzy dużą przerwę.

 

Oto kod HTML:

 

http://wklej.org/id/1265183/

 

I CSS

 

.stopka

{background:url(stopka.png) no-repeat;

width:1017px;

height:70px;

position:relative;

left:25%;

top:1000px;}

.stopkatekst

{font-family:tahoma;

height:70px;

width:1017px;

padding:0px;

line-height:1.9em;

font-size:11px;

color:#fff;

margin-top:2em;

position:relative;

top:15px;

left:20px;}

.stopkalogo

{background:url(justforskillv2.png);

height:69px;

width:320px;

float:right;

overflow:hidden;

position:relative;

bottom:20px;

right:50px;

transition:0.5s ease-in-out;

-moz-transition: 0.5s ease-in-out;

-webkit-transition:0.5s ease-in-out;

}

.stopkalogo:hover

{background:url(justforskill.png);

}

 

 

 

 

A tu live : http://cs-pogram.pl/new/

#2

Nie wiem dlaczego tak kombinujesz z tą stopką, generalnie centrowanie to:

margin:0 auto;
#3

Usuń position: relative; ze stopki.

#4

Jacko, dzięki pomogło ale teraz mam z 3/4 cm odstępu od dołu strony

#5

A to nie wiem z jakiego powodu ten odstęp występuje. Firebug nie pokazuje nic ;(

#6

Sam html ma błędy, powinien być poprawiony lub przepisany na nowo “zgodnie ze sztuką”… pierwszym lepszym jest div o id “header” występujący w dwóch miejscach (nie licząc tego, że cała zawartość strony się w jednym z nich zawiera), ale to nie jest -jeszcze- związane z problemem :wink:

#7

Nigdy nie zwracałem uwagi na HTML, ponieważ nie wiem jak można pisać to źle, ale muszę zacząć.

#8

Musisz zacząć pisać zły HTML … **** z rana :smiley:

#9

Haha, chodziło mi o to, że muszę zwracać uwagę na semantykę kodu HTML :slight_smile: Powinienem napisać to tak:

Nigdy nie zwracałem uwagi na HTML(ponieważ nie wiem jak można pisać to źle), ale muszę zacząć.

#10

A może teraz pomożecie mi z problemem ? :slight_smile:

#11

Hah, że niby ostrzeżenie za takie słowo … gdzie wy żyjecie i jakim językiem władacie … żegnam to forum.

 

@NexTi

Wiesz gdzie leży problem, w 90% procentach między krzesłem a monitorem … popatrz w lustro jakbyś nie zczaił.

#12

Bez poprawek na stronie i po tym szukania błędów, “jedynym” obejściem jest poniższy kod dla stopki:

.stopka {
  background: url("stopka.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  bottom: -20px;
  height: 70px;
  position: relative;
  width: 1017px;
}

Porównaj swój kod do powyższego, usuń rzeczy których w tym nie ma i dodaj te, których brak w Twoim…

#13

Jakie relative? Nie używasz żadnego relative. Poczytaj sobie do czego służy pozycja relative. W przypadku wycentrowania stopki margin: 0 auto w stopce i tak samo w body. Ot co.

.stopka {
    background:url(stopka.png) no-repeat;
    color: #fff;
    width:1017px;
    height:70px;
    margin: 0 auto;
    padding: 0px;
}

Skąd natomiast odstęp 3/4 cm na dole? Span wewnątrz stopki o klasie stopkatekst ma ustawiony margin-top na 0.2em, a tą samą co stopka wysokość 70px, czyli w efekcie zwiększa o 0.2em wysokość stopki. Tło stopki domyślnie wyrównane jest do góry i masz je ustawione na bez powtarzania, stąd na dole kawałek pustej przestrzeni. Usuń po prostu margin-top: 0.2em ze styli klasy stopkatekst. Choć z drugiej strony to jest element span, który domyślnie nie jest typu blokowego, więc nie powinien brać pod uwagę parametrów width i height. Spróbuj mimo wszydtko, według mnie powinno pomóc.

#14

@Cyr4x, to co podałeś nie zadziała na tym “projekcie” strony, poza tym stopa jest centrowana do swojego rodzica (którym powinien być “container”, a jest jeden z elementów “header”, który też jest centrowany, choć przy takiej długości stopka powinna być poza oboma…).

A problem ze stopą leży w jej zawartości w ogóle i css dla jej całości powinien wyglądać np. w taki sposób (jeżeli nie dokona się poprawek w html):

.stopka {
  background: url("stopka.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  width: 1017px;
  "tu powinien być określony lewy margines, równy -40px, ale forumowy edytor ciągle to ucina"
}
.stopkatekst {
  color: #FFFFFF;
  display: inline-block;
  font-family: tahoma;
  font-size: 11px;
  line-height: 1.9em;
  padding: 14px;
}
.stopkalogo {
  background: url("justforskillv2.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
  float: right;
  height: 69px;
  margin-right: 50px;
  transition: all 0.5s ease-in-out 0s;
  width: 320px;
}

Ale jak już wcześniej pisałem, stronę powinno się poprawić, wtedy łatanie fix’ami nie będzie potrzebne.