[CSS] Pozycjonowanie

[Slynx]

W CSS-a dopiero wchodzę i już przy pozycjonowaniu wypadł głupi błąd. Marginesy. Jakieś takie...gigantyczne. Tło jest jednego koloru, ale paski przewijania są. Zresztą. Tu jest kod.

<div align="center" style="position:relative"><img src="images/01.jpg" /></div>

<div align="center" style="position:relative; left:513px"><img src="images/05.jpg" /></div>

<div align="center" style="position:relative; top:-619px; left:103px"><img src="images/04.jpg" /></div>

<div align="center" style="position:relative; top:-655px; left:-297px"><img src="images/03.jpg" /></div>


<div align="center" style="position:relative; top:-1274px; left:-450px">

<link1><a href="1.html"></a></link1>

<link2><a href="2.html"></a></link2>

<link3><a href="3.html"></a></link3>

<link4><a href="4.html"></a></link4>

<link5><a href="5.html"></a></link5>

<link6><a href="6.html"</a></link6>

<link7><a href="7.html"</a></link7>

<link8><a href="8.html"</a></link8>

<link9><a href="9.html"</a></link9>

</div>


<div align="center" style="position:relative; top:-1274px; left:-450px"><img src="images/22.jpg" /></div>

<div align="center" style="position:relative; top:-1274px; left:-450px"><img src="images/23.jpg" /></div>

<div align="center" style="position:relative; top:-1344px; left:103px"><img src="images/24.jpg" /></div>

<div align="center" style="position:relative; top:-1550px; left:1px"><img src="images/06.jpg" /></div>

Dużo może z tego nie wynika. Wszystkie pliki graficzne (część w stylach,osobny plik) to layout strony, nie ma nic oprócz tego. Zdecydowanie przyczepił bym się do tego - "top:-1550px;". Chyba trochę za duże wartości. Najważniejsze było to, żeby przy różnych rozdzielczościach strona zawsze wyglądała tak samo. Dlatego dałem wszystko w "center". Wiadomo o co chodzi. I tu jest wszystko ok. Tylko te mega paski przewijania do niczego nie potrzebne, trzeba się pozbyć

P.S. Ale i tak muszę się pochwalić. Jak robiłem to miesiąc temu to ta sama stronka miała ponad 150 linijek, teraz tylko 30:D

[Shaker]

top:-1274px; left:-450px">

Powiesz mi skąd wynalazłeś minusowe? Taka monstrualna ta strona?

A jeśli chcesz by strona wyglądała zawsze tak samo to musisz to odpowiednio dostosować, czyli wyznaczyć do jakiej wysokości i szerokości ma się maksymalnie rozchodzić itd.

Po trzecie pokaż mi tą stronę, bo mam wątpliwości co do jej wyglądu Po prostu wstaw na jakiś serwis typu yoyo.pl

Moja próbna stronka, którą robiłem w CSS:

http://www.anime-inna.yoyo.pl/

[Slynx]

Minusowe wartości... no... jakoś tak dziwnie wyszło;p

Wiem w czym jest problem ale nie wiem jak to rozwiązać. Każdy kolejny "element graficzny" odnosi się do poprzedniego. Stąd wychodzą takie gigantyczne wartości. Można by zamiast relative użyć absolute...

Mniejsza.

Stronka wygląda tak jak powinna. Layout został zrobiony w Photoshopie, pocięty i ułożony (błędnie) przy pomocy CSS.

Co do Twojej stronki. 600 KB !!?? Myślałem, że to żart, ale to faktycznie tyle waży. Sorry, ale cała moja stronka jest TYLKO na grafice i waży 400 KB bez ŻADNYCH optymalizacji. Poza tym na Twojej stronce zauważyłem sporo kodu JavaScript, nakopiowany, dlatego trochę takiego "nieporządku" tam było. No, ale ja się nie znam;p

Jednak wyłapałem jedno. Position:Absolute. Czyli jednak. Ułożenie idealnie całej stronki nie jest żadnym problemem (ty masz tylko kilka grafik, ja układam sobie z "klocków"), chodzi tylko o to, żeby działała tak samo we wszystkich rozdzielczościach, a testować nie mogę z oczywistych powodów. To muszę wiedzieć.

Dlatego jest ten oto temacik;)

Więc spróbuję to przerzucić w absolute i wycentrować jako całość. Trochę to potrwa:/

[Shaker]

Wiem, że waży za dużo Próbna stronka, to powkładałem, by posprawdzać, jak wyjdzie. A javascript użyłem tylko do Nifty Corners, lecz sprawienie, by to działało graniczy z cudem ( Zaokrąglanie rogów)

Praktycznie mógłbym zrobić wszystko bez grafiki i wstawić prosty nagłówek, by było normalnie o wiele mniej KB

PS. Użyłem formatu .png i zbyt szczegółowych grafik, dlatego tak wyszło. Po drugie tam są nawkładane miniaturki tapet to się nie dziw...

