problem
I want my div to shrink in line with a flash image when the browser is resized but it won't.
The margins appear to get larger.
.slider {
background-color:#666;
max-height: 100%;
margin-top:0;
margin-bottom:0;
}
<div class="slider">
<embed src="images/slider2/slider2.swf" width="100%"></embed>
</div>
My other divs, menu for example shrink fine so I assume it's something to do with the flash??
Many thanks... probably a stupid question!
Are there any more suggestions please? If I insert an image instead of the flash, it's fine. So the problem must be related to how the browser treats flash or that I am failing to do whatever is necessary to allow for it. Thanks
.slider {
float:left;
background-color:#666;
max-height: 100%;
margin: 0 0;
}
<div class="slider">
<embed src="images/slider2/slider2.swf" width="100%"></embed>
</div>
Does it work now ?
Please do not forget to tick on the answer if it helped you.
Related
I did some search here and tried different codes that was recommended but none seems to work. Sorry if this is a basic question but I'm very new to coding.
I'm trying to centre and fit an image to the browser window. What code do i need to use?
P.S the image isn't my background image. I'm changing the color of the background and want this image on top of the background image.
This is the code i have
<body>
<div id="clock">
<img src="images/clock.png" alt="">
</div>
</body>
What CSS code do i need to use to achieve what I'm trying to do?
The first image is how its showing on the browser (basically can only see part of the image since it's enlarged)
The second image is how I want it to look
Add some styling for that image. Add this to your css file:
#clock img{
width: 100%;
}
#clock{
width:100%;
text-align:center;
}
#clock img{
height:100px;
width:auto;
}
<div id="clock">
<img src="http://pngimg.com/upload/clock_PNG6611.png">
</div>
here you can increase or decrease image height:100px; but make sure width is auto otherwise the aspect ratio of that image will effect
try this may help you
#clock
{
margin:0px auto;
text-align:center;
}
#clock
{
max-width:100%;
}
I have a website which uses an eccommerce script to list products. Most of the site seems to be mobile responsive, apart from the product images which stay fixed at a height of 500px. I've been trying to make them responsive but seem to have tried loads of methods and none of them work. The image always stays the same size when viewing on mobiles.
Here is the html code which generates each product image on the product page:
<div class="file_image">
<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
{IMAGE}
</div></div></div></div></div></div></div></div>
<div class="file_links">
And here is the section in the .css stylesheet which controls this div tag:
.file_image
{
float:left;
margin-right:30px;
width:480px;
text-align:center;
}
Is there something else I need to add somewhere to make this image responsive? I've tried several things but they don't seem to work. If anyone can help me out here, that would be great. Thanks :)
Try adding this,
.file_image img
{
width:100%;
height: auto;
}
you should try to set your image width in max-width instead of width for this case.
.file_image {
float: left;
margin-right: 30px;
width: auto;
max-width: 480px;
text-align: center;
}
Hope it might help.
Good Luck'
I want to get an embedded map effect like this one: http://themeforest.net/item/yalu-creative-multipurpose-template-html/full_screen_preview/4569177 except I need to do it with an iframe not JS like in the example.
My sections have a max width but the map's container is set to overflow:visible to allow the iframe to show through.
I have tried the following CSS on the map div and the iframe itself too:
display:block;
margin:auto;
text-align: center;
and they didn't work.
Please help... thank you.
My HTML:
<div class="section">
<h2>Where we are </h2>
<div class="map">
<iframe width="605" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=3-4+High+Street+Hitchin+SG5+1BH&aq=&sll=51.48931,-0.08819&sspn=0.868785,2.113495&ie=UTF8&hq=&hnear=3-4+High+St,+Hitchin+SG5+1BH,+United+Kingdom&t=m&ll=51.947915,-0.278864&spn=0.013226,0.051842&z=14&iwloc=A&output=embed"></iframe>
</div>
</div>
My CSS:
div.section {
width: 80%;
max-width: 600px;
margin: 0 auto 40px;
}
div.map {
margin: auto;
width: 100%;
height: 25rem;
}
I also have the following script going on, to set the iframe width depending on screen width (the default 605 width is there because iframes must have a set width in the HTML AFAIK:
if($(window).width() < 1100) {
$('iframe').attr("width", $(window).width());
}
else {
$('iframe').attr("width", "1100");
}
Fiddle here: http://jsfiddle.net/Ykx2w/
Ok, now I am confused. I would suggest to be more specific and clearly indicate what you are trying to achieve. Following the link you posted, I do not see any map, hence you may be talking either about id="main-slider" (which fills all available space, but not centered horizontally) or section id="main" (centered horizontally, but has static width). Which one do you need?
Also I updated my last sample to work under IE browser and auto fill all available horizontal space (resize the window): http://jsfiddle.net/Ykx2w/3/. If that's not what you need - try to describe better your need.
Ok, I did small changes here: centered iframe. Basically you need this CSS rule only:
div.map iframe {
display: block;
margin-left: auto;
margin-right: auto;
}
I need to display text around a floated element that itself has been pushed downwards. The HTML/CSS is very simple:
<div id="container">
<div id="shim"></div>
<div id="myimg"></div>
<p>This is a test to demonstrate the float overwriting issue. The blue box represent an image that I don't wish the text to overwrite...</p>
</div>
CSS:
#container {
width: 200px;
}
#shim {
float:right;
width: 1px;
height: 40px;
background-color: red;
}
#myimg {
clear:both;
float:right;
width: 100px;
height: 40px;
background-color: blue;
}
It works perfectly in Chrome and Firefox, however in Safari the text overwrites my floated element.
I've created a fiddle to demonstrate the bug (obviously, you'll need safari to see it):
http://jsfiddle.net/8JLFp/
Can anyone find a solution or suggest another way of doing this?
Please check the same issue on this site. May be this helps you.
Possible Solutions.
Try adding clear:both divs
Use overflow:hidden
I know this might be an old question, but its still valid today.
I got mine fixed by adding to the parent tag :
style="width: 100%;"
Which in your case, the div with id=container.
Hope this helps.
I would like to make a page with two columns of fixed width, each with their own background color, strechting over the entire height of the page, even when scrolling down for large content. A simple drawing for clarification: https://dl.dropbox.com/u/3060536/twocol.png
I have found several solutions that almost do what I want.
Putting height:100% everywhere, looks great as long as you don't scroll: this seems to be relative to the height of the screen (the background disappears when scrolling down for longer texts).
Putting height:100% on html and body, and min-height:100% on one of the divs, I can make one column fill the entire height. But this needs to be done directly below body, and hence it seems not combinable with the centered two-columns lay-out that I want.
Putting padding-bottom:100000px and margin-bottom:-100000px in the columns and overflow-y:hidden in the parent, works fine if everything fits on the screen, but it entirely removes the option to scroll down if the text doesn't fit on the screen.
So none of the above does what I want. What is the proper way to do this?
You could probably get some idea here.. if position:relative does not bother you, try this.
<html>
<head>
<title>sample</title>
</head>
<body style="height:100%;">
<center>
<div style="position:relative; width:900px; height:100%;">
<div style="position:relative; float:left; background-color:blue; width:200px; height:auto; min-height:100%;">
'//some texts or controls
</div>
<div style="position:relative; float:left; background-color:green; width:700px; height:auto; min-height:100%;">
'//some texts or controls
</div>
</div>
</center>
</body>
</html>
Have a look at blog post. It took me a while to understand how it works but it does and it's great.
I've not tested this, and im pretty sure the left: 50%; margin-left: -450px doesn't work very well to center the elements. but its been a while since ive done html.
#background: {
position: fixed;
top: 0;
bottom: 0;
width: 900px;
left: 50%;
margin-left: -450px;
background-color: red;
}
#background div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background-color: blue;
}
And the HTML
<div id="content"></div>
<div id="background"><div></div></div>
Update
As I said, it was untested. It turns out I forgot to include the height or bottom for #background, possibly something else too.
Here's an example of the idea that does work http://jsfiddle.net/bEuTU/