Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Problem z pozycjonowaniem?
Forum PHP.pl > Forum > Przedszkole
dolar
15.11.2016, 11:20:04
Ponownie ja biggrin.gif.
Mam w zanadrzu zrobic sobie jednego wielkiego diva i w srodku niego 9 innych, tak zeby kazdy div w srodku byl kwadratem ( taka plansza do kolko i krzyzyk ) - robie to na divach w ramach cwiczen, pewnie prostsza bylaby tabela, ale zostanmy przy divach. Oto moj kod:

[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <link href="cwiczenia.css" type="text/css" rel="stylesheet" /> 
  4.     </head>
  5.     <body style="border: solid green; height: 500px;">
  6.  
  7.         <div id="glowny">
  8.             <div class="male">x</div>
  9.              <div class="male">x</div>
  10.               <div class="male">x</div>
  11.               <br clear="all"/>
  12.                <div class="male">x</div>
  13.                 <div class="male">x</div>
  14.                  <div class="male">x</div>
  15.                  <br clear="all"/>
  16.                   <div class="male">x</div>
  17.                    <div class="male">x</div>
  18.                     <div class="male">x</div>          
  19.         </div>
  20.  
  21.     </body>
  22.  
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1.  
  2. #glowny {
  3.     border: solid black; 
  4.     width: 318px;
  5.     height: 318px;
  6.     margin-left: auto;
  7.     margin-right: auto; 
  8.     margin-top: 100px;
  9.     position: relative;
  10.  
  11. }
  12.  
  13. .male {
  14.  
  15.  float:left; 
  16.  border: solid green; 
  17.  width: 100px; 
  18.  height:100px; 
  19. }
  20.  
[CSS] pobierz, plaintext






Problemy mam dwa:
1. Jak wysrodkowac aby #glowny byl wysrodkowany w pionie? Bo nie potrafie tego i zrobilam margin....
2. Jak wysrodkowac w pionie tez text w divie? tutaj "x"?

P.S. Czy daloby rade to zrobic w display-inline? Jak odaje inline w .male to nie widzi jakby szerokosci i wysokosci...
nospor
15.11.2016, 11:25:17
Widziales moje wczorajsze posty dla Ciebie? Nie uwazasz ze moj kod wygladal ladniej niz twoj? A wiesz czemu? Bo uzywalem BBCODE. Popraw wiec swoj post i dodaj bbcode dla swojego kodu
dolar
15.11.2016, 11:31:53
Ok rozumiem, bede na przyszlosc stosowac bbcode, tylko tego css'a nei wiedzialam gdzie wrzucic za bardzo.
nospor
15.11.2016, 11:33:19
Dziekuje, zdecydowanie lepiej smile.gif

ps:

[CSS] pobierz, plaintext 
  1. .someclass {
  2.  color:red;
  3. }
[CSS] pobierz, plaintext
dolar
15.11.2016, 11:38:55
Udalo sie zmodyfikowac post - dzieki za wskazowki smile.gif ale to nie rozwiazuje moich problemow sad.gif
nospor
15.11.2016, 11:41:58
Cytat
ale to nie rozwiazuje moich problemow
Jak to nie? Rozwiazalo jeden z czepialskim modkiem wink.gif
dolar
15.11.2016, 11:43:09
Heh fakt moj bald tongue.gif. Lepszy czepialski mod, ktory mnie nauczy badz naprowadzi na rozwiazanie niz zero odzewu biggrin.gif
Tomplus
15.11.2016, 11:48:40
@Dolar
Wystarczyło wejść na pierwszy lepszy manual w Google tongue.gif

Tutaj masz rozwiązanie:
https://jsfiddle.net/4ewgmu3a/

Na twoim przykładzie.
SmokAnalog
15.11.2016, 11:49:21
Użyj display: inline-block zamiast float. Daje to lepszą kontrolę nad layoutem. Co masz na myśli, że chcesz wyśrodkować głównego diva? W pionie i w poziomie? Jeśli tak, to daj mu:

[CSS] pobierz, plaintext 
  1. position: absolute;
  2. left: 50%;
  3. top: 50%;
  4. transform: translate(-50%, -50%);
[CSS] pobierz, plaintext
dolar
15.11.2016, 14:57:56
@Tomplus - Twoj przyklad mi nie dziala, a kombinowalam wlasnie z table i cell

inline-block tez mi nie dziala sad.gif, albo nei potrafie go uzyc

ok inline-block dziala mi poprawnie ale jesli nadal zostanie float niestety :/.

