[HTML][CSS] Problemy z układem strony zdjęcie + tekst


(Rafał(c)) #1

Witam serdecznie Forumowiczów,

przychodzę po pomoc w ramach “przedszkola” HTML’a i CSS’a. Nigdy nie brałem się za układ strony, projektowanie jego wyglądu co teraz odbija się na mnie po stokroć. Otóż, chcę uzyskać taki efekt jak na obrazku poniżej:

Interesuje mnie wyłącznie zaprojektowanie takiego układu elementów jak w czerwonym prostokącie. Menu, stopkę, etc. już mam. Strona wykorzystuje boostrap’a, aczkolwiek pomimo wykorzystywania jego możliwości, nie udaje mi się zmusić strony do tekstu po prawej stronie zdjęcia - wyświetla go poniżej. Zapewne moje umiejętności są zbyt małe w tym względzie.

I tutaj zwracam się do Was z prośbą. Czy jest ktoś w stanie nakierować mnie w tym względzie, tj. odpowiednich klas CSS i ich użycia w kodzie strony? Zdaję sobie sprawę z “przedszkolnego poziomu” problemu, aczkolwiek nie czułem i nie czuję się dobrze w kwestii układu i stylizacji strony.

Będę wdzięczny za każdą pomoc. :slight_smile:


(gunter) #2

Dawno nic nie robiłem w html/css, ale jak nikt ci nie pomógł to ja spróbuje.
Kod poniższy wklej na stronie:
https://htmledit.squarefree.com/
To zobaczysz czy o to chodzi. To nie jest podzielone, ale łatwo się zorientować co jest czym. Oczywiście czerwone obramowanie nie jest potrzebne, dodałem je dla czytelności przykładu, usuń “border:3px solid red;”.

<html>
<head>
<style>   
@import url('https://fonts.googleapis.com/css?family=Roboto');
.foto {
    background: url(http://dinoanimals.pl/wp-content/uploads/2015/06/Smok_15.jpg) -70px 0;
    float: left;
    width: 150px;
    height: 200px;
    margin: 10px;
    border: 3px solid #000AAA;
}

.text {
    
	float: left;
    width: 250px;
    height: 200px;
    margin: 10px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
}

.czerwony{
	float: center;
    width: 450px;
    height: 230px;
    border:3px solid red;

}

</style>
</head>
<body>

<div class="czerwony">
<div class="foto"></div>

<div class="text"><p>imię i nazwisko</p>
		  <p>data<br>  i miejscowość</p>
                  <p>cena<br>xxx/xxx/xxx</p>
                  <p>Współrzedne </p>

</div>
</div>

</body>
</html>

Możesz wspierać się przykładami ze strony w3schools


(Fizyda) #3

Skoro używasz Bootstrapa to wykorzystaj jego Grid system:https://v4-alpha.getbootstrap.com/layout/grid/

Będzie to coś mniej więcej takiego:

<div class="container"> <!-- czerwony kontener -->
	<div class="row">
		<div class="col">
			zdjecie
		</div>
		<div class="col-3">
			dane
		</div>
	</div>
</div>

(Rafał(c)) #4

@gunter: bardzo dziękuję za pomoc, o takie rozwiązanie mi chodziło. Dopasowałem je do reszty strony i teraz działa dobrze. Teraz muszę jeszcze tylko popracować nad responsywnością przy mniejszych ekranach. Dzięki serdeczne za pomoc. :slight_smile:

@Fizyda: no niby korzystałem z grid systemów Boostrapa, wypluwało rozwiązania, aczkolwiek nijak nie mogłem zmusić go do poprawnego wyświetlania. Rozwiązania reagowały na wszystko poza wyświetlaniem w dwóch kolumnach, stąd opadły mi już ręce. Aczkolwiek rozwiązanie zaproponowane przez Guntera sprawdziło się. Dziękuję za odzew.

Jeszcze raz dziękuję Panowie za pomoc, sprawa rozwiązana.


(Fizyda) #5

Jak korzystałeś z jakiś pseudo generatorów czy interfejsów graficznych to się nie dziwię. Sprawdzałeś mój kod? Za jego pomocą powinieneś uzyskać dwie kolumny.


(Rafał(c)) #6

@Fizyda: Twoje rozwiązanie również działa. O dziwo, korzystałem z kilku projektantów “gridów” z wykorzystaniem Boostrapa i pomimo różnych kodów, efekt zawsze mierny. Zastosowałem połączenie obu Waszych technik i uzyskałem zadowalający mnie efekt. Dziękuję za pomoc Panowie!

Pozdrawiam. :slight_smile: