Znak wodny - Kurs CSS/HTML :: plikigrafiki.com

zamiknij X

[CSS][HTML] Przykład na znak wodny pod tekstem.

Ostatnio zastanawiałem sie jak umieścić znak wodny pod jakimś tekstem.

Standartowo każdy z nas pomyślał by o takim rozwiązaniu: #blok -> #znak_wodny -> #tekst.

Postanowiłem więc tak zrobić ale efekt nie był zadowalający, Przykład:

1
2
3
4
5
6
7
8
9
10
10
12
13
14
15
16
17
18
19
20

#blok{
position: relative;
height: auto;
width: 400px;
background:yellow;
}
#znak_wodny{
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 150px;
background:red;
}
#tresc{
position: relative;
margin:10px;
width: 380px;
height: auto;
}

Tak wygląda kod CSS. #blok i #tresc mają "position: relative;" a dla #znak_wodny ustawiłem absolute.

1
2
3
4
5

<div id="blok">
<div id="znak_wodny"></div>
<div id="tresc">
Lorem ipsum dolor sit amet ...
</div></div>

CSS i HTML gotowy. Teraz zobaczmy efekt.

Przykład #1:

znak1

Niby fajnie, wszystko jest jak należy. Ale... Co stanie się jeśli tekst będzie mniejszy ?!

Przykład #2:

znak2

No i wszystko nie tak jak trzeba. Nasz "znak wodny" został na swoim miejscu i nie ma pod nim tła

Height auto niszczy nam cały efekt bo #tresc musi minimum być do wysokości konca #znak_wodny. Jak sie pozbyć tej dziury? A może zrobić "oszusta"?

Zróbmy więc "oszusta". Czyli umieśćmy #blok w #blok_oszust i zobaczmy jaki efekt uzyskamy.

1
2
3
4
5
6
7
8
9
10
10
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#blok_oszust{
position: relative;
height: 300px;
width: 400px;
background:yellow;
}
#blok{
position: relative;
height: auto;
width: 400px;
background:yellow;
}
#znak_wodny{
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 150px;
background:red;
}
#tresc{
position: relative;
margin:10px;
width: 380px;
height: auto;
}

Dla #blok_oszust ustawiamy już stałą wysokość. A w HTML zawieramy wszystko w tym Div'ie.

1
2
3
4
5
6
7
8

<div id="blok_oszust">
  <div id="blok">
    <div id="znak_wodny"></div>
    <div id="tresc">
      Lorem ipsum dolor sit amet ...
    </div>
   </div>
</div>

Efekt? Zerknijćie:

Przykład #3:

znak1

Tu mamy efek taki sam jak za pierwszym razem.

Przykład #4:

znak2

Ale tu już widzimy zmiane. już nie ma auto wysokośći więc reszta pola jest zapełniona do konca wysokośći #znak_wodny.

Całkiem prosty sposób na uzyskanie znaku wodnego. Na koniec efekt finalny tego kodu.

Przykład #5:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sedas do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sedas do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Autor: Łukasz Lewak (LiON_87)

Potrafisz napisać lepszy kurs? Pokaż to!

Pokaż jak Ty rozwiązałbyś ten problem lub inny dowolny przez Ciebie wybrany. Przygotowany kurs wraz z imieniem i nazwiskiem wyślij na adres admin.myme[at]gmail.com. Jeżeli uznamy kurs za ciekawy ukaże się on na naszej stronie.

Komentarze

Dodaj komentarz

o stronie | regulamin | formularz