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 [b]o jaki układ Ci chodzi![/b]

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:

[url]http://imgur.com/5QmU8pJ[/url]

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

Time (s)	Query
0.00012	SET CHARSET latin2
0.00004	SET NAMES latin2
0.00096	SELECT u., g., o.logged FROM punbb_users AS u INNER JOIN punbb_groups AS g ON u.group_id=g.g_id LEFT JOIN punbb_online AS o ON o.ident='18.220.200.197' WHERE u.id=1
0.00082	UPDATE punbb_online SET logged=1732493708 WHERE ident='18.220.200.197'
0.00054	SELECT * FROM punbb_online WHERE logged<1732493408
0.00072	SELECT topic_id FROM punbb_posts WHERE id=300781
0.00005	SELECT id FROM punbb_posts WHERE topic_id=28508 ORDER BY posted
0.00055	SELECT t.subject, t.closed, t.num_replies, t.sticky, f.id AS forum_id, f.forum_name, f.moderators, fp.post_replies, 0 FROM punbb_topics AS t INNER JOIN punbb_forums AS f ON f.id=t.forum_id LEFT JOIN punbb_forum_perms AS fp ON (fp.forum_id=f.id AND fp.group_id=3) WHERE (fp.read_forum IS NULL OR fp.read_forum=1) AND t.id=28508 AND t.moved_to IS NULL
0.00013	SELECT search_for, replace_with FROM punbb_censoring
0.00245	SELECT u.email, u.title, u.url, u.location, u.use_avatar, u.signature, u.email_setting, u.num_posts, u.registered, u.admin_note, p.id, p.poster AS username, p.poster_id, p.poster_ip, p.poster_email, p.message, p.hide_smilies, p.posted, p.edited, p.edited_by, g.g_id, g.g_user_title, o.user_id AS is_online FROM punbb_posts AS p INNER JOIN punbb_users AS u ON u.id=p.poster_id INNER JOIN punbb_groups AS g ON g.g_id=u.group_id LEFT JOIN punbb_online AS o ON (o.user_id=u.id AND o.user_id!=1 AND o.idle=0) WHERE p.topic_id=28508 ORDER BY p.id LIMIT 0,25
0.00070	UPDATE punbb_topics SET num_views=num_views+1 WHERE id=28508
Total query time: 0.00708 s

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

Informacje debugowania