Nie jesteś zalogowany.
Jeśli nie posiadasz konta, zarejestruj je już teraz! Pozwoli Ci ono w pełni korzystać z naszego serwisu. Spamerom dziękujemy!

Ogłoszenie

Prosimy o pomoc dla małej Julki — przekaż 1% podatku na Fundacji Dzieciom zdazyć z Pomocą.
Więcej informacji na dug.net.pl/pomagamy/.

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

  debbie - Użytkownik

debbie
Użytkownik
Zarejestrowany: 2006-09-19

Pozycjonowanie w CSS

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 :)


debbie
Wrócę jak zjem zupę i drugie danie - tyle
a oto ta zupa:

Offline

 

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

  morfik - Cenzor wirtualnego świata

morfik
Cenzor wirtualnego świata
Skąd: ze WSI
Zarejestrowany: 2011-09-15
Serwis

Re: Pozycjonowanie w CSS

Offline

 

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

  debbie - Użytkownik

debbie
Użytkownik
Zarejestrowany: 2006-09-19

Re: Pozycjonowanie w CSS

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


debbie
Wrócę jak zjem zupę i drugie danie - tyle
a oto ta zupa:

Offline

 

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

  morfik - Cenzor wirtualnego świata

morfik
Cenzor wirtualnego świata
Skąd: ze WSI
Zarejestrowany: 2011-09-15
Serwis

Re: Pozycjonowanie w CSS

A jak wywalisz ten   position: absolute; ?

Offline

 

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

  ethanak - Użytkownik

ethanak
Użytkownik
Skąd: Ungwenor
Zarejestrowany: 2010-07-19
Serwis

Re: Pozycjonowanie w CSS

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


Nim mechaniczne larum zagrasz mi, kanalio,
głosząc nadejście Javy - śmiertelnego wroga!
Zespół Adwokacki Dyskrecja

Offline

 

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

  jezoo - Dzięcioł

jezoo
Dzięcioł
Skąd: Z lasu
Zarejestrowany: 2005-09-02

Re: Pozycjonowanie w CSS

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


LRU #480459

Offline

 

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

  pink - Użytkownik

pink
Użytkownik
Skąd: P17PY93
Zarejestrowany: 2005-09-16

Re: Pozycjonowanie w CSS

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)


T430 think-box 4.9-custom x86_64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz GenuineIntel GNU/Linux
"Doktor plama i maharadża są pod złotym leszczem." "Człowieka od zwierzęcia odróżnia ciekawość świata. Patrze słucham i wyciągam wnioski."
https://www.behance.net/przemyslawmamon

Offline

 

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

  debbie - Użytkownik

debbie
Użytkownik
Zarejestrowany: 2006-09-19

Re: Pozycjonowanie w CSS

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/


debbie
Wrócę jak zjem zupę i drugie danie - tyle
a oto ta zupa:

Offline

 

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

  jezoo - Dzięcioł

jezoo
Dzięcioł
Skąd: Z lasu
Zarejestrowany: 2005-09-02

Re: Pozycjonowanie w CSS

@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/


LRU #480459

Offline

 

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

  debbie - Użytkownik

debbie
Użytkownik
Zarejestrowany: 2006-09-19

Re: Pozycjonowanie w CSS

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)


debbie
Wrócę jak zjem zupę i drugie danie - tyle
a oto ta zupa:

Offline

 

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

  jezoo - Dzięcioł

jezoo
Dzięcioł
Skąd: Z lasu
Zarejestrowany: 2005-09-02

Re: Pozycjonowanie w CSS

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

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


LRU #480459

Offline

 

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

  debbie - Użytkownik

debbie
Użytkownik
Zarejestrowany: 2006-09-19

Re: Pozycjonowanie w CSS

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


debbie
Wrócę jak zjem zupę i drugie danie - tyle
a oto ta zupa:

Offline

 

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

  jezoo - Dzięcioł

jezoo
Dzięcioł
Skąd: Z lasu
Zarejestrowany: 2005-09-02

Re: Pozycjonowanie w CSS

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


LRU #480459

Offline

 

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

  debbie - Użytkownik

debbie
Użytkownik
Zarejestrowany: 2006-09-19

Re: Pozycjonowanie w CSS

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
Wrócę jak zjem zupę i drugie danie - tyle
a oto ta zupa:

Offline

 

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

  debbie - Użytkownik

debbie
Użytkownik
Zarejestrowany: 2006-09-19

Re: Pozycjonowanie w CSS

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


debbie
Wrócę jak zjem zupę i drugie danie - tyle
a oto ta zupa:

Offline

 

Stopka forum

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson
To nie jest tylko forum, to nasza mała ojczyzna ;-)