Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML] Problem z pozycjonowaniem?
dolar
post 15.11.2016, 11:20:04
Post #1





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 19.10.2016

Ostrzeżenie: (0%)
-----

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...

Ten post edytował dolar 15.11.2016, 11:38:14
Go to the top of the page
+Quote Post
nospor
post 15.11.2016, 11:25:17
Post #2





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
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


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

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
dolar
post 15.11.2016, 11:31:53
Post #3





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 19.10.2016

Ostrzeżenie: (0%)
-----

Ok rozumiem, bede na przyszlosc stosowac bbcode, tylko tego css'a nei wiedzialam gdzie wrzucic za bardzo.
Go to the top of the page
+Quote Post
nospor
post 15.11.2016, 11:33:19
Post #4





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Dziekuje, zdecydowanie lepiej smile.gif

ps:

[CSS] pobierz, plaintext 
  1. .someclass {
  2.  color:red;
  3. }
[CSS] pobierz, plaintext


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

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
dolar
post 15.11.2016, 11:38:55
Post #5





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 19.10.2016

Ostrzeżenie: (0%)
-----

Udalo sie zmodyfikowac post - dzieki za wskazowki smile.gif ale to nie rozwiazuje moich problemow sad.gif
Go to the top of the page
+Quote Post
nospor
post 15.11.2016, 11:41:58
Post #6





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Cytat
ale to nie rozwiazuje moich problemow
Jak to nie? Rozwiazalo jeden z czepialskim modkiem wink.gif


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

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
dolar
post 15.11.2016, 11:43:09
Post #7





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 19.10.2016

Ostrzeżenie: (0%)
-----

Heh fakt moj bald tongue.gif. Lepszy czepialski mod, ktory mnie nauczy badz naprowadzi na rozwiazanie niz zero odzewu biggrin.gif
Go to the top of the page
+Quote Post
Tomplus
post 15.11.2016, 11:48:40
Post #8





Grupa: Zarejestrowani
Postów: 1 875
Pomógł: 230
Dołączył: 20.03.2005
Skąd: Będzin

Ostrzeżenie: (0%)
-----

@Dolar
Wystarczyło wejść na pierwszy lepszy manual w Google tongue.gif

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

Na twoim przykładzie.

Ten post edytował Tomplus 15.11.2016, 11:48:58
Go to the top of the page
+Quote Post
SmokAnalog
post 15.11.2016, 11:49:21
Post #9





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
dolar
post 15.11.2016, 14:57:56
Post #10





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 19.10.2016

Ostrzeżenie: (0%)
-----

@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

Ten post edytował dolar 15.11.2016, 12:38:18
Go to the top of the page
+Quote Post
trueblue
post 15.11.2016, 15:08:11
Post #11





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

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.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
dolar
post 15.11.2016, 16:30:03
Post #12





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 19.10.2016

Ostrzeżenie: (0%)
-----

Dalej mi nie dziala.. to wycentrowanie textu w divie, nadanie display table nie widzi chrome takmi sie wydaje na mcbooku
Go to the top of the page
+Quote Post
trueblue
post 15.11.2016, 16:33:18
Post #13





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Ten post edytował trueblue 15.11.2016, 16:34:09


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
dolar
post 15.11.2016, 16:43:47
Post #14





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 19.10.2016

Ostrzeżenie: (0%)
-----

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

Ten post edytował dolar 15.11.2016, 16:46:48
Go to the top of the page
+Quote Post
trueblue
post 15.11.2016, 16:46:00
Post #15





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

A który element chcesz wyśrodkować na ekranie i gdzie masz podobny kod css?


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
dolar
post 15.11.2016, 17:09:27
Post #16





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 19.10.2016

Ostrzeżenie: (0%)
-----

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!

Ten post edytował dolar 15.11.2016, 17:10:01
Go to the top of the page
+Quote Post
trueblue
post 15.11.2016, 17:56:35
Post #17





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

https://css-tricks.com/centering-css-complete-guide/


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
SmokAnalog
post 15.11.2016, 22:45:54
Post #18





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Tomplus
post 16.11.2016, 09:19:41
Post #19





Grupa: Zarejestrowani
Postów: 1 875
Pomógł: 230
Dołączył: 20.03.2005
Skąd: Będzin

Ostrzeżenie: (0%)
-----

@dolar
Ale także nie działa ci ten przykład na jsfiddle?
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 15.07.2025 - 17:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn