[HTML][CSS]obrazek na obrazku Opcje

[Michał90]

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




znajdowały się w tle tego obrazka:



A ma to wyglądać tak:


Ten post edytował Michał90 4.02.2009, 20:19:11

[piotrooo89]

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.

[Michał90]

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

[piotrooo89]

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ę.

[Michał90]

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.

[decha-design]

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

[hiszpanespaniol]

A divy dałem tak

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.

[Michał90]

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

Ten post edytował Michał90 9.02.2009, 16:09:32

[b4x]

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="" />

Ten post edytował b4x 9.02.2009, 16:30:34

[Michał90]

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

[b4x]

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

[Michał90]

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

[b4x]

To daj np: padding-right: 10px;

Ten post edytował b4x 9.02.2009, 17:15:39

[Michał90]

Nic nie dało..

[b4x]

[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:

Ten post edytował b4x 9.02.2009, 17:31:23

[Michał90]

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 

[b4x]

[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

Ten post edytował b4x 9.02.2009, 17:52:46

[Michał90]

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ć

[piotrooo89]

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

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