site layout with div tags

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?,
    Signature

    Give everyone a chance

    {{ DiscussionBoard.errors[3706627].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*
    Signature

    Heather M. Claus, 347-470-4365
    I help my partners build businesses on their passions! http://www.365DaysofEverything.com | http://www.heatherclaus.com

    Join me Thursday 6PM ET/3PM PT for "Business Therapy" on TMN!

    {{ 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

    Signature

    Give everyone a chance

    {{ 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.
      Signature

      Give everyone a chance

      {{ 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.
    Signature

    Give everyone a chance

    {{ DiscussionBoard.errors[3711410].message }}

Trending Topics