Centering with 99 or 100% width?

Here's the code for my webpage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>ivoog User Agreement</title>
<style type="text/css">
#ivoog {background:url(
http://www.pics.ivoog.com/top222.gif)
no-repeat; width:100%; height:137px; margin: 15px auto;
padding-left: 6px; padding-top: 10px}
body{margin: 0 auto; width: 100%}
</style>
</head>
<body>
<div id="ivoog"><img src="
http://www.pics.ivoog.com/ivoog.gif...
alt="" style="width:252px; height:74px"></div>
</body>
</html>
If you preview it you can see that it is not centered. I need
it to be centered in the browser.
I want the width of the div and background image to be 100%
in the browser, or 99%, something close to that. If I change the
100% I have to pixels it centers. But I need it to be percent. What
can I do? Please exapain. Thanks!

That's the nature of floats. If there's not enough room in
the line, it will
move downward until there is room.
More info:
http://css.maxdesign.com.au/floatutorial/introduction.htm
If you are concerned with the drop that happens if someone is
looking at
your page with a 300px wide browser window, you might try one
of these
options:
1. Add this to the .header CSS:
min-width:350px;
*width:expression(document.body.clientWidth < 351 ?
"350px" : "98%" );
2. See here:
http://www.projectseven.com/tutorials/css/minwidth/index.htm
-OR-
3. Use a table.
Tried and true, and far less of a learning curve.
Example 3.
http://tnsgraphics.com/center3.htm
You wrote, "I need it to stay in the same place like on all
other websites"
I would guess a good percentage of these are using fixed
widths or have a
layout that doesn't require an image to "stretch." I'll bet
many of the
fluid ones that do use tables to avoid what you saw. The ones
using floats
may use JavaScript or the suggestion above to control min
width in IE. Then
there is Flash... :-)
Take care,
Tim
"hahahaadobeman" <[email protected]> wrote
in message
news:fl9epq$4n6$[email protected]..
> Sorry, lol, another problem just found out.
>
> If you resize the browser until it reaches the ivoog.gif
image the image
> jumps
> under the whole thing. I need it to stay in the same
place like on all
> other
> websites.
>
> What to do to fix this?
>
> Here's a link for reference:
http://www.ivoog.com/link
>
> Thank you
>

Similar Messages

How to make an Imagine in Adobe Muse span 100% width and 100% height.

Hello,
So this has been really puzzling me for a long time now and I have not found the correct answer.
I want to create the effect on my website where I have an image that fills the screen now matter what size screen you look at it from. I know that this is possible with the 100% width option but you cannot replicate the same thing with the height.
The best way to explain what i mean is by showing this example I have found:
Nils Frahm
If you look at this site, the image fills the screen, use your zoom in and out tools and you will notice no matter what your zoom the page still stays in full screen view! Now, wat's evem better is when you go to scoll using your mouse wheel or the scroll bar, you will notice this full screen image then scrolls up.
Summary:
What I want is a full screen image which covers the screen no matter what size you look at it.
Any ideas??

Yes, you can create that.
Use the image as browser fill with position and apply scroll to fill , so that at certain key position the image will also scroll.
Something like this : http://imagescroll01.businesscatalyst.com/index.html
Thanks,
Sanjit

100% Width Tooltip

Hey All!
HOME
Any way to create this tooltip slideshow with a 100% width? Instead of this slideshow which creates horizontal scrolling?
Or, is there another way to plug in all this content to a slide using a different widget?
Thank you!

Yes, you can insert full width slideshow in master and text frames in child page, which would bring the same effect.
Additionally you can try composition for creating all contents in same container.
Thanks,
Sanjit

%100 width object not working

http://www.shutterlabcreative.com/index.html#services
I'm having issues with the %100 width object (texture at the top of this page) disappearing once it's converted from a normal image to a %100 width object. Does anyone know why this may be happening?

Hmm... the object doesn't appear to be exporting as 100% width. Could you please send us the .muse file at [email protected] along with a link to this thread so we can take a closer look? If the file is larger than 20Mb you can use a service like Adobe SendNow, Dropbox, WeTransfer, etc. Thanks.

