[CSS][HTML] pociecie strony, jak? Opcje

[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)
(IMG:style_emoticons/default/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ś (IMG:style_emoticons/default/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.. (IMG:style_emoticons/default/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% ?

Ten post edytował maiza 24.10.2014, 19:07:20

[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?