I inserted a .swf file to my page inside a div, and I tried to make it vertically aligned to the middle of this div, but it didn't work, only horizontally but that's not what I want.
I tried to place this file in another div inside the main div and change the alignment of this div as well.
Any suggestions?
Here is a good way I use to center elements horizontally and vertically:
<div style="position:fixed; top:0; left:0; width:100%; height:100%;">
<div style="height:100%; display:table; margin:0 auto;">
<div style="vertical-align:middle; display:table-cell;">
<div><p>This is a fully-centered div!</p></div>
</div>
</div>
</div>
Hmm... its kinda hard to answer without a code snippet.
Here is an article for creating wrappers around Flash content: http://livedocs.adobe.com/flex/3/html/help.html?content=wrapper_13.html
Scroll down to the table, where they start talking about "align" or just do a page search for the word "align" to see what they have to say.
Here is also a quick idea, I have noooo idea whether or not it works, just food for thought:
div.SWFContainer object, div.SWFContainer embed {
display: inline-block;
margin: auto 0px auto 0px;
width: auto;
vertical-align: middle;
}
Related
I was trying to get a parallax effect on my website's landing page. I used the interactive_bg.js plugin and working backwards from the demo tutorial I was finally able to get the picture I want with the desired effect.
Here's my code:
HTML -
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
</body>
CSS -
html {
height: 100%;
}
body {
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper { // this class isn't really needed but I thought it may help when putting other elements atop this div.
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.bg {
position: absolute;
min-height: 100% !important;
width: 100%;
z-index: 0;
}
.ibg-bg {
position: absolute;
}
Js -
$(document).ready(function(){
$(".bg").interactive_bg({
strength: 20,
scale: 1.00,
contain: false,
wrapContent: true
});
});
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
I reverse engineered the tutorial files to find this code.
Now the problem is, anything that I put into the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> messes up the picture. Any div I want to put after the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div doesn't even show up on the screen but is rather behind the background image.
How do I put text and other divs on the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div and more content after that div ends?
I have tried z-index and positioning (by looking at the code from the tutorial). It doesn't seem to work.
Also, the CSS only works when I put it in a style tag inside the <head> of the HTML. If I put the CSS in a separate file it doesn't work.
(I did link the CSS to the HTML correctly)
P.S refer to the tutorial I linked above, it'll get you an idea.
UPDATE:
I made some changes to the HTML and now I have text over the image. And the text isn't moving anymore but adds a white space on top. I tried margin but it didn't remove the white space. I still can't add anything below the image.
HTML-
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
<div class="main"> <h1> SOME TEXT </h1></div>
</body>
CSS -
#main{
position: relative;
}
Did you see the demo? http://www.thepetedesign.com/demos/interactive_bg_demo.html
wrapper div will take all the space available, width 100% and height 100%.
wrapper div holds all the content, position absolute.
ibg-bg div is just holds the background image and its not intended to have content inside, position absolute makes easy to put content over it; no need for z-index.
Any other div inside wrapper div and after ibg-bg div will show on top.
How do you put text over the background?
As I said before, put that content inside the wrapper div and after the ib-bg div.
How do you put text or more content after that div?
Add your new content below wrapper div and start playing with css properties to adapt the demo to your preferences.
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
<!-- You need this next div -->
<div class="ibg-bg"></div>
<div>This will appear over your background</div>
</div>
<div>This will appear below your background</div>
</body>
[Edit]
CSS Copied from demo.
#main {
position:relative;
float:left;
width:100%;
margin:0 auto;
}
[/edit]
After pondering around for a while it turned out to be a JS error. I had done a mistake in javascript while copying the script for the plugin execution.
Shout-out to #Triby for helping me out with the CSS, though that is a different thing and I will state it in another question.
Here's the working JS -
$(document).ready(function(){
$(".bg").interactive_bg({
scale: 1.05,
strength: 25,
animationSpeed: "150ms"
})
})
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
i've done a horizontal picture gallery from the here: How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?
and i was wondering if there is anyway to change the slider at the bottom to something like a nano slider? Something like this:
I'd really appreciate some help
Use overflow-x: auto; on your container (section in your example)
<section>
<div class="pic-container">
<div class="pic-row">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</div>
</section>
CSS:
body {
overflow: hidden;
}
section {
/* The width of your document, I suppose */
width:600px;
margin: 0 auto;
white-space:nowrap;
overflow-x: auto;
}
.pic-container {
/* As large as it needs to be */
width: 1500px;
}
If i understand correctly, you want to change the styling for the scroll bar. If I'm correct, that isn't difficult. you should use Webkit Scrollbars for this. Here's a pretty good article on it.
you would probably want something like this:
::-webkit-scrollbar-track:horizontal {
height: 3px;
background: gray;
}
::-webkit-scrollbar:horozontal {
background: white;
}
I'm not completely sure about it, thought. It's been a while since I've needed to style scroll bars.
note: since this is webkit it won't work in firefox (or maybe explorer, not sure) as far as I know, the only way to do this would be with javascript.
boilerplate html/css/etc.
then
<div>
<div style="margin:0 auto; position:relative">
<div data-item data-ng-repeat="item in ItemCtrl.item"></div>
</div>
</div>
... the above uses an Angular template, which is incredibly simple. It just positions absolutely my content into one, two, or three columns. If I set the screen to two columns I'd like it to be centered. I'm able to do this via code, but I wanted a more fluid feel and I suspect CSS can do this, but I'm having trouble w/it.
Here's my template:
<div style="width:400px">
Content here ...
</div>
My Angular directive simply grabs the element above and changes its CSS position property to absolute and gives it a top and left property.
Why is this not working? Can this be done?
So in essence if I have one column, which is 400px and is put in my display at position 0, which would occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-400)/2.
If I have two columns, which are 400px and are put on my display at positions 0 and 410, which would also occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-810)/2.
UPDATE:
Here's a fiddle http://jsfiddle.net/0LLa1rs4/
UPDATE:
Here's a solution, although I'm not sure it's the most elegant. Any suggestions to make it better are welcome.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color:blue; position:relative; width:100%; margin:20px auto;">
testing ...
<div style="position:absolute; width:400px; left:50%; margin-left:-200px">
<div style="top:100px; left:0px; width:400px; background-color:green; position:absolute">
Item #1
</div>
<div style="top:200px; left:0px; width:400px; background-color:green; position:absolute">
Item #2
</div>
</div>
</div>
</body>
</html>
Well I'm not sure what you're trying to achieve, you jsfiddle is not very clear. Do you want the number of columns to be dynamic or you choose it? I've made a jsfiddle that could answer the issue but I'm not sure:
http://jsfiddle.net/0LLa1rs4/1/
Basically you should play with
display: flex;
And on the child element
margin: auto;
From your fiddle, it looks like you're trying to center elements horizontally within a container. Your description camouflages this.
Here's a simple fiddle that does similar things to the fiddle you posted, but in a much more concise way: http://jsfiddle.net/gunderson/5eLx4r4p/1/
HTML
<div class="container">
<div class="item">Item 0</div>
<div class="item">Item 1</div>
</div>
CSS
.container{
margin: 20px;
width: 100%;
}
.item{
width: 400px;
margin: 20px auto; /* margin (horizontal) auto is what does the centering, as long as width is defined */
background: green;
}
I have a div with width: 400px and height: 300px
Inside the div I will insert some Text which should be aligned horizontaly and verticaly.
if the text inside the div is bigger than the div, it should show the scrollbars. Here is a picture which shows what i mean:
The following works in webkit & geko & IE8 upwards. Try some of these techniques for vertical centering if you need legacy IE compatibility: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ OR Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?
<div style="height:300px; overflow-y:auto; border:solid 1px #CCC; width:400px;">
<div style="display:table-cell; vertical-align:middle; height:300px; text-align:center; width:400px;">
test
</div>
</div>
you might want to use on div as a container and then put your text in another div
you might also want to check out jscrollpane
div.container {
overflow: auto;
text-align: center;
}
<div class="container">
<p align="center">
<h2>Heading 1</h1>
<h2>Heading 2</h2>
</p>
</div>
Also try to set a fixed height for your container so you can get the scroll bars
div.container {
max-height: 200px
}
The post by cronoklee works good too u might want to combine the two methods to get exactly what you want
<div id="content">
<div id="header">
</div>
<div id="main-content">
</div>
</div>
html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}
div#content{width:600px; margin: 0 auto; height:100%;}
div#header{width:600px; height:200px;}
div#main-content{width:600px; height:100%; background-color: white;}
As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.
I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i'll be using is much too complicated.
Are there any methods to do this? possibly a working javascript fix?
You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I've setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/
div#main-content{
position: absolute;
top: 200px;
width:600px;
bottom: 0px;
background-color: white;
}
Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.
Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:
$('div#main-content').height($(document).height() - $('div#header').height());
This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the "height: 100%" on the "div#main-content" style.