Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ustawienie grafiki poza ramą strony www
Pozycjonowanie i Optymalizacja > Projektowanie stron > HTML i CSS
essenemari
Witam kolegów smile.gif

Od dłuższego czasu chciałem zrobić coś takiego żeby, opisowo mówiąc, grafika wychodziła poza ramy strony. Idea mniej więcej wygląda jak tu. Dzisiaj w nocy siedziałem nad banerkiem i przedłużyłem sobie smugi w zakresie banera jak jest tutaj teraz będę myślał żeby te smugi (przedłużyć) wrzucić w jakiś sposób na background'a tak żeby zawsze trzymały się strony we wszystkich rozdzielczościach (po prostu żeby się nie rozjeżdżało). Próbowałem prostych metod ustawiania tych elementów graficznych, ale zawsze mi się dziadostwo rozjeżdżało na wsze strony. Znacie może jakiś sposób żeby nie trzeba było przebudowywać całego css i strony ?:>

Bardzo prosiłbym o jakieś wskazówki jak przyczepić (dowolną) grafikę do ramy strony przy pomocy css, bo z estetycznym aspektem sobie poradzę. Jeżeli rozwiązanie problemu jest banalne i uraziłem kogoś tym pytaniem to bardzo przepraszam smile.gif

Pozdrawiam i dziękuję.
zielony_gremlinek
dla diva z obrazkiem (tym Twoim logo) ustawiasz w css position:absolute i wartości dla left i top a dla diva w którym jest cała strona posiotion:relative i wtedy możesz tego diva z logo przesuwać jak Ci się podoba.
Np by wystawał ponad główną stronę z lewej to wystarczy dodatkowo ustawić np left:-30px i top:-30px i wtedy jest wysunięty poza główne pole div o 30px.
essenemari
CYTAT(zielony_gremlinek @ 11.11.09 - 19:12) *
dla diva z obrazkiem (tym Twoim logo) ustawiasz w css position:absolute i wartości dla left i top a dla diva w którym jest cała strona posiotion:relative i wtedy możesz tego diva z logo przesuwać jak Ci się podoba.
Np by wystawał ponad główną stronę z lewej to wystarczy dodatkowo ustawić np left:-30px i top:-30px i wtedy jest wysunięty poza główne pole div o 30px.


Tak też zrobiłem. To logo debiana specjalnie testowo podzieliłem na 3 części składowe żeby doświadczalnie przekonać się jak się grafiki będą zachowywać przy zmianach rozdzielczości. Niestety przy zmianach rozdzielczości nic się nie trzymało całości. Składowe obrazka oddaliły się od banera i od siebie (są na position:absolute), a strona delikatnie uciekła do środka, żeby "przystosować" się do nowej (większej) rozdzielczości. Dlatego zastanawiam się jak to zrobić żeby "scalić" grafikę ze strony (tutaj smugi z banera) z grafiką z poza strony (przedłużenie tych smug) tak żeby zawsze trzymały się razem. Możliwa jest taka operacja według Was, gdy strona już jest zbudowana?
zielony_gremlinek
zapomniałem dopisać, że jak pozycjonujesz diva, to muszą też być ustawione w pixelach wysokość i szerokość diva, masz tak ?
essenemari
CYTAT(zielony_gremlinek @ 11.11.09 - 20:12) *
zapomniałem dopisać, że jak pozycjonujesz diva, to muszą też być ustawione w pixelach wysokość i szerokość diva, masz tak ?


Tak, tak, parametry diva też ustalałem w taki sposób
KOD
#test1    {
    position: absolute;
    width: 25px;
    height: 82px;
        background: white url(bok.jpg) no-repeat;
    padding: 0;
    margin: 0;
    top: 10px; left: 2px;    
}

#test2    {
    position: absolute;
    width: 121px;
    height: 36px;
        background: white url(gora.jpg) no-repeat;
    padding: 0;
    margin: 0;
    top: 0px; left: 50px;    
}


i tutaj jest rozdzielczość niższa, tutaj wyższa i chodzi o dystans między obrazkami a stroną, który właśnie chciałbym zniwelować.
zielony_gremlinek
w złym miejscu umieściłeś diva z logo, jest pewno bezpośrednio w body więc pozycjonuje się względem body, czyli ustawiłeś odległość od krawędzi ekranu, a nie strony wyśrodkowanej, wrzuć diva z logo do diva ze stroną i tam ustaw ujemną odległość od lewej i od góry, wtedy będzie pozycjonowane na każdej rozdzielczości względem strony, a nie krawędzi ekranu.
Pamiętaj też, że div ze stroną ma mieć position:relative

Tak musi działać! smile.gif
essenemari
Działa!!!!!

Bardzo dziękuję za podpowiedzi smile.gif aż jestem ciekaw jak to będzie wyglądało jak poustawiam sobie te smugi smile.gif

jeszcze raz stokrotne dzięki smile.gif

Pozdrawiam gorąco
zielony_gremlinek
Super! smile.gif Powodzenia w tworzeniu smile.gif
essenemari
Ostateczny wygląd stronki wypadł mniej więcej tak No ale problemik pojawia się odwieczny dopasowania do przeglądarek. W FF, Opera, Chrome jest w miarę równo dopasowane (nie widać znaczących różnic na łączeniach), a w IE wszelkiej maści wygląda to fatalnie... Jakieś przesunięcie się zrobiło... :] ale... trochę kosmetyki powinno pomóc:)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2012 Invision Power Services, Inc.