Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Wyśrodkowanie tekstu w pionie (w divie)
Forum PHP.pl > Forum > Przedszkole
krzywy36
Może tytuł nie odwzoruje tego co chcę ukazać dlatego pokaże kod:

  1.  
  2. <div id="menu">
  3. <div><a href="index.php">Strona główna</a></div>
  4. <div><a href="register.php">Rejestracja</a></div>
  5. <div><a href="login.php">Logowanie</a></div>
  6. <div><a href="albums.php">Albumy</a></div>
  7. <div><a href="albums.php">Ostatnio dodane</a></div>
  8. <div><a href="news.php">Nowości</a></div>
  9. <div><a href="contact.php">Kontakt</a></div>
  10. <div><a href="info.php">Info</a></div>
  11. </div>


  1. div#menu
  2. {
  3. float: left;
  4. width: 850px;
  5. height: 20px;
  6. background-color: white;
  7. margin: 0;
  8. padding: 0;
  9. }
  10.  
  11. div#menu div
  12. {
  13. height: 20px;
  14. float: left;
  15. background-color: brown;
  16. }
  17.  
  18. div#menu a
  19. {
  20. font-family: Verdana,Arial,Helvetica,sans-serif;
  21. font-weight: bold;
  22. font-style: normal;
  23. font-size: 8pt;
  24. color: #FFD035;
  25. text-decoration: none;
  26. }


efekt jaki chcę otrzymać to menu wysokości 20 px z tekstem wyśrodkowanym w pionie, próbowałem z vertical-align, z margin i padding na wszystkie sposoby i nic nie działa, wygląda to tak jakby div od "buttona" zawsze miał ustawione kilka px padding-top mimo, że w css jest ustawione 0.

PS: Tak wiem, menu robi się na ul i li ale próbowałem i było to samo, więc jeśli wyjdzie tak jak chcę na divach to na listach też nie będzie problemu.

