Div full width with narrower container

Is there any way to create for example a menu bar that is the full width of the screen when your container is say 960px as I can't see that it's possible.
I think for this to be possible you would need to be able to add divs to the body element before the default container div, and then be able to add a container within this new div.

Your question sounds very similar to this idea:
http://forums.adobe.com/ideas/2664
Maybe you can write your use case in the comments there and add you vote!

Similar Messages

Full legend in image slideshow full width

Hi Everyone,
I can't get a legend full width with a background color in the image full width ( Slideshow ) , could you help me please ?
Thanks
Message was edited by: zeek zeek

@iamDK,
Thanks for the response. I am familiar with Pinning and Slideshow Widgets and have been using Muse since it's inception, what I don't understand after watching one of the videos in which Terry White mentions FullScreen or Browser Width using the Slideshow widget and as Jason Bibby at the top also mentions, I have not had any success using any of the SS Widgets again to acheive this effect. Pinning the SS Widget to the top of the Browser does just that and does not stretch images within it to fill the Browser Width even if you get inside the widget to expand an image so that it snaps to the edge of the Browser still does not do it regardless of weather its pinned or not.
I've had to jump into DW to get this done - in combination to using Fluid Grid, which I had rather not but so far so good, at least its responsive and not having to create twice in the case of Muse. I love Muse for its simplicity, being able to whip up pretty much any design in no time is sweet, but having a SS that stretches Browser width is a common trend and I'd like to see it integrated into Muse and if it can be done now as the video shows then how?
If you know how to do this in Muse could you please show us how?
Kind regards,
Kelvin

I have Firefox 19 and the screens are narrow. How can I get full width screens, like I get in IE? Full Screen command only makes my screens taller, not wider.

I just got a new Dell Optiplex computer with Windows 7. I installed Firefox 19 on it. The web pages come up narrow, with borders on each side. So the content of the screen is smaller than what I've gotten in the past with Firefox 3.6 on my previous computer. I did the Full Screen command, and that only made the screen taller rather than giving me a full screen (such as I get with the same web pages in Internet Explorer). I've also tried enlarging the text, but that throws off the format of the web page so some parts of it overlap.
What can I do to get a full screen, including full width?
There is a box below this Details box called "Troubleshooting Information" which says I should click Allow and then click Install. Since I don't know what would be installed on my computer, I did not do it.

The Troubleshooting Information extension adds some useful information to your post, but in this case, I don't think it's really needed.
Zoom is your best bet. To make it work for you, I have two suggestions.
(1) Switch from "text only" zoom to "full page" zoom. This is proportional like in IE.
View menu > Zoom > ''uncheck'' Zoom Text Only
If you are using the compact menus with the orange Firefox button, tap the Alt key to display the full classic menu bar.
(2) Install an extension that can default your view to a higher zoom level automatically to save time when visiting new sites. Here are two candidates:
* [https://addons.mozilla.org/en-US/firefox/addon/default-fullzoom-level/ Default FullZoom Level]
* [https://addons.mozilla.org/en-US/firefox/addon/nosquint/ NoSquint]
With that combination, can you minimize your eyestrain? :-)

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;

Abdelqader Alnobani wrote:
How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
<div class="gridContainer">
Top Code Section Goes Here
</div>

<div id="fullWidth">
Full width section goes here
</div>

<div class="gridContainer">
Bottom Code Section Goes Here
</div>

"Full Width" Slideshow with overflow hidden?

Hello,
I am using the slideshow widget with a huge width at the top of my page, underneath follows the content
with 842px width. Side width and column width is also set to 842px.
The Site aligns horizontally nicely. I want the slideshow to be cut off left and right by the browser width.
100% browser width, hidden overflow.
On the left side, the slideshow is "cut off" nicely by the browser, no scrolling to the left
is possible.
On the right side, one can scroll all the way over to the right corner of the "oversized" slideshow.
Is it possible to set the slideshow to 100% of the browser width and then hide the overflow-x? I did not even find
a way to do that manually, browsing though the html export's code. The most important <div> is generated in the depth of the widget's .js.
Or is there any other way to prevent the user from scrolling to the right? (hiding the bar is not enough nowadays, being trackpads all over)
Can I send the muse file to you?
Thank you very much in advance!!
Mike

FYI, if you want to keep the vertical scrolling capabilities, you should actually add:
overflow-y: scroll;
overflow-x: hidden;
instead of just overflow: hidden;
BUT thank you so much for finally saying this can be done in the header section of Page properties. I've been trying to create a "full width" effect for ages!!

Can I start Pages with full width zoom and hide inspector?

I'm a journalist, sometimes when I fire up Pages I need to get typing as quickly as possible.
I created a template with full width zoom and hid the inspector - that's how I'd like things to start. But when the template loads it reverts to a narrower wdith and the inspector is back. Can I force things to start the way I want?

I've got the same problem. My preference is to have a plain screen with the toolbar and rulers hidden and the inspector closed. The toolbar and rulers are no problem, but how do I set a default to keep the inspector closed?

How can I create an adaptable full-width site with sliding parallax panel?

Hi guys!
I have to create a web site with a full-width resolution, adaptable with any monitor and resolution using some panels that moves using the parallax scroll-motion with a sliding effects.
For example I nedd a site like "collecdiv.com" that works with the same effects and with an adaptable full-widht size page.
Here's some screen I take of my site with a 22" 1920x1080 resolution and a 15" 1280x1024.
The 4 tab I want to see in full width and in scroll motion parallax: four with a resolution of 22" and the other four with a resolution of 15" (the screen are made with paint to let you see what is the problem)
In the first tab there's a slideshow widget with some photo, in the other tabs there's a rectangular form with an image fill... I have to see the same layout that I see in my 22" monitor, in other smaller or bigger monitor (like 15") just like in the "collecdiv.com" website... The Dimension of my muse file is 960px width
How can i resolve the problem? How can I fix the screen so anyone else can see my site without problem and with all the resolution?
Who can help me? PLEASE
Thanks in advice
Francesco
P.S.: an advise... check the site "www.collecdiv.com" to see what I nedd

I'm adding this screenshot so you can understand the problem... The 4 tab I want to see in full width and in scroll motion parallax: four with a resolution of 22" and the other four with a resolution of 15" (the screen are made with paint to let you see what is the problem)
In the first tab there's a slideshow widget with some photo, in the other tabs there's a rectangular form with an image fill... I have to see the same layout that I see in my 22" monitor, in other smaller or bigger monitor (like 15") just like in the "collecdiv.com" website... The Dimension of my muse file is 960px width
Pleas help me

How do I create full width photos for a website with Photoshop - Fireworks - Dreamweaver CS3 ?

Greetings & Help!
I'm trying to create a full width photo layout using Photoshop or Fireworks CS3 and then end with Dreamwaver CS3 without the photo's being tall.
Exactly as the following websites - which all seem to be using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at this point I would settle for a static photo with the same size being the same on each page.
Also I would like my site to be a liquid layout so the photo and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match the same width, height and appearence as the websites I mentioned above.
If I choose a photo that fits the width then the length is too long. Also if I choose a large photo and have to crop it then most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks CS3 and after search Adobe and www I came across the mock up should be 1004px which would end up being 1024 with vertical scroll bar and small margins.
I also have Photoshop & Flash CS3 but should mention (if you haven't already guess it by now) I am a rookie when it comes to creating a website.
So if you can offer a solution in "Non-Tech Terms" I would appreciate it.
Thank you in advance for your time.

In the second example, the photo is set to background with a tile. The other parts are over top of the photo and done with layers with a background color setting.

Horizontal scrolling with a table that is 100% width of window/container

Hello,
I'm a bit perplexed - it seems to me that the only way that I can have both fixed and scrollable columns in a table, with a table that resizes to the width of the user's screen, is to have percentage widths for all the entries.
Warning imminent rant
This seems to me to almost defeat the purpose. I want to be able to show more columns if the user has a large screen, and less if they have a small screen, keep certain key fields always showing and have the space avaliable for each column fixed to the size of the column contents. Having percentages of the screen for all columns just means that the column will get wider and thinner, not more or less!
Is there any hope that this might come along with client side scrolling in NetWeaver EhP2? Or does anyone have a cunning solution to the problem?
Now, I can sort of understand why this functionality has been build like this (the ABAP not having any real idea of how wide the screen actually is) - but why deliever such a solution at all? I can almost understand a fixed width situation, although all that code for a minimal improvement over just specifying the number of scrollable columns is suprising - but I struggle to see the use case for setting all the columns in a table to display as percentage widths.
Rant over -
If anyone does have any ideas how to have a 100% width table with fixed width columns - please do let me know.
Cheers,
Chris

Can this work:
Emebed your table UI element in Transparent Container UI element ( give it a fixed width ), now make table width as 100 % and make each column width as Width of Transparent Container / No of Columns.
Although I'm suggesting this but in my opinion giving fixed width to any UI element height width property is not advisable and recommended. It is because when browser will be resized by the user then if there is a fixed width settings then scrollbars would appear and layout may also go haywire.
If on the other hand if we are giving % (relative of window ) in width height of UI elements then layout will be adjusted automatically.
Regards
Manas Dua

How can i fix the tab overlapping when i change the width of the url bar with #urlbar-container [focused]?

I want to create for myself the most minimalistic browser experience as possible and i've put the most used features in the title bar. For purposes of space i had to fix the width of the url bar to a minimum and my intention is to increase it to a fixed width only when #urlbar-container [focused]. The problem is that #urlbar-container will overlap the existing tabs instead of shrinking their space, making it look really bad. It looks wonderful with #urlbar-container:hover, but i can't use that since whenever i want to refresh the wesbite using the button the width of the container will increase moving the button from the place i had the mouse in the first place to click it.
Fixed width of the url bar when #urlbar-container is not focused:
http://imagizer.imageshack.us/v2/800x600q90/829/xo4o.png
Fixed width of the url bar when #urlbar-container [focused]:
http://imagizer.imageshack.us/v2/800x600q90/34/8o36.png
This is the css i have for the url bar at the moment:
<pre><nowiki>#urlbar-container {max-width:225px!important;}
#urlbar-container {min-width:225px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar-container [focused] {max-width:500px!important;}
#urlbar-container [focused] {min-width:500px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar {border-top-right-radius:10px!important}
#urlbar {border-bottom-right-radius:10px!important}</nowiki></pre>

What method (code) did you use to get the Tab bar displaying in the space used for the Navigation Toolbar (location bar)?
The Tab bar should be displayed above the Navigation Toolbar.
Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).
*Do NOT click the Reset button on the Safe Mode start window.
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

Div background to continue across full width of screen

I'm trying to work out how to make the background colour / images of the various divs in my web pages, continue to the full width of the screen. An example of what I am trying to achieve is http://www.youknowwhodesign.com/ where Sarah Parmenter continues the blocks of colours horizontally across the screen.
Apologies if this is covered elsewhere in the forum, but I don't know the correct terminology for what I am trying to do and therefore have not been able to find any helpful discussions.

I did not look at the source code for the page you mention, they may do it another way, however you could create multiple wrapper divs and nest the content divs, like so
.wrapper     {
     width:100%;
     clear:both;
     overflow:hidden;
     background-image:url(yourimage.ext);
     background-repeat: repeat-x;
.content     {
     width:950px;
     margin:0px auto;
Then;
<div class="wrapper">
<div class="content">Rinse and repeat as required.</div>
</div>
Gary

Insert Image with full width

Hello,
I'm trying to insert a full-width image (like a header, or a graphic cover, footers and stuff) but no matter the size I make the image on Photoshop, it always shrinks when I insert it in Adobe Acrobat XI
I know I can drag and make it full-width, but then I loose a lot of graphic quality in the process. Is there a way to disable the auto-resizer when adding new images?
Thanks!

Actually if I'm not mistaken, the pixels do matter, but the relation between pixels/size are determined by the DPI you set to the image.
My PDF file is 110 DPI (110 pixels per inch), and the images I do in Adobe Fireworks are 110 DPI as well.
No matter the size I do the images, they always get resized to about 70% of the page's full width.
I'll take some screenshots of the process and post them here
Here:
Creating the image (21cm wide (100% of pdf's width), 3cm height.. 110 dpi)
Adding it to the PDF trough the Tools menu bar (right side)
The output... A image with 70% of the PDF's width, where it should be 100%
And as you can see, the PDF's DPI is set to 110, the same as the image
So I can only conclude that Acrobat is resizing my images, maybe to fit the margins or something, and I would like to disable that :]

IBASE assingmnet block with Full Width.

Hello Experts,
I have come across IBASE hierarchy assignment block alinged on the left side of the page of WEB-UI.
But if i need to bring it to full width on top of the page rather than alinged on left side of page, from where can i control it ?
Do we have any SPRO setting ?
Component - IBHIER
View - IBHIER/TreeEnhanced
Regards,
MS.

Hello MS,
I guess you are in IBase-overview-page (unfortunately you are not very specific). There the user can click on the small button "Increase Size" of the tree view and then the view is full size and this setting remains also if the page is accessed again. Like a personalization.
Alternatively you might check the HTML-coding of IBMAIN/IBMainViewSet where there is something mentionned like a splitter. Here you could make some HTML changes but I am not an HTML expert.
Best regards,
Thomas Wagner

Help with setting up full width site?

Hello!
I'm new, Been following a lot of videos. I'm mainly interested in creating a full width or full screen parallax site like:
http://leicastorela.com/
I'm getting stuck on the initial NEW SITE DIALOG. I'm setting 1100 as width, 500 as height. I've zeroed out the gutters, padding etc. But when I preview I still get gray bars on the side? See screen shot.
What should I set the NEW SITE parameters as to achieve the full screen look? Thank you
PS: I even tried extending the menu bar all the way past the gray bars, same results. I'm on 7.3. I notice when I stretxh the black bar to the edge it does not say 100%? I think I'm on the latest version. I know that feature is new?

When you want to create a full sceen effect you have to extend your object/image outside the page size to the
ends of the grey area. See attached image.
Make sure you see the red lines appear on each side of the page when you extend your artwork to the edge.
This effect works for base objects for photos make sure you have "scale to fill" marked when inserting
it in a box.

How do I create a web mock-up using Full Width Photo's

Greetings & Help!
I'm trying to create a full width photo layout using
Fireworks CS3 & Dreamwaver CS3 without the photo's being tall.
Exactly as the following websites - which all seem to be
using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos
that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at
this point I would settle for a static photo with the same size
being the same on each page.
Also I would like my site to be a liquid layout so the photo
and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of
the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match
the same width, height and appearence as the websites I mentioned
above.
If I choose a photo that fits the width then the length is
too long. Also if I choose a large photo and have to crop it then
most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks
CS3 and after search Adobe and www I came across the mock up should
be 1004px which would end up being 1024 with vertical scroll bar
and small margins.
I also have Photoshop & Flash CS3 but should mention (if
you haven't already guess it by now) I am a rookie when it comes to
creating a website.
So if you can offer a solution in "Non-Tech Terms" I would
appreciate it.
Thank you in advance for your time.

Hi Pixlor -
I'll do my best to answer your questions - within my ability
- which isn't much.
As far as "Tile" the photo - I've checked out the responces
I've received from other's on this post - and other posts - and on
each page for the "masthead" I just want one photo to be the same
size of the page width wize - and the height of the photo should
not be tall from the top of the masthead to the bottom of the
masthead. As far as what I mean by "not being Tall" - see next
comment...
I'm just attempting to duplicate exactly (or very close to
it) the same appearence and dimensions - "Width = side-to-side,
Tall = Height - as the websites I mentioned in my first post here.
Also if you check out Joey's website (who responded to my
post as well) basicly he has created the same thing that I'm
shooting for except he is using graphics. I have to use photos in
my masthead which will be of kitchen cabinetry or construction
photo's and must highlight every detail down to the shine of the
kitchen cabinets knobs - or close to it.
Due to this I can not have the photos of the masthead "tile"
from "width-to-width or top-to-bottom because the deatils in the
photo can not repeat or multiply to completely fill the masthead
head. Otherwize if I choose a photo of kitchen cabinetry which
highlights a kitchen sink - and if I tile this photo - from what
I'm learning from everyones responce thus far - I'll end up with
several of the same kitchen sinks and cabinets in the same photo.
I must stress I could be wrong in what I described directly
above due to my lack of tech knowledge! If this post was about a
2x4 or 2x6 or Green Building or what have you, It would be heck of
alot easier for me to completely understand what you pro's are
trying to help me with - which I completely appreaciate. Expecially
someone like you who owns a monitor the size of one of my work
trucks!
Which brings me to your next question...
Liquid layout -
Yes I am trying to end up with a liquid layout for my website
using Dreamweaver CS3. Hopefully using one of the pre-built liquid
layouts in Dreamweaver and modify it within my ability.
The main reason why I would like to create a liquid layout is
because most others construction firms in my industry - and in my
target market - have websites that completely consume a viewers
monitor - viewport - screen real estate - (i'm trying to learn your
tech terms) no matter what size viewport a viewer has, or how the
viewer resizes theirs.
I've also heard that a "Min & Max" code can be included
in a liquid layout so that it would limit the "liquidness" of the
layout so "Text Lines" won't stretch too long making it difficult
to read when a viewport size extends - and when the viewport shinks
- all the elements (or Div's) will reflow an maintain order and
visability.
1004 -
The only reason why I mentioned designing the Fireworks CS3
mock-up at a 1004 is because someone else mentioned they design
their mock-ups at a "Canvas Size" of 1004. Then most browsers
automaticly inlclude a scroll bar if the vertical content exceeds
below "The Fold". Thus with the addition of the automatic scroll
bar the page now becomes 1024 - according to this person.
She went on to mention according to "recent studies" - 56% of
viewers have 1024 x 768 and most computer manufacturs shipp them
this way. Then the following stats... 22% at 800 x 600, then 13% at
1280 x 1024, then 3% at 1152 x 864, then 1% at 1580 x 1129. She
also mentions most avearge viewers (every day Dick & Jane, Bob
& Besty) (excluding computer tech folks like yourself) - do not
resize - bother with - or know how to resize their viewport.
My personal note on this is most of my target market -
clients - just turn on their computer and surfs the net from
website to website without changing their viewport and when also
asked they "Feel" that a website looks much better - or more
profeshional - when the content completely fills up an entire
viewport.
"Feel - not - Think" -
Keep in mind I choose the word "Feel" & not "Think". In
my target market - Residential Construction - 95% of home
improvement decisions are made my the Woman of the houshold - not
the Man. That being in mind it is a proven stat (and not a sexest
comment) that women base most of their choices or decsions on how
something makes them "Feel". Where as most men make their choice or
decision on how they "Think".
Also most men attempt to keep their women happy and knowing
that if they don't then they will end up in the doghouse - ( not a
fun place to be trust me on this) and in addition most men do not
have much of a clue when it comes to the interior design layout of
a home, matching of paint colors, appliance choices or what have
you.
Wow that was a major side track I took -
Back to 1004 -
It's not that I'm intend in designing the mock-up in
Fireworks at 1004 - I just want to end up wth a liquid layout so
when my site is viewed by "most people" then my site will
completely consume a viewers viewport - or very close to it.
If I need to design the mock-up less then 1004 - or more then
- and still be able to end up with the same end result in a liquid
form - so be it.
I don't know the best way to proceed -
I'm just attempting to learn from others who respond and for
the most part those who have been kind enough and taken the time to
respond seem to be very knowlegeable about my issue at hand.
You might find this hard to believe but I am learning quite a
bit from all of you and I really do appreaciate it.
Well now that this responce is as long as the novel "War
& Peace" - I'll close here.
Travis

Div full width with narrower container

Similar Messages

Maybe you are looking for