for this site:
http://yoursdproperty.com/
do you see how there some extra white space all the way at the top?
how would i expand that image to get rid of that space?
The weird thing is that the flash file that runs the header images has already been changed by me to be the width of the page. Something in the CSS though makes it the old size of 940 wide.
please note that im only interested in making adjustments to the css or html, not flash or javascript
You need to change the width on the embed tag in the html
<embed height="250" width="1050" wmode="transparent" quality="high" name="topheader" id="topheader" src="/templates/pjo_joomlaforall/images/header.swf" type="application/x-shockwave-flash">
and then remove width:940 from div #at-flashheader
The Question (is this correct?):
How do I make the Flash movie extend to the full width of the page (instead of 940px)?
How do I cause the Flash movie to reside at the top of its parent element - and thereby at the head of the page?
The above should be done without modifying Javascript or Flash.
The Answer:
Part 1:
It seems that you are using FlashObject in order to embed the flash.
FlashObject accepts several arguments, the 3rd and 4th of which represent the width and height attributes of the element.
As long as those attributes are set they will override ANY other CSS classes you apply.
To change the width to 100%, you must change that 940 to 1040, or possibly to '100%'.
<script type="text/javascript">
var fo = new FlashObject("/templates/pjo_joomlaforall/images/header.swf", "topheader", '100%', 250, 7);
fo.addParam("wmode", "transparent");
fo.write("flashcontent");
</script>
While this may count as using Javascript, it is the only solution that could work.
Part 2:
The actual swf you are dealing with is 240px wide and 200px tall.
The part of the flash file which is 'image' is only 50px tall, and is in the vertical center of the swf.
There is no way to use CSS to enlarge that 50px center within the SWF.
What you can do is use CSS enlarge the swf so that the height of the center matches your needs, and then some more CSS to crop off the top and bottom whitespace.
Place the embed tag inside an element whose overflow is hidden, and apply a negative top margin (or negative position) to the embed equal to the whitespace you wish to crop.
<style type="text/css">
#at-flashheader{
overflow:hidden
}
#flashcontent{
margin-top:-40px;
}
</style>
<div id="at-flashheader"><div id="flashcontent"></div></div>
'Course, this won't really work if the width of the swf is a percentage, as the height of the whitespace wont be constant.
If you set the width to a constant such as 1040px, you can set the negative top margin accordingly.
As an aside:
You really should be doing this with Mootools or JQuery instead of Flash.
Case in point - I have Flashblock on my browser, and had to jump through hoops just to see what you were talking about. Had I been on my iPhone, jumping through hoops wouldn't have helped.
Add margin-top:-45px to class at-flashheader
Your flash movie needs to be 960 x 250 in order for it to be the full width and length of that space (it will be behind the broker's picture, right?).
Position it at left:0; and top:0; and you're straight.
Not an answer to your question, but why is this in Flash in the first place? As far as I can see, the only effect this has is that the header remains blank when you turn off JavaScript.
I'd say a few points:
Make it a javascript image fading gallery. It's less processor intensive and more likely to work on all platforms as well as being easier to get working.
This may be a bit much, but chaing the site width to 960px (see www.960.gs) will make it fit better within browser windows of people running at 1024x768 (still a common resolution) without horizontal scrollbars.
do it with actionscript in the flash, by using the stage width and stage height variables. if you don't have the flash source, wrap the swf into an new swf around so the new swf scales up the nested swf.
You would have to do what Emily says, to make the Flash fill the header area.
In your case, you would change the width of the object/embed tag in the FlashObject call:
var fo = new FlashObject("/templates/pjo_joomlaforall/images/header.swf", "topheader", "1050", "250", "7");
But you would still have white space at the top, because the swf file (or rather the images in the swf file) has that built in, as far as I can tell. You would have to edit the Flash to get rid of the white space.
Related
I am working on removing tables from my site, and just learning the div tricks involved. My home page currently has a centered table nested in another table. Removing the outer table was a bit tricky for someone just learning non-table methods, but it's done.
My problem is, the inner table is super-easy to center ("margin:0 auto" in the CSS), but its div equivalent is not. The div will center if I specify an absolute width (such as 640px), but since I'm designing with the user's font size (not something I specify), I don't know how wide it will actually be for a given user.
I've simplified the home page and have it online (test.html and HoH.css Here is an overview image of test.html.
Sorry for all the links. But with a floaty thing inside another floaty thing, I don't know what is relevant. The file test.html contains 63 lines of formatted HTML. The 640px hr is there for reference only; it will not be part of the final page.
PS: I'm removing the tables because when I asked for site reviews, the first comment almost everyone had was, "get rid of the damn tables".
Probably you shouldn't worry about users font size because all modern browsers zoom whole page, not only font size, and everybody will be happy with your fixed width.
Also you can use EM values instead of PX, 1em = font size in px. You can change 640px to 40em if you have 16px font size. If someone have for example twice bigger font, he will get twice wider block.
And if you want css-solution for unknown width block centering, you can use inline-block and text-align:center: http://jsfiddle.net/rBc4T/
use CSS and jQuery -
css -
#divID{ left:50%;}
jQuery -
(function(){
var marginLeft = $('#divID').width();
$('#divID').css('marginLeft','-'+ marginLeft /2 +'px');
});
When the browser gets stretched from its width, the header doesn't move, but the content of the page does. It's driving me nuts. If you stretch it far enough, the banner eventually ends. IE: it doesnt repeat further the banner.
Any advice? I'm not sure which part of the source code would control this. I'll put the CSS up and if needed, I can throw up part of my HTML.
Image Examples
Web
Without seeing your markup (which would be helpful to share), it looks like line 9 is your problem:
header#mast{margin:0 0 0 0px;width:1200px;position:fixed;top:0px;left:0%;z-index:100;}
Update it to:
header#mast{margin:0 0 0 -600px;width:1200px;position:fixed;top:0px;left:50%;z-index:100;}
(Note the left:50% and -600px left margin (half the width of the element).
If you wrap your #mast and #primary-nav' elements in adivthat has a style ofmargin: 0px auto` this should cause everything to continue to center with the rest of the page as your expand the window.
As far as the banner ending is concerned, add the style width: 100% to the element that is responsible for it for the resulting infinite expansion as you widen the window.
EDIT
Since you've added the website, put the contents of the header in the following tag:
<div class="container container-twelve">...</div>
This will center your image, text, and links.
It was a large combination of difference changes that were answers. Basically it came down to a number of width changes.
If I set width 100% in one place, it had to go in multiple ones because the entire mast div was nested divs. Also, to get the banner to expand further to right, it had to be 200% for width.
The proper code is reflected in the website, at least for my solution.
Thank you everyone, and specifically TMan.
I'm trying to create a fluid-layout in html, containing images.
For now, I support 2 sizes for the layout. The default layout is used to display a 1000px wide site. If the screen is wide enough (wider than 1200px), I enhance many aspects with css media queries.
I have a DIV container that is 600px wide for the default layout, and 700px for the enhanced layout.
There is a random image inside, for which I know some metadata (width and height). I may need to downsize the image if it is too large for the container.
So I use this code to have a fluid-layout
<div class="container">
<!-- for a 650px/400px image, the downsized version is 600px/369px -->
<img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>
and the style
#media screen and (min-width:1200px){
.container IMG {
width:auto !important;
height:auto !important;
}
}
Here is how it works:
In case of the default layout, the inline style applies. So the image is down-sized to 600px/369px to fit the container.
Otherwise, the media query style applies, and the image is at its default width/height (I know the image is never wider than 700px so all is fine).
My problem comes from the loading state of the image and the space reserved by the browser. The behaviour of chrome/firefox is the same but is quite strange for me. Not tested with IE (not my priority actually)
For the default layout, no problem, the inline-style still applies. The browser displays a white space corresponding to the image.
For the enhanced layout, the "auto" sizes applies. But the browser does not know the natural size of the image while it is not fully loaded, and it appears that "auto" is equivalent to 0px. It would be perfect if the width and height attributes set for the image applied. But it is not the case. The result is that no space is reserved for the image, which is not the behaviour I want.
A first solution I found is to add another inline css rule for the image. If I add "min-width:600px; min-height:369px" the reserved space for the image is always 600x369 pixels, instead of 0 pixels for the enhanced layout. That's better, but not perfect yet.
-- What do you think ?
Is it possible to "reset" the css instead of overriding it with the "auto !important" rule ?
Should I use an other approach ?
I may use some javascript, but I think it is a bad idea to rely on it. Actually, I may have a lot of containers similar to the one described above. I prefer an automatic solution (css is great for that).
you can just set the width or height to initial.. that resets the Value on override..
The general approach that I've seen thrown around for responsive images is to have a parent element (like .container) change sizes with media queries. In your markup remove the width and height attributes, and then in your CSS add:
img {
width: 100%;
}
As your parent element's size is dictated by media query rules, your image will grow accordingly.
I'm bringing this up because it looks like you want to use the same image file, but just have it grow/shrink. The major drawback is that a larger image could load on a mobile device screen, and add to page load. This is the major technical hurdle facing Responsive design currently, and there is great debate about the best way to address it.
Use .container IMG.someClass { ... } then you can remove the class name from the image to remove the CSS styling.
So I'm inspecting this site: http://www.grittirollo.it/ and it appears that the content that slides out has a fixed height. Is there no way to set this dynamically?
It appears as though the developer measured out how tall each portion of the sliders' box model would be when rendered, and then multiplied it by how many rows there were. From there, he/she set it manually in the CSS.
Elements on a webpage can typically be measured with their scrollHeight JavaScript property (element.scrollHeight) however some browsers don't have this and some browsers do it differently from others. (I believe Firefox's has to be done recursively down the tree of elements and Safari just uses the outermost element.) This should be possible without manually setting the height using JavaScript, you just may have to conditionally code it to work with all the browsers you want to support.
I don't see why it's necessary to set it dynamically. If the stuff is float:left; and they put a <div class="clear"> at the bottom of a hide-able section, you would be able to see the contents of that section when it was un-hidden with JavaScript. You could then adjust the layout with padding and margin to make it look pretty.
Or, they could have also used position:relative; and position:absolute; to layout the hide-able sections. It comes down to preference.
I have a gradient background that I'm using like follows in an ASP.Net Webforms application:
<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>
Where foo.jpg is a 200x1 pixel image. My problem is this, the height of the injected HTML varys from about 200px to 1000+px depending on size of a datagrid. Also, this segment is part of a much larger page that uses for positioning content.
What I would like is that after the HTML is injected, have the background automatically stretch to fit the space so that the gradient is applied smoothly over the entire height.
CSS cannot stretch background images.
However, IMG elements can be stretched, so you can put an IMG right before the grid, use CSS to give it position: absolute and z-index:-1, and use jQuery to set its dimensions to be equal to the grid.
I was researching exactly how do do SLaks solution and discovered a "hack" that works for my situation. While it doesn't do a stretch operation, I'm simulating one in a way that works for my situation and it is 100% CSS. I don't claim that this is a general solution, but it does work for me.
To answer the question, I need to be a little more precise in my definition of my problem.
in my original code,
<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>
foo.jpg is 600px x 1px gradient from a color to white which is color of web site. This way on the larger displays, I get a very smooth transition from color to white. That it doesn't go all the way to the bottom is something I can live with. The problem comes when I need to render some data that displays only 300px high. Then only 300 px of the 600px in the gradient display. Resulting in an "ugly" step change in the color. This is what I really needed to get rid of by doing the resizing.
While resizing the background is the technically cleaner solution, what I did was
<div style="background-image: url(foo.jpg) repeat-x;">
<div style="background-image: url(fooBottom.png) repeat-x; background-position: bottom;"
... Injected HTML codes
</div>
</div>
fooBottom.png for me is a 200px by 1px image that is 100% white at the bottom and 100% transparent at the top.
The key thing on the inner is the "background-position: bottom;" This positions the new background section. If the section being displayed for me is >800px high, this new code does nothing visually.
But for sections shorter than 800px, what happens is the bottom image gets closer to the top. This coverage occurs because the inner block is drawn "above" the outer block. Then if the section gets shorter, the bottom background image covers more and more of the top background image.
But because of the transparency in the lower image, it ensures that on shorter sections, that there is a blend to white at the bottom.
I'm going to create a blog on my personal site that shows examples. When I get the example done, I'll update this post.
UPDATE - I've posted a working example at http://sntsoftware.com/Blog
I've been in your situation before, and I ended up having about five different background images for the resolution variations. If it was their first time to the site (no cookie present), I'd present them with a landing page where I set a cookie (using Javascript) with the value of the client resolution (see my getViewportDimensions function in this blog post). On the server-side, I evaluated the resolution on the next request and chose which image to inject in my CSS. It works well. Be sure to have a default resolution set on the server-side in case the user agent has Javascript or cookies is disabled.