Images are no longer scaling with (img {max-width: 100%; }) in css as of update 34.0.5 in firefox, this still works great in IE and chrome.

My website worked great until firefox update 34.0.5. Now the images will not scale to fit the box anymore. I am using flexbox so that the site scales to fit the size of the browser. In css I set img {max-width:100%;} and this would make the jpg files automatically size to fit the box they were in, but not anymore as Mozilla has really screwed this up with update 34.0.5. My site still works great with IE and Chrome but 70% of my web traffic is using firefox so I really would like this to work in firefox.
Any help is greatly appreciated!

I had the same problem, and this worked for me:
img {max-width:100%; width:100%;}

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

Adobe Muse 100% Width Content

Hi! I'm trying to follow this tutorial: Adobe Muse Tutorial - Responsive Design Hack! by MuseThemes.com - YouTube
The idea is that using text box, making it 100% width then cutting and pasting your content in it, it will be responsive like that. However, I've had no luck. I followed it over 3 times, did exactly what he did and did not get the same result. The result I got was content that just centers but does not stack like that once the browser is shrank.
Here's the site: www.littlecakefarm.com
I'm wondering what I'm doing wrong?

Seems text frame is not full width , please try to check and make that full width and preview. It should work with full width frame.
Thanks,
Sanjit

100% Width Not 100% Grid

With most designs you want a fluid header/footer but you want you content centered within a max 1180 Grid (not edge to edge). Can you do this in Reflow without having to nest divs and give it a max-width. (Doing this only allows you access to about 10 columns of your 12 column grid, which makes the concept of the grid a little pointless).

I have the same issues, I need some elements that would be 100% width in my design, but the content itself to work in 12 column grid at a max of 1200/1180px to allow those full width
Right now you have to have 100% for the columns widths to allow those full width rows to fill browser but it then makes it hard to work to 12 col grid of 100px columns. I would like to set grid to 1200px and snap to this, but for this grid to work in background and not itself act as a container for all elements then added. Sites like http://www.desk.com/ and http://www.shopify.com/ demonstrate this type of design.
Currently I have a 12 column graphic I can use as a background, but of course I cannot snap to grid with this. Maybe guides would be an answer as an alternative?
I would also love to see an assets librray where I could store common elements (e.g blog listing) and drag onto page as well as a swtaches, so if I use colour swatch "primary" on lots of elements on the pages, I can go and change the "primary swatch colour" and everything is just updated.

OBIEE 11g - 100% width

Hi all,
In OBIEE 10g it was possible to use the very neat 100% width on e.g. tables/pivots, but in OBIEE 11g it seems like this function is not working anymore. Which is very bad for the graphical user interface. It just looks a lot better when the tables are filling up the screen when using the 100% width option. (Which you set in the Formatting area of the table/pivot).
Is his something Oracle has "forgot" to bring further from 10g to 11g or am I missing out something here??
Another thing which also is really annoying is that it's not possible to open the log (the SQL Query log!!) in a new window. I use this a lot when building the BI Server, to make sure the BI server is acting as I want. Any workarounds here?
Any help appreciated.

I'm getting the Invalid Number Format when the Indent (Left Padding) on the Style is populated with something like 10px. When a left padding value is set, I cannot set a numeric format for this column.
If I remove the 10px left padding, go back to the Data Format tab, set a format and click OK, it keeps the new format as well as the 10px that I removed. But you have to remove the 10px every time you want to change the data format.
1. Open Column Properties
2. Kill the 10px
3. Change the data format
4. Click OK. The 10px padding is still observed in the results, and is still present if you come back in to Column Properties.
To change the data format again, I have to repeat all 4 steps.
I just tested all six fields in the Additional Formatting Options section. They all cause this same behavior. So the problem isn't the use of 100% in the width field. The problem is the use of any value in any field in the Additional Formatting Options section. Bug. I've reported it.

How to centre the stage of 100% width in a browser?

