Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: CSS newbie : How do i go about making something like this?

Bottom of Page

1 to 6 of 6

  1.  
    • CommentAuthorkaco
    • CommentTimeOct 14th 2008
     permalink
    Hello, newbie to the forum and CSS.

    I made a layout and i was wondering how to go about it. Im planning on integrating it with wordpress and I've read it's easier to just have the layout made already and to simply just insert the relevant code into the WP files.

    Here is the layout: http://kacolandia.com/layoutFFK.jpg

    and here is how im planning it with CSS. http://kacolandia.com/layoutFFK_highlite.jpg

    I guess my question would be, to the side of the content section there are images that are part of the header and content bg images, i was wondering how do i make and position these? have them in their own divs outside of the content area?

    thanks for the help

    - Kaco.
    •  
      CommentAuthoraleare
    • CommentTimeOct 15th 2008
     permalink
    You should work with nested div using background images in the header, content and footer. Its not too difficult if you calculate the right widths, and should work fine.
    •  
      CommentAuthormsalokangas
    • CommentTimeOct 15th 2008 edited
     permalink
    i agree with aleare. to answer your question, i would suggest taking a look at absolutely positioning your div's and using z-index to manage how they are displayed.

    good luck.

    matti
    •  
      CommentAuthorAvean
    • CommentTimeOct 17th 2008
     permalink
    Really nice design btw ;) Very fresh lookin
    • CommentAuthorpaul
    • CommentTimeOct 21st 2008
     permalink
    Also study the float "attributes" a very important to float your object and container.


    Paul
    • CommentAuthorpo10cy
    • CommentTimeNov 3rd 2008
     permalink
    have a wrapper div with the width of the largest element you will have, so in this case have it the width of your header div, then place all divs inside the wrapper div, set margins to auto so it displays centered on the screen at all times. have header div with the background image you need, and the nav items floating right, with margins to space it out correctly. content div has width of the header div, with background being the image you need and padding to space the text properly out from the sides (decreasing the width value of the div as the padding increases accordingly). footer you would do the same. its a pretty straight forward design to code, should go quick and easy.

1 to 6 of 6

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page