10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

site layout with div tags

by alan9187
8 replies
  • WEB DESIGN
    • |
Iv'e been using table based layouts for minisites also using css.

I was wondering if anyone could tell me how to do this using div tags, i carnt seem to get it right. Iv'e attached a picture of a site mock up in photoshop that i wanted to convert into a minisite using the div instead of the table based.

Could anyone help me how to do this ?, I have sliced the original psd into a bg, header,footer and content backgound images as well as the images for the other graphics inside the content area.
#div #layout #site #tags
  • Profile picture of the author alan9187
    Looks like i'm barking up the wrong tree, Have i got the question wrong?,
    {{ DiscussionBoard.errors[3706627].message }}
    • Profile picture of the author alan9187
      Wow , just found an awsome vid on You Tube explaining how to do this.
      {{ DiscussionBoard.errors[3706884].message }}
      • Profile picture of the author Steve Wells
        Originally Posted by alan9187 View Post

        Wow , just found an awsome vid on You Tube explaining how to do this.
        Just curious, whats the link?
        Signature
        Need Custom Graphics Work? - Message Me For A Design Quote!
        {{ DiscussionBoard.errors[3707236].message }}
  • Profile picture of the author 365Daysof
    Alan, while anyone good with CSS can do this, it is not as easy to explain to someone online, because it can be done a number of ways, depending on how you break up your images.

    *smiles*
    {{ DiscussionBoard.errors[3710592].message }}
  • Profile picture of the author alan9187
    Hi Steve, The vids awsome to me as i'm new to this but might be of no intrest to you, anyway

    {{ DiscussionBoard.errors[3710818].message }}
    • Profile picture of the author alan9187
      Hi Steve.

      By the way you replyed to one of my threads and give an honest reply to which i am greatfull and thanks. The thread was "honest opinions needed" which was on some designs for minisites that i had done in photoshop and you gave some links to places where i could learn some basic design princaples.

      Have been applying them bit by bit as i learn and WOW what a difference this makes. Once again thanks.
      {{ DiscussionBoard.errors[3710869].message }}
      • Profile picture of the author ronc0011
        A "div" is in its simplest terms a container. You can apply attributes to it using CSS such as width, height, background-color, border, etc. Also you can apply "positioning" in a variety of ways. There is a good tutorial on positioning here...

        Learn CSS Positioning in Ten Steps: position static relative absolute float


        Your example looks as though it could mostly be done with positioning and background-color. This would allow you to keep the images to a minimum i.e. small and few.

        I put up a thread about rounded corners which would adapt very readily to your example...

        http://www.warriorforum.com/website-...HOWoaTIkZ7uWxz

        It really wouldn't be much more than swapping out the image files and tweaking the height values.
        {{ DiscussionBoard.errors[3711026].message }}
  • Profile picture of the author alan9187
    Hi ronc0011.

    Thanks for info. Your link and your own thread have give be a good idea where to start .thanks.
    {{ DiscussionBoard.errors[3711410].message }}

Trending Topics