I have created a web page in Edge that I intend to be centred in the web browser. If I keep the stage to fixed width (960 px) then I can centre it in the browser with the following in the compositionReady event of the Stage:
$("#Stage").css("margin","auto");
However, I want to create a tiled background, for which I use the following in the compositionReady event of the Stage:
$("#Stage").css("background-image","url(images/[email protected])","background-repeat","re peat");
If I keep the stage to fixed width then I don't see the tiled background because the stage is full of objects and the tiled background doesn't extend past 0 and 960px. If I make the stage width 100% then everything becomes left-aligned, but I do see the tiled background (to the right of the stage objects).
I've tried thinking of clever ways to position everything relative to some transparent element that has its width property set to 100%, but to no avail.
Does anyone know of a way to ensure that everything positions relative to the centre of the stage while retaining the 100% width stage property?

Zaixist posted this a long time ago and you might want to try it:
$("body").css({
            "background-image":"url(images/yourBghere.jpg)",
            "background-position":"center center fixed",
            "background-repeat":"repeat",
            "-webkit-background-size":"cover",
            "-moz-background-size":"cover",
            "-o-background-size":"cover",
            "background-size":"cover"
$("#Stage").css({"margin":"0 auto"})
jQuery.fn.center = function(){
this.css("position","absolute");
this.css("top","50%");
this.css("left","50%");
this.css("margin-top","-"+(this.height()/2)+"px");
this.css("margin-left","-"+(this.width()/2)+"px");
return this;}
sym.$(".center").center();

100% Width Slideshow Not Displaying Images Correctly In Phone Version...

Hi all... Again.
2nd issue encountered tonight since working on the mobile version of my current project. Having copied, pasted and resized the 100% width slideshow from the homepage of my Desktop version to my Phone version and after having applied different resolution images and published successfully, I made some edits to a different page (the main "About" page, nothing to do with the Homepage) and published only to find that the images in the slideshow are now not displaying correctly...
After the first (of eight) image, it seems to skip the next one entirely and apply the text for the 2nd image to the 3rd image, the text for the 3rd image to the 4th image and so on... Additional to that, it seems to also randomly use the Desktop resolution images for four of the images... WHY?!
I made NO changes to the slideshow since the last publish so WHY has it changed?
I've tried re-applying the correct images and re-uploading; no change. I've tried doing a full-upload; no change. I've tried closing down Muse and trying again; no change. My only option left really is to either update to the October 27th edition of Muse (which I was deliberately holding off on, until I completed this project, which aside from the mobile version is done!), or to revert back to the previous version of Muse in the hopes either of these will resolve the issue. Only problem with that is I've started using the text sync features and the new contact form features (such as ReCaptcha, which is a pain in and of itself if you want to use two forms on one page!! Heaven forbid!)... So I'd really rather not have to revert back but I also don't really want to risk screwing anything up further with the latest update, as has happened on more than one occasion for me when in the middle - or near the end - of projects!
Is anyone else encountering this? Anyone able to replicate it? Anyone know how to fix it? I'm really reluctant to continue on with the Phone version of this project until I know I won't keep encountering this sort of thing...
Any help would be appreciated.
Thanks.

In the words of Gomer Pyle, "Well Golly!"
Thanks. lol

Captivate 8 responsive designs: only one 100% width object per slide?

I've been customizing some responsive themes to use two or more 100% width objects. As I work with the project, I find that some of these objects fall short of the right edge at some break points or, more commonly, at intermediate browser widths between breakpoints. One object (a PNG used as a branded header) started slipping off to the right, leaving a big gap at the left, after I worked with the file for several hours.
I've been putting this behaviour down to file corruption, but I'm now seeing the right-side gapping even with a fresh new file built on the White theme that has only one slide with three lines of text.
Looking closer at the themes, I can see that none of them have more than a single 100% width object. Is this simply a coincidence, or does this reflect a real limitation in HTML 5 output from Captivate?
Should I adapt my themes to use other objects at sub-100% widths, where a little gap on one side or the other won't make much of a difference? In short, should I simply avoid putting more than one object per slide flush with any of the edges?

Replying to my own question ...
Has no one else seen this? Is this a known bug?

How to get 100% width in fluid grid layout CC

I'm currently getting to grips with dreamweaver's fluid grid layout and cant seem to get a div to go the full 100% width across the screen. Ive created a div outside of the grid container as a non fluid div, and entered in the CSS myself in code view since Dreamweaver doesnt seem to allow you to add a class or ID to non fluid elements in design view. I have done this and all though i thought i had achieved success i noticed when looking closely in live view and when previewed in chrome that there is still a tiny gap between the div and the edge of the screen. Its very small, but its definitely there. Ive enetered width to be 100% and its definitely not simply 100% width of the grid container as its wider. I just cant account for the tiny gap which seems to be about 1 pixel wide. Any ideas whats causing this gap?

Depending on your project goals, there are plenty of other Responsive Frameworks you can use.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's FREE Bootstrap extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Project Seven's Page Packs (Commercial CSS Templates)
http://www.projectseven.com/products/templates/index.htm
Adobe Edge Reflow
http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
PS. I don't work for Adobe. I'm just a product user like you.
Nancy O.

Can't create %100 width object

I'm new to Muse and am having problems creating a %100 width object.
I have a rectangle containing a fill image that is set to tile horizontally which is part of a group. When I snap the edge of the rectangle it's a blue line instead of a red one and does not indicate that it's a %100 width object.
What could I be doing wrong? Or is this a glitch of some kind? Thanks so much!

Hi
With group objects we cannot do that as 100% width, please ungroup the rectangle and then it would be 100%.
Thanks,
Sanjit

How do I make my webpage 100% width on any desktop resolution?

Hi,
I designed a website mockup on Photoshop with the dimensions of W: 1280 x H: 2464 but when placing the JPG file on the empty homepage
to see how it would look and fit, it wasn't taking up the whole screen and instead was centre and there was white background left and right.
I'm viewing this on my desktop thats 1920x1080.
I'm new to Muse so I'm not sure what is the best dimension settings to choose for a website that would work great on almost any desktop.
An exmple of the style of website I want to create is the Nestea website
For the header and footer of my website I have a huge image instead of a solid colour.
I know the images have to be really large so they don't get stretched out and loose quality but
if someone could tell me the dimensions and settings to put when creating a new website so that
I could re-mockup the website with the same dimensions and that if I placed the JPG file to see how it
would look, that it would fit edge to edge and not loose any quality.
Thanks

Hi,
You may find the below resources helpful in getting you started with a flexible width site in Muse similar to the example you provided.
http://tv.adobe.com/watch/muse-feature-tour/muse-design-for-flexible-browser-width
https://helpx.adobe.com/muse/how-to/add-100-width-slideshow.html
http://helpx.adobe.com/muse/using/using-fill-browser-fill-options.html
http://tv.adobe.com/watch/learn-adobe-muse-cc/adding-scroll-effects/
http://helpx.adobe.com/muse/using/scroll-effects-opacity-slideshow-animate.html
Cheers,
Vikas

Insert 100% width flash banner in HTML

Hi all,
i am trying to insert a 100% width flash banner in an html
page. The problem i am facing is that i am inserting the banner
inside a div which has some margin in it. This is effecting the
percentage size of the flash banner. How can i display the flash
banner in that div without the margin width effecting the flash
banner size.
(01) - <div style="margin:0px;"> <object
classid="somevalues"></object>
The size of the flash banner is perfect and when the window
is resized the flash banner fills in perfectly with the div tag and
the retains its width and height
(02) - <div style="margin:50px;"><object
classid="somevalues"></object>
The flash banner gets effect and the width is effected.
Please help....

> BUT if I try to insert a Flash movie/banner into the
template - then it
> does not appear of ANY of the site files.
Because of the active content .js fix, when you insert a .swf
file into a
template, you must use a Site Root relative path for it.
Open the .dwt template file.
Double-click on the .swf in design view- the "browse to file"
dialog box
should come up showing the currently selected file.
look in the bottom of that dialog box for the pulldown to
change from
document relative path to site root relative path. Change it
to site root.
click okay and save the file, and let changes propagate.
does it show in the child files now?
[note- It may still not show during local preview because
site root relative
paths in javascript will not make any sense during local
preview- they
should work fine on the remote host if the site has it's own
domain name
though]
Alan
Adobe Community Expert, dreamweaver
http://www.adobe.com/communities/experts/

Centering with 99 or 100% width?

Similar Messages

Maybe you are looking for