[HTML] Graficzna ramka, rozciągalna

Witam!
Zamierzam zrobić sobie schludną stronę internetową i do tego potrzebuje stworzyć ramkę, która będzie wycentrowana, a jej krawędzie miałyby być graficzne.

Jak miałaby wyglądać ta ramka?
- góra, dół (rozpoczęcie i zakończenie ramki) obrazek o danej szerokości odpowiadający ramce.
- ramka zablokowana w danej szerokości, załóżmy 400 px
- jej boki powinny się rozciągać wraz z zawartością strony w dół (myślałem, by włożyć w tło tej ramki po prostu obrazek na szerokość jej odpowiadający)
- w miarę możliwości żeby była wycentrowana na szerokość (na wysokość nie, gdyż nad ramką pojawi się logo, a treść ramki będzie się zmieniać)

Sama ramka miałaby wyglądać mniej więcej w ten sposób:
https://i.imgur.com/m0FHxVM.png

Mógłby mi ktoś pomóc z takim kodem?

Jeżeli szerokość stała to po prostu dzielisz sobie na 3 obrazki
góra
środek
i dół

Robisz sobie 3 divy góra, środek, dół (ładujesz to w jakiś container i centrujesz) we wszystkich z nich background image ustawiasz odpowiednie, w środkowym dodajesz repeat y, ustawiasz odpowiedni padding żeby treść nie wchodziła na grafike i gotowe.
możliwe że coś zapomniałem, ale ogólnie taka jest koncepcja :P

A mógłbyś mi to jakoś zobrazować w kodzie? Wystarczy, że wpiszesz w url każdego obrazka, który ma być to sobie później wstawię tą tabelę jak trzeba. :D

A w css do boxa dodajesz CSS3:

Cytuj:

{
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

Cytuj:

Mari napisał

A w css do boxa dodajesz CSS3:

Chodzi o to, że zależy mi, aby to było oparte na obrazkach, niekoniecznie na cieniach kodowych.
Tą ramkę robiłem na szybko, ona będzie w rzeczywistości wyglądać nieco inaczej. :)

Podziel sobie na obrazki tylko ;p

#edit
a no i opcja z CSS3 jest najlepsza, ale jak chcesz.

Kod HTML:

<html> <head> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="container"> <div id="top">   </div> <div id="mid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in sodales lectus. Pellentesque consequat aliquet est, non laoreet purus sodales ac. Phasellus urna dolor, tincidunt nec posuere vitae, tempus et eros. Suspendisse viverra commodo nisl, id accumsan neque tempus vel. Pellentesque tristique nunc non magna pellentesque ornare. Curabitur quis metus id leo vehicula porta. Nam eget quam at dui bibendum porttitor. Pellentesque id sapien scelerisque, adipiscing turpis eu, mattis lectus. Duis ac lacus convallis, lobortis ipsum et, vestibulum elit. Donec non tortor et tortor rutrum ullamcorper sed a dui. Donec eu velit sollicitudin dui lacinia consectetur. Aliquam quis arcu interdum, tincidunt mi ac, ornare nisl. Nam aliquet, orci eget posuere hendrerit, quam ligula sagittis risus, semper ultrices purus massa sit amet nisl. Vestibulum adipiscing vel metus eget pellentesque. Donec sed nisi eu urna facilisis pellentesque sit amet a lorem. Sed porta, nibh eget ornare pellentesque, magna arcu vehicula massa, ut tempus tortor velit euismod purus.</div> <div id="bot">   </div> </div> </body> </html>

Kod:

body { margin: 0; padding: 0; } #container { margin: auto; width: 400px; display: block; } #top { background: url('top.png'); /* obrazek góry ramki */ display: block; width: 400px; height: 20px; } #mid { background: url("mid.png") repeat-y; /* obrazek środka ramki */ padding: 0 20 0 20; } #bot { background: url("bot.png"); /* obrazek dołu ramki */ display: block; width: 400px; height: 20px; }

Cytuj:

joozioom napisał

Podziel sobie na obrazki tylko ;p

#edit
a no i opcja z CSS3 jest najlepsza, ale jak chcesz.

Kod HTML:

<html> <head> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="container"> <div id="top">   </div> <div id="mid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in sodales lectus. Pellentesque consequat aliquet est, non laoreet purus sodales ac. Phasellus urna dolor, tincidunt nec posuere vitae, tempus et eros. Suspendisse viverra commodo nisl, id accumsan neque tempus vel. Pellentesque tristique nunc non magna pellentesque ornare. Curabitur quis metus id leo vehicula porta. Nam eget quam at dui bibendum porttitor. Pellentesque id sapien scelerisque, adipiscing turpis eu, mattis lectus. Duis ac lacus convallis, lobortis ipsum et, vestibulum elit. Donec non tortor et tortor rutrum ullamcorper sed a dui. Donec eu velit sollicitudin dui lacinia consectetur. Aliquam quis arcu interdum, tincidunt mi ac, ornare nisl. Nam aliquet, orci eget posuere hendrerit, quam ligula sagittis risus, semper ultrices purus massa sit amet nisl. Vestibulum adipiscing vel metus eget pellentesque. Donec sed nisi eu urna facilisis pellentesque sit amet a lorem. Sed porta, nibh eget ornare pellentesque, magna arcu vehicula massa, ut tempus tortor velit euismod purus.</div> <div id="bot">   </div> </div> </body> </html>

Kod:

body { margin: 0; padding: 0; } #container { margin: auto; width: 400px; display: block; } #top { background: url('top.png'); /* obrazek góry ramki */ display: block; width: 400px; height: 20px; } #mid { background: url("mid.png") repeat-y; /* obrazek środka ramki */ padding: 0 20 0 20; } #bot { background: url("bot.png"); /* obrazek dołu ramki */ display: block; width: 400px; height: 20px; }

Dzięki, o to mi chodziło. A jak to wyrównać w pionie? W poziomie już mi się udało po drobnej zmianie kodu.

http://blog.atena.pl/centrowanie-w-pionie-za-pomoca-css