How to make this page less cluttered with css and html [closed]


Tags: html,css,design,layout

Problem :

I had help from another designer who make this page and she made lists using <ul> and <li> tags, which generally makes sense.

Here is an example page I am working with: http://www.comehike.com/community/hiker_public_profile.php?community_member_id=2

In the section titled "Organizer for These Hiking Groups" there are group titles and descriptions. But the way I have it now it is so cluttered.

Is there anything I can do with font sizes or adding spacing that might make the text look readable and not so ugly?

Thanks!



Solution :

  • Drop the bold text for the descriptions. Small bold text is usually harder to read.

  • Add a margin-bottom to the list tags so that they are spaced apart.

That's really all it would take make it easier on the eye.


    CSS Howto..

    How can I use an inline style to add a shadow around the used portion of my page?

    express: how to send html together with css using sendFile?

    CSS: how to style on character height versus line height

    How to let DOM elements stack and overflow horizontally instead of vertically in HTML?

    How to use the not selector correctly in CSS [duplicate]

    Changing a DIV to “position:fixed” then change it back to “static” and show the rest of DIVs

    how to show different image in div per the screen size?

    How to put the table inside the box

    how to hide and show a div that is inside of a form using only javascript and css

    How does Media Queries Reacts

    How to make this image blur with css

    How to minified all js and css files using gruntfile.js in sails.js

    How do i add and remove an active class with jQuery?

    How to keep indent for second line in ordered lists via CSS?

    How to get my navbar to fluidly contain the largest element?

    how to create animated background like in smartprogress.do using js,css,html5 [closed]

    how to fix a display difference between chrome and firefox for css relative position?

    how can I reload a “CSS background-image” each time I hover on it?

    How to customize twitter/bootstrap more deeply? [closed]

    How can you fix the height of an element in IE 6, and allow hidden content to be scrolled into view?

    How to create a CSS shade effect with a faded sidebar

    How to disable JS function via CSS for certain page?

    How to change the text my button displays?

    How to centrally align a float: left ul/li navigation menu with css?

    How to get the first letter of each word to be a different size and the rest to be the same size

    How to recursively remove CSS classes

    How to get the value of css property with jQuery

    How can display table-row behave like colspan=3

    Show some characters above a picture on hover

    HTML DIV Overflowing, How To Stop?