Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Layout Skeleton Needed To Solve Problem

    Hi there. I have been trying to figure out how to position CSS elements for a layout I want to create, but I can't seem to manage it.
    This is what I am aiming for:



    If possible, I want to only be using CSS1 for this and have a cross-browser solution.

    It seems that if I fix the text area width, then I get lots of empty space around it when viewed at higher resolutions. However, when I try to avoid fixing a width for the text area, the text area jumps down to below the DIV image when the window gets too small. I want to keep that text area in the upper right, but not let it get smaller than say, 300px -- if the window gets too small, I just want the text to bleed off the right of the screen and require a scrollbar to see it.

    Can someone show me an outline of how elements should be nested for this effect and the relevant position, width, and float properties I should use.

    Thank you.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I really shouldn't do this as doing it on your own will help more but,

    try this

    the paddings are set specific to the size of the pic you had in the gif file.

    IE doesn't support min-width so the expression was used.

    If you notice #top has height: 1px and #top[id] has height: auto Mozilla liked the auto but IE demanded a set height. 1px worked as well as anything else.

    only tested on FF/MOZ and IE6

  • #3
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    In Opera, the img div and the content div touch. Just to let you know.

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In Firefox it's messed up :S, any ideas how to fix?

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    what firefox are u using? its fine for me, and it looks the same in opera to

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Strange, version 1.0. In IE, it's nicely centered etc - in FF it goes off edge of the page.

    Here's an example (where I used the same kind of design (it will be changed)) - notice the difference in IE and FF?

    http://mysite.wanadoo-members.co.uk/...sss/index.html

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    mark87,

    Yours looks the same almost in FF 1.0 and IE6 to me. The only difference is the white box margins. They stickout more in IE. Everything is centered fine.

    have you cleared your cache?

  • #8
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yup, this is how it looks for me -

    Internet Explorer

    Firefox

  • #9
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump - anyone got any ideas?

  • #10
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Okay I just copied all your source and checked it. Looks fine to. One question:

    Are you running 800x600 screen resolution?

    If so you need to change min-width line of the #container.

    I'll use my original source as it's easier:

    Code:
    #container {
    	position: relative;
    	margin: 50px auto;
    	text-align: left;
            min-width: 820px;
            width: 80%;
            width: expression(document.body.clientWidth < 800? "750px": "80%" );                                                  
            color: #000;
            background: #FF923F;
            border: 2px solid #000;    
    }
    This sets FF/MOZ/etc.. to stop collapsing the page at 820px. If you are running 800x600 resolution this needs to probally be 750px to mimic IE.

    p.s.

    What did you output the code with? Some kind of page builder?

    you have:

    unknown {
    height: auto;
    }

    to make your logo box to work like in IE you need to change that to:

    #top[id] {
    height: auto;
    top: -32px;
    }

    the [id] is selector that IE will not recognize. If you used something like frontpage or whatever, odds are it doesn't recognize it either.

    same thing where you have:

    {
    padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px
    }

    it needs to be:

    * {
    padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px
    }

    BUT since you adjusted everything already and the "*" had no effect, ERASE that line from your code. If you add the * to it it will all go wacky on you. No need to use it and have to readjust everything again
    Last edited by harbingerOTV; 03-22-2005 at 03:02 AM.

  • #11
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah ok thanks, yes I'm running at 800*600.

    I used some of the source from the design above, so the 'unknown' probably got in because of that.

    I'll have a play around!

    EDIT : Yup, cheers, all sorted now.

    Hmm, one thing - how comes my pages do not validate for html ? Some errors I know why there are and can fix, but I don't get -

    'end tag for element "HEAD" which is not open'
    'document type does not allow element "BODY" here'

    http://validator.w3.org/check?uri=ht...s%2Findex.html

    Any help on that would be appreciated!

    Also, what does 'You are encouraged to offer a generic family as a last alternative' mean when validating css?
    Last edited by mark87; 03-22-2005 at 12:37 PM.

  • #12
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post

    xhtml html 4.01

    your self closing your link tag XHTML style in a doc defined as html 4.01


    instead of

    Code:
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />

    use


    Code:
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

    ps....
    read the validation results.... this was there...
    One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
    Last edited by zro@rtv; 03-22-2005 at 01:14 PM. Reason: cite already stated
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999


  •  

    Posting Permissions

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