[CSS] Stworzenie belki na stronie

Dla specjalistów Webmastering
#1

Mam takie 3 obrazki nazwane poniżej lewo, center, prawo.

941751a38c97d4c6df64fafd7717726f.png

Chciałbym z tych 3 elementów zrobić rozciągającą się belkę. Lewa i prawa część nie może się powtarzać, za to środkowa musi się powtarzać. Z tego, co aktualnie zrobiłem to właśnie środkowa część przykrywa lewo i prawo. Czy można zrobić tak, aby środkowa część doszła tylko do części lewej i prawej nie przykrywając ich? Ewentualnie obciąć z lewej i prawej strony po X pixeli.

Mój CSS: 

background-image: url(lewo.png), url(center.png), url(prawo.png);
background-position: left, center, right;
background-repeat: no-repeat, repeat, no-repeat;
#2

Dla przykładu header:

header {
    width: 100%;
    height: 50px;
    background-image: url(left.png), url(right.png), url(center.png);
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: 0 0, 100% 0, 0 0;
}

Nadajesz height taki sam, jakie mają img (no chyba, że sobie w CSS manipulujesz), ważne jest dla background-image, aby nadać odpowiednią kolejność img, aby się nie przykrywały.

 

Nie lepiej użyć gradient wraz z border-radius? Ewentualnie zaczytaj tylko 1 img - ten środkowy i nadaj mu border-radius, albo skorzystaj z CSS Sprite, aby nie zaczytywać 3 obrazków.

 

Edit : Zmieniłem nazwy zdjęć i uprościłem ścieżkę do nich.

#3

gradient przycina na starszych komputerach. A co do grafiki, powinien być 1px szerokości, tak tylko marnujesz transfer i możeci ładnie wystawać przy niektórych szerokościach ekranu.

#4

Tak, środkowa część ma 1px, ale tutaj rozciągnąłem, aby pokazać, o co mi chodzi :wink:

Sposób @kacztery nie zadziałał. Środkowa część znowu wjechała nad lewy i prawy bok.

Lewy i prawy bok jest idealnie po 2 końcach strony. Może można tak zrobić, aby odjąć powtarzanie od szerokości tych dwóch końcowych boków? Wtedy cel zostałby osiągnięty.

Na tej belce będzie napis. Może łatwiej byłoby, aby część środkowa rozszerzała się względem długości napisu czy to za wysokie progi? :smiley:

#5

Najprościej

<!doctype html>
<head>
    <meta charset="utf-8">

    <title>title</title>

    <style>
	#belka {
		height: 62px;
		width: 90%;
		overflow: hidden;
	}
	#belka .left {
		width: 23px;
		height: 62px;
		background: url(left.jpg) no-repeat;
		float: left;
	}
	#belka .center {
		width: 300px;
		height: 62px;
		background: url(center.jpg) repeat-x;
		float: left;
	}
	#belka .right {
		width: 23px;
		height: 62px;
		background: url(right.jpg) no-repeat;
		float: left;
	}
    </style>

</head>
    <body>
        <div id="belka">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
        </div>

    </body>
</html>
#6

Teraz bardzo ładnie to wygląda, w dodatku będzie się rozciągało względem długości tekstu. Dzięki! :smiley:

A teraz chyba ostatnie pytanie: jak zrobić, aby belka wylądowała na środku?

#7

wersja bez obrazków w tle (według mnie lepsza):

<!doctype html>
<head>
    <meta charset="utf-8">

    <title>title</title>

    <style>
	#belka {
		height: 62px;
		width: 50%;
		-webkit-border-radius: 18px;
                -moz-border-radius: 18px;
                -o-border-radius: 18px;
                border-radius: 18px;
		background: #5a3334; /* przeglądarki nie wspierające gradientu */
		background: -moz-linear-gradient(top, #5a3334 0%, #1f0305 50%, #5a3334 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a3334), color-stop(50%,#1f0305), color-stop(100%,#5a3334));
		background: -webkit-linear-gradient(top, #5a3334 0%,#1f0305 50%,#5a3334 100%);
		background: -o-linear-gradient(top, #5a3334 0%,#1f0305 50%,#5a3334 100%);
		background: -ms-linear-gradient(top, #5a3334 0%,#1f0305 50%,#5a3334 100%);
		background: linear-gradient(to bottom, #5a3334 0%,#1f0305 50%,#5a3334 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a3334', endColorstr='#5a3334',GradientType=0 );
    </style>

</head>
    <body>
        <div id="belka">
        </div>

    </body>
</html>