Po kliknięciu na "Kontakt" - info znajdujące się w polu tekstowym nie odbija się od obrazka.

pytanie zadane 8 czerwca 2015 w HTML i CSS przez Krzysiek_34 Mądrala (6,130 p.)

Witam.

Po kliknięciu na "Kontakt" podane mam w polu tekstowym info (e-mail i gg). Chciałbym je ulepszyć, mianowicie po lewej stronie znajduje się mały obrazek "e-mail", a poniżej znajduje się mały obrazek "gg".

Chodzi mi o to, aby przesuwający się tekst z prawej do lewej i na odwrót (nazwa e-mail i nr gg) odbijał się od poszczególnego obrazka, a nie od lewej strony pola tekstowego.

Wie ktoś z Was jak to zrobić?

<div id="pole_tekstowe_kontakt">
	<form>
		<p><span style="font-size: 14px">W razie pytań, proszę o kontakt:</span></p>
		<img src="obrazki/e-mail.jpg" style="border: 3px solid #0066FF; position: absolute; left: 10px; top: 75px" />
		<marquee behavior="alternate"><p style="text-align: center"><span style="font-size: 15px; color: yellow">krzysiek12345@o2.pl</span></p></marquee>
		<img src="obrazki/gg.jpg" style="border: 3px solid #0066FF; position: absolute; left: 10px; top: 150px" />
		<marquee behavior="alternate"><p style="text-align: center"><span style="font-size: 15px; color: yellow">1234567</span></p></marquee>
	</form>
</div>

#pole_tekstowe_kontakt
{
	display: none;
	width: 300px;
	height: 220px;
	background: #008000;
	font-size: 11px;
	padding: 15px;
	position: absolute;
	z-index: 9999;
	top: 68px;
	right: 303px;
}

1 odpowiedź

odpowiedź 8 czerwca 2015 przez chris Gaduła (3,680 p.)

<html>
	<head>
		<style>
			#pole_tekstowe_kontakt {
			width: 300px;
			height: 220px;
			background: #008000;
			font-size: 11px;
			padding: 15px;
			position: absolute;
			top: 68px;
			right: 303px;
			}
			
			img {
			border: 3px solid #0066FF;
			width: 50px;
			}
			
			.email, .gg {
			width: 300px;
			height: 56px;
			position: relative;
			top: 10px;
			margin: 5px;
			}
			
			marquee {
			width: 230px;
			position: relative;
			left: 20px;
			bottom: 10px;
			}
		</style>
	</heaD>
	<body>
		<div id="pole_tekstowe_kontakt">
			<form>

				<span style="font-size: 14px">W razie pytań, proszę o kontakt:</span>

				<div class="email">
					<img src="obrazki/e-mail.jpg" />
						<marquee behavior="alternate">
							<div>
								<span style="font-size: 15px; color: yellow">krzysiek12345@o2.pl</span>
							</div>
						</marquee>
				</div>
				
				<div class="gg">
					<img src="obrazki/gg.jpg"/>
						<marquee behavior="alternate">
							<div>
								<span style="font-size: 15px; color: yellow">1234567</span>
							</div>
						</marquee>
				</div>
				
			</form>
		</div>
	</body>
</html>

Uporządkowałem to troche i mam nadzieję, że o to chodziło.

komentarz 8 czerwca 2015 przez Krzysiek_34 Mądrala (6,130 p.)

Z jednej strony działa, ale pojawił się jeden problem. Na tej stronie w innym miejscu już mam podany styl <marquee behavior="alternate"> o przesuwającym się tekście i te same oba style gryzą się ze sobą.

Tego typu styl zapisany w HTML to:

<div id="topbar">
			<marquee behavior="alternate"><p style="text-align: center"><span style="font-weight: bold; font-size: 35px; font-family: courier; letter-spacing: 4px">Zapraszam na moją stronę!</span></p></marquee>
</div>

A podany przez Ciebie styl w CSS to:

marquee
{
	width: 230px;
	position: relative;
	left: 20px;
	bottom: 10px;
}

komentarz 8 czerwca 2015 przez chris Gaduła (3,680 p.)

Można to zaradzić przupisaniem klasy :)

marquee.welcome
{
    width: 230px;
    position: relative;
    left: 20px;
    bottom: 10px;
}

<div id="topbar">

            <marquee class="welcome" behavior="alternate"><p style="text-align: center"><span style="font-weight: bold; font-size: 35px; font-family: courier; letter-spacing: 4px">Zapraszam na moją stronę!</span></p></marquee>

</div>