A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: Layout problems with CSS

  1. #1
    Webmaster Johnny Shiro's Avatar
    Join Date
    Jan 2002
    Location
    Norway |Trondheim
    Posts
    713

    Layout problems with CSS

    I have used designs with CSS without any problems but for really advanced designs i seem to get stuck with CSS.



    If you see my example picture above i have a header image and a placeholder for my links downright corner. My problem is that the layer with the header image centers in your browser window perfectly on resize, but the layer with the links will stay in the same position. I need the links to be in the div layer i have created for them and not float around when resizing the windows. But they should center with the rest of the design.

  2. #2
    2008 Man of the Year JWin's Avatar
    Join Date
    Aug 2005
    Location
    here
    Posts
    768
    The thing is, the links div is doing exactly what you told it to. There are a number of options, you can make the header image just a background for a main head div and put the links div inside it and move it to where you need with margins then just center the main div and all of it's contents will move with it. Or you could absolute position the links div on top of the header center both of them and use padding to push the links into place horizontally.

    With css layout issues abound, but the great thing is so do solutions. If you still have any issues I'd recommend posting your site so me or someone else can you give you a more specific solution.
    good luck,
    -J

    SAMedia Blog (general bs) :: jwinmedia (my music site)
    "Think of an advertisement where the product you're marketing is Jesus!"
    -From a work for hire ad

  3. #3
    Webmaster Johnny Shiro's Avatar
    Join Date
    Jan 2002
    Location
    Norway |Trondheim
    Posts
    713
    Doing the background method wont work since i am not able to position the links correctly without beeing in a layer.



    The header image and the white area i have marked in white is all part of the header image. So this is centered nicely. The links are in a div on its own since i need to have the links exactly where the white area is. Problem is i cant have it centered without the links moving off the white area. With tabledesign i could just do a coupe of TD`s on each side to prevent the text to not move away.

    The other method you described doesnt work either. Even if you use padding you will have the divlayer not moving at all when resizing the window. So i guess i need to position the divlayer without using the absolute positioning. But how is the problem

  4. #4
    2008 Man of the Year JWin's Avatar
    Join Date
    Aug 2005
    Location
    here
    Posts
    768
    Alright here ya go, it worked the same way I described. The only difference is I just put the links in a span instead of a div. No need to use divs unless it's necessary. The only files are the html (with css inside) and the header image taken from your last example. It works fine in IE6 and FF (didn't test elsewhere)

    You can see it here:
    http://www.straightaheadmedia.com/Storage/cssExample/

    And I attached a zip file with the html and image
    Attached Files Attached Files
    Last edited by JWin; 07-19-2006 at 10:30 AM.

    SAMedia Blog (general bs) :: jwinmedia (my music site)
    "Think of an advertisement where the product you're marketing is Jesus!"
    -From a work for hire ad

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center