Forum Debian Users Gang

debbie · 2016-04-07 13:38:37

Witam,

Mam taki problem z pozycjonowaniem w CSS.
Mam dwa elementy które chcę umieścić z lewej strony.
Umieszczam pierwszy....ale gdy chcę umieścić drugi to drugi nakłada mi się na pierwszy
zamiast wpaść automatycznie pod niego.
Dopiero kiedy podam ilość pixeli dla TOP to mogę umieścić go pod tym elementem.
Problem jest taki, że pierwszy element się rozciąga ( dla danego użytkownika ).
no i wtedy i tak i tak się nagładają na siebie.

wygląda to tak dla CSS:

ELEMENT 1:

Kod:

.container_12_licznik {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    width: 240px;
}
.site-cover_licznik {
    background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
    border-radius: 5px;
    box-shadow: 0 0 13px #999;
    left: 20px;
    margin-bottom: 100px;
    margin-top: 25px;
    position: absolute;
    top: 85px;
}

ELEMENT 2:

Kod:

.container_12_licznik5 {
    margin-left: auto;
    margin-right: 20px;
    margin-top: auto;
    width: 240px;
}
.site-cover_licznik5 {
    background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
    border-radius: 5px;
    box-shadow: 0 0 13px #999;
    left: 20px;
    margin-bottom: 100px;
    margin-top: 25px;
    position: absolute;
    top: 320px;
}

Wie ktoś może czego użyć dokładnie żeby ELEMENT 2 automatycznie zawsze
pojawiał się pod ELEMENTEM 1?

Pozdrawiam ciepło :)

morfik · 2016-04-07 13:44:32

Rzuć okiem na http://quirksmode.org/css/css2/display.html

debbie · 2016-04-07 13:51:02

Próbuje z display: block;
ale dalej to samo...

morfik · 2016-04-07 14:07:23

A jak wywalisz ten position: absolute; ?

ethanak · 2016-04-07 14:30:32

a jak podasz kod html? bo morfik to może i wróżka ale ja nie...
hint: table display

jezoo · 2016-04-07 21:15:16

@debbie o coś takiego Tobie chodzi https://jsfiddle.net/58yfe0gt/ ? Bo moja szklana kula mówi, że widzi ciemność.

pink · 2016-04-07 23:14:13

podaj caly kod html+css albo najlepiej link do strony to cos pomyslimy.

http://adamschwartz.co/magic-of-css/chapters/2-layout/

Ostatnio edytowany przez pink (2016-04-08 01:27:42)

debbie · 2016-04-08 09:51:29

Dzięki Pink...wspomogło mnie Twoje rozwiązanie ze strony https://jsfiddle.net/58yfe0gt/

Jednak to pociągnęło dalszy problem z pozycjonowaniem.
Ponieważ mam dwa elementy jeden pod drugim z lewej strony...jeden długi w środku i dwa z prawej...

Mam trochę bałaganu w kodzie do uporządkowania...ale może odniosę się do tego kodu ze strony...

jest tam:

Kod:

<div class="root">
<div class="element1">
Licznik 1
</div>
<div class="element2">
Licznik 2
</div>
<div class="element3">
Licznik 3
</div>
<div class="element4">
Licznik 4
</div>
</div>

.root {
  display: block;
  background: green;
  width: 240px;
  position: relative;
  left: 10px;
  top: 10px;
  padding: 5px;
}
.element1, .element2 {
  border: 1px solid #000;
  margin-bottom: 10px;
  left: 15px;
}
.element3, .element4 {
  border: 1px solid #000;
  margin-bottom: 10px;
  right: 15px;
}

A potrzebuję zrobić coś takiego gdzie będę miał dwa elementy z lewej strony ( lub więcej w zależności od tego co dodam )
jeden podłużny w środku...oraz dwa ( lub więcej z prawej strony )

Według tego wychodzi mi:

https://jsfiddle.net/58yfe0gt/

jezoo · 2016-04-08 20:40:15

@debbie, piszesz, że strona Pink Tobie pomogła a klepisz moją :P

