Witam,
Jak za pomocą css zrobić tak, żeby te 2 obrazki




znajdowały się w tle tego obrazka:



A ma to wyglądać tak:

więc wsadzasz to wszystko w div'a któremu nadajesz background-image z pierwszego obrazka, później ustawiasz dla input text też tło obrazkowe i podobnie czynisz dla submita i wsio.

Wiem ;]
Tylko chodzi mi jak ma wyglądać css, żeby button szukaj MP3 był w tym miejscu co poniżej itp.

masz taki na szybko pseudo kod:

[HTML] pobierz, plaintext 
<style type="text/css">
div
{
    background-image: url(obrazek.jpg);
}
.pole
{
    border: 0;
    background-image: url(obrazek.jpg);
    color: yellow;
}
.send
{
    background-image: url(obrazek.jpg);
    border: 0;
}
</style>
 
<div>
<input class="pole" type="text">
<input class="send" type="submit">
</div>
[HTML] pobierz, plaintext 

więcej nie dostaniesz wysil się.

A jesli mam plik .css nastepujący:

[HTML] pobierz, plaintext 
#tlos {
	background-image : url('img/wyszukiwara.gif');
	height : 53px;
	width : 497px;
}
#sz {
	background-image : url('img/szukaj.gif') ;
	height : 33px;
	width : 109px;
}
[HTML] pobierz, plaintext 

A divy dałem tak

[HTML] pobierz, plaintext 
<div id="tlos"></div><div id="sz"></div>
[HTML] pobierz, plaintext 

To nie wyswietla poprawnie

Jak mam dać, żeby szukaj był umieszczony po prawej stronie?


Dałem tylko na razie 2 obrazki czyli tło i button szukaj.

poczytaj o display: inline lub float: left, right ... tutaj bym proponował zastosować float: left na obu i marginesami wyrównać ...

jakie div'y?
Kolega piotrooo89 napisał najlepsze rozwiązanie a Ty już próbujesz zamieniać inputy na div'y. Zaraz następny temat będzie "onclick i funkcja nie działa dla div'a" ? W formularzu stosujemy pola input itp. Div do tego w żadnym wypadku nie służy.

Jak zrobić, żeby nie zaznaczało się to co widoczne na fotce
Jak zrobić, żeby nie wyjeżdżał teks pisany na zielono poza tamten obszar.
Jak zrobić, żeby nie wyświetlało się zaznaczone/napisane na fotce "to"
Jak zlikwidować napis "Wyślij zapytanie"
Pozdrawiam

Jak zrobić, żeby nie zaznaczało się to co widoczne na fotce.

- Proponowałbym zastosować tutaj css czyli np. zamiast <img src=""> dać <a href="#" style="background: url('adres-obrazka.jpg'); width:xxpx; height: xxpx;">


Jak zrobić, żeby nie wyjeżdżał teks pisany na zielono poza tamten obszar

- Ustaw max-width: xxpx;

Jak zrobić, żeby nie wyświetlało się zaznaczone/napisane na fotce "to"
background: no-repeat;


Jak zlikwidować napis "Wyślij zapytanie"

pewno masz tam <input type="submit"> dodaj <input type="submit" value="" />

Jak mam to zrobić tak, żeby było tak jak na sccreanie:


kod css:

[HTML] pobierz, plaintext 
#wyszukiwara {
	background-image : url('images/wyszukiwara.gif');
	display:inline-block; 
	margin : 0px 0px 0px 0px;
	background-repeat : no-repeat;
	height : 57px;
	width : 483px;
}
#poletekst {
	border: 0px;
	height : 33px;
	width : 344px;
	color: green;
	padding : 8px 0px 0px 10px;
	margin : 10px 0px 0px 5px;
}
#poletekst input{
	background-image:url(images/poleteks.gif);
	background-repeat: no-repeat;
	border: 0px;
	max-width: 344px;
	height : 33px;
	width : 344px;
	color: green;
	padding : 0px 0px 0px 10px;
}
#szukaj{
	border: 0px;
	height : 33px;
	width : 110px;
	margin : 10px 0px 0px 5px;
 
}
#szukaj input{
	background-image: url(images/szukaj.gif);
	background-repeat: no-repeat;
	border: 0px;
	height : 33px;
	width : 110px;
	margin : 10px 0px 0px 5px;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id = "wyszukiwara"><div id = "poletekst"><input type="text" /></div><div id = "szukaj"><input type="submit" value=""></div></div>
[HTML] pobierz, plaintext 

Wiem, na pewno mam coś źle ale jestem noobkiem w css

Więc pierwsza rzecz:

[HTML] pobierz, plaintext 
<style>
input.szukaj {
 
	background-image: url(images/szukaj.gif);
	background-repeat: no-repeat;
	border: 0px;
	height : 33px;
	width : 110px;
	margin : 10px 0px 0px 5px;
	float: left;
}
 
input.poletekst {
 
	background-image:url(images/poleteks.gif);
	background-repeat: no-repeat;
	border: 0px;
	max-width: 344px;
	height : 33px;
	width : 344px;
	color: green;
	padding : 0px 0px 0px 10px;
	float: left;
}
</style>
<div id = "wyszukiwara">
 
		<input type="text" name="x" value="" class="poletekst" />
		<input type="submit" value="" class="szukaj" />
 
