Forum PHP.pl > [HTML][CSS]Div obok Diva

Pomoc - Szukaj - Użytkownicy - Kalendarz

mlody69

17.09.2015, 08:41:58

Witam,
mam nastepujace divy ze stylami:
<body>

[HTML] pobierz, plaintext 
height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
[HTML] pobierz, plaintext

<box>

[HTML] pobierz, plaintext 
    background: #0E0E0E;
    width: 900px;
    height: auto;
    margin: 0 auto;
    margin-top: 60px;
    margin-bottom: 50px;
    border-radius: 14px;
    padding-bottom: 20px;
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
    background: #0E0E0E;
    margin-top: 80px;
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: white;
[HTML] pobierz, plaintext

Chciałbym zrobić tak, zeby na wysokości diva box z jego prawej strony (rowno od gory) byl kolejny div ktory w miare scrollowania w dol rowniez sie przesuwal. Probowalem rozwiazan ze stackoverlflow takie jak tu http://stackoverflow.com/questions/6282403...ext-to-an-image ale niestety nic nie dziala lub rozwala strone.

Tomplus

17.09.2015, 09:04:20

Nie wiem czy dobrze cię zrozumiałem, ale tag <body> powienien być unikatowy na stronie, chyba że chodzi ci o klasę .body dla tagu DIV

jeżeli chcesz mieć element obok, to należy użyć stylu: float:left/right; lub przesunąć na sztywno własnościami top, left, right lub margin

Jeżeli chcesz aby element poruszał się razem ze scrool używasz własności position z wartością fixed czyli position: fixed.

Zrób sobie testowo czy boxy DIV:

Kod

<div>
  <span>TEST 1</span>
</div>
<div>
  <span>TEST 2</span>
</div>
<div>
  <span>TEST 3</span>
</div>
<div class='fix'>
  <span>fixed</span>
</div>

i
style

Kod

div {
  text-align:center;
  background-color: #eee;
  margin: 5px;
  float: left;
  padding:50%;
}
span {
  display: inline-block;
    margin-top:43%;
}
.fix{

width: 100px;
  height:100px;
position:fixed;
  padding: 0;
  background-color: #aaa;
  margin: 50px;
}

np. tutaj: http://cssdeck.com/labs

mlody69

17.09.2015, 09:57:59

Dodalem po divie box diva z nastepujacymi stylami; style="float: left;padding: 50%;display: inline-block;"
Aczkolwiek tekst wewnatrz diva wyswietla sie pod divem box a nie obok.

Tomplus

17.09.2015, 20:43:13

DIV domyślnie jest blokowy, a ty zrobiłeś go liniowego, więc nie ma co się dziwić że tekst jest na zewnątrz:

display: block-inline; powinno być.

przetestuj style które przygotowałem, potem to rozbuduj.

mlody69

18.09.2015, 14:36:00

block-inline? CHyba nie ma czegos takiego.

prz3kus

18.09.2015, 14:45:00

... ale za to jest inline-block

mlody69

18.09.2015, 14:48:31

No i tak wlasnie mam

fate

18.09.2015, 14:56:32

https://jsfiddle.net/1vyezzo3/

Tomplus

18.09.2015, 15:19:06

Cytat(mlody69 @ 18.09.2015, 15:36:00 )

block-inline? CHyba nie ma czegos takiego.

Oczywiście że nie ma, bo każdy tag blokowy ma wnętrze liniowe z definicji.
Chciałem ci pokazać różnicę.

Comandeer

18.09.2015, 15:43:01

Cytat

Oczywiście że nie ma, bo każdy tag blokowy ma wnętrze liniowe z definicji.

https://drafts.csswg.org/css-display/#display-value-summary

Osobiście lekko zmodyfikowałbym kod @fate'a: temu czerwonemu dałbym left: 90% zamiast width: 10% - IMO przejrzyściej (bo chcemy, żeby był tak, gdzie się kończy lewy i widać to wyraźnie w kodzie).

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.