Edit: właśnie wstawiłem sam ten kod na stronę i odziwo działa ;/ więc widocznie jest to wina pozostałego kodu.
moto0095
Dziwne. Ja mam na stronie div`y i używam margin: 20px; i działa.

Próbowałeś nadać margin dla <a></a> questionmark.gif
pedro84
Menu się nie robi na divach, ale na liście nieuporządkowanej. To wyśrodkowania tekstu w pionie służy
  1. line-height:px/em
krzywy36
niestety nie potrafię sam znaleźć błędu więc wstawię tu cały kod, może ktoś pomoże:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <title>xxx</title>
  4. <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  5. <meta name="Description" content=" ------- UZUPELNIC POTEM ------ " />
  6. <meta name="Author" content="xxx" />
  7. <meta name="language" content="pl" />
  8. <link rel="stylesheet" href="css/style.css" type="text/css" />
  9. </head>
  10. <div id="container">
  11. <div id="logo"></div>
  12. <div id="menu">
  13. <div><a href="index.php">Strona główna</a></div>
  14. <div><a href="register.php">Rejestracja</a></div>
  15. <div><a href="login.php">Logowanie</a></div>
  16. <div><a href="albums.php">Albumy</a></div>
  17. <div><a href="albums.php">Ostatnio dodane</a></div>
  18. <div><a href="news.php">Nowości</a></div>
  19. <div><a href="contact.php">Kontakt</a></div>
  20. <div><a href="info.php">Info</a></div>
  21. </div>
  22. <div id="content">
  23.  
  24.  
  25.  
  26. </div>
  27. <div id="footer">Copyright ? 2010 Pestum</div>
  28. </div>
  29. </body>
  30. </html>

  1. body
  2. {
  3. background-color: #4B5E0D;
  4. }
  5.  
  6. div#container
  7. {
  8. width: 850px;
  9. margin: 0 auto;
  10. }
  11.  
  12. div#logo
  13. {
  14. float: left;
  15. width: 850px;
  16. height: 88px;
  17. background-color: black;
  18. }
  19.  
  20. /* Blok menu oraz lista */
  21. div#menu
  22. {
  23. float: left;
  24. width: 850px;
  25. height: 20px;
  26. background-color: white;
  27. }
  28.  
  29. div#menu div
  30. {
  31. height: 20px;
  32. float: left;
  33. background-color: brown;
  34. }
  35.  
  36. div#menu a
  37. {
  38. font-family: Verdana,Arial,Helvetica,sans-serif;
  39. font-weight: bold;
  40. font-style: normal;
  41. font-size: 8pt;
  42. color: #FFD035;
  43. text-decoration: none;
  44. }
  45. /*----------------------*/


Edit: pedro, czytaj cały post zanim skomentujesz winksmiley.jpg
moto: próbowałem ustawiać margin i padding na 0 dla wszystkich możliwych elementów i ciągle to samo
Wicepsik
Zrób menu na liście.

http://www.kurshtml.boo.pl/css/pionowe_menu,menu.html
krzywy36
omg, znam tą strone na pamięć, w pierwszym poście napisałem że robiłem na listach i ciągle jest to samo więc może ktoś w końcu by pomógł a nie tylko odsyłał do innych stron?
moto0095
Cytat(krzywy36 @ 18.04.2010, 20:29:53 ) *
efekt jaki chcę otrzymać to menu wysokości 20 px z tekstem wyśrodkowanym w pionie, próbowałem z vertical-align, z margin i padding na wszystkie sposoby i nic nie działa, wygląda to tak jakby div od "buttona" zawsze miał ustawione kilka px padding-top mimo, że w css jest ustawione 0.

---------------------------------------------------

moto: próbowałem ustawiać margin i padding na 0 dla wszystkich możliwych elementów i ciągle to samo


Dlaczego ustawiasz padding na zero??
pedro84
Cytat(krzywy36 @ 18.04.2010, 20:37:08 ) *
omg, znam tą strone na pamięć, w pierwszym poście napisałem że robiłem na listach i ciągle jest to samo więc może ktoś w końcu by pomógł a nie tylko odsyłał do innych stron?


To może byś się w końcu nauczył czegoś, a nie tylko marudzisz? Menu się ROBI na listach. Basta. Poza tym, człowieku, drugi raz Ci mówię:
  1. line-height
moto0095
Cytat
To może byś się w końcu nauczył czegoś, a nie tylko marudzisz? Menu się ROBI na listach. Basta.


Ale to jego sprawa ja sobie zrobi menu winksmiley.jpg
krzywy36
pedro, nie chce nikogo wyzywać, więc jeśli nie masz nic konkretnego do powiedzenia to się nie wypowiadaj, a nie tylko sobie posty nabijasz.
Ponawiam pytanie, kod przedstawiony w pierwszym poście działa jeśli go wstawie do nowego dokumentu, więc błąd jest w pozostałej części strony, która jest bodajże w 3 poście, więc gdzie jest ten błąd?
zegarek84
Cytat(krzywy36 @ 18.04.2010, 20:37:08 ) *
omg, znam tą strone na pamięć, w pierwszym poście napisałem że robiłem na listach i ciągle jest to samo więc może ktoś w końcu by pomógł a nie tylko odsyłał do innych stron?

gdy ustawiasz jakąś wysokość elementu blokowego (już pomijając na czym to jest) i nadajesz mu wysokość, a tekst jest w jednej linii... to ustaw wysokość linii na wysokość elementu blokowego i daj vertical-align: middle -> dla przykładu:

Kod
height: 20px;
line-height: 20px;
vertical-align: middle;

czyli w jednym miejscu:
  1. #menu div
  2. {
  3. height: 20px;
  4. line-height: 20px;
  5. vertical-align: middle;
  6. float: left;
  7. background-color: brown;}
krzywy36
Cytat
gdy ustawiasz jakąś wysokość elementu blokowego (już pomijając na czym to jest) i nadajesz mu wysokość, a tekst jest w jednej linii... to ustaw wysokość linii na wysokość elementu blokowego i daj vertical-align: middle -> dla przykładu:

niestety dalej to samo ;/
zegarek84
sprawdzałem na kodzie podanym przez Ciebie i ustawiałem większą wysokość i działało... prze edytowałem post coby było czytelniej dla Ciebie z przykładem do Twojego kodu - luknij teraz... a jak nie to daj wersję online...

ustaw sobie wysokość na np. 40px -> bo może przez ogonki twierdzisz, że tekst nie jest wyśrodkowany o.0
moto0095
Ponowię pytanie.
Dlaczego ustawiałeśpadding na 0 questionmark.gif
krzywy36
ponieważ wyglądało to jakby div miał ustawiony paddin-top na kilka pixeli.
Na większej wysokości działa ale potrzebuję, żeby działało na tej ;f

zegarek: wklej tylko kod z pierwszego postu do nowego dokumentu (oczywiście dołączając style), a poźniej wklej cały kod, zobaczysz różnice.
zegarek84
wcześniej zrobiłem to na ostatnim źródle jakie podałeś, teraz na pierwszym i różnicy nie widzę o.0 -> daj wersję online, daj skriny co jest nie tak -> może u siebie coś jeszcze dopisujesz ;p -> specjalnie teraz zwiększyłem wysokość na 30px:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <title>xxx</title>
  4. <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  5. <meta name="Author" content="xxx" />
  6. <meta name="language" content="pl" />
  7. <style type="text/css">
  8. #menu
  9. {
  10. float: left;
  11. width: 850px;
  12. height: 30px;
  13. background-color: white;
  14. margin: 0;
  15. padding: 0;
  16. }
  17.  
  18. #menu div
  19. {
  20. height: 30px;
  21. line-height: 30px;
  22. vertical-align: middle;
  23. float: left;
  24. background-color: brown;
  25. }
  26.  
  27. #menu a
  28. {
  29. font-family: Verdana,Arial,Helvetica,sans-serif;
  30. font-weight: bold;
  31. font-style: normal;
  32. font-size: 8pt;
  33. color: #FFD035;
  34. text-decoration: none;
  35. }
  36. </style>
  37. </head>
  38. <div id="menu">
  39. <div><a href="index.php">Strona główna</a></div>
  40. <div><a href="register.php">Rejestracja</a></div>
  41. <div><a href="login.php">Logowanie</a></div>
  42. <div><a href="albums.php">Albumy</a></div>
  43. <div><a href="albums.php">Ostatnio dodane</a></div>
  44. <div><a href="news.php">Nowości</a></div>
  45. <div><a href="contact.php">Kontakt</a></div>
  46. <div><a href="info.php">Info</a></div>
  47. </div>
  48. </body>
  49. </html>

kliknij wyżej pobierz i otwórz w nowej karcie winksmiley.jpg
krzywy36
hmm chyba coś znalazłem:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <style type="text/css">
  4. div#menu
  5. {
  6. float: left;
  7. width: 850px;
  8. height: 20px;
  9. background-color: white;
  10. margin: 0;
  11. padding: 0;
  12. }
  13.  
  14. div#menu div
  15. {
  16. height: 20px;
  17. float: left;
  18. background-color: brown;
  19. }
  20.  
  21. div#menu a
  22. {
  23. font-family: Verdana,Arial,Helvetica,sans-serif;
  24. font-weight: bold;
  25. font-style: normal;
  26. font-size: 8pt;
  27. color: #FFD035;
  28. text-decoration: none;
  29. }
  30.  
  31.  
  32. </head>
  33. <div id="menu">
  34. <div><a href="index.php">Strona główna</a></div>
  35. <div><a href="register.php">Rejestracja</a></div>
  36. <div><a href="login.php">Logowanie</a></div>
  37. <div><a href="albums.php">Albumy</a></div>
  38. <div><a href="albums.php">Ostatnio dodane</a></div>
  39. <div><a href="news.php">Nowości</a></div>
  40. <div><a href="contact.php">Kontakt</a></div>
  41. <div><a href="info.php">Info</a></div>
  42. </div>
  43. </body>
  44. </html>


pobierz, i zobacz jak wygląda a potem usuń linijkę deklarującą doctype i zobacz jak wygląda.
w drugim przypadku jest tak jak chcę, tzn nie jest wyśrodkowane ale to już się da zrobić.
Teraz pytanie, ma ktoś pomysł czemu tak jest?
zegarek84
Cytat(krzywy36 @ 18.04.2010, 20:22:41 ) *
efekt jaki chcę otrzymać to menu wysokości 20 px z tekstem wyśrodkowanym w pionie...

Cytat(krzywy36 @ 18.04.2010, 21:16:11 ) *
w drugim przypadku jest tak jak chcę, tzn nie jest wyśrodkowane ale to już się da zrobić.

sciana.gif rozszarpać to za mało sciana.gif -> wszyscy starali się pomóc Ci to wyśrodkować boś sam o to prosił a na koniec piszesz, że chcesz inaczej o.0

poczytaj o deklaracjach doctype -> skoda słów dry.gif
krzywy36
chodzi o to że w pierwszym przypadku nie da się tego wyśrodkować w żaden sposób a w drugim, się da za pomocą margin lub padding ;>
zegarek84
jak się nie da jak pisałem jak to zrobić ;/ -> pozatym w a też można usunąć margin... i line-height + padding górny i dolny musi się równać wysokości elementu blokowego - lub to pominąć i tak jak pisałem wyżej...

edit
daj większe wysokości i przykład gdzie żekomo się nie da wyśrodkować to Ci szybko wyśrodkuję
krzywy36
ale chodzi o to, żeby działało na wysokości 20px, wiem, że się da na większych ;/
zegarek84
działa party.gif ... w niektórych deklaracjach elementy są trochu inne, niektóre liniowe, inne inline-block itd. ... elementy liniowe nie mają żadnych marginesów (ani wewnętrznych ani zewnętrznych), ale na wszelki wypadek ustawiłem margin i padding też na 0px ;p i luknij sobie to z deklaracją -> ja daje bez deklaracji i jest wyśrodkowane:
  1. <style type="text/css">
  2. #menu
  3. {
  4. float: left;
  5. width: 850px;
  6. height: 20px;
  7. background-color: white;
  8. margin: 0;
  9. padding: 0;
  10. }
  11.  
  12. #menu div
  13. {
  14. height: 20px;
  15. float: left;
  16. background-color: brown;
  17. }
  18.  
  19. #menu a
  20. {
  21. margin:0px;
  22. padding:0px;
  23. line-height: 20px;
  24. vertical-align: middle;
  25. font-family: Verdana,Arial,Helvetica,sans-serif;
  26. font-weight: bold;
  27. font-style: normal;
  28. font-size: 8pt;
  29. color: #FFD035;
  30. text-decoration: none;
  31. }
  32.  
  33.  
  34. </head>
  35. <div id="menu">
  36. <div><a href="index.php">Strona główna</a></div>
  37. <div><a href="register.php">Rejestracja</a></div>
  38. <div><a href="login.php">Logowanie</a></div>
  39. <div><a href="albums.php">Albumy</a></div>
  40. <div><a href="albums.php">Ostatnio dodane</a></div>
  41. <div><a href="news.php">Nowości</a></div>
  42. <div><a href="contact.php">Kontakt</a></div>
  43. <div><a href="info.php">Info</a></div>
  44. </div>
  45. </body>
  46. </html>
krzywy36
bez deklaracji działa, z deklaracją - nie ;/
zegarek84
Cytat(krzywy36 @ 18.04.2010, 21:27:03 ) *
chodzi o to że w pierwszym przypadku nie da się tego wyśrodkować w żaden sposób a w drugim, się da za pomocą margin lub padding ;>

Cytat(krzywy36 @ 18.04.2010, 21:45:51 ) *
bez deklaracji działa, z deklaracją - nie ;/

Cytat(krzywy36 @ 18.04.2010, 21:16:11 ) *
pobierz, i zobacz jak wygląda a potem usuń linijkę deklarującą doctype i zobacz jak wygląda.
w drugim przypadku jest tak jak chcę, tzn nie jest wyśrodkowane ale to już się da zrobić.

po pierwsze mi działa w obu przypadkach, po drugie przeczytaj to co pisałeś -> już sam nie wiesz kiedy to działa a kiedy u Ciebie to nie działa dry.gif

dobra -> jak ktoś ma siły niech podejmie dyskusje - ja pasuje czarodziej.gif
krzywy36
Cytat(zegarek84 @ 18.04.2010, 21:52:41 ) *
po pierwsze mi działa w obu przypadkach, po drugie przeczytaj to co pisałeś -> już sam nie wiesz kiedy to działa a kiedy u Ciebie to nie działa dry.gif

dobra -> jak ktoś ma siły niech podejmie dyskusje - ja pasuje czarodziej.gif

Po kolei:
Cytat
chodzi o to że w pierwszym przypadku nie da się tego wyśrodkować w żaden sposób a w drugim, się da za pomocą margin lub padding ;>

"Drugi wypadek" to ten bez doctype, sam to wyśrodkowałeś bez deklaracji więc się da.

Cytat
bez deklaracji działa, z deklaracją - nie ;/

To samo - "bez deklaracji" działa, sam zrobiłeś ;p z deklaracją niestety nie.

Cytat
pobierz, i zobacz jak wygląda a potem usuń linijkę deklarującą doctype i zobacz jak wygląda.
w drugim przypadku jest tak jak chcę, tzn nie jest wyśrodkowane ale to już się da zrobić.

Znowu - "drugi wypadek" czyli bez doctype - więc nie, nie pomyliłem się.

Dalej piszesz:
Cytat
działa party.gif ... w niektórych deklaracjach elementy są trochu inne, niektóre liniowe, inne inline-block itd. ... elementy liniowe nie mają żadnych marginesów (ani wewnętrznych ani zewnętrznych), ale na wszelki wypadek ustawiłem margin i padding też na 0px ;p i luknij sobie to z deklaracją -> ja daje bez deklaracji i jest wyśrodkowane:

a potem

Cytat
po pierwsze mi działa w obu przypadkach, po drugie przeczytaj to co pisałeś -> już sam nie wiesz kiedy to działa a kiedy u Ciebie to nie działa dry.gif


Skoro działa Ci z deklaracją to jest właśnie to o co mi chodziło - powiedz tylko z jakiej przeglądarki korzystasz bo mi na firefoxie niestety nie działa.

PS: tym postem nie mam zamiaru na Ciebie "najeżdżać" po prostu, chcę pokazać, że się nie pomyliłem ;p wręcz jestem wdzięczny za pomoc bo jako jedyny próbowałeś coś tu zrobić ale, widocznie się nie da ;/

zegarek84
opera - piszę tego posta i już lukne pod mozillą - dodaję tylko deklarację i na 99% zadziała bo z deklaracją na operze mi działało a rozumiałem na odwrót u Ciebie:
[edit] -> poprawione i dziaal też już na mozilli (już nie wnikam w inną interpretacje...
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>xxx</title>
  5. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">
  6.  
  7.  
  8. <style type="text/css">
  9. #menu
  10. {
  11. float: left;
  12. width: 850px;
  13. height: 20px;
  14. background-color: white;
  15. margin: 0;
  16. padding: 0;
  17. }
  18.  
  19. #menu div
  20. {
  21. padding: 0px;
  22. height: 20px;
  23. float: left;
  24. background-color: red;
  25. }
  26.  
  27. #menu a
  28. {
  29. display: block;
  30. height: 100%;
  31. margin:0px;
  32. padding:0px;
  33. line-height: 20px;
  34. vertical-align: middle;
  35. font-family: Verdana,Arial,Helvetica,sans-serif;
  36. font-weight: bold;
  37. font-style: normal;
  38. font-size: 8pt;
  39. color: #FFD035;
  40. text-decoration: none;
  41. }
  42.  
  43. </style>
  44. </head><body>
  45. <div id="menu">
  46. <div><a href="file:///tmp/index.php">Strona główna</a></div>
  47. <div><a href="file:///tmp/register.php">Rejestracja</a></div>
  48. <div><a href="file:///tmp/login.php">Logowanie</a></div>
  49. <div><a href="file:///tmp/albums.php">Albumy</a></div>
  50. <div><a href="file:///tmp/albums.php">Ostatnio dodane</a></div>
  51. <div><a href="file:///tmp/news.php">Nowości</a></div>
  52. <div><a href="file:///tmp/contact.php">Kontakt</a></div>
  53. <div><a href="file:///tmp/info.php">Info</a></div>
  54. </div>
  55. </body></html>
krzywy36
zainstalowałem właśnie opere i rzeczywiście działa z deklaracją oO, dziwne bo w firefoxie nie ;/
zegarek84
poprawiłem i działa na mozillę winksmiley.jpg - a zamieniłem na element blokowy i na wysokość rozciągnąłem na całość... może w mozilli float jest trochę inaczej interpretowany...

fakt -> wcześniej na mozilli nie działało winksmiley.jpg

ps. chyba nie ma koloru "brown" gdyż w edytorze pokazywało mi tam też błąd winksmiley.jpg
Pawel_W
Cytat(zegarek84 @ 18.04.2010, 22:30:39 ) *
poprawiłem i działa na mozillę winksmiley.jpg - a zamieniłem na element blokowy i na wysokość rozciągnąłem na całość... może w mozilli float jest trochę inaczej interpretowany...

fakt -> wcześniej na mozilli nie działało winksmiley.jpg

ps. chyba nie ma koloru "brown" gdyż w edytorze pokazywało mi tam też błąd winksmiley.jpg

bo nie ma, takich kolorów się już raczej nie używa, jeżeli chcesz być "profesjonalistą" to podawaj kolory w formacie #rrggbb winksmiley.jpg
zegarek84
to nie był mój problem ;p... i nie jestem "profesjonalistą" ;p - wykonuję całkiem inny zawód nie związany z komputerami a to tylko moje hobby ^^
krzywy36
bomba ;D, działa, wielkie dzięki, zegarek za pomoc.
Co do koloru, całkiem możliwe, ja to zmienilem tylko po to, żeby widzieć jak "działają" te divy ;D, a, że brązowy ładnie kontrastuje z czarnym i nie chciało mi się włączać photoshopa...
W każdym razie jeszcze raz wielkie dzięki ;>
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.