Forum PHP.pl > [HTML][CSS]CSS Problem z wyśrodkowaniem w pionie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]CSS Problem z wyśrodkowaniem w pionie

keruzami

13.03.2009, 16:54:40

Witam,
Od kilku już dni męczę się z wyśrodkowaniem odsyłaczy do podstron w pionie. Lnik do strony: www.blackhorse.nets.pl
Próbowałam za pomocą polecenia margin: auto; wpisywane w div#Slice-06_ {} ale nie działa natomiast jeśli umieszczę tam text-align: center; to środkuje w poziomie

W kodzie wgląda to tak:

Kod

   #Slice-06_ {
       position:absolute;
       left:299px;
       top:15px;
       width:125px;
       height:34px;
       background-image : url('images/Slice_06.jpg');
   }


   div#Slice-06_
   {
       text-align: center
   }

   a:link
   {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-weight: bold;
       font-size: 18px;
       color: rgb(245,211,165);
       text-decoration: none;
   }

[HTML] pobierz, plaintext 
<div id="Slice-06_"><a href="index.php?str=nowosci">nowości</a>
 
    </div>
[HTML] pobierz, plaintext

Spawnm

13.03.2009, 17:02:44

daj dla <a> margin-top: 3px ;
a dla strony margin:0auto ; bo nie jest wycentrowana

dodatkowo popraw kodowanie .

Lion_87

13.03.2009, 18:00:22

Może to w css daj:

Kod

line-height:34px;

Spawnm

13.03.2009, 18:03:10

albo zobacz z text-valign: middle lub bottom

keruzami

13.03.2009, 21:20:09

Dziękuję za odpowiedzi, ale niestety,
sprawdziłam wszystkie rady i nadal nie mogę wyśrodkować w pionie... wcześniej sprawdzałam już text-valign: middle i nie da rady w css,
margin: 0 auto; też niestety nie daje zamierzonego efektu.

Właściwie gdzie powinnam przypisywać margin: 0 auto; tak jak poniżej jest prawidłowo?

Kod

div#Slice-06_
{
text-align: center;
margin: 0 auto;
}

Bo po dodaniu tekst przesuwa się do lewej na górę.. ktoś wie dlaczego? domyślam się że coś musiałam źle zrobić eh

Próbowałam też dla a{} ale tu w ogóle nie daje efektu

Poza tym coś dziwnego dzieje się z tekstem w podstronie w mozilli po najechaniu myszką cały zaczyna być aktywny... w IE jest ok.. chyba coś skopałam tylko nie mogę dojść co

http://www.blackhorse.nets.pl/index.php?str=konie

znalazłam coś takiego:

Cytat

<h2 id="vert-text">Pionowe centrowanie tekstu</h2> Jeśli mamy trochę tekstu, bądź mały obrazek, to w celu wyświetlenia go na środku możemy użyć właściwości line-height. Powiększy ona wysokość linijki tekstu, a wszystko co się w niej znajduje zostanie pokazane w połowie wysokości. Dobrym miejscem na użycie tej metody są zakładki w nawigacji na stronie - aby nie były za niskie, lecz nadal dobrze zaprojektowane.

ze strony:
http://perfectionorvanity.com/2006/04/19/w...trowaniu-w-css/

gdzie dokładnie użyć tego line-height i jaką mu nadać wartość? (wys bloku w którym jest tekst?)

Lion_87

13.03.2009, 21:40:16

Cytat

gdzie dokładnie użyć tego line-height i jaką mu nadać wartość? (wys bloku w którym jest tekst?)

użyj go w DIV w którym chcesz wyśrodkować w pionie tekst. A wartość równa się wysokości DIVa.

Cytat

Poza tym coś dziwnego dzieje się z tekstem w podstronie w mozilli po najechaniu myszką cały zaczyna być aktywny... w IE jest ok.. chyba coś skopałam tylko nie mogę dojść co biggrin.gif

Tak się dzieje przez tą linijke CSSa

Kod

#Slice-30_ :hover {
text-align : left;
}

A w IE jest ok bo IE nie interpretuje dobrze tego kodu.

keruzami

13.03.2009, 21:49:38

Dzięki!
Wreszcie mi się udało;D

co prawda teraz tylko pierwszy przycisk jest ok (ale jest! po paru dniach szukania wyjścia z problemu ), a reszta przesunęła się do lewej..

aha i miałeś racje;) teraz tekst jest ok!! Ogromne dzięki!

Lion_87

13.03.2009, 21:54:59

bo musisz tak dla każdego DIVa.

Cytat

Właściwie gdzie powinnam przypisywać margin: 0 auto; tak jak poniżej jest prawidłowo?

Może nie przypisuj #table?#@ pozycji absolute? tylko zostaw margin: 0px auto;

keruzami

13.03.2009, 22:10:28

zrobiłam tak, tzn dla każdego div'a

Kod

div#Slice-06_
{
    text-align: center;
    line-height: 34px
}

div#Slice-10_
{
    text-align: center
    line-height: 34px
}

div#Slice-14_
{
    text-align: center
    line-height: 34px
}

div#Slice-18_
{
    text-align: center
    line-height: 34px
}

div#Slice-22_
{
    text-align: center
    line-height: 34px
}

div#Slice-27_
{
    text-align: center
    line-height: 34px
}

div#Slice-34_
{
    text-align: center
    line-height: 34px
}

div#Slice-38_
{
    text-align: center
    line-height: 34px
}

div#Slice-42_
{
    text-align: center
    line-height: 34px
}

div#Slice-46_
{
    text-align: center
    line-height: 34px
}

div#Slice-50_
{
    text-align: center
    line-height: 34px
}

div#Slice-54_
{
    text-align: center
    line-height: 34px
}

ale właśnie tylko pierwszy przycisk się wyśrodkował a reszta ustawiła się do lewej... dlaczego?

Lion_87

13.03.2009, 22:16:23

No brakuje tu width, height a tak pozatym to zacznij to robić normalnie a nie z ImageReady czy co tam bo jak dojdzie tekst do tych DIVow (a jest ich MASA) to sie nie odnajdziesz tam.

keruzami

14.03.2009, 14:18:30

Zrobiłam grafikę i pocięłam w PS ( z tąd taki nagłówek w dokumencie- image ready)
resztę robię w notatniku...
Jak powinnam to inaczej robić?

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.