Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

It's a long shot but a start

edited June 2012 in Announcements

Well...I have been working on learning CSS over the past 2 days. Here is a site I put together. It isn't much of anything right now but its a start. On my way to working some more advanced CSS. Still needs a lot of cleaning up...possibly a complete revamp.

http://cms.wetype.it

Comments

  • For just learning CSS, it's a very good start!

  • Thanks J. I need to see how to clean up the index-blocks. The left and middle column are too far apart and the middle and right column are too close together. I am assuming I am having some padding issue going on there. I really want to do a layout that's borderless and everything appears to float but still working on that. Going to make a backup of my current style sheet and html files first then work on a new layout today as time permits.

  • edited June 2012

    Did you intend for the right hand side user menu to scroll with the page? If so you should decrease it's height a bit because I can't see the bottom of it (Cuts off at the g+ button)

    Other than that looks awesome!

  • Yeah...I meant it to scroll. What size monitor are you on? I have 22" monitors side by side...and vertically, it looks fine. I see the top nav menu all the way down to about 1/4 of the digital recorder image. I see all of the social icons including G+ and FB like and Send Email.

  • I am using a fairly typical 1366 x 768.

  • Got ya. I can look into it and scale it down a bit. I am using 1600x1200. Thanks.

  • edited June 2012

    The login inputs on the sidebar are going right to the edge of the blue background in Firefox and Safari / Chrome on mac. Maybe set a width to them e.g.

    /* Set form input widths */
        #sidebar input {
            width:80%;
        }
    /* Maybe reset submit button width? */
        #sidebar input[type="submit"] {
            width:50%;
        }
    

    I tried this design on a few devices and it is too wide for devices like tablets. Maybe some sort of fluid responsive design maybe a better bet... I know you are just learning CSS and that maybe a responsive design is a bit complex to start out with but on the other hand it pays to learn how to do it properly and there are plenty of frameworks and examples to aid you in your quest?

  • I appreciate the input Bear. I actually have some responsive tutorial pages open on some tabs on one of my screens. Planning on learning the more complex stuff shortly.

  • There...its done. Check out the page now. Looks very nice now. Thanks for the input.

  • CSS and the varying browsers support sure is a pain, even old hands get mighty frustrated at times. But things are much better than they were, the tools are much better and design patterns like fluid responsive mobile first make a lot of sense where the browser can be pretty much any size and have a variety of capabilities. Good luck ;-)

  • Yes, that looks more like it should.

  • I still have to clean up some padding between the index-boxes. This is a temporary fix for styling...working on the real template as we speak.

Sign In or Register to comment.