Beefy Boxes and Bandwidth Generously Provided by pair Networks
There's more than one way to do things

How to make resizable too!

by SuicideJunkie (Vicar)
on Aug 20, 2009 at 21:04 UTC ( #790183=note: print w/replies, xml ) Need Help??

in reply to -- keep the navigation header out of your way

Stylish - - dynamic width pages

Or, this code can be appended to your userContent.css file (create if necessary). The file should be found/created in your FF profile's chrome directory.

What it does:

  1. Disables the fixed-width page rules!
  2. Prevents the title bar from jumping down the page at you even without saving a cookie or disabling javascript!
  3. Rearranges the sidebars to take up less room. (The docs are now quite readable even with only a 500px wide window)
  4. Moves the search box to the top left to allow window resizing
  5. Removes graphics which looked bad when resizing

Note: This is surely ham-fisted CSS work, since I've never really done much CSS before, but it looks good on my FFv3, and does what it was intended to do. (points 1 and 2 above)

/* ********** Fixes **********/ /* @group Layout */ @-moz-document domain( { body { background-color: #FFFFFF!important;/*#1d3648;*/ } div#page { background-color: #FFFFFF!important; width: auto !important; /* width: 985px; */ } /* @group Header */ div#header { background-image: url(combined-20090722.png) !important; width: auto!important;/*985px;*/ height: 0px!important; } /* @group Homepage link */ div#homepage_link { width: auto!important;/*340px;*/ } /* @group Search form */ label.overTxtLabel { color: #404040!important; margin-top: 0px!important; margin-left: 0px!important; } div#search_form { top: 1px!important; /*48px;*/ left: 16px !important;/*810px;*/ float: left!important; width: 115px; } div#search_form input { border-style: solid!important; width: 130px!important; left: 5px; } /* @group Body */ div#body { background-image: url(X) !important; /*url(page_bg.png);*/ } div#left_column { position: absolute; left: 0px; top: 50px; } div#centre_column { float: right !important; width: auto !important; left: 160px !important; top: 5px; position: absolute !important; background-color: #ffffff; } div#right_column { position: absolute; left: 8px; top: 1000px; } /* @group Footer */ div#footer { width: auto !important; background: url(X) !important;/*url(combined-20090722.png) 0 -105p +x;*/ } /* @group Content */ /* @group Header */ div#content_header { background: url(X) !important; top: 0; width: auto!important; /*648px;*/ height: 90px; z-index: -1!important; } /* @group Title bar */ div#title_bar { height: 53px; position: relative; width: auto !important; /*648px;*/ max-width: 648px; } /* @group Body */ div#content_body { color: #262626; position: relative; top: 0px; width: auto !important; background-image: url(X) !important;/*url(center_bg.png);*/ } div.noscript { height: 0px; text-align: center; padding: 10px; margin-bottom: 15px; border: 5px solid #dc4c24; margin-right: 15px; margin-left: 15px; } /* @group Footer */ div#content_footer { height: 0px!important; /*height: 10px;*/ width: auto!important;/*648px;*/ background: url(X)!important;/* url(combined-20090722.png) 0 -206p +x;*/ } }

Replies are listed 'Best First'.
Re: How to make resizable too!
by ELISHEVA (Prior) on Aug 20, 2009 at 22:23 UTC

    Many, many thanks!

    Best, beth

Log In?

What's my password?
Create A New User
Node Status?
node history
Node Type: note [id://790183]
and all is quiet...

How do I use this? | Other CB clients
Other Users?
Others having an uproarious good time at the Monastery: (5)
As of 2017-06-24 09:06 GMT
Find Nodes?
    Voting Booth?
    How many monitors do you use while coding?

    Results (557 votes). Check out past polls.