Hi, as stated in the title I was asked by the publisher of the game if I could redesign the Roll20 character sheet so that looks more like the official character sheet. Since I learned HTML & CSS in the late 90s I learned to use <table>s for grid/design purposes. With this redesign I want to clear things up and abandon the actual table style in favor of a more elegant way to design the sheet. Regarding to the official documentation for creating character sheets there are several ways to create a proper design. I've tried to learn something about FlexBox and Grid, but it only confused me even more (I'm a beginner in CSS and tend to make everything happen via inline styles). So I thought I'd go with something simple like the basic col-layout (<div class='3colrow'><div class='col'>....). But apparently I'm missing something important. I've started with the header of the character sheet: And I tried to separate it in different columns: Two colums for the main part (red line), then in the left column 2x 2 colums for name and education and then 5x 4 colums for the rest. And in the right column 1x 1 column for the image and 2x 2 columns for the moonsign and the moonpoints. My approach in HTML looks like this: <div class="main"> <div class='2colrow'> <div class='col'> <div class='2colrow'> <div class='col default-header'>Name:</div> <div class='col default-background'> <input type="text" name="attr_character_name" placeholder="Charaktername" class="default-background" /> </div> </div> <div class='2colrow'> <div class='col default-header'>Ausbildung:</div> <div class='col'> <input type="text" name="attr_education" placeholder="Ausbildung" /> </div> </div> <div class='4colrow'> <div class='col default-header'>Kultur:</div> <div class='col default-background'> <input type="text" name="attr_character_culture" placeholder="Kultur" class="default-background" /> </div> <div class='col default-header'>Abstammung:</div> <div class='col default-background'> <input type="text" name="attr_character_heritage" placeholder="Abstammung" class="default-background" /> </div> </div> <div class='4colrow'> <div class='col default-header'>Rasse:</div> <div class='col'> <input type="text" name="attr_character_race" placeholder="Rasse" /> </div> <div class='col default-header'>Geschlecht:</div> <div class='col'> <input type="text" name="attr_character_gender" placeholder="Geschlecht" /> </div> </div> <div class='4colrow'> <div class='col default-header'>Haarfarbe:</div> <div class='col default-background'> <input type="text" name="attr_character_haircolor" placeholder="Haarfarbe" class="default-background" /> </div> <div class='col default-header'>K&ouml;rpergr&ouml;&szlig;e:</div> <div class='col'> <input type="text" name="attr_character_height" placeholder="Körpergröße" class="default-background" /> </div> </div> <div class='4colrow'> <div class='col default-header'>Augenfarbe:</div> <div class='col'> <input type="text" name="attr_character_eyecolor" placeholder="Augenfarbe" /> </div> <div class='col default-header'>Gewicht:</div> <div class='col'> <input type="text" name="attr_character_weigth" placeholder="Gewicht" /> </div> </div> <div class='4colrow'> <div class='col default-header'>Hautfarbe:</div> <div class='col default-background'> <input type="text" name="attr_character_skincolor" placeholder="Hautfarbe" class="default-background" /> </div> <div class='col default-header'>Geburtsort:</div> <div class='col'> <input type="text" name="attr_character_birthofplace" placeholder="Geburtsort" class="default-background" /> </div> </div> </div> <div class='col'> <div class='col'> <div class="background-image">&nbsp; <img align=center width=600 src="<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Splittermond/Splittermond.png"></img" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Splittermond/Splittermond.png"></img</a>> </div> </div> <div class='2colrow'> <div class='col default-header'>Mondzeichen:</div> <div class='col'> <input type="text" name="attr_character_moonsign" placeholder="Mondzeichen" /> </div> </div> <div class='2colrow'> <div class='col default-header'>Splitterpunkte:</div> <div class='col'> <input type="text" name="attr_character_moonpoints" placeholder="Splitterpunkte" /> </div> </div> </div> </div> </div> But the character sheet looks really awful: And if I resize the sheet it's looking even more uglier: What do I want do accomplish / What do I actually need help for? I'd be glad to get some tips to achieve the following: Reducing the space between e.g. "Name" and "Test" to 0, like it is in the original design The according <div>s and the <input>s should have the same height They also should be next to each other and not above or beneath The image should fill the whole width The background color of the div shouldn't be stretched out of the input field when I resize the sheet Everything should have a fixed length and should not get bigger I hope someone can give me a little bit of advise to make the sheet better! Cheers, Loki
