Pomoc w css/html/div

[Rothuen]

Poszukuje osoby, która zna się bardzo dobrze na kodowaniu. Zależy mi na zrobieniu karty postaci (wzoru) inaczej, niż jest to robione dotychczas, a do tego potrzebuje dobrze obeznanej osoby w świecie kodów. Więcej informacji na ten temat mogę udzielić na PW.

[Yatsu]

Użycie do tego CSS i HTML to nic nowatorskiego i wiele for już z tego korzystało. Kolejną kwestią jest to, czy umieścisz to w bbcode, jeśli tak to będziesz mieć zaledwie drobny problem z poszatkowaniem kodu na elementy. Nie radzę natomiast korzystać z wstawiania czystego kodu html do postów chyba, że liczysz na to, że nie trafisz na osobę na tyle obeznaną, że to forum dzięki temu rozwali (to chyba najstarszy bug for opartych o phpBB)...

Jeśli chcesz pomocy to po prostu powiedz co ma być zakodowane, a ktoś Ci z tym pomoże np. ja. Przy okazji wątek może przydać się innym.

[Rothuen]

Sęk w tym, że chce zakodować całą kartę postaci, czyli jej wzór. Na myśli mam jakiś kawałek papieru, w górnym rogu małe miejsce na zdjęcie, które jest spięte spinaczem, czy czymś podobnym. Głównie chodzi, by wzór karty wyglądał dosłownie jak przykładowo akta szpitalne, bądź takie policyjne.

[Yatsu]

Miałem na myśli podanie pożądanego do KP tła, czcionki i rozrysowanie w chociażby Paint'cie dokładnego rozmieszczenia elementów. Ogólnie całość będzie prosta do wykonania. Stworzysz jeden główny div z odpowiednim tłem, a w nim za pomocą atrybutów pozycjonowania absolute rozmieścisz wszelkie pożądane elementy w kolejnych kontenerach <div>. Jak wstawisz to co zawarłem w pierwszym zdaniu to mogę to zakodować. Chyba, że wolisz przykład jednej z kart z mojego PBF i zrobić coś na jej wzór (skorzystać metodą prób i błędów z jej kodu).

[Rothuen]

Więc prosiłbym o taki przykład. Na pw na dniach wyśle ci mój marny rozrysowany plan jak to widzę.

[Yatsu]

Karta nieco fikuśna, ale kod może Ci posłużyć za przykład. Możesz wybróbować tutaj http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro albo zaufać zdjęciu:

Kod: Zaznacz cały

<div style="position:relative;width:555px;height:298px;background:url('http://i1284.photobucket.com/albums/a575/asterlife2077/kzk_zpsc4b12a19.png');">


<div style="position:absolute;left:7px;top:69px;height:160px;width:120px;">
<img src="http://i39.photobucket.com/albums/e186/Jacek_Kazimierski/raghyr_zps1132b4ba.png" />
</div>

<div style="position:absolute;left:7px;top:69px;height:158px;width:118px;z-index:30;border:1px solid #000;">
</div>
<div style="position:absolute;left:8px;top:70px;height:156px;width:116px;z-index:30;border:1px solid rgba(255,255,255,0.3);">
</div>


<div style="position:absolute;left:128px;top:100px;height:88px;width:337px;padding:2px;color:#FFF;">
<div style="width:100%;font-size:20px;text-align:center;">Raghyr</div><br>
<div style="margin-top:-2px;margin-left:10px;width:100%;font-size:12px;"><span style="color:#22478c;">Rasa:</span>  Xenons,     <span style="color:#22478c;">Pochodzenie:</span>  Gwiazdozbiór Xenon,     <span style="color:#22478c;">Wiek:</span>  21<br>
<span style="color:#22478c;">Styl:</span> Dryblerski,     <span style="color:#22478c;">Osobowość:</span>  Gwiazdor<br>
<span style="color:#22478c;">Pozycja:</span>  Napastnik</div>
</div>

<div style="position:absolute;left:187px;top:1px;height:58px;width:58px;font-size:24px;padding-top:15px;text-align:center;color:#FFF;text-shadow: 1px 1px 1px #000;font-family: 'Droid Sans', sans-serif;font-weight: 400; ">
66<span style="font-size:10px;">P</span>
</div>


<div style="position:absolute;left:311px;top:1px;height:58px;width:58px;font-size:24px;padding-top:15px;text-align:center;color:#FFF;text-shadow: 1px 1px 1px #000;font-family: 'Droid Sans', sans-serif;font-weight: 400; ">
65<span style="font-size:10px;">D</span>
</div>


<div style="position:absolute;left:442px;top:1px;height:58px;width:58px;font-size:24px;padding-top:15px;text-align:center;color:#FFF;text-shadow: 1px 1px 1px #000;font-family: 'Droid Sans', sans-serif;font-weight: 400; ">
100<span style="font-size:10px;">C</span>
</div>

<div style="position:absolute;left:222px;top:239px;height:58px;width:58px;font-size:24px;padding-top:15px;text-align:center;color:#FFF;text-shadow: 1px 1px 1px #000;font-family: 'Droid Sans', sans-serif;font-weight: 400; ">
90<span style="font-size:10px;">O</span>
</div>


<div style="position:absolute;left:341px;top:239px;height:58px;width:58px;font-size:24px;padding-top:15px;text-align:center;color:#FFF;text-shadow: 1px 1px 1px #000;font-family: 'Droid Sans', sans-serif;font-weight: 400; ">
77<span style="font-size:10px;">T</span>
</div>

<div style="position:absolute;left:468px;top:102px;height:43px;width:84px;font-size:18px;padding-top:11px;text-align:center;color:#FFF;text-shadow: 1px 1px 1px #000;font-family: 'Droid Sans', sans-serif;font-weight: 400; ">
34<span style="font-size:10px;">K</span>
</div>


<div style="position:absolute;left:468px;top:144px;height:43px;width:43px;font-size:16px;padding-top:11px;text-align:center;color:#FFF;text-shadow: 1px 1px 1px #000;font-family: 'Droid Sans', sans-serif;font-weight: 400; ">
65<span style="font-size:10px;">ZF</span>
</div>


<div style="position:absolute;left:511px;top:144px;height:43px;width:43px;font-size:16px;padding-top:11px;text-align:center;color:#FFF;text-shadow: 1px 1px 1px #000;font-family: 'Droid Sans', sans-serif;font-weight: 400; ">
90<span style="font-size:10px;">KF</span>
</div>



</div>
<div class="clear"></div>


Zwróć uwagę na główny pojemnik z tłem, i na pomniejsze rozmieszczone wewnątrz niego przy użyciu parametrów absolute.