[HTML] Graficzna ramka, rozciągalna

JaToOgarne OP · 20-12-2013 17:15

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:

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

joozioom · 20-12-2013 17:24

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

JaToOgarne OP · 20-12-2013 17:37

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

Mari · 20-12-2013 17:37

A w css do boxa dodajesz CSS3:

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

JaToOgarne OP · 20-12-2013 17:43

Mari napisał

Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.

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. :)

joozioom · 20-12-2013 18:10

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"> &nbsp; </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"> &nbsp; </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;
}

JaToOgarne OP · 20-12-2013 21:59

joozioom napisał

Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.

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"> &nbsp; </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"> &nbsp; </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.

joozioom · 21-12-2013 11:48

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

Temat: [HTML] Graficzna ramka, rozciągalna

Narzędzia tematu

Oceń ten temat

[HTML] Graficzna ramka, rozciągalna

Informacje o temacie

Użytkownicy przeglądający temat

Podobne tematy

[CSS] ramka w okół obrazków.

Strona internetowa w HTML

Przekierowanie index.html na inny katalog

[HTML] Obraz a po kliknięciu pełna wersja.

Zakładki

Zakładki

Zasady postowania