edit: dobra oganrelam juz inline-block ;p

Tak teraz wyglada moj kod, tylko ze mam lekkie odstepy miedzy poszczegolnymi divami teraz, fakt sa obok siebie, ale nie przylegaja i tutaj niestety musze miec float, czy da sie bez floata jakos? 

[CSS] pobierz, plaintext 
  1.  
  2. #glowny {
  3.     border: solid black; 
  4.     width: 326px;
  5.     height: 318px;
  6.     position: absolute;
  7.     left: 50%;
  8.     top: 50%;
  9.     transform: translate(-50%, -50%);
  10.  
  11. }
  12.  
  13. .male {
  14.     display: inline-block;
  15.     float:left;
  16.     border: solid green; 
  17.     width: 100px; 
  18.     height:100px;
  19. }
  20.  
[CSS] pobierz, plaintext


Jeszcze zostal mi nadal problem z wysrodkowaniem textu w divach w pionie i poziomie - tutaj "x"...

Ktos cos? Bo skonczyly mi sie pomysly sad.gif
trueblue
15.11.2016, 15:08:11
Między elementami inline-block nie może być białego znaku.
Ewentualnie należy ustawić font-size:0 dla kontenera i jeśli trzeba, przywrócić font-size dla dzieci kontenera.
dolar
15.11.2016, 16:30:03
Dalej mi nie dziala.. to wycentrowanie textu w divie, nadanie display table nie widzi chrome takmi sie wydaje na mcbooku
trueblue
15.11.2016, 16:33:18
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
dolar
15.11.2016, 16:43:47
Wybcza trueblue, ale nie wiem nawet gdzie mam Twoje porady wstawic w moim kodzie css :/. Moj html jest na dosc poczatkujacym poziomie stad ta niewiedza
trueblue
15.11.2016, 16:46:00
A który element chcesz wyśrodkować na ekranie i gdzie masz podobny kod css?
dolar
15.11.2016, 17:09:27
Mam juz wysrodkowany glowny div, a w nim 9 innych. Oto kod html i css. Nie moge natomiast wycentrowac w pionie i poziomie napisy w tych malych 9 divach - tutaj "x". 

[HTML] pobierz, plaintext 
  1.  
  2. <html>
  3.     <head>
  4.         <link href="cwiczenia.css" type="text/css" rel="stylesheet" /> 
  5.     </head>
  6.     <body style="border: solid green;">
  7.  
  8.         <div id="glowny">
  9.         <div class="male">x</div>
  10.              <div class="male">x</div>
  11.               <div class="male">x</div>
  12.               <br clear="all"/>
  13.                <div class="male">x</div>
  14.                 <div class="male">x</div>
  15.                  <div class="male">x</div>
  16.                  <br clear="all"/>
  17.                   <div class="male">x</div>
  18.                    <div class="male">x</div>
  19.                     <div class="male">x</div>         
  20.  
  21.         </div>
  22.  
  23.  
  24.     </body>
  25.  
  26. </html>
  27.  
  28.  
[HTML] pobierz, plaintext 



[CSS] pobierz, plaintext 
  1.  
  2. #glowny {
  3.     border: solid black; 
  4.     width: 318px;
  5.     height: 318px;
  6.     position: absolute;
  7.     left: 50%;
  8.     top: 50%;
  9.     transform: translate(-50%, -50%);
  10.  
  11. }
  12.  
  13. .male {
  14.     display: inline-block;
  15.     float: left;
  16.     border: solid green; 
  17.     width: 100px; 
  18.     height:100px;
  19.     text-align: center;
  20.  
  21. }
  22.  
[CSS] pobierz, plaintext


Mialam za zadanie zrobic to wlasnie na divach. Wiem ze w tabeli byloby latwiej i szybciej, ale mialam sie uczyc pozycjonowanie divami... :/. I mam problem!
trueblue
15.11.2016, 17:56:35
https://css-tricks.com/centering-css-complete-guide/
SmokAnalog
15.11.2016, 22:45:54
Jeśli chodzi o przerwy między elementami, to ja zwykle albo usuwam przerwę w HTML, albo - najlepiej - używam flexboxa. Wsparcie tego ostatniego nie jest najlepsze, ale jeśli możemy olać stare IE (< 10), to jest to świetny wybór. Rozwiązania z font-size: 0 nie lubię, nie ufam mu tongue.gif
Tomplus
16.11.2016, 09:19:41
@dolar
Ale także nie działa ci ten przykład na jsfiddle?
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.