Pomoc w ustawienie diva

Dla specjalistów Webmastering
#1

kod css contentu:

#content-port{

    width: 960px;

    min-height: 200px;

    margin: 20px 0px;

}

i klasy diva, który znajduje sie w kontencie:

.port1{

    width: 280px;

    height: 280px;

    padding: 10px;

    margin: 0px 20px 20px 0px;

    float: left;

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);

}

Może ktoś mi powiedzieć dlaczego ten div ustawia się w środku, a nie całkiem z lewej strony ?

– Dodane 04.08.2013 (N) 1:04 –

Próbowałem w contencie dodać text-align: left; , lecz nie pomaga.

– Dodane 04.08.2013 (N) 1:08 –

Coś mi tu nie pasuje. W JsFiddle, div jest z lewej… Nie wiem o co tu biega… Dopowiem tylko, że wcześniej już miałem ten kod gotowy i było OK, ale cały plik się wyczyścił przypadkowo i musiałem wszystko od nowa no i musiałem coś teraz pomylić.

#2

Podany div jest z lewej strony… problem musi być wcześniej w kodzie którego nie pokazałeś.

#3

#content-port{

width: 960px;

margin: 20px auto;

min-height: 200px;

}

.port1{

width: 280px;

height: 280px;

padding: 10px;

margin: 0 auto;

border-radius: 3px;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);

}

Masz tutaj DIV wyśrodkowany : margin: 0 auto;

#4

Tak jest z lewej, ale w JsFiddle, ale na stronie to wygląda tak, jakby ten div nawet nie był w tym divie content, ponieważ div umieszcza się na środku strony a nie jego contentu. Po to dodałem float: left; lecz to nie pomaga, choć wcześniej(przed wykasowaniem się kodu wszystko było OK).

Tak środkuje się, ale wg strony a nie jego contentu. Tak jakby w ogóle go nie było…

– Dodane 04.08.2013 (N) 16:01 –

Ogólnie chciałbym mieć takie 3 divy w jednej linii, więc muszę dla 1 i 2 dodać float:left; 1 div bez floatu jest całkiem po lewej stronie, lecz gdy dodam float: left; to znowu idzie na środek ?! Wczesniej jakoś udało mi się to od razu a teraz z tym 1 divem takie dziwadła wychodzą, że gdy dodam właśnie float: left; to on ucieka od lewej strony…

#5

Więc twierdzisz, że nie wprowadziłeś nic co mogłoby przesunąć np. “content-port” na prawą stronę, choćby określenie marginesu lub obramowania dla body?

W czym siedzi ten “content-port”, ma rodzica lub nie ma czegoś obok niego, a może pozycjonowanie masz gdzieś ustawione?

Dajesz patyk, a my mamy zgadywać, z którego drzewa w lesie pochodzi… :wink: Puma, dobrze “mówi”, problem jest gdzieś w kodzie, którego nie podałeś, już na sam fakt, że wycinek z “fiddla” zachowuje się poprawnie, nawet jak się doda pozostałe dwa, “port2”, “port3” i podepnie się je pod kod css “port1”…

#6
#7
#8

@jacko1998, dodaj między tagiem zamykającym “header”, a otwierającym “content-port” poniższe:

[/code] Do pliku css dopisz:

[code].clear {clear: both;}
To powinno naprawić problem, który jest związany z float’em dla logo w nagłówku… Poza tym, jeśli chcesz lub możesz, połącz części wspólne dla “port1/2/3”, czyli:

.port1, .port2, .port3 {width: 280px; height: 280px; float: left;}

Wtedy oddzielne będą jedynie kolory tła:

.port1 {background: yellow;}

.port2 {background: blue;}

.port3 {background: red;}
#9

Dzięki, działa z tym clearem. Ale mógłbyś mi powiedzieć, jak to działa ? Dlaczego nie np clearfix ? Jak nie chcesz pisać to może podasz jakieś linki ? Dziękuje także krisp -owi, a także -Puma- ie za zaangażowanie.

#10

Po prostu resetuje poprzedzające ustawienie float… :wink:

Na nauczyciela się nie nadaję, może ta strona lepiej to objaśni.

Ogółem u Ciebie “logo” wychodzi poza nagłówek i “zahacza” o resztę, przez co wcześniej wypychało “port1”, a sam float liczony był od początku, czyli od “logo”… clearfix to zresetował. Ewentualnie można byłoby określić wysokość dla “logo”, ale nie wiem czy to nie przeszkadzałoby Tobie i nie prowadziło do innych problemów (testowo wysokość dla logo to 110px lub 160px ).

Nie rozumiem, chodzi Tobie czemu ten div nie ma klasy clearfix, czy o inną “metodę”? Bo w zasadzie to jest clearfix :wink:

Jeśli chodzi o pierwsze, to nazwa nie ma znaczenia, ważne by dany element miał w sobie “resetowanie”.

Jeśli chodzi o inną “metodę”, wybrałem tą, bo jest widoczna i łatwa do zastosowania, wystarczy że wstawisz w odpowiednim miejscu takiego div’a, a wszystko co pod nim, nie będzie się float’em przejmować…

Możesz też określić pseudo-element do resetowania pływania, ale to więcej roboty/pisania niż powyższa możliwość (dziw bierze, że w sieci nazywają to “mikro hakiem” ;)).

Jeśli chcesz, możesz również pozbyć się podanego wcześniej div’a oraz dopisku css i dodać clear: both; do “content-port” co da taki sam efekt, oczywiście nie zapominając o poprawkach w css’ie, które mogą wyglądać jak poniżej:

/*-- PORTFOLIO ! --*/

    .port1, .port2, .port3 {float: left; width: 280px; height: 280px; padding: 10px;}

    .port2, .port3 {margin-left: 20px;}

    .port1{background: yellow;}

    .port1:hover body {background: rgba(0, 0, 0, .5);}

    .port2 {background: blue;}

    .port2:hover body {background: rgba(0, 0, 0, .5);}

    .port3 {background: red;}

    .port3:hover body {background: rgba(0, 0, 0, .5);}[/code]

Z tym że jest to sposób “zakamuflowany” :wink: