When things get real…hello CSS

Designing a Photoshop mockup of a website you wish to create is a lot easier than actually coding it. For a beginning like myself, you sometime realise that you’re having difficulty coding certain things, or that other things practically work better i rearranged.

Here are thumbnails of my mockup vs. what i have currently coded:

Proposed layout for my new portfolio websiteCoded version of portfolio

So as you can see, they look a little different, while still the same. (For those who dont understand HTML or CSS, you can just gaze at the pretty pictures)

I made a few changes to my photoshop mockup. The main one was of the block holding my name which I moved from the center to the left. This was because I wanted to have the header in fixed positioning and figured if it stayed in the center it would always be in the way so in the left would be more discrete. Also I changed the pink of the header to blue to match the blue at the bottom swirl as well as matching the blue background.

Some difficulties I had were as follows:

  • It was proving difficult to do the header as I wanted it in Photoshop with the different chades & the block and was having difficulty doing them in the floated list, especially when I was trying to have the block with my name in the center. I tried filling the background colour to achieve the header, but trying with my name bigger vs. the smaller <li>s it all came as one solid block which isn’t what I wanted. In the end I opted for an image of the block.
  • I’m having difficulty positioning the tagline, but I might have to think of using a particular type of positioning, and work around the background of it.
  • I felt I needed the footer to also have fixed positioning, especially so that the swirl could be there are all times, without seeing it the page looked dull and static. The only thing is, that I then couldnt have a thick footer with information i.e services provided, or a long disclaimer because with the fixed positioning (and a fixed header) it would take up most of the page and not leave space for actual content. My issue I’m trying to work out is that having the footer & swirl with a fixed position hides the bottom of the information in my content div i.e my blog feed at the moment. I tried padding & margins & niether seemed to work.
  • Working on my computer at home I havent been able to see how elements look positioned on the bigger monitors. While in the lab I was struggling to get the swirls centered using margin left/right: auto like I usually do, so some things may need to have thei positions fiddled with.

But otherwise its looking good 🙂


2 comments on “When things get real…hello CSS

  1. Afsana says:


    It is looking really good. Be careful when it comes to the liquid layout in your header. The positioning should be static.

    Customised your links in the CSS.

    See you on Monday.


  2. Rebecca says:

    I’m loving the new colour!! It looks fantastic 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s