How do I Fix the CSS for this? - Post...

User 315488 Photo


Registered User
90 posts

I'm trying to get a profile page to look like the attached picture (or close to it). I've tried everything (except using tables) that I can think of and got close, but not right.

Here's what I've tried so far:
http://upc.at.utah.gov/sample.html

The 2 sections don't line up and I can't figure out how to get a line / border under each value like in the picture. I don't understand why the 2 blocks don't line up.

Any help is appreciated.

Thanks,

Ron
Attachments:
User 2484360 Photo


Registered User
3,293 posts

FisherRon wrote:
I'm trying to get a profile page to look like the attached picture (or close to it). I've tried everything (except using tables) that I can think of and got close, but not right.

Here's what I've tried so far:
http://upc.at.utah.gov/sample.html

The 2 sections don't line up and I can't figure out how to get a line / border under each value like in the picture. I don't understand why the 2 blocks don't line up.

Any help is appreciated.

Thanks,

Ron


For this it would be fine to use tables for the profile information part. Just not for the design of the whole website itself. :P

User 315488 Photo


Registered User
90 posts

I was trying to stay away from tables because I want it to be responsive and tables aren't very responsive.

I found the solution by using a combination of spans for the text, a float for the first column and media queries to adjust the size of the profile box as the size of the screen diminished. It works pretty good for me.

I appreciate your suggestion and help.
User 271657 Photo


Ambassador
3,816 posts

I've used this for a resp. table:
.table {
display: inline;
border-collapse : collapse;
border-spacing : 0;
margin: 0 10% 0 10%;
width: 100%;
}

You can use a media query to adjust/remove the margins at phone sizes and set the text to a smaller size if needed.

You could also use a definition list:
<dl>
<dt>User Profile One</dt>
<dd>Name : John Doe</dd>
<dd>Address : 3177 Dayton St.</dd>
<dd>User Name : rweight</dd>
<dd>Phone : (801) 493-5920</dd>
<dd>Email : rweight@utah.gov</dd>
</dl>

With CSS, you could style this however you wanted, even making it look like a table.


I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2764672 Photo


Registered User
17 posts

You can use one table and still have a responsive site. Its only when you want to split the table vertically that it ceases to be responsive. The single table works very much like a container. (an edit) provided the table is 100% wide.

Without prejudice:
Any answers or suggestions I offer are from my experience using a variety of web and text editors over a 15 year period.
Other may disagree, even prove me wrong. That's the chance you take using advise from a forum!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.