Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] pociecie strony, jak?
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
maiza
Aktualnie edukuje się w sprawach HTML i CSS, także proszę o wyrozumiałość.

Posiadam taki o to darmowy, przykładowy szablon, który chce sobie pociać i zakodować w HTML 5 i CSS 3.0.

http://i62.tinypic.com/24oy8ph.jpg

1. Czy dobrze mi sie wydaje, czy CSS 3.0 pozwoli mi na zrobienie:

a) menu -> obramowanie gorne i dolne (te cienie, shadow)
cool.gif przyciski np. Purchase Now (aby uzyskac taki efekt?)
c) Co z kuleczkami od tzw. slidera? na srodku? Czy mam je wycinac jako obrazek czy moze da sie jakos je uzyskac przez CSS?
d) tak samo jak wyzej, przyciski More ?

2. Jesli dobrze mysle (pytanie wyzej), to jedyne co potrzebuje wyciac z layout'u, jest logo, obrazek z telefonem i obrazek pod "Welcome to Dark Template" ?

3. Chyba najwazniejsze pytanie, nie wiem jak za bardzo zabrac się, za MENU, tzn. probilem sobie juz divy w html'u, mam glowny container itp., aczkolwiek jak widac na szablonie, pasek od MENU, ktory
jest rozciagniety po całej stronie (nie konczacy sie) z lewej strony i prawej zmienia swoje krycie.. Mam to jakos wyciac jako obrazki? Czy jakos daloby sie to zrobic w CSS? Strasznie na tym utkwiłem, cholernie nie wiem jak do tego podejść..

Pomoże ktoś smile.gif ?

P.S. Wiem, jestem naabem, aczkolwiek wolę się dopytać kogoś kto ogarnia temat i mi wytłumaczy raz, a dobrze.. Żebym nie musiał zmieniać tego 5000 razy, bo źle zakoduje szkielet strony.. smile.gif
trueblue
1a-d. W CSS.
2. To co piszesz, choć logo jeśli takie pozostanie to też można zrobić nieobrazkowe.
3. Gradient od prawej do lewej z opacity 1 do 0, o kolorze tła strony.

Jest jeszcze kwestia odbicia przycisku "Purchase now", ale skoro będziesz go robił w CSS, to również ten gradient warto. Dla Chrome można robić idealne odbicia korzystając z dwóch właściwości CSS, ale są to właściwości tylko dla Chrome. Ze względu na pozostałe przeglądarki użyj gradient dla refleksu i odwrócony tekst z opacity.
maiza
Czyli tak jak myślałem. Aczkolwiek wróce tu jeszcze do MENU. Jesli chodzi o ten gradient.. jak to mam zrobić jeśli mam div zrobiony pod cala strone, container o stalej szerokosci, na srodku..., a zeby gradient szedl na 100% strony od lewej do prawej? Nie moge zrobic tego w tym divie, bo wtedy bedzie tylko o tej danej szerokosci, tj. 940px..

Bo mam np:

Kod
..
<div id="content">

<header id="LOGO"></header>
<nav id="MENU"></nav>
<section id="TRESC"></section>
<footer id="STOPKA"></footer>

</div>


Gdzie dla #content w CSS mam width: 940px i jest na srodku.. wiec automatycznie moje #MENU nie bedzie sie rozciagalo po calej stronie.. od lewej do prawej? Mam to wyciagnac z tego diva? Czy jak to zrobic?

Czy moze podzielic strone na 2 jakby containery ? tzn:

Kod
..
<div id="content1">

<header id="LOGO"></header>

</div>
<nav id="MENU"></nav>

<div id="content2>

<section id="TRESC"></section>
<footer id="STOPKA"></footer>

</div>


i dać #MENU width: 100% ?
trueblue
Jeśli #content nie jest pozycjonowany, to mógłbyś zostawić pierwszą strukturę, a #menu rozciągnąć pozycjonowanie absolutnym gdzie left=right=0;
Ale być może na przyszłość lepiej rozdzielić tak jak podałeś w drugim przykładzie.
W obydwu przypadkach do #menu trzeba wstawić nowy kontener i wycentrować go.
Widzę, że tam są dwa gradienty, możesz je utworzyć korzystając z selektorów :before i :after dla #menu.
maiza
Zrobiłem gradient w divie, jest ok, aczkolwiek mam problem z gornym i dolnym cieniem.. Mianowicie on tez zanika (w lewej i prawej stronie), tak jakby opacity schodzilo do 50% lub nizej..
Da sie jakos zrobic na border-top czy bottom jakies opacity z obu stron, a zeby na srodku bylo 100%? Czy jak to zrobic?
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-2025 Invision Power Services, Inc.