SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please help me design CSS layout for this

    Hi,

    Attached is a jpg for the design that I want to make HTML and CSS for. I am a newbie to CSS world completely though I'm starting to read from w3cschools.com. Can anyone help me with designing this?

    Any help appreciated.

    mouseover_singlehotel.jpg

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    ymailer,

    Welcome to the SitePoint forums.

    You will need to learn how to frame the page using HTML and then style the page using CSS. There are MANY resources on the web that teach these basics. W3Schools offers a helpful, cursory description of all HTML tags and CSS properties. SitePoint references offer a bit more detail about these devices. Actually reading a book or taking a course is a faster road to learning that trial-and-error, though. I recommend you invest a bit of your time in taking a course.

    Most folks here are glad to help you resolve specific problems that you encounter while you develop your skills.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Welcome to Sitepoint forums.

    As Ronpat said above we would like you to make a start yourself and then we can see what level you are at and then provide the necessary pointers. We don't usually code a layout from scratch as that is not the way that you will learn.

    Looking at your image it is basically 2 columns so you will first need to create a div to hold both columns and set it to the appropriate width. Then inside that div you will floats two more divs (float:left) using the correct width for each. That will then allow you to stack content into each column as required. You will then need to read up on clearing and containing floats (see css faq) to make sure that the floats stay within their parent container.

    Looking at column 1 you have a sequence of icons and you would most likely use a list structure to hold them because they are a list of items. Just float each list item left to make it go horizontal.

    The rest of the column is just static text and elements that can be positioned with margins as required.

    That's a start anyway


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •