How can I specifically position the flash element embeded using SWFObject please?
Moving it's container DIV around with absolute positioning and top and bottom set doesn't seem to work.
Thank you.
#Francisc: Try --
<div id="container-div-with-the-positioning-rules">
<div id="flash-to-be-replaced">
Your alternate content if the user doesn't have Flash installed
</div>
</div>
Please note, this might not be the most elegant solution since it's adding an additional <div>, but having had the same problem before, this is basically how I solved it. It might give you something to build on or perhaps some of the other participants on here will have better solutions.
I'd vote up or comment on stealthyninja's response, but I can't because I don't have enough rep. But yeah, you have to add another div around the "flash-to-be-replaced" div because SWFObject changes that div to an object tag or something else that CSS can't do anything about.
Related
I am just learning to code and have been looking everywhere for an answer on this one and for some reason cannot find anything.
I noticed that it seems to be common practice to put an image inside of a container or wrapper. For instance, rather just having:
<img src="url"/>
Everyone seems to be in agreement that it needs to be this way:
<div class="container">
<img=src"url"/>
</div>
What is the purpose of wrapping the img inside of a div in this way? It seems to have something to do with "responsive design", but I'm not 100% sure. Is it just so that we have something to size the image relative to, rather than using definite sizing like pixels on the image selector in css? The more I think about it as I write this, the more it seems to be the right answer, but I'm not sure if there's something else I'm missing on this one.
Any insight would be very much appreciated. Thank you.
unfortunately there is no "single" correct answer for this.
There can be many reasons as to why one would wrap any element in another element, it is not specific to <img /> tags :)
In your question I read something like this (converted to real world example):
I see that it is common practice to put a frame around a photo.
Where the "frame" would be the wrapper element, and the photo would be the <img />.
Looking at it this way might make it seem more clear. The photo is the most important part, technically speaking you don't need a frame to show the photo. If you have just a photo, you won't be able to hang it on your wall without damaging it by driving a nail through the top or applying some tape. If you have a frame though, you can make that photo take up any amount of available space within it, you can use the clip to hang it on a wall and if you put multiple photo's in the frame, you can move them all at once since they are in the same frame.
The reason most people put that image in a "container" is because they get some sort of advantage out of it over using an image alone, this could range from aspect-ratio locks to relative positioning. In some cases, a wrapper is required to achieve certain (notably more complex) animations as well.
Websites are built out of "logical" pieces that, together, form a website. The individual pieces are all "frames" that "flow" together to create any page layout you see on every website.
It is merely a structural way of thinking, if the purpose of that image was to be used as a background image for the entire page, a better alternative would be to use CSS background-image property on the <body> tag and not use the image at all. But if the image is meant to be part of a smaller part of your website, it should probably be contained as appropiate.
This answer is in no way a guide to go by, nor a ruleset or anything like that, they are just the thoughts of another developer. There are countless reasons for wrapping an element and this answer doesn't even cover 0.0000001% of those cases. I'm just saying -- there's no specific reason to do or don't here.
I'm working on a project using the Vue.js 2.0 framework and a bit of Bootstrap 3. This project has required me to work more on the front-end than I am normally used to so I was wondering if anyone here could give me some useful insight into a few CSS issues I appear to be having.
The Project can be found here: http://rgmotorhomehire.com/project
If you give the source a quick inspection, you will probably notice that the body element is only the height of the navbar, and that the container div's for my various 'Pages' are actually totally outside of the parent body element.
The main thing I'd like to know is:
How I can force the Body to 100% height via CSS, so that it wraps it's child elements properly, and I can then add a Footer to the HTML.
Please note that I have already tried:
html,
body {
margin: 0;
height: 100%;
}
However, if you try this for yourself in the inspector, you will notice this then introduces a new issue of the HTML element now having an empty space below it.
This whole scenario has left me more than a little lost and confused. Hoping someone out there can inform me on whats causing my issues.
Note: I'd like to apologise in advance for any pointless info this post contains (including this note), I've had complaints in the past about my questions not being direct enough but I've tried my best to be as clear and concise as possible, Thank you.
UPDATE: Literally straight after this post, I discovered the solution is to use clearfix on my wrapper divs as they had a 0 height bug. This post can probably be closed now. I found this solution here: http://www.jqui.net/tips-tricks/css-clearfix/
clearfix is a bootstrap class. It clear out all float property. that is right or left.
If you have a div of calling float left property.
for the class pull-right have the property float right. So for the next div we want to clear all the floating property that called before, so we call clearfix it clear all the floating property. so that it works fine.
i've been trying to create pattern for my website using div elements. The problem is than my knowledge in css is very limited and i've no idea how to make the pattern like this
I tryed to use block, inline-block, but were not able to achieve the pattern i'm targeting to.
It's possible to do it with table, but than code looks like piece of thing.
It would be great if you will help me, because doing this not only to create a web site but also to learn css, so comments are really welcome.
Thank you in advance
make a parent div and add all properties to that like width of the container and height of the container. then add css property to each element individually or by grouping in class
I'm making a website for an organization at my school, using basic HTML and CSS. Right now, I've made several other pages for the site and have run into no problems like this one.
Here is the page I am having trouble with, if you want to view it in context:
http://acacians.net/scratch/officers-slim.html
I tried posting the code here, but it didn't completely work. I suggest following the link and viewing the source.
The final "officer" div is for some reason falling outside of my "info" div, which is nested in the "pagecontent" overall div.
Here is a link to the original CSS:
http://acacians.net/scratch/style.css
I'm really not sure what other information to supply, so I'll do my best to watch for any questions and do my best to respond accurately to them.
Thank you,
-Mike
Put <br style="clear: both;"> just before closing .info div.
If I put a simple iframe within a DIV any DIV's below it do not show up, the page stops there. If I just type some text with no iframe, it works fine—so it is the adding of the iframe that causes it.
The file loaded by the iframe is dummied right down and just displays the word TEST.
Before I start posting a lot of code and stuff, is this generally an issue—can an iframe be used within a DIV statement?
Thanks
Sounds like you're making a pretty common coding error: you can't short-tag an iframe. For instance:
<iframe src=" ... " />
is invalid. You must provide a full closing element:
<iframe src=" ... "></iframe>
It's silly, but it can cause your page to completely gum up. Also, check to make sure your quotes/apostrophes/carets are all proper, as those can cause similar problems.
Hope this helps!
There's no reason you can't wrap an Iframe in a DIV, but Iframes are notoriously difficult in layout and obviously we don't know what other styling rules might be affecting your box model.
You might try giving the containing DIV an 'overflow:scroll' or even just 'overflow:auto' in your CSS. This can help fix strange box model issues.