Robię stronkę która ma w centrum obrazek (tło).
Na górze i na dole tego obrazka jest linia (inny obrazek);
W moim kodzie:
Kod
<html>
<head>
<title>Przykład stylów</title>
<STYLE TYPE="text/css">
.liniatop {
position:absolute;
visibility: visibility;
top: 10%;
left: 25%;
z-index:2;}
.liniabottom {
position: absolute;
visibility: visibility;
bottom:10%;
left:25%;}
.tlo {
position:absolute;
visibility: visibility;
top: 15%;
left: 15%;
bottom: 15%;
width: 50%;
height: 50%;}
</style>
</head>
<body bgcolor = "#000000">
<SPAN class="liniatop">
<img src="image/linia_top.gif">
</SPAN>
<div class="tlo">
<font color="white">tekst na rysunku</font>
<img src="image/tlo.jpg">
</div>
<SPAN class="liniabottom">
<img src="image/linia_bottom.gif">
</SPAN>
</body>
</html>
<head>
<title>Przykład stylów</title>
<STYLE TYPE="text/css">
.liniatop {
position:absolute;
visibility: visibility;
top: 10%;
left: 25%;
z-index:2;}
.liniabottom {
position: absolute;
visibility: visibility;
bottom:10%;
left:25%;}
.tlo {
position:absolute;
visibility: visibility;
top: 15%;
left: 15%;
bottom: 15%;
width: 50%;
height: 50%;}
</style>
</head>
<body bgcolor = "#000000">
<SPAN class="liniatop">
<img src="image/linia_top.gif">
</SPAN>
<div class="tlo">
<font color="white">tekst na rysunku</font>
<img src="image/tlo.jpg">
</div>
<SPAN class="liniabottom">
<img src="image/linia_bottom.gif">
</SPAN>
</body>
</html>
Linie zarówno dolna jak i górna mają określone odległości od krawędzi gornej i dolnej,
których się trzymaja.
Natomiast obrazek, który też ma ściśle określone marginesy wykracza poza nie i poza linię dolną.
Jak ustawić ten obrazek pomiędzy tymi liniami na środku ekranu bez możliwości zmiany jego pozycji w zależności od rozdzielczości ekranu?
I jak wstawić tekst na tym obrazku (tlo.jpg), lub inne elementy?
Jak teraz wstawiam tekst to jest on , albo na górze, albo na dole zdjęcia, choć wstawiam go w odpowiednie divy.
Dzięki