GoldenLine
Zaloguj się
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: Efekt wystających elementów poza właściwy kontent strony

Witajcie

Zastanawiam się, jak wykonać w najprostszy sposób i zgodny ze standardami w3c xhtml efekt wystających elementów poza właściwy kontent strony. Hmm może przykład: http://www.supremus.torun.com.pl/ . Głowa posągu wystaje po za właściwy kontent.
Drugą sprawą jest fakt, żeby tak wystający element nie wpływał na wyśrodkowanie kontentu właściwego względem boków przeglądarki - kontent z treściami był cały czas wyśrodkowany.

Bardzo bym prosił o sugestie bo sam szczerze mam wątpliwości jak to dobrze i poprawnie zrobić.

Jakby coś było nie jasne, proszę pisać a postaram się wyjaśnić problem.

Pozdrawiam WasIvo Bogucki edytował(a) ten post dnia 27.03.08 o godzinie 12:19
Link do wypowiedziLink
Maciej Kuś

Maciej Kuś właściciel, ibex.pl

Temat: Efekt wystających elementów poza właściwy kontent strony

Witaj,

Ja bym to zrobił podobnie jak na stronie, którą podałeś (tyle, że bez tabelek), czyli:
div #page (ustalasz jakiś width np. 800px)
- div #header (jako tło grafika z tym efektem, który Cię interesuje)
- div #content
- div .inner (np. padding-left: 30px (tyle ile ta głowa wystaje))
--- tutaj już właściwa treść

mam nadzieję że pomogłem
Link do wypowiedziLink

konto usunięte

Temat: Efekt wystających elementów poza właściwy kontent strony

Zależnie od kontekstu - ale możliwości jest kilka do wyboru (padding kontenera zewnętrznego, ujemne marginesy, pozycjonowanie absolutne lub relatywne)...
Link do wypowiedziLink

konto usunięte

Temat: Efekt wystających elementów poza właściwy kontent strony

Waldek Mazurek:
Zależnie od kontekstu - ale możliwości jest kilka do wyboru (padding kontenera zewnętrznego, ujemne marginesy, pozycjonowanie absolutne lub relatywne)...

lub po prostu nagłówek szerszy o szerokość wystających elementów...
Link do wypowiedziLink
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: Efekt wystających elementów poza właściwy kontent strony

Hmmm, za moment sprawdzę w praktyce Wasze propozycje. Chwilowo zaspokoiłem się rozwiązaniem takim, że jako tło daje obraz o szerokości całego kontentu + szerokość wystającego elementu z lewej i + szerokość lewego wystającego elementu na prawą stronę. To w efekcie daje wyśrodkowany obraz, ale mankament jest taki, że ten plik waży najwięcej... no i w IE sie coś rozjeżdża...

atrybut style dla body wyglada mniejwięcej tak:
background: url(plik.gif) no-repeat top center;

Ale to rozwiązanie obciąża transfer, więc dam jeszcze znać czy mi sie udało...

Pozdrawiam,
Ivo
Link do wypowiedziLink
Przemek Szalko

Przemek Szalko iOS Developer + Full
Stack Developer

Temat: Efekt wystających elementów poza właściwy kontent strony

To jeszcze dorzucę jedną propozycję jako mix tego co powiedział Waldek.

Kontener => position: relative;
obrazek wewnątrz kontenera (wsystająca głowa):
position:absolute;
left: ujemna liczba;
z-index: większy niż z-index kontenera;

W sumie: pozycjonujemy kontener relatywnie względem strony, czyli tak jak się powinien ułożyć, natomiast to co w tym kontenerze pozycjonujemy statycznie ("absolutnie") względem kontenera. Jeśli damy ujemną pozycję, to element będzie wystawał z kontenera.

Uwagi:
1. Dla IE 6 trzeba podać z-index zarówno dla kontenera jak i elementu wewnątrz nim (to błąd IE).
2. Kontener nie może mieć overflow:hidden ani auto.
Link do wypowiedziLink

konto usunięte

Temat: Efekt wystających elementów poza właściwy kontent strony

Eee?

Jeśli to ma być "tak jak na tej stronie", to ... ekhm, wstydźcie się :-)

Proponuję prawy przycisk myszy na nagłówku, a potem wybrać z menu "pokaż obrazek tła" (w FF ... w IE chyba "zapisz obrazek tła", czy jakoś tak) - i wszystko stanie się jasne i oczywiste.

Do tego dodać należy ustawienie odpowiedniego paddingu w kontenerach, tak żeby treść zaczynała się tam gdzie trzeba i już.

-edit-

Polecam wtyczkę Web Developer do FireFoxa, odpalenie otaczania ramką elementów nad którymi znajduje się kursor zdecydowanie ułatwia podglądanie jak to zrobili inni ;-)Adam Doroziński edytował(a) ten post dnia 27.03.08 o godzinie 19:30
Link do wypowiedziLink
Maciej Kuś

Maciej Kuś właściciel, ibex.pl

