Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css] Tło w divie
grzehotnik
post
Post #1





Grupa: Zarejestrowani
Postów: 76
Pomógł: 0
Dołączył: 8.01.2009

Ostrzeżenie: (0%)
-----


Witam
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>


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
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 2)
guilty82
post
Post #2





Grupa: Zarejestrowani
Postów: 176
Pomógł: 31
Dołączył: 26.03.2007

Ostrzeżenie: (0%)
-----


http://www.w3schools.com/Css/css_positioning.asp
Go to the top of the page
+Quote Post
grzehotnik
post
Post #3





Grupa: Zarejestrowani
Postów: 76
Pomógł: 0
Dołączył: 8.01.2009

Ostrzeżenie: (0%)
-----


Wielkie dzięki.
Przeczytałem i zmieniłem kod na:
Kod
div {
  background-image: url(image/glownezdjecie.jpg);
  position:absolute;
  overflow: hidden;
  top: 15%;
  left: 15%;
  right: 15%;
  bottom: 15%;}


Jest ok, ale obrazek został ucięty.
Da się zrobić tak, by został wyświetlony on w całości, ale dostosowany do parametrów określonych w stylach?
Czy przy tak określonym stylu DIV w różnych rozdzielczościach będzie wyświetlał się tak samo?

Określiłem szerokość obrazka za pomocą width i height i jest ok.
Ale mam problem z umieszczeniem textu w miejscu w którym chcę, tzn:
Mam styl:
Kod
.kategorie {
  position: absolute;
  margin-left: 15%;
  margin-top: 15%;
  word-spacing: 1px;}


Mam określone marginesy, w których mają się pojawiać jakieś elementy.
Jeśli position jest absolute lub fixed text pojawia się dokładnie tam gdzie chcę ale tak jakby jeden
wyraz nachodzi na drugi co sprawia, że jest nieczytelny.
Z position: relative tekt jest czytelny ale nie jest w miejscu określonym przez marginesy(pojawia się na początku).
Próbowałem też z left, top zamiast margin-lefi, margin-top, ale efekt jest ten sam.
Gdzie popełniam błąd?
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 21.08.2025 - 06:30