|
TwojePC.pl © 2001 - 2024
|
 |
A R C H I W A L N A W I A D O M O Ś Ć |
 |
| |
|
Czy takie pozycjonowanie jest mozliwe w CSS? BŁAGAM o pomoc!!!! , kubazzz 22/11/06 01:23
nie mam juz powoli sily i mam chyba zbyt mala wyobraznie zeby polapac sie w tych relacjach.
pokaze o chodzi na przykladzie graficznym.
http://img296.imageshack.us/...876532985726lu5.gif
OBJASNIENIA:
bialego tlo to obszar wyswietlania strony w przegladarce.
czarne tlo to wlasciwy rozmiar strony [ustalony na stale na 800 pixeli]
zielone tlo to obrazek/logo/cokolwiek ktore ma byc konkretnie w tym miejscu, nie ma sie przewijac.
czerwone tlo to jakis inny obrazek, ktory w kodzie HTML jest dalej ale w jakis magiczny sposob ma sie znalezc w tym konkretnym miejscu i przykrywac fragment.
Cala strona ma sie zachowywac jak jedna dluga kartka, tzn przewijac normalnie, zadnych plywajacych elementow, to zielone i czerwone maja nie zmieniac pozycji wzgledem siebie.
Problem polega na tym ze tak naprawde to nie wiem jak sie do tego zabrac. Tzn zrobilem wersje, wszystko fajnie, ale wychodzi kupa.
Jest tez inny problem - chce aby strona, to czarne z tym zielonym, wysietlala sie od razu pod belka przegladarki. zeby to biale byl po bokach i nie wlazilo na gore. Udalo mi sie to osiagnac tylko w Operze i IE, ale Frajerfoks robi po swojemu i wyswietla zle.
Teraz obrazkowe zobrazowanie powyzszych problemow:
Problem z Firefoxem - wyswietla mi cala strone za nisko.
mam * {margin: 0; padding: 0;} i jest ciagle zle.
w Operze i IE jest dobrze, a w FF zle. i na ogol to z ta przegladarka sa najwieksze problemy.
Dokument mam w HMTL 4.01 strict, ale niechcaco wpisalem znaczniki </BR> i... FF zignorowal je calkowicie, podczas gdy IE i Opera zinterpretowaly jako <BR>, czyli prawidlowo. [pewno sie mozna klocic biurokratycznie, ze deklaracja byla inna i bla bla bla... ]
http://img83.imageshack.us/...76532985726ffmx8.gif
widzialem strony, ktore nawet w FF sie wyswietlaja od razu, ale nie wiem jak to jest zrobione, nie moge dojsc.
Drugi problem [glowny], czyli pozycjonowanie tych elementow.
Aby osiagnac taki wyglad jak opisalem, zrobilem jednego duzego DIV'a [ten czarny korpus strony] ktory ma width 800px i marginesy 0 auto 0 auto. i fajnie sie to wszystko wyswietla na srodku.
Ten zielony element zrobilem jako klase dla jednego naglowka.
display: block; width: 800px; height: 300px; top: 0px; i wyswietla sie dobrze.
Niestety nie mam absolutnie pojecia jak zrobic zeby ten czerwony element wsadzic na to zielone.
napisalem : display block; width 100px; height 30px; position roznie; top: 200px; left 0px;
Probowalem roznych kombinacji top i position absolute/relative/static, display block lub bez tego [probowalem tez usuwania tego znacznika z formatowania tego zielonego logo], nic kurde.
Albo konczy sie wyswietleniem tego pod tym logo , ale na pewno nie tyle ile okreslilem w top [200px].
http://img87.imageshack.us/...6532985726bl1uw4.gif [wyswietla sie tam gdzie zolte, a powinno byc tam gdzie czerwone]
..albo konczy sie wyswietleniem na dobrej [na oko] wysokosci od gory, ale od lewej pozycja jest okreslona wzgledem okna przegladarki, co nie ma kompletnie sensu w tym wypadku.
[W FF jest w ogole kaszana bo caly korpus strony jest o kilkanascie pikseli obnizony, to wtedy ten pozycjonowany element jest za wysoko na dodatek, bo top 200px tez jest wzgledem okna przegladarki]
http://img87.imageshack.us/...6532985726bl2po3.gif
[tak samo, zolte to pozycja jaka dostaje, czerwone to jaka powinna byc].
Ja nie smiem twierdzic, ze opanowalem perfekcyjnie CSS, nie mam duzego doswiadczenia, ale kur*a no to mialo byc przyjazne i logiczne. a tymczasem wiele rzeczy trzeba robic troche na okolo i przez to powstaje masa niejasnosci, ktorych przecietny samouk nie rozwiaze.
Pogubilem sie totalnie - nie wiem wobec ktorych elementow interpretowane jest pozycjonowanie, gubie sie w tych zaleznosciach typu >> div.korpus h1.banner a {....} - nie wiem czy np takie pisanie stylu okresla wobec ktorego elementu bedzie pozycjonowany.
Pokaze teraz schematycznie jak w kodzie html mniej wiecej to jest zapisane:
<style>
* {
margin: 0px;
padding: 0px;
border: none;}
div.korpus { width: 800px; margin: 0px auto 0px auto; }
</style>
<body>
<div class="korpus">
<h1 class="banner">TO ZIELONE</h1>
jakies <H2> ale bez pozycjonowania
<h3 class="czerwony_guzik">TO CZERWONE</h3>
inny tekst
</div>
To tylko oczywiscie schemat, zeby pokazac mniej wiecej relacje.
Od strony skladni jest wszystko poprawnie, nie ma literowek ani brakujacych nawiasow, srednikow itp.
Jesli ktos zna jakas dobra strone z opisem, albo konkretnie istniejaca strone z podobnym pozycjonowaniem za pomoca CSS, zebym mogl to zalapac.
Z gory bardzo dziekuje za pomoc.SM-S908 - proper , kubazzz 22/11/06 01:32
obrazek - mylaco wyszlo z tym bialym tlem.
http://img209.imageshack.us/...876532985726on3.gif - zamiast bialego, rozowe tlo.
a tu wersja FF
http://img138.imageshack.us/...6532985726ffuu1.gifSM-S908 - the magic word is... , Holyboy 22/11/06 02:20
background :)
"FF zignorowal je calkowicie, podczas gdy IE i Opera zinterpretowaly jako <BR>, czyli prawidlowo"
prawidlowo to sie zachowal FF :)Strength is irrelevant.
Resistance is futile.
We wish to improve ourselves. - keine magic words s'il vous-plait , kubazzz 22/11/06 02:25
lopatologicznie i po kolei jesli mozna:)SM-S908
- za duzo , Gierappa 22/11/06 06:40
czytania ;> zakreciles troche. Skup sie narazie na jednej przegladarce, potem zajmiesz sie innymi. Narazie skup sie np na ie.
zobaczylem pierwszy link i jesli dobrze rozumie: chcesz miec jeden mniejszy obrazek na drugim wiekszym tak? czy w jakiejs przegladarce dobrze ci wyswietla czy nie wiesz ogole jak to zrobic zeby dzialalo w jakiejkolwiek? - a coś takiego , rkowalcz 22/11/06 07:08
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/...D/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>aaaaaaaa</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<STYLE TYPE="text/css">
<!--
html {height: 100%;}
body {height: 100%; width:100%; margin: 0; padding: 0; font: normal 1em Verdana, Arial, Helvetica, sans-serif; background-color:#ffffff; color:#000000; text-align: center; }
img {border: 0;}
div.korpus { min-width: 800px; max-width: 800px; width: 800px; margin: 0 auto 0 auto; text-align: left; background-color:#3C4E66; position: relative; overflow: hidden; }
h1.banner {height: 105px; width: 100%; left:1px; background-color: green; overflow: hidden; margin: 0;}
h3.czerwony_guzik {position: absolute; top: 50px; left: 50px; right: 0; bottom: 0; width: 200px; background-color: red; height: 20px;}
-->
</STYLE>
</head>
<body>
<div class="korpus">
<h1 class="banner">TO ZIELONE</h1>
jakies H2 ale bez pozycjonowania
<h3 class="czerwony_guzik">TO CZERWONE</h3>
<p>inny tekst</p>
</div>
</body> - zacznij , celt 22/11/06 09:56
od podstaw - bo z tego co widze nie masz bladego pojecia o tym co robisz w CSS'ie (kup sobie kurs Mayera lub inna ksiązkę).
To tyle uwag krytycznych :)
Strona ze skadnia CSS'a: http://www.signs.pl/html/
Przyklad (div/span) - moze nie najlepszy, ale przynajmniej pokazuje jak rozkladaja sie elementy div/span :)
<html>
<head>
<title>Przykład wykorzystania CSS</title>
<STYLE TYPE="text/css">
body {margin: 0px; padding: 0px;}
.pierwszy {border: 1px solid black; height:300;
color: navy;}
span { border: 1px dotted blue;}
.divzn1 { border: 2px solid red; color: red;}
.divzn2 { border: 2px solid #009966; color: #009966;}
.divzn3 {border: 2px dotted #FF9900; color: #FF9900;}
.divzn4 {border: 2px dotted #993366; color: #993366;}
.spanzn {border: 2px solid green; width: 200px;}
</STYLE>
</head>
<body>
<div class="pierwszy">
<div class="divzn">
Pierwszy
</div>
<span>
Drugi
</span>
<span>
Trzeci
</span>
<span class="spanzn">
Czwarty
</span>
<div class="divzn2">
Piaty
<div class="divzn3">
Piaty - dodatek 1
</div>
<div class="divzn4">
Piaty - dodatek 2
</div>
<span>Jakis tam tekst</span>
</div>
</div>
</body>
</html>Everything should be made as simple as
possible, but no simpler - hmm , kubazzz 22/11/06 14:17
przeczytalem juz jedna ksiazke i do niej zagladam jak cos probuje zrobic. przejrzalem tez jakies kursy na necie.
ale mozliwe, ze nie wiem co robie, to jest jak ze wszystkim - poczytasz ksiazki, zdasz egzaminy, a w praktyce sie okaze ze nic nie umiesz i na byle czym wymiekasz.SM-S908 - oczywiście , celt 22/11/06 15:25
że liczy się praktyka - jak pójdziesz do pracy to powiesz też że przeczytałeś ksiązkę i zdaleś egzamin? ;)
Nie jestem jakim guru od CSS, ale zawsze zaczynam od prostych przykładów - a nie od razu jakiś super-hiper CSS z jakimś atrybutami które rozumiem w najlepszym razie "Tak sobie" (i nie jest to uwaga osobista, tylko ogóla że ludzie się za coś zabierają a wiedze o tym co będą robić maja jeszcze niewielką).
Powodzenia z CSS'em, a z tym bladym pojęciem to może przesadziłem :)
PS. taka rada - nim zaczniesz coś robić - sprawdz czy dany atrybut jest obsługiwany przez IE (np. min-height). Unikniesz przynajmniej przykrych niespodzianek (mówiąc bardzo eufemistycznie :)Everything should be made as simple as
possible, but no simpler - zawodowo , kubazzz 22/11/06 16:09
z css i html to ja mam wspolnego tyle co nic.
Robie to dla wlasnej potrzeby, dla konkretnej strony, ktora chce zrobic. Nie ukrywam, ze traktuje to jako wyzwanie. Z drugiej strony, nie bardzo mi sie widzi super szkolenie ze wszystkimi sztuczkami i pamieciowa znajomoscia css'a :)
Co by nie mowic - CSS jest pogmatwany. Fajnie sie zaczyna od prostych przykladow, ale poniewaz one sa proste to szybko to idzie i mam juz to za soba. poza tym proste przyklady sa na ogol nieprzydatne w rzeczywistosci [obojetne czy to jest css, czy php, czy statystyka albo medycyna] i trzeba siegac po te trudniejsze.
No ale dzieki za jakies wyjasnienia - btw, powiedz mi tylko czy to co ja chec osiagnac jest mozliwe css'em tylko, czy moze bede musial siegnac po jakies inne srodki ?SM-S908 - pewnie , celt 22/11/06 16:39
że da rade w CSS (+ elementy div/span) - tylko trzeba uwazac czy dobrze wyglada w innej przegladarce (niestety tej gorszej IE tez). Ja jak cos robie w CSS to testuje na Firefox i IE i jezeli sie cos rozjezdza to patrze do przykladow (np. tych ftp://ftp.helion.pl/przyklady/csswww.zip) - chociaz Meyer tez ma strony ktore sie rozjezdzaja (a jest expertem od CSS'a :)
Jak chce zobaczyc skladnie, to patrze na stronie na ktora juz ci podalem. Kiedys uzywalem programu TopStyle do CSS'a. Generalnie uzywam w miare podstawowych atrybutow: border, background, margin/padding (wyszczegolniajac np. margin-left itd), height, width, a:link, a:visited, position, color, przyjanajmiej wiem wtedy, że zadziala rowniez pod IE.Everything should be made as simple as
possible, but no simpler - tez takich uzywam , kubazzz 22/11/06 22:22
najprostszych. tak naprawde to mi wszystko psuje ten margines auto ktory 'centruje' korpus strony. bo gdyby tego nie bylo to dalbym position: static na te elementy ktore maja nakladac sie i nie byloby problemy. a tak musze zrobic pozycjonowanie wzgledne w stosunku do okna przegladarki i krawedzi ekranu, ale bezwzgledne wzgledem innych elementow.
i sie pogubilem.
mysle, ze to co chce zrobic to nie jest karkolomne, bo widzialem strone z bardzo podobnym kodem i w FF sie wyswietlalo tak jak mialo byc, ale w mojej stronie nie.
w ogole to ze wszystkich pzregladarek to Opera chyba ma najwieksze i najlepsze wsparcie CSS'a. Po prostu w Operze sie jeszcze nie zaskoczylem.SM-S908
|
|
|
|
 |
All rights reserved ® Copyright and Design 2001-2024, TwojePC.PL |
 |
|
|
|
