ROZWIĄZANE Kolumna po prawej stronie na karcie produktu

Chciałbym utworzyć kolumnę w opisie produktu. Kolumna miałaby znajdować się po prawej stronie opisu i zawierać przydane informacje związane z danym produktem (głównie treść z podlinkowaniem i obrazki z podlinkowaniem).

W sumie udało mi się w przybliżeniu osiągnąć zamierzony cel poprzez dodanie tabeli z przesunięciem do prawej strony i stworzeniem marginesów wewnętrznych (efekt na załączonym zdjęciu i na stronie: https://www.garmin24.pl/pl/p/Garmin-Zumo-220-Europa-010-00876-01-/74?preview=true).

Kod:

<table style="height: 170px;" width="220" align="right">
<tbody>
<tr>
<td style="background: transparent none repeat scroll 0% 0%; border: 1px solid transparent; text-align: center; vertical-align: top; padding: 0px 0px 0px 20px;">
<p style="text-align: center;"><span style="font-size: 10pt;"> <strong>Pokrewne:</strong></span></p>
<p style="text-align: center;"><span style="font-size: 10pt;"><a href="/instrukcja-obslugi-garmin">Podręcznik użytkownika</a></span></p>
<p style="text-align: center;"><span style="font-size: 10pt;"><a href="/radary_nawigacja_garmin">Baza fotoradarów</a> </span></p>
<p style="text-align: center;"><span style="font-size: 8pt;"><a href="/public/assets/images/wersjamapy.png"><span style="font-size: 10pt;">Pobieranie map</span></a><br /></span></p>
<p><a href="/public/assets/images/wersjamapy.png"><span style="font-size: 8pt;"><span style="font-size: 10pt;"><img src="/public/assets/images/2011-05-11_174804.png" alt="" width="182" /></span></span></a></p>
<p style="text-align: center;"><span style="font-size: 10pt;"> Sposoby montażu</span> <img src="/public/assets/images/zumo220.png" alt="" width="182" /></p>
</td>
</tr>
</tbody>
</table>

Mam pytanie czy takie rozwiązanie jest ok, czy lepiej używać do tego jakiś bloków <div>....</div>? Jeśli bloki to ma ktoś jakiś pomysł? Dodam, że różne produkty będą miały różne wnętrza (różna treść i obrazki).

 

Faktycznie wygląda to całkiem okej, ale nie jest to optymalne rozwiązanie niestety, ja bym to zrobił inaczej, a mianowicie, dodał do własnego stylu 2 klasy, jedna z float:left, a druga z float:right
i teraz dodawać w opisie tylko:
<div class="klasa1"> jakaś treść</div>
<div class="klasa2"> jakaś druga treść</div>
ułożą się obok siebie, nie wpłynie to na interpretowanie strony przez roboty wyszukiwarek, da też o wiele łatwiejsze dodawanie tego w każdym produkcje. Łatwiej przecież dodać 2 divy niż tabelę w odpowiednim miejscu.
Jednak zaletą tabeli jest to, że tekst opisu oblewa tabelę.

 

@Grzesiek @TheL dzięki za odpowiedzi. Przez weekend będę miał trochę czasu to sprawdzę co będzie mi lepiej wychodziło. Na razie udaj mi się jedynie wariant z tabelką.

Testowałem także opcję z div. Nie wiem co zrobiłem źle, ale w "klasa1" wyświetla się tylko kawałek treści (zdjęcie w załączniku).

We własnym CSS dodałem:

/*kolumna po prawej w opisie*/
.klasa1 {
float: left;
}
.klasa2 {
float: right;
}

Z kolei w edytorze opisu:

<div class="klasa1"> tutaj zawarłem całą treść opisu i może w tym tkwi jakiś problem</div>
<div class="klasa2"> jakaś druga treść</div>

Problem przycinania pojawia się tylko na stronie. W edytorze jak wybiorę: Widok>Pełen ekran to jest ok.

 

@kolukas chodzi jeszcze o ustawienie wielkości aby wszystko się mieściło ja dałem tylko suchy przykład bez oprogramowania tego

 

ok, myślałem że to jakoś automatycznie się podzieli słabo się na tym znam to będę próbował w weekend

 

css daje naprawdę duże możliwości i warto się nim zainteresować, dzięki niemu można zmienić praktycznie 70% sklepu bez ruszania edycji zaawansowanej.

 

@kolukas

Chodzi o to, aby we własnym CSS dodać dodatkowo wartości określające wysokość tej klasy. Poniżej masz przykład (do klasy1 dodałem parametr height, który odpowiedzialny jest za wysokość tego elementu, wysokość można podać w pikselach [px]):

Kod:

/*kolumna po prawej w opisie*/
.klasa1 {
float: left;
height:200px;
}
.klasa2 {
float: right;
}

 

Po wielu próbach udało mi się uzyskać zamierzony efekt. We własnym CSS dodałem:

/*kolumna po prawej stronie*/
.kolumna {
float: right;
text-align: center;
margin-left:20px;
margin-right:0px;
}

Później wchodzę w produkt, wyłączam edytor i wklejam:

<div class="kolumna">
jakaś treść
</div>

Efekt na stronie:
https://www.garmin24.pl/pl/p/Garmin-Oregon-450-010-00697-40-/77

Dla wersji mobilnej dodałem kod CSS jak poniżej, który wyśrodkowuje mi kolumnę. I tu pojawia się pytanie? W wersji mobilnej chciałbym żeby cały ten div była na dole opisu produktu. Próbowałem dodać wartość bottom: 0;, ale to powoduje jakiś dziwne przesunięcia tej kolumny. Czy ktoś wie jak to można zrobić?

/*kolumna w mediach*/
@media (max-width: 767px) and (min-width: 320px) {
.kolumna {
float: none;
text-aligan: center;
margin-bottom: 20px;
}
}

 

Odnośnie wersji mobilnej zamień divy miejscami, najpierw prawy potem lewy

 

Przy okazji https://www.garmin24.pl/pl/p/GARMIN-VHF-100i-Black-010-00754-11/880 25W? jakie pasmo? pytam jako licencjonowany krótkofalowiec

 

Ja akurat ekspertem w tej dziedzinie nie jestem, ale pełną informację o częstotliwościach można znaleźć na 36 stronie instrukcji: http://static.garmin.com/pumac/VHF100_PLPodrecznikuzytkownika.pdf

 

jest dziwna rzecz, pomijając błąd 502 czasami się pojawiający w Twoim sklepie to przy wejściu na sklep na chwilkę pojawia się wersja US po czym przechodzi na pl.

 

Pytanie czy tak się dzieje na www.garmin24.pl czy na www.garmin.pl. My mamy sklep w home.pl i obsługujemy sklep garmin24.pl. Tu chyba nic takiego nie powinno się pojawiać, przynajmniej nie zauważyłem. Z kolei strona garmin.pl jest obsługiwana przez odział główny Garmina w Stanach i tu faktycznie takie dziwne przekierwowanie się czasami pojawiają.