GoldenLine
Zaloguj się
Damian Komon

Damian Komon Student, Technikum
Informatyczne

Temat: [HTML] Wyśrodkowanie w pionie

Witam, mam pytanko, próbuje na 100 sposobów i ciągle jest kiepsko. Potrzebuje wyśrodkować w pionie ikony i tekst na niebieskim pasku.

http://tinyurl.com/pe4avff

Chciałbym to zrobić nie na sztywno (czyli ustawić wartości i narka), potrzebuje rozwiązania które automatycznie wyśrodkuje, nie zależnie od wysokości niebieskiego paska...

Proszę o pomoc

ps. nie chce używać do tego jsTen post został edytowany przez Autora dnia 11.06.14 o godzinie 15:03
Link do wypowiedziLink
Jerzy Dłużniewski

Jerzy Dłużniewski Freelancer / Grafik
/ Web designer /

Temat: [HTML] Wyśrodkowanie w pionie

Dodaj do kodu div

<div class="ikony_top">
<a href="#"><li class="blue-bar-facebook"></li></a>
<a href="#"><li class="blue-bar-search"></li></a>
<a href="#"><li class="blue-bar-contact"></li></a> </div>

Do style.css

.ikony_top{
padding-left:50px;
padding-top:5px;
}

taki przykładzik może być kiepsko z szerokimi ekranami zrobić ci tak by było za każdym razem na środku?
Link do wypowiedziLink
Jerzy Dłużniewski

Jerzy Dłużniewski Freelancer / Grafik
/ Web designer /

Temat: [HTML] Wyśrodkowanie w pionie

Jerzy D.:
.ikony_top{
padding-left:50px;
padding-top:5px;
}

powoduje od lewej 50 px przerwy i od góry 5px oczywiście możesz sobie przestawiać jak się podoba ;)

jak chcesz by inaczej się klasa nazywała zmieniasz w

<div class="jakistamnapis">

i w css czyli w style.css musisz wtedy deklarować

.jakistamnapis{

/*wartości twoje*/

}

To co ja zrobiłem jest przesunięciem ale nie wyśrodkowaniemTen post został edytowany przez Autora dnia 11.06.14 o godzinie 15:49
Link do wypowiedziLink
Andrzej Kidaj

Andrzej Kidaj www.ad3.eu

Temat: [HTML] Wyśrodkowanie w pionie

Jerzy D.:
Dodaj do kodu div

<div class="ikony_top">
<a href="#"><li
> class="blue-bar-facebook"></li></a>
<a href="#"><li
> class="blue-bar-search"></li></a>
<a href="#"><li
> class="blue-bar-contact"></li></a> </div>

Do style.css

.ikony_top{
padding-left:50px;
padding-top:5px;
}

taki przykładzik może być kiepsko z szerokimi ekranami zrobić ci tak by było za każdym razem na środku?

Twój sposób jest "na sztywno" a kolega WYRAŹNIE napisał, że szuka rozwiązania automatycznego.
Jest coś takiego jak vertical-align, ale działa chyba tylko w tabelach.
Można jeszcze kombinować z wartościami % i zagnieżdżaniem divów.
Link do wypowiedziLink
Paweł Choinski

Paweł Choinski Front-end developer

Temat: [HTML] Wyśrodkowanie w pionie

Spróbuj wywalić zbędne divy (będzie ładniej wyglądało) i a wstaw w li. i floatowanie daj na ul'kach

<header>
<div class="bar">
<div class="align">
<ul class="horizontal-list">
<li><a href="#">Email us: email@ouremail.com</a></li>
<li><a href="#">Phone us: +48 058 907 821</a></li>
</ul>
</div>
</div>
</header>

.align, .horizontal-list {height: 100%}
.horizontal-list {display: table}
.horizontal-list li {display: table-cell; vertical-align: middle;}

z li wywalamy floatowanie.Ten post został edytowany przez Autora dnia 11.06.14 o godzinie 17:10
Link do wypowiedziLink
Jerzy Dłużniewski

Jerzy Dłużniewski Freelancer / Grafik
/ Web designer /

Temat: [HTML] Wyśrodkowanie w pionie

Andrzej K.:
>
Twój sposób jest "na sztywno" a kolega WYRAŹNIE napisał, że szuka rozwiązania automatycznego.


Naprawdę?
a czytałeś co ja napisałem?

"taki przykładzik może być kiepsko z szerokimi ekranami zrobić ci tak by było za każdym razem na środku?"

"To co ja zrobiłem jest przesunięciem ale nie wyśrodkowaniem"

Pozdrawiam
Link do wypowiedziLink
Andrzej Kidaj

Andrzej Kidaj www.ad3.eu

Temat: [HTML] Wyśrodkowanie w pionie

Jerzy D.:
Andrzej K.:
>
Twój sposób jest "na sztywno" a kolega WYRAŹNIE napisał, że szuka rozwiązania automatycznego.


Naprawdę?
a czytałeś co ja napisałem?

Czytałem.

"taki przykładzik może być kiepsko z szerokimi ekranami zrobić ci tak by było za każdym razem na środku?"

A Ty czytałeś, jaki jest problem? Wyśrodkowanie W PIONIE a nie w POZIOMIE, więc co ma do tego szerokość ekranu?
"To co ja zrobiłem jest przesunięciem ale nie wyśrodkowaniem"

Właśnie. A Damian potrzebuje WYŚRODKOWANIA. AUTOMATYCZNEGO.
Ty wpisałeś padding-top:5px. To jest na sztywno.
A jeśli pasek będize wyższy, to jak to ma się AUTOMATYCZNIE wyśrodkować PIONOWO?
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: [HTML] Wyśrodkowanie w pionie

Widzę, że zostało zastosowane już któreś z wcześniejszych rozwiązań ale dorzucę też swoje.

EDIT: właśnie doczytałem "nie zależnie od wysokości niebieskiego paska...", więc rozwiązanie poniżej nie do końca się kwalifikuje.

Jeśli .bar ma stałą wysokość (a z tego co widzę ma - 2em) to wystarczy wszystkim elementom wewnątrz (w tym przypadku <li>) ustawić line-height: 2em (nie zadziała na elementach liniowych - czyli jeśli <li> będzie display: inline;).

P.S.
Proponuję zrobić porządek w strukturze strony. Jest zdecydowanie za dużo div'ów!
* Po co jest <header><div class="bar"> skoro może być <header class="bar">?
* W zastosowanym przez Ciebie rozwiązaniu <div>'y z klasami .align i .vertical są niepotrzebne - możesz ustawić display: table i table-cell dla UL i LI
* W ostatnim UL (tym z ikonami) linki (<a>) są w złym miejscu - bezpośrednimi dziećmi UL mogą być wyłącznie LI.
* Po co paragrafy wewnątrz LI w 2-ch pierwszych UL-ach?Ten post został edytowany przez Autora dnia 12.06.14 o godzinie 13:59
Link do wypowiedziLink
Paweł Choinski

Paweł Choinski Front-end developer

Temat: [HTML] Wyśrodkowanie w pionie

Marcin G.:
P.S.
Proponuję zrobić porządek w strukturze strony. Jest zdecydowanie za dużo div'ów!

Popieram, proponuje zaorać i napisać od nowa wykorzystując co najwyżej tagi:
<heder>
<nav>
<ul>
<li>
<a>

a nie tworzyć koszmarki, które owszem w przeglądarce wyglądają tak jak miały wyglądać, ale po kodzie widać od razu, ze autor nie ma do końca pojęcia co robi.

Usiądź sobie Damian i pomyśl jak to powinno wyglądać pod względem semantyki HTMLa, a później dopiero spróbuj ubierać w CSS dodając ewentualnie dodatkowe elementy tylko tam gdzie będziesz na 100% pewny, że inaczej się nie da.
Link do wypowiedziLink
Tomasz Waryan

Tomasz Waryan Student, Uniwersytet
Pedagogiczny w
Krakowie

Temat: [HTML] Wyśrodkowanie w pionie

Panowie, Panowie
CSS jest po to by ułatwić sobie życie :)

vertical-align : middle , i po sprawie

Pozdrawiam
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: [HTML] Wyśrodkowanie w pionie

Tomasz W.:
Panowie, Panowie
CSS jest po to by ułatwić sobie życie :)

vertical-align : middle , i po sprawie