A no i jeszcze jedno, stronkę robiłem na rozdzielczości 1024x768, a teraz mam na kompie 1440x900 i nie widzę dużej różnicy, czyli działa

[Slynx]

No i dobra, mam. Ostatecznie wyszło coś takiego:

<div style="position:absolute"><img src="images/01.jpg" /></div>

<div style="position:absolute; top:234px; left:1033px"><img src="images/05.jpg" /></div>

<div style="position:absolute; top:234px; left:314px"><img src="images/04.jpg" /></div>

<div style="position:absolute; top:234px; left:233px"><img src="images/03.jpg" /></div>

<div style="position:absolute; top:729px; left:8px"><img src="images/22.jpg" /></div>

<div style="position:absolute; top:782px; left:8px"><img src="images/23.jpg" /></div>

<div style="position:absolute; top:783px; left:314px"><img src="images/24.jpg" /></div>

<div style="position:absolute; top:270px; left:314px"><img src="images/06.jpg" /></div>

<all>

<div style="position:absolute; top:234px; left:8px">

<link1><a href="1.html"></a></link1>

<link2><a href="2.html"></a></link2>

<link3><a href="3.html"></a></link3>

<link4><a href="4.html"></a></link4>

<link5><a href="5.html"></a></link5>

<link6><a href="6.html"></a></link6>

<link7><a href="7.html"></a></link7>

<link8><a href="8.html"></a></link8>

<link9><a href="9.html"></a></link9>

</div></all>

Elegancko ułożone, ale wedle pozycji "absolute", wszystko "dociągnięte" do lewego górnego rogu. A teraz trzeba wycentrować (w poziomie).

Wiem, że poprzez CSS można ustawić też coś takiego, jak rozciąganie strony do rozdzielczości. Takiego czegoś oczywiście nie chcę. Tylko wycentrować (najwyżej będzie więcej tła po bokach;)).

Więc jak wycentrować to wszystko ? Objąć w jakiś jeden znacznik ? Czy dopisać coś w CSS ?

P.S. Ja na razie swojej nie wrzucam, bo z prędkością 2, max 3 kb wysyłania to by trochę potrwało. Dlatego się trochę wkurzyłem, bo żeś mi nieźle "dowałił" tymi 600 kb;p (net z komórki)

[Shaker]

No to teraz ładniej wygląda z tymi mniejszymi wartościami, bo te -1000, coś mi nie pasowało. Poszukam pliku .css od tamtej strony i udostępnię, byś mógł zobaczyć.

O tutaj masz mój plik css.css(daję cały, bo nie wiem za bardzo co może ci się przydać) :

*{margin:0; padding:0;}

body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:100%; margin:1em; background-image:url(tekstra1.png); background-repeat:repeat; text-align:center;}

#main_wrapper { max-width:1000px; min-width: 950px; margin-left:auto; margin-right:auto; text-align:left;;}

#menin { height:35px; max-width: 960px; min-width:none; font-weight:bold; background-image:url(meni.png); background-repeat:no-repeat;}

#menin_inner { font-weight:bold; }

#header { text-align:center;}

#nav {clear:both;width:180px; float:left; backgroundcolor: #337E97; }

#content { margin:0;margin-left:180px;}

#content1 { margin:0;margin-left:180px;}

#footer {margin:0; }

#menin_inner, #header_inner, #nav_inner, #content_inner, #promo_inner {overflow:hidden;}

#header_inner { padding:1em 2 em;}

#nav_inner { padding:1em .8em 23.5em .8em; text-align:center; line-height:2em; font-family:"Times Roman", serif; font-weight:bold;}

#content_inner { padding:2em 1em 5em 2em;}

#footer_inner { padding:.5em 1em; text-align:center;}

div#header_inner h1{ width:953px; text-align:center;}

.olive #nav{ background-image:url(men2.png);background-repeat:no-repeat;}

.olive #content{ height:510px; width:773px; background-repeat:no-repeat; background-image:url(ops1.png);}

.olive #content1{ height:auto; width:773px; background-image:url(ops1.png);}

.olive #footer{background-image:url(stopk.png); background-repeat:no-repeat;}

p3, p4, p5, p6{position:relative;}

p{font-wieght:bold;}

p2{ font-size:18px;}

h4 {text-align:center; font-weight:bold; font-size:18px; line-height: 2em;}

p3{ padding: 7px 0px 7px 0px; margin: 0px -3px 0em 0em; text-align:center; width: 25%; float:left; }

