Umieszczenie napisów w obrazku i skalowanie czcionki

0

Witam,

mam 9 skalowalnych kolumn takich jak w załączniku. Do tych kolumn (wewnątrz) chciałbym dodać jakąś treść jedno małe zdjęcie i móc to skalować tak jak te kolumny.Innymi słowy chciałbym skalować wszystko.Dodaje również załącznik tej treści z kolumną

Kolumnyto pliki "png" umieszczone w html

<div id="h2a">
					<img src="images/4.png" >Nagłówek h2
	
							<ul>
								<li class="h2a1"><a href="#"></a><p align="left">Duis interdum fermentum risus, eu consequat leo accumsan quis. In ut facilisis felis. Nulla
								facilisi. Morbi commodo porta</p></li>
								<li class="h2a2"><a href="1a.php" id="h2a2">więcej...</a></li>
							</ul>
					</div>	

div id="h2a" jest dodane dlatego bo mam tam style tej treści i korzystam z media queries. Reszta to co jest w "ul" to też jest stylowana treść+obrazek ten maly (zielony).

dodam że img jest stylowane img {

max-width: 100%;
height: auto;
}

Proszę o pomoc :)

0

h2a dajesz pozycje relatywna, a ul pozycje absolutną z bottom: 0

0

@CeKa rozjeżdża mi się wszystko przy skalowaniu :)najlepiej żeby mimo skalowania treść była mimo wszystko zawsze w obrazku.Inne kolumny tez chce tak zrobić.Mam ich 9 :)

1

Dużo zależy od tego, czy chcesz zeby te kolumny sie sypaly, czy nie. Tutaj zrobilem Ci siatke 9 kolumn. Zanim zrobisz kopiuj wklej to przeanalizuj prosze css, to nic skomplikowanego :)

https://jsfiddle.net/vgw1z1cj/1/ - wysokość div'a wyznacza wysokość img, ktory z kolei dopasowuje sie do szerokosci div'a.

Z uwagi na tekst, ktory chcesz tam wsadzic ja bym to zrobił trochę inaczej, tzn. zdjęcie tak wypozycjonował, żeby pokrywało cały div przy stałej wysokości, np. 200 px, a nadmiar zdjecia był ucinany. To pozwoli na swojego rodzaju pewnosc, ze tekst sie zmiesci.

https://jsfiddle.net/vgw1z1cj/2/ - druga wersja. Ponizej 300 px trzeba by było daje przystowować, ale to bez sensu bo juz nie ma takich urządzeń. Zdjęcie nie jest zniekształcane, tylko przycinane! Dodatkową zaletą jest to, że w pierwszym rozwiązaniu wymagany jest taki sam rozmiar zdjęć, tutaj możęsz wrzucić wszystko bo i tak nadmiar przytnie.

1

@Fi3rce dziękuję Bardzo za odpowiedź!!Bardzo fajnie napisane i wytłumaczone troche nie rozumiem tych odwołań do rodziców i dzieci w media queries.Domyślam się że chodzi tu głównie o tworzenie tej siatki:)Nie zamykam tematu bo mogę mieć jeszcze jakieś pytania:)

1

Jak masz siatkę 9x9 to w srodkowych potrzebujesz margines z lewej i z prawej. Oczywiście można każdemu z osobna nadać klasę czy coś, ale tak jest oszczędniej w kodzie i sprytniej. Przy siatce 9x9 co 3 potrzebuje miec margines zaczynając od 2 stad to wyrazenie. Polecam ten artykuł https://css-tricks.com/how-nth-child-works/

0

@Fi3rce Wielkie dzięki za pokazanie mi tego sposobu:)Teraz będę budował siatki jak "ta lala" :D a w siatce 9x9 mi wyszlo ze bedzie tak dobrze 2n+2 :)i jeszcze mam pytanie jak byś zrobił siatke do tych trzech elementów:) (załącznik)?

1

@Olśnienie7 Ja wychodzę z założenia, że trzeba wiedzieć jak coś działa under the hood, ale nie ma sensu wymyślać koła od nowa.
Ostatnio znalazłem coś takiego http://responsive.gs/ 12, 16 i 64 grid system. Ściągnij sobie boostrapa i popatrz jak działają klasy container, row i col-*

1 użytkowników online, w tym zalogowanych: 0, gości: 1