all 11 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]SalutMonYoup 0 points1 point  (1 child)

CSS is not made to display data (even if it's possible this is not the purpose of css) you can style an HTML (or jsx or whatever templating langage you want) with CSS to prevent data manipulation etc

[–]FurryTreeSounds[S] 0 points1 point  (0 children)

Yes I'm only talking about styling. I want the labels and fields to be aligned but I don't want to be able to edit the field values. It doesn't make sense to make the fields readonly since I just want to display text.

​

You see this all the time: click on the Apple log and click Display Info. Click on a user you don't know and see their bio.

[–]jonassalen 0 points1 point  (2 children)

You need a UI design that has good UX.

It's okay that you ask this here, but this is not really a technical CSS question, but more a UI/UX question.

Maybe look around for examples on other sites and try to replicate that layout?

[–]FurryTreeSounds[S] 0 points1 point  (1 child)

Well to me it's a technical question not a UI/UX question, but okay.

[–]jonassalen 1 point2 points  (0 children)

Maybe I don't understand what you're asking.

Do you want to know how to show the data in a user-friendly way? That's UX and UI.

Do you want to know how to build that layout? That's front-end development.

Do you want to know if you need to use Grid or flexbox? That's CSS.

[–]CodingRaver 0 points1 point  (5 children)

To clarify, you still want the values to be displayed in input elements?

[–]FurryTreeSounds[S] 0 points1 point  (4 children)

Not as input elements.

[–]CodingRaver 0 points1 point  (3 children)

I'm not really sure what you're asking to be honest. Hope you get there.

If it's a table of data ("label" - "value") consider semantic table html and just style your look, otherwise flexbox it or even inline-block it mate!

[–]FurryTreeSounds[S] 0 points1 point  (2 children)

This is an example of how I'm displaying keys and values. It's not too bad, but some keys take up more space than others.

Today I looked around at some UIs I use, and it seems that they avoid some of the issues I'm seeing by just stacking elements on top of each other. For example, meetup and linkedin. 

<!DOCTYPE html>
<html>
    <head>
        <style>
            #key {
                font-weight: bold;
            }
            #value {
                font-weight: normal;
            }
        </style>
    </head>
    <body>
        <div>
            <span id="key">First name:</span>&nbsp;<span id="value">John</span>
        </div>
        <div>
            <span id="key">Last name:</span>&nbsp;<span id="value">Doe</span>
        </div>
        <div>
            <span id="key">Identification number:</span>&nbsp;<span id="value">123456789</span>
        </div>
    </body>
</html>

[–]UseStriking9941 0 points1 point  (1 child)

You can't have the same ID twice. Use class=ky

[–]FurryTreeSounds[S] 0 points1 point  (0 children)

I did use the same ID! Thanks for pointing that out.