p4{ border-left:1px solid #CCB; padding: 7px 0px 7px 0px; margin: 0px -3px 0em 0em; text-align:center; float:left; width: 25%;}

p5{ border-left:1px solid #CCB; padding: 7px 0px 7px 0px; margin: 0px -3px 0em 0em; text-align:center; float:left; width: 25%; }

p6{ width:14px; border-left:1px solid #CCB; padding: 7px 0px 7px 0px; margin: 0px -3px 0em 0em; text-align:center; float:left; width: 25%;}

p7 {background-image:url(meni1.png); position:absolute; display:none; top: 30px; left:100px; width:130px; }

p8 {background-image:url(meni1.png); position:absolute; display:none; top: 30px; left:100px; width:130px; }

p9{ font-size:large;}

h6 { font-weight:bold; text-align:center;}

h1 {text-align:center;

p1 {font-size:14px;line-height:2em; font-weight:bold;}

img { border:medium; border-color:#999999;}

h3 { text-align:center; font-weight:bold; font-size:30px;}

a { color:#036; font-style:italic; font-weight:bold;}

a:link{ color:#000000;}

a:visited{color:#000000;}

a:hover{ color:#CCCCCC; text-decoration:none; }

PS. Wiem, że namieszane, no ale używałem jeden .css do dwóch stron w czasie pracy.

[Slynx]

Hmm... spamer. No wiesz. Tu... nic nie ma;) Straszny bałagan w tym pliku CSS. Na prawdę aż tyle było Ci tego potrzeba ?

Kombinowałem z tym.

<div align="center"> z tego co mi wiadomo używa się tylko do tekstowej części strony.

Znacznik <center> wyszedł już z "mody".

Pozycja relative odnosi się do każdego poprzedniego elementu, dlatego wyszły takie duże minusowe wartości i marginesy.

pozycja absolute nie ma sensu, bo dociąga do lewego górnego rogu. Byłoby ładnie ustawione, ale i tak trzeba by wyśrodkować.

Jeszcze parę innych kombinacji próbowałem ale nic z tego. A wiem, jestem pewien, że to jest banalne, że to jakiś idiotyzm, ale wpaść na to nie mogę

[Zap]

No i dobra, mam. Ostatecznie wyszło coś takiego:

<div style="position:absolute"><img src="images/01.jpg" /></div>

<div style="position:absolute; top:234px; left:1033px"><img src="images/05.jpg" /></div>

<div style="position:absolute;......... [..]

Niezły potwór. Dam sobie obie ręce uciąć, że można to zrobić znacznie prościej.

Co do centrowania - wrzucasz to co ma być centrowane do jakieś diva i nadajesz mu margin: 0 auto; i width: Xpx; (bez szerokości ci nie wyśrodkuje)

[Slynx]

Znowu przerobiłem. Jest krócej. Ale działa tak samo beznadziejnie;/

Nie wiem, nie mogę tego ustawić Jak się wkurzę to wrzucę to wszystko w tabelkę tak jak było i problem z głowy:/

Z tym pozycjonowaniem to jednak sporo problemów. Ciężko poukładać.

Jak na razie tu nie ma tekstu. Są tylko grafiki, które trzeba poskładać i to w tym jest problem:/

[Zap]

Bo sie za to zabrałeś od ..upy strony.

Jak chcesz koniecznie pozycjonować przez position: absolute / relative to na pewno nie tak jak to zrobiłeś. Poustawiałeś równorzędnym divom absolute, więc pozycjonuje ci względem krawędzi okna i tego nie przeskoczysz.

Musisz wstawić je wszystkie do innego diva, któremu ustawisz position: relative - teraz wszystko divy podrzędne będa pozycjonowane względem jego krawędzi (które okreslisz przez width i height)

Ustawiasz mu margin 0 auto, pos. relative i będzie działać. A jak nie to znaczy, że gdzieś jeszcze coś nakombinowałeś i bez zobaczenia działającej storny wiele sie z tym nie zrobi.

[Slynx]

Wiem o co Ci chodzi. Zrobiłem coś takiego, ale i tak są te marginesy. Ten cały layout jest po prostu do [beeep]. Czuje się jakbym składał stronę z jakiegoś kreatora. Wyrzucę to wszystko i zacznę to wszystko obstawiać czystym CSS. Innymi słowy - layout precz. Trochę to uproszczę. Zwykły, trzykolumnowy układ. Nie będzie wyglądać tak jak powinno, ale będzie krócej się ładować i da więcej możliwości późniejszej modyfikacji. Po zastosowaniu tego layutu cała strona byłaby na sztywno. Praktycznie każda zmiana elementu graficznego zmuszała by do wchodzenia w photoshopa, przygotowywania i pewni cięcia od nowa. Pomysł był dobry, ale wykonać ciężko (ludzkimi metodami). Tak więc na razie odlatuje i zacznę znów pisać od nowa;) Ale teraz już będzie łatwiej. Jak na to nie patrzeć. trzecia "stronka";p

[Slynx]

Hmmm... według mnie to layout został źle pocięty:/ Ciężko tak poustawiać. Powinno być warstwowo, łatwiej układać na stronce. A globalny div to dobry pomysł, relativem poukładać względem niego. Na razie jeszcze kombinuje z samą kompozycją strony, ale to już mam ok, wiem co było nie tak. Nie dało się tego ułożyć (normalnymi sposobami). Tak więc, temat rozwiązany.