</div>
[HTML] pobierz, plaintext 

Zobacz tak

To teraz wygląda to tak:



Lecz jak dodałem jeszcze :

[HTML] pobierz, plaintext 
max-height: 33px;
[HTML] pobierz, plaintext 

Białe tło znika lecz napis wyjeżdża dalej poza teren

To daj np: padding-right: 10px;

Nic nie dało..

[HTML] pobierz, plaintext 
input.poletekst {
 
background-image:url(images/poleteks.gif);
background-repeat: no-repeat;
border: 0px;
max-width: 344px;
height : 33px;
width : 344px;
color: green;
// padding : 0px 0px 0px 10px; - to WYWALASZ
padding-right: 20px; 
float: left;
}
[HTML] pobierz, plaintext 

#edit

Sprawdziłem w czym problem. Tutaj max-width nie powinno być P

[HTML] pobierz, plaintext 
<style>
input.poletekst {
 
background-image:url(images/poleteks.gif);
background-repeat: no-repeat;
border: 0px;
width: 344px;
height : 33px;
color: green;
padding: 8px 13px 10px 10px;
float: left;
}
</style>
[HTML] pobierz, plaintext 

efekt:

Działa masz plusa

Wtedy musiałem literówkę zrobić bo tamto też wywaliłem

A teraz powracając do powyższego jak zrobić, żeby tych buttonów/zdjęc nie można było zaznaczać (1 moje pytanie na początku)

kod css:

[HTML] pobierz, plaintext 
#barTop {
	background-image : url('images/menu.gif');
	background-repeat : repeat -x;
	height : 54px;
	margin : 0px 0px 0px 0px;
	width : auto;
 
}
#barTop a {
display:inline; 
border:0px;
}
#images {
	height : 51px;
	padding : 0px 0px 0px 0px;
	font-size : 15px;
	border:0px;
}
 
#images ul {
	display:inline; 
	border:0px;
}
 
#images li {
	display:inline; 
	border:0px;
}
[HTML] pobierz, plaintext 

kod html

[HTML] pobierz, plaintext 
<div id = "barTop">
	<div id = "images">
	<ul>
	<li><a href="#"><img src="images/wyszukaj.gif"></img></a>
	<a href="#"><img src="images/popularne.gif"></img></a>
	<a href="#"><img src="images/ostatnio.gif"></img></a>
	<a href="#"><img src="images/kontakt.gif"></img></a></li>
	</ul>
	</div>
 
 
	</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<style>
li { list-style: none; display: inline; float: left; }
a.wyszukaj { background: url(images/wyszukaj.gif); display: block; width: 200px; height: 20px; padding: 0; margin: 0; }
</style>
 
<ul>
<li><a class="wyszukaj" href="index.html"></a></li>
</ul>
[HTML] pobierz, plaintext 

I analogicznie dla reszty (czyli klasa a.nazwa i w linku <a class="nazwa" href="adres"></a>) - nie zapomnij ustawic width i height na odpowiedni

Ja już sam nie wiem jak to ma być
Ten kod mi działa dobrze pod Mozillą, lecz pod IE lub Operą już nie działa....

[HTML] pobierz, plaintext 
input.poletekst {
 
background-image:url(images/poleteks.gif);
background-repeat: no-repeat;
border: 0px;
max-width: 344px;
max-height: 33px;
height : 33px;
width : 344px;
color: green;
margin : 10px 0px 0px 5px;
padding: 8px 13px 10px 10px;
float: left;
}
[HTML] pobierz, plaintext 

Dołączę obrazki oraz kod prosze samemu przetestować i jak to rozwiązać :/

- wyszukiwara.gif
- poleteks.gif


kod css

[HTML] pobierz, plaintext 
<style>
input.szukaj {
 
background-image: url(images/szukaj.gif);
background-repeat: no-repeat;
border: 0px;
height : 33px;
width : 110px;
margin : 10px 0px 0px 5px;
float: left;
}
 
input.poletekst {
 
background-image:url(images/poleteks.gif);
background-repeat: no-repeat;
border: 0px;
max-width: 344px;
max-height: 33px;
height : 33px;
width : 344px;
color: green;
margin : 10px 0px 0px 5px;
padding: 8px 13px 10px 10px;
float: left;
}
 
</style>
[HTML] pobierz, plaintext 

kod css z pliku style.css

[HTML] pobierz, plaintext 
#wyszukiwara {
	background-image : url('images/wyszukiwara.gif');
	display:inline-block; 
	margin : 0px 0px 0px 0px;
	background-repeat : no-repeat;
	height : 57px;
	width : 483px;
}
[HTML] pobierz, plaintext 

Plik html

[HTML] pobierz, plaintext 
<div id = "wyszukiwara">
 
<input type="text" name="x" value="" class="poletekst" />
<input type="submit" value="" class="szukaj" />
 
</div>
[HTML] pobierz, plaintext 

Prosze samemu sprawdzić i przetestować

http://kurs.browsehappy.pl/Bugi/MinWidth