Skocz do zawartości

Witamy w Nieoficjalnym polskim support'cie AMX Mod X

Witamy w Nieoficjalnym polskim support'cie AMX Mod X, jak w większości społeczności internetowych musisz się zarejestrować aby móc odpowiadać lub zakładać nowe tematy, ale nie bój się to jest prosty proces w którym wymagamy minimalnych informacji.
  • Rozpoczynaj nowe tematy i odpowiedaj na inne
  • Zapisz się do tematów i for, aby otrzymywać automatyczne uaktualnienia
  • Dodawaj wydarzenia do kalendarza społecznościowego
  • Stwórz swój własny profil i zdobywaj nowych znajomych
  • Zdobywaj nowe doświadczenia

Dołączona grafika Dołączona grafika

Guest Message by DevFuse
 

Zdjęcie
CSS

Białe znaki pomiędzy elementami inline-block

css

  • Nie możesz napisać tematu
  • Zaloguj się, aby dodać odpowiedź
2 odpowiedzi w tym temacie

#1 Ryuu

    Wszechwidzący

  • Użytkownik

Reputacja: 31
Życzliwy

  • Postów:233
  • Steam:steam
  • Lokalizacja:Warszawa
Offline

Napisano 05.04.2013 21:53

Witam.
Jak wiecie jest kilka sposobów na wyśrodkowanie div'ów. Najpowszechniejszym z nich jest ustawienie marginesów bocznych na "automatyczne" dopasowanie. Niestety, jeżeli wewnątrz tego wyśrodkowanego diva stworzymy np. 2 divy, który chcielibyśmy ustawić koło siebie (float) to niestety wysokość tego "wyśrodkowanego diva" nie będzie rosła wraz ze wzrostem div'ów wewnętrznych. Mam nadzieje, że do tej mniej więcej rozumiecie o co mi chodzi :>

Postanowiłem więc skorzystać z innej metody ustawiania div'ów koło siebie (oblewania - float). Ustawiłem więc tym "wewnętrznym" div'om display:inline-block. Wszystko ładnie, div'y wyświetlają się koło siebie, ale jest jedno ALE.
Problemem jest odstęp stworzony przez białe znaki. Problem ten znika, gdy w kodzie umieszczę div'y bezpośrednio po sobie, jednak z powodów estetycznych wstawiam ENTER, przez co występuje odstęp.

Tak wygląda aktualnie mój kod:
HTML:
<!-- KONTENT START -->
<div id="kontent-center">
<!-- FACEBOOK-->
<div id="facebook"></div>
<!-- INFORMACJE -->
<div id="info"></div>
</div>
<!-- KONTENT END -->
CSS:
#kontent-center {width:1000px;height:auto;margin:0 auto;white-space:normal;background:yellow;}
#facebook {width:600px;height:100px;background:#116db0;display:inline-block}
#info {width:300px;height:100px;background:#116db0;display:inline-block}
Efekt: http://s1.pokazywark...430/6764969.jpg (jakość ze względu na hosting ;/)

Jak już wspomniałem, gdy ustawie elementy bezpośrednio po sobie ten 'defekt' znika
html:
<!-- KONTENT START -->
<div id="kontent-center">
<!-- FACEBOOK-->
<div id="facebook"></div><div id="info"></div>
</div>
<!-- KONTENT END -->
Efekt: http://s1.pokazywark...430/6764972.jpg

Niby wiele nie trzeba, aby naprawić ten problem, jednak wolę mieć estetyczny kod. Próbowałem white-space:nowrap,letter-padding:0, word-padding:0 jednak nie pomogło.

Tu się rodzi pytanie do Was koledzy webmasterzy, jak zniwelować generowanie białych znaków ? :)
Pozdrawiam.

Użytkownik Ryuu edytował ten post 05.04.2013 21:55

  • +
  • -
  • 0

#2 Seba

    Wszechobecny

  • Zbanowany

Reputacja: 198
Profesjonalista

  • Postów:424
  • Lokalizacja:Internet
Offline

Napisano 06.04.2013 00:05

jak zniwelować generowanie białych znaków

Zacząć używać block zamiast inline-block.

Do 99.99% layoutów wartość inline-block nie jest potrzebna, pomijam już kwestię kompatybilności.

Użytkownik Seba edytował ten post 06.04.2013 00:08


#3 Ryuu

    Wszechwidzący

  • Autor tematu
  • Użytkownik

Reputacja: 31
Życzliwy

  • Postów:233
  • Steam:steam
  • Lokalizacja:Warszawa
Offline

Napisano 06.04.2013 12:33

Właśnie nigdy nie robiłem inline block, postanowiłem teraz spróbować.
Przy takim oto kodzie:
(HTML bez zmian - taki jak w poprzednim poście)
CSS:
#kontent-center {width:1000px;height:20px;margin:0 auto;white-space:normal;background:yellow;}
#facebook {width:600px;height:100px;background:green;float:left}
#info {width:300px;height:100px;background:red;float:left;margin-left:100px}

Efekt wychodzi taki: http://s1.pokazywark...452/6769282.jpg
Mi właśnie zależy na tym, aby wysokość #kontent-center powiększała się automatycznie wraz ze wzrostem wysokości div'ów wewnętrznych.
  • +
  • -
  • 0





Również z jednym lub większą ilością słów kluczowych: css

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych