SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict mmanders's Avatar
    Join Date
    Jul 2006
    Location
    Edinburgh, Scotland
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Screen Resolution - Design Problem At Work

    I am currently redesigning the look of the intranet at work. Unfortunately the intranet is powered by Oracle Portal (a supposedly brilliant enterprise Portal application ) To create a new design, I have to write snippets of html and css and place them into definable "regions" of the page. The overall layout of the page is controlled by Portal, and is such that the layout is elastic - when the browser window is resized/on a different resolution - the page does not scroll horizontally, and everything gets squeezed together.

    Both the old and new design have a top navigation bar and masthead. The old design works with this resize, because all the navigation links are on a similar background colour and wrap to a new line. My design (which was worked out as a complete html/css mockup) has a gradient filled horizontal navigation bar at the top. When the window is resized, these links wrap around and look awful. I didn't realise Portal's limitations when I created this mockup, and the "Editorial Board" (design by committee :-( ) love this design.

    What should I tell them. The fact is a lot of users in our organisation use non standard and/or different screen resolutions for personal preference and accessbility related reasons. They don't want me to change the design, but want me to fix it so it doesn't wrap the navigation. I can't do this with the current Portal software. I'm between a rock and a hard place. Any advice on how to proceed delicately but constructively in advising the committee.

    Thanks.

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,357
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You could try using em's for the navbar width and %/em's for font sizing this would mean the font size would shrink on smaller browser settings.

  3. #3
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, AIUI, they want the navbar to not wrap but instead cause a horizontal scrollbar?

    This can be done. If they are display:inline just use white-space:nowrap on the parent. If they are float:left you need to specify a width of the parent so that it can't get so narrow for the boxes to "wrap".
    Simon Pieters

  4. #4
    SitePoint Addict mmanders's Avatar
    Join Date
    Jul 2006
    Location
    Edinburgh, Scotland
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both - I'll give it a try.

  5. #5
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,357
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Let us know how you get on

  6. #6
    SitePoint Addict mmanders's Avatar
    Join Date
    Jul 2006
    Location
    Edinburgh, Scotland
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for the help guys. Would have replied sooner but I had time off work to move house. Setting width thus
    Code:
    min-width: <value>;
    width: auto !important;
    width: <value>;
    seems to have done the trick. Thanks again.


Bookmarks

Posting Permissions

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