Po co odkopywać stary post z tak bezsensowną odpowiedzią? @Paweł kilka postów wyżej podał już takie rozwiązanie. A Twoja odpowiedź bez podania info, że vertical-align działa wyłącznie na komórkach tabeli (lub elementach z ustawionym display: table-cell) jest wybitnie niekompletna.
Link do wypowiedziLink
Tomasz Waryan

Tomasz Waryan Student, Uniwersytet
Pedagogiczny w
Krakowie

Temat: [HTML] Wyśrodkowanie w pionie

Marcin G.:
Tomasz W.:
Panowie, Panowie
CSS jest po to by ułatwić sobie życie :)

vertical-align : middle , i po sprawie

Po co odkopywać stary post z tak bezsensowną odpowiedzią? @Paweł kilka postów wyżej podał już takie rozwiązanie. A Twoja odpowiedź bez podania info, że vertical-align działa wyłącznie na komórkach tabeli (lub elementach z ustawionym display: table-cell) jest wybitnie niekompletna.


".align, .horizontal-list {height: 100%}
.horizontal-list {display: table}
.horizontal-list li {display: table-cell; vertical-align: middle;}"
jak na obecne czasy to chyba jakaś kpina :)
jak można z listy robić table - O_o, po co z drzewem do lasu ?

"bezsensowna odpowiedź" ? hmn
jak na "web development – zaawansowany (x)html, css, JavaScript (Jquery), " powinieneś wiedzieć czym jest optymalizacja|kompresja i dążenie do niej. Kolega Paweł owszem podał rozwiązanie-ale takie sobie ! Szybciej zrenderuje się zwykłe table niż konwert li->display-table !

I dla informacji- nigdy nie jest za późno na poprawę błędów. Fajnie by było na bieżąco uzupełniać tematy o nowe informacje i techniki (choćby dla takich ludzi jak Ty). Nie rozumiem dlaczego się czepiasz, naprawdę.

Proszę na drugi raz nie obrażać ;)

Postaram się unikać tematów w których zabierasz głos.

PozdrawiamTen post został edytowany przez Autora dnia 10.08.14 o godzinie 20:34
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: [HTML] Wyśrodkowanie w pionie

Tomasz W.:

".align, .horizontal-list {height: 100%}
.horizontal-list {display: table}
.horizontal-list li {display: table-cell; vertical-align: middle;}"
jak na obecne czasy to chyba jakaś kpina :)
jak można z listy robić table - O_o, po co z drzewem do lasu ?

Sugerujesz umieszczanie danych nietabelarycznych w tabeli? BRAWO! Wróć do fundamentów i upewnij się, że na pewno wiesz z jakiego powodu i w jakim celu powstał CSS.
"bezsensowna odpowiedź" ? hmn
jak na "web development – zaawansowany (x)html, css, JavaScript (Jquery), " powinieneś wiedzieć czym jest optymalizacja|kompresja i dążenie do niej. Kolega Paweł owszem podał rozwiązanie-ale takie sobie ! Szybciej zrenderuje się zwykłe table niż konwert li->display-table !

Bezsensowa bo:
1. Odkopałeś stary post
2. Napisałeś tylko "vertical-align : middle , i po sprawie", to ma być sensowna i wyczerpująca odpowiedź?

A co do tego szybszego renderowania, pisałeś jakieś testy, widziałeś takowe? Chętnie rzucę okiem.

EDIT: Pokusiłem się o napisanie prostego testu czasu renderowania strony w obu przypadkach. Proszę:
http://jsfiddle.net/norin89/sx15nLam/4/ i http://jsfiddle.net/norin89/sx15nLam/5/ - jeśli 100 elementów to dla Ciebie za mało to powiel je sobie do 1 000 czy 10 000 i daj znać jak bardzo wyniki od siebie odbiegają ;)
Proszę na drugi raz nie obrażać ;)

W przeciwieństwie do Ciebie nie pokusiłem się o personalne wycieczki tylko "przyczepiłem się" do Twojej wypowiedzi, która w moim mniemaniu była nic nie wnosząca. I błagam, nie podważaj moich kompetencji bo ich nie znasz. Jak chcesz to podeślij mi kilka swoich realizacji, ja Ci podeślę swoje, a później sobie podyskutujemy...Ten post został edytowany przez Autora dnia 11.08.14 o godzinie 13:34
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Poszukiwany koder (X)HTML, ...




Wyślij zaproszenie do
Anuluj