Po drugie nie skopiowałeś całego linku, ponieważ powinien wyglądać tak: https://jsfiddle.net/58yfe0gt/2/

W tej wersji namieszałeś jak trzeba, możesz sobie wywalić nazwę klasy ement1, element2 itd i zastąpić to jedną klasą element (ponieważ klasa może być powtarzalna a ID nie)

i ostatnia rzecz, narysowałbyś nawet w gimpie o jaki układ Ci chodzi!

Jak na razie bawię się we wróżbitę: https://jsfiddle.net/58yfe0gt/5/

debbie · 2016-04-11 11:15:20

Myślę że tak będzie najprościej...próbuję według Twojej propozycji :)...
ale wygląda to tak:

http://imgur.com/5QmU8pJ

I każdy moduł rozciąga się według treści która się w nim znajduje..

Ostatnio edytowany przez debbie (2016-04-11 11:15:47)

jezoo · 2016-04-12 22:53:30

No to masz, pobawiłem się w górnika :P

https://jsfiddle.net/58yfe0gt/6/

debbie · 2016-04-18 07:17:10

Tak dzięki :) to rozumiem :) tylko że jestem właśnie w tym punkcie od początku...
a chodzi mi o efekt z obrazka...

jezoo · 2016-04-18 18:43:11

Chodzi tobie o sortowanie listy? Bo ja juz zglupialem. To co masz na obrazku odzwierciedlilem tobie w linku powyzej. A jesli chodzi tobie o przelaczanie zakladek to jest jrszcze inna historia

debbie · 2016-04-19 10:32:24

Przepraszam...wszystko gra i buczy! Faktycznie o to mi chodziło....tylko strona wyświetlała wszystko jedno pod drugim...
Dzięki Ci Jezoo! hahahahha :D

debbie · 2016-04-20 12:47:11

....jednak to faktycznie problem... ponieważ układ zaproponowany przez Jezoo...jest całkiem okej...
https://jsfiddle.net/58yfe0gt/6/

Tylko przy zmianie rozdzielki na większą...boczne moduły ( te z prawej strony -test1 test2 )
spadają na dół pod licznik1 licznik2 licznik3 licznik4.

Właśnie szukam co zrobić alby to było sztywne...

Forum Debian Users Gang

Ogłoszenie

#1 2016-04-07 13:38:37

debbie - Użytkownik

Pozycjonowanie w CSS

Kod:

Kod:

#2 2016-04-07 13:44:32

morfik - Cenzor wirtualnego świata

Re: Pozycjonowanie w CSS

#3 2016-04-07 13:51:02

debbie - Użytkownik

Re: Pozycjonowanie w CSS

#4 2016-04-07 14:07:23

morfik - Cenzor wirtualnego świata

Re: Pozycjonowanie w CSS

#5 2016-04-07 14:30:32

ethanak - Użytkownik

Re: Pozycjonowanie w CSS

#6 2016-04-07 21:15:16

jezoo - Dzięcioł

Re: Pozycjonowanie w CSS

#7 2016-04-07 23:14:13

pink - Użytkownik

Re: Pozycjonowanie w CSS

#8 2016-04-08 09:51:29

debbie - Użytkownik

Re: Pozycjonowanie w CSS

Kod:

#9 2016-04-08 20:40:15

jezoo - Dzięcioł

Re: Pozycjonowanie w CSS

#10 2016-04-11 11:15:20

debbie - Użytkownik

Re: Pozycjonowanie w CSS

#11 2016-04-12 22:53:30

jezoo - Dzięcioł

Re: Pozycjonowanie w CSS

#12 2016-04-18 07:17:10

debbie - Użytkownik

Re: Pozycjonowanie w CSS

#13 2016-04-18 18:43:11

jezoo - Dzięcioł

Re: Pozycjonowanie w CSS

#14 2016-04-19 10:32:24

debbie - Użytkownik

Re: Pozycjonowanie w CSS

#15 2016-04-20 12:47:11

debbie - Użytkownik

Re: Pozycjonowanie w CSS

Stopka forum