Avatat uczy się HTML/CSS i oczekuje porad od mastahów :)

[t4t4v4 3]

Hej,
zaczynam rzeźbić od zera w HTML'u i CSS'ie. Prosiłbym znawców tematu, aby sprawdzili i wskazali popełnione przeze mnie błędy.

Pierwsza sytuacja: div #osczasu (w środku docelowo oś czasu Twarzoksiążki) zetknięty z div'em #przyciski (docelowo pionowy paskiem przycisków) - to wszystko razem wyśrodkowane: http://fiddle.jshell.net/aR4GL/
Czy typy pozycji są poprawne? Czy da się to zrobić prościej?

Edytowano Wrzesień 28, 2013 przez Avatat (zobacz historię edycji)

[dom 30]

A co dokładnie chcesz osiągnąć? Masz dziwnie rozwiązane.

#srodek ma atrybut width:500px;

 

To co w środku ma dokładnie 500px, więc jak ma się nie stykać jak zajmuje 100% powierzchni #srodek ?

 

Ja na twoim miejscu nie używałbym position:absolute kiedy nie jest to wymagane.

Ja bym zostawił styl css w takiej formie:

#srodek {
	height: 400px;
	width: 500px;
	border: 1px dotted #000;
    overflow: hidden;
    margin:0 auto;
}
#przyciski {
	height: 400px;
	width: 64px;
	float: right;
	background-color: #03F;
}
#osczasu {
	height: 400px;
	width: 436px;
	float: left;
	background-color: #0F0;
}

I ewentualnie dodał margines górny na #srodek.

[t4t4v4 3]

To właśnie ma się stykać

Chciałem pozycjonować relatywnie, jednak nie wiedziałem jak wyśrodkować #srodek w pionie..

[dom 30]

Aby środek idealnie w pionie wyśrodkować trzeba użyć javascript. Obliczyć wysokość przeglądarki, następnie odjąć od wysokości przeglądarki wysokość okno , kolejno dodać odpowiednie marginesy od góry (zazwyczaj to co zostanie /2 i zostanie margines odgórny).

[t4t4v4 3]

Właśnie.. Dlatego nie lepiej zrobić to absolutnie i uniknąć takich "problemów"?

[dom 30]

Teoretycznie można, ale brzydko to wygląda.

[maniack 403]

.

Edytowano Wrzesień 13, 2017 przez maniack (zobacz historię edycji)

[dom 30]

Maniack, żadna bzdura, lecz jeżeli masz już zmieniająca się wysokość/szerokość okna i chcą ją idealnie na środku ułożyć to tylko z javascriptem. Pozycja absolutna przy oknie, zmieniającym wysokość nie będzie działała tak jak chcemy bo musimy ustalić margines od górny, który równa się dzielnikowi okna który przesuwamy, więc coś nam musi obliczać wysokość tego okna.

 

Jak widzisz w liku powyżej co podałeś jest dodane, a nawet wytłuszczone "only requires a declared height*"

[maniack 403]

.

Edytowano Wrzesień 13, 2017 przez maniack (zobacz historię edycji)

[t4t4v4 3]

Maniack, w przypadku absolutnego nie trzeba jak widać stosować żadnego JS'a. Dom pisze o pozycjonowaniu relatywnym i użyciu JS'a do wyśrodkowania w pionie.

Dlaczego przyciski nie chcą się wyśrodkować wewnątrz div'a #przyciski? Wymiary zostały określone, pozycjonowanie relatywne, marginesy prawo-lewo automatyczne..

[dom 30]

Maniack, Powiedz mi, jak chcesz wyśrodkować inaczej niżeli nie przy użyciu JS okna, które ma zmienną wysokość na innych stronach ? Zaproponuj więc takie rozwiązanie

[maniack 403]

.

Edytowano Wrzesień 13, 2017 przez maniack (zobacz historię edycji)