Forum PHP.pl > [CSS]Nakładanie się dwóch obrazów tła na siebie.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Nakładanie się dwóch obrazów tła na siebie.

December

11.05.2011, 14:36:42

Witam,
chciałem uzyskać bardzo popularny efekt menu:

Kod

-----------------------------------------------
Menu:      |
Opcja 1    |    Coś tam
Opcja 2    |  odnośnie wybranej opcji
Opcja 3    |
------------------------------------------------

Coś takiego

Napisałem taki kodzik:

Kod

<c style="margin-left: 30px; float: left;">
<p style="color: white; background-image: url( tlo.gif);font-weight:700">Menu:</p>
<div>Bla</div>
<div>Bla</div>
<div>Bladawdwadwawa</div>
<div>Bla</div>
</c>

<blabla style="margin-left: 30px; ">
<p style="color: black; font-weight:700;background-image: url( tlo2.gif);text-align:center">Blabla:</p>
</blabla>

Zadowolony jestem, iż napis "Blabla:" wyśrodkowuję się względem tej reszty ekranu - bez menu, jednak obrazek tła, zamiast "być tłem" na swojej "arenie", wyświetla się od początku strony.

Zdjęcie:

http://iv.pl/images/91343285165789649398.jpg

Co można na to poradzić?

Mam jeszcze jedno pytanie, tutaj moje menu przybiera kształt najdłuższego tekstu w nim, a czy dałoby radę ustalić to na procenty? Np 20% szerokości od lewej - "pole" dla menu, reszta dla pozostałej części strony?

Proszę o odpowiedzi.

Pozdrawiam i dziękuję!
December.

Rid

11.05.2011, 15:00:13

Proszę spróbować w ten sposób:
w tagu body ustawić tło;
<body style="color: black; font-weight:700;background-image: url( tlo2.gif)>

gecior

11.05.2011, 15:46:42

Próbowałem zrozumieć o co chodzi, ale nie rozumiem problemu.

December

11.05.2011, 18:54:45

Chodzi o to, że wygląda to tak:

http://iv.pl/images/91343285165789649398.jpg

A jak bym chciał żeby wyglądało tak:

http://iv.pl/images/55549166477182930843.jpg

t_e_l

11.05.2011, 21:09:55

Nie wymyślaj cudów typu <c></c> czy <blabla></blabla> bo takiego czegoś w htmlu nie ma, nie można po prostu wpisać np div ?

Cytat

Zadowolony jestem, iż napis "Blabla:" wyśrodkowuję się względem tej reszty ekranu - bez menu, jednak obrazek tła, zamiast "być tłem" na swojej "arenie", wyświetla się od początku strony.

Wyświetla się tak bo nadałeś jednemu elementowi float a drugiemu już nie.

Co do rozmiarów... możesz je ustalić w px, lub w % jeżeli chcesz, a Twoje menu wygląda tak jak wygląda bo żadnych przecież nie określiłeś.

boro11

11.05.2011, 21:16:40

Dodaj w css:

[HTML] pobierz, plaintext 
	float: left;
	overflow: hidden;
[HTML] pobierz, plaintext

i ustal rozmiary divów

Tymi prostymi komendami określi jak mają być ustawione divy tzn. jeden obok drugiego.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.