Przesunięcie obrazka do środka w CSS

pytanie zadane 13 listopada 2015 w HTML i CSS przez damianlxlx5 Obywatel (1,880 p.)

Mam taki problem, że jak przesuwam obrazek na swojej stronie komendą :

padding-left: 160px !important;

to się przesuwa z lewej do prawej strony o te 160px ( mnie więcej na środek)

Jednak ten obraz jest taki że po najechaniu na niego myszką zmienia się jego

wnętrze.Może wyjaśnię do na przykładzie blogu Pana Mirosława Zelenta.

Czyli jak się najedża na dany język programowania to zmienia się jego tło i

wyświetla się którtki tekst a także jest odnośnik dzięki któremu po kliknięciu

przenie nas na podstronę.

Myślę że wiecie o co mi chodzi :)

No i teraz jest taki problem że jak najadę obok tego obrazka z tej lewej strony

o taką szerokość jaką go przesunąłem to i tak ten obraz zmienia tło mimo że

nie najechał bezpośrednio na nim myszką tylko obok niego.

W jaki sposób to zmienić ?

6 odpowiedzi

odpowiedź 13 listopada 2015 przez Roths Użytkownik (590 p.)

Sam jestem nowicjuszem w HTML i CSS ale może uda mi się pomóc. Jeśli dobrze zrozumiałem oczywiście. Przesunąłeś wszystko w hover również, czyli tam gdzie deklarujesz co ma się dziać po najechaniu kursorem?

Pokaż 6 poprzednich komentarzy

komentarz 13 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

<!-- AddThis Button END -->
<?php $wallstreet_pro_options=theme_data_setup();
$current_options = wp_parse_args(  get_option( 'wallstreet_pro_options', array() ), $wallstreet_pro_options ); 
 if($current_options['portfolio_section_enabled'] == true) { ?>
<div class="portfolio-section">
	<div class="container">

		<div class="row">
			<div class="section_heading_title">
				<?php if($current_options['portfolio_title']) { ?>
				<h1><?php echo esc_html($current_options['portfolio_title']); ?></h1>
				<div class="pagetitle-separator"></div>
			<?php } ?>
			<?php if($current_options['portfolio_description']) { ?>
				<p><?php echo esc_html($current_options['portfolio_description']); ?></p>
			<?php } ?>				
			</div>
		</div>
		<div class="row">
		
		<?php if($current_options['portfolio_image_one']) { ?>
			<div class="col-md-3 col-md-6 home-portfolio-area">
				<div class="home-portfolio-showcase">
					<div class="home-portfolio-showcase-media">
					
						<img class="img-responsive home-portfolio-img" alt="Sleek &amp; Beautiful" src="<?php echo esc_url($current_options['portfolio_image_one']); ?>">
					
						<div class="home-portfolio-showcase-overlay">
							<div class="home-portfolio-showcase-overlay-inner">
								<div class="home-portfolio-showcase-detail">
								<a href="http://google.pl">
	<img src="\wordpress\wp-content\themes\wallstreet\images/obrazek pod logo TM.jpg" alt="Nie można wyświetlić obrazka" />
</a>
								<div class="home-blog-btn"><a href="http://localhost/wordpress/2015/11/08/to-bedzie-prawdziwa-wojna/">Czytaj dalej</a></div>
								
									<?php if($current_options['portfolio_title_one']){ ?>
									<h4><?php echo esc_html($current_options['portfolio_title_one']); ?></h4>
									<?php } ?>
									<?php if($current_options['portfolio_description_one']){ ?>
									<p><?php echo esc_html($current_options['portfolio_description_one']);?></p>
									<?php } ?>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

komentarz 13 listopada 2015 przez Anonim Mądrala (6,000 p.)

W 31. linijce masz błąd, href powinno równać się linkowi, a nie hiperłączu.

komentarz 13 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Ale to jest chyba mało istotne teraz.

komentarz 13 listopada 2015 przez Anonim Mądrala (6,000 p.)

W sumie tak.

komentarz 13 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Strona tak jakby widzi nadal ten obrazek jakby tam był, dlatego po najechaniu zmienia się te tło.

odpowiedź 13 listopada 2015 przez Anonim Mądrala (6,000 p.)

Zamiast padding użyj margin.

Padding jest we wnętrzu elementu, margin to odstęp.

komentarz 13 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Czy daje margin czy padding jest to samo.

Przedstawię to może na screenie żebyście bardziej zrozumieli

o co mi dokładnie chodzi:

Tam gdzie napisałem " to jest kursor" to miejsce wskazane strzałką gdzie znajduje się kursor.

Tego nie widzicie ale ja powiem wam że obrazek się właśnie zmienia w tym miejscu a

wolałbym żeby zmieniał się tylko wtedy kiedy bezpośrednio najedziemy na niego kursorem.

odpowiedź 13 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

odpowiedź 13 listopada 2015 przez Comandeer Guru (601,110 p.)

Pokaż to online, bo tak to raczej nie dojdziemy o co chodzi…

komentarz 14 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Nie bardzo mogę online bo robię stronę w xampiee lokalnie na komputerze.

komentarz 14 listopada 2015 przez Michau Xlow Pasjonat (15,190 p.)

To załóż gdzieś tymczasowo hosting i wrzuć tam pliki, żeby mieć opcję przedstawienia kodu.

odpowiedź 14 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

A powiedziecie jak się powino wyśrdkować obrazek na środek strony, bo może to trzeba zrobić jakoś w div-ie tam gdzie jest linijka img src ?

komentarz 14 listopada 2015 przez Comandeer Guru (601,110 p.)

A spróbuj rodzicowi tego obrazka dodać text-align: center

komentarz 14 listopada 2015 przez Damian13 Obywatel (1,430 p.)

Ja ustawiam dla img{ display:block; margin:0 auto;}

Choć nie wiem czy są inne sposoby ale to działa ;p

odpowiedź 14 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Zobaczcie ten obrazek jest widziany przez stronę jakby tam nadal był i dla tego się jak najedziemy kursorem w to miejsce to następuje zmiana tła.

Widzicie że przesunąłem ten obrazek a on jakby tam dalej był jeszcze.

komentarz 14 listopada 2015 przez Comandeer Guru (601,110 p.)

Serio zmiana padding-left na margin-left nie działa?

komentarz 14 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Wiesz co jednak ta zmiana działa.Okazało się że tą instrukcję margin-left wpisałem zamiast do .home-portfolio-showcase to do .home-portfolio-showcase-media.

Teraz jest już wszystko okey :)