Temat: Efekt wystających elementów poza właściwy kontent strony

:)

A ja polecam:
http://karmatics.com/aardvark/
Link do wypowiedziLink
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: Efekt wystających elementów poza właściwy kontent strony

Do Adam Doroziński:
Hmmm nie specjalnie chce aby banner był w takiej wersji jak na tej stronie-za dużo by ważył, poza tym chce żeby strona miała zoptymalizowane grafiki-nie więcej jak 10kb.

Do Przemek Szalko:
Nie jestem zwolennikiem z-index'ów...

...jeszcze nie miałem czasu sprawdzić w praktyce Waszych propozycji. Jak tylko coś wykombinuje, dam znać.

Pozdrawiam

PS Mam Web Developer'a :)Ivo Bogucki edytował(a) ten post dnia 27.03.08 o godzinie 23:09
Link do wypowiedziLink
Przemek Szalko

Przemek Szalko iOS Developer + Full
Stack Developer

Temat: Efekt wystających elementów poza właściwy kontent strony

Adam Doroziński:
Eee?

Jeśli to ma być "tak jak na tej stronie", to ... ekhm, wstydźcie się :-)

Nie wzorowałbym się jednak na tym jak to jak zrobili to na podanej stronie... Myślę że nie ma sensu równać w dół ;-)

Do Ivo:
Dlaczego?:-)Przemek Szalko edytował(a) ten post dnia 27.03.08 o godzinie 23:15
Link do wypowiedziLink

konto usunięte

Temat: Efekt wystających elementów poza właściwy kontent strony

Maciej Kuś:
:)

A ja polecam:
http://karmatics.com/aardvark/

To jeśli już, to rozszerzenie Web Developer dla Fx: https://addons.mozilla.org/en-US/firefox/addon/60 - przy tym Aardvark to zabawka...
Link do wypowiedziLink
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: Efekt wystających elementów poza właściwy kontent strony

Przemek Szalko:

Do Ivo:
Dlaczego?:-)

Dlatego, że IE i FF czasem mają problemy z priorytetami, trzeba nieźle namieszać, żeby to wyszło poprawnie. Mówię z mojego doświadczenia. Raz mi z-index działa tu i tam, a czasem tylko tam...

---

Ok Panowie, mam. Zrobiłem tak jak niektórzy polecali, pozycjonowanie relatywne i paddingi + floaty. Główny kontener powiększyłem z jednej strony o szerokość wystającego elementu, a z drugiej dałem padding o szerokości wystającego elementu. następnie wpisałem w niego diva z moim wystającym elementem, dałem mu relative i float left+wymiary. nastepnie dałem kolejnego kontenera z treściami(wpsiując go w główny kontener, zaraz pod divem z elementem wystającym)-dałem mu relative i float left+oczywiscie wymiary. I działa :)

Dziękuję wszystkim za pomoc!

Pozdrawiam, IvoIvo Bogucki edytował(a) ten post dnia 28.03.08 o godzinie 09:31
Link do wypowiedziLink
Maciej Kuś

Maciej Kuś właściciel, ibex.pl

Temat: Efekt wystających elementów poza właściwy kontent strony

Piotr Lewandowski:

To jeśli już, to rozszerzenie Web Developer dla Fx: https://addons.mozilla.org/en-US/firefox/addon/60 - przy tym Aardvark to zabawka...

:) Dlatego mam obie te "zabawki" :)
Link do wypowiedziLink

konto usunięte

Temat: Efekt wystających elementów poza właściwy kontent strony

Ivo Bogucki:
Ok Panowie, mam. Zrobiłem tak jak niektórzy polecali,

Pokażesz efekt? Bo jestem ciekaw, ile faktycznie udało się zaoszczędzić na wadze całości.
Link do wypowiedziLink
Przemek Szalko

Przemek Szalko iOS Developer + Full
Stack Developer

Temat: Efekt wystających elementów poza właściwy kontent strony

Ivo Bogucki:
Dlatego, że IE i FF czasem mają problemy z priorytetami, trzeba nieźle namieszać, żeby to wyszło poprawnie. Mówię z mojego doświadczenia. Raz mi z-index działa tu i tam, a czasem tylko tam...


E tam... Jakbyś miał jakiś przykład to podyskutujemy.
Ja nigdy nie miałem takiego problemu.

Popatrz na lightboxy thickboxy albo inne takie wyskakujące warstwy - to jest na z-index i jakoś działa poprawnie w każdej przeglądarce. Kwestia wprawy raczej :-)
Link do wypowiedziLink
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: Efekt wystających elementów poza właściwy kontent strony

Przemek Szalko:
Popatrz na lightboxy thickboxy albo inne takie wyskakujące warstwy - to jest na z-index i jakoś działa poprawnie w każdej przeglądarce. Kwestia wprawy raczej :-)
Zapewne tak, przyznaje Ci racje.

Efekt bym pokazał, lecz nie bardzo mogę :p a wszystko z przyczyn ściśle tajnych :)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj