I had an issue with turning a SoundCloud player and border responsive for mobile devices. I put the height and width to auto and fixed the responsive, but not the player doesn't fit into the border. It also stretches when on the desktop.
This is the HTML and CSS I have that makes it responsive, but the border and player don't fit.
.frame_outer iframe{
padding: 50px 49px;
background: url(http://www.dontcursekids.com/wp-content/uploads/2017/09/Border-1.png);
background-size: 100% 100%;
}
<div class="frame_outer" style="padding: 18px; width: auto; height: auto; text-align: center;"><iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="100%" height="220" frameborder="no" scrolling="no"></iframe></div>
I'm assuming its something with my Css thats throwing it off. Any help or a guide in the right direction would be greatly appreciated.
This is what i came up with, used display:block; i also did a few changes in the html. The image you have used was not great imo, i cropped it so the outside extra space was removed.
.frame_outer {
padding: 50px 49px;
background: url(https://i.imgur.com/M57mh9s.png);
background-size: 100% 100%;
width: 100%;
}
iframe {
display: block;
width: 100%;
}
<div class="frame_outer" style="padding: 18px; width: auto; height: auto; text-align: center;">
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" style="position: relative; height: 100%; width: 100%;"
frameborder="no" scrolling="no" allowtransparency="true"></iframe>
</div>
You can use the box-sizing: border-box; because you add the padding: 50px 49px; and width:100% to the iframe, so for the default box-sizing:content-box; the width of the iframe will be softened.
And you can also use margin negative values to adjust the padding:
.frame_outer {
overflow: hidden;
}
.frame_outer iframe{
padding: 50px 49px;
margin: -50px -49px;
background: url(http://www.dontcursekids.com/wp-content/uploads/2017/09/Border-1.png);
background-size: 100% 100%;
}
<div class="frame_outer" style="padding: 18px; width: auto; height: auto; text-align: center;"><iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="100%" height="220" frameborder="no" scrolling="no"></iframe></div>
Related
Below is my code, i am trying to center an iframe , but its always going to left !Here is fiddle http://jsfiddle.net/4yL4od8j/
.videowrapper {
text-align : center;
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 700px;
max-height: 400px;
}
my html
<center> <div class="videowrapper "><iframe src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div></center>
To make you frame center you need to give your videowrapper a specific width and make the margin left and right as auto.
.videowrapper {
float: none;
clear: both;
width: 700px;<-- Added-->
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
margin: 0 auto;<-- Added-->
max-width: 100%;<-- Added-->
}
Working fiddle
Despite you wanna make your frame responsive always use max-width: 100% to your videowrapper.
without css solution. iframe can align itself in the text paragraph, so put it in empty paragraph with text-align:center
<p style="text-align:center;">
<iframe width="420" height="315" align="middle"
src="https://www.youtube.com/embed/YOURVIDEO?controls=0" allowFullScreen>
</iframe>
</p>
Try this:
<div align="center">
<div class="videowrapper "><iframe width="560" height="315" src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div>
</div>
Simple question here but struggling with the best way to accomplish what I want... I have an image that I am trying to keep centered in the browser and responsive. Setting width to 100%, the image responds perfectly (horizontally). What I am having trouble with is the height. I do not want the browser to ever scroll and have the image, with correct ratio, at center, with 20px padding.
Dropbox viewer has a great example of exactly what I am trying to accomplish, see here: https://www.dropbox.com/s/7zmau5ckx9qe2q1/P-20131215-00017_HiRes%20JPEG%2024bit%20RGB.jpg
UPDATE BELOW WITH MORE RECENT CODE
I have a demo here of what I have so far (if you crunch the browser vertically, the scroll bar will appear): http://jsfiddle.net/k7JG5/7/
HTML
<div id="top_nav">Logo Here</div>
<div id="img_wrap">
<center><img src="http://goldenleafdesigns.com/images/random- images/soul_id_select_image1.jpg" /><center>
</div>
CSS
body {
margin: 0px;
padding: 0px;
background-color: #000;
}
#top_nav {
height: 44px;
width: 100%;
background-color: #FFF;
text-align: center;
line-height: 44px;
}
#img_wrap {
max-width: 100%;
max-height: 100%;
padding: 20px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
img {
outline: 0;
max-width: 100%;
max-height: auto;
}
so, whats the best way to accomplish the height to stay responsive with no scroll?
Maybe this works for you:
http://jsfiddle.net/4LNND/
#img_wrap {
max-width: 100%;
max-height: 100%;
padding: 20px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position:absolute;
bottom:0;
left:0;
right:0;
top:44px;
}
#img_wrap img {
outline: 0;
max-width: 100%;
max-height: 100%;
display:block;
}
There are a bit more complicated ways to do it, this is the simplest
jsBin demo
HTML:
<div id="img_wrap"></div>
CSS:
#img_wrap{
position:absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
background: url('pathToImage.jpg') no-repeat center center fixed;
background-size: contain;
}
// Or instead of contain use cover if you don't mind the image being cut-off
I understand that this is quite a simple procedure, but I search for an answer every time I try to finish designing this page and none of the solutions I've found here and on Google did the trick for me.
I also understand that forcing an element to be centered is not exactly ideal, especially when there are so many different devices accessing the Internet these days, but I just want to get this done so I can focus on other issues.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Como chegar</title>
<style>
#container {
width: 800px;
height: 600px;
margin: 100px auto;
}
#content {
width: 800px;
height: 500px;
background-color: white;
}
.strips {
width: 800px;
height: 50px;
background-image: url(spritepimentarosa.png);
background-repeat: no-repeat;
float: left;
}
.navBar {
width: 250px;
height: 50px;
background-image: url(spritepimentarosa.png);
background-repeat: no-repeat;
float: left;
}
.nb1 {
background-position: 0px -450px;
margin-left: 25px;
}
.nb2 {
background-position: -250px -450px;
}
.nb3 {
background-position: -500px -500px;
margin-right: 25px;
}
.nb1:hover {
background-position: 0px -500px;
margin-left: 25px;
}
.nb2:hover {
background-position: -250px -500px;
}
.nb3:hover {
background-position: -500px -450px;
margin-right: 25px;
}
.logo {
background-position: 0px -200px;
}
.footer {
background-position: 0px -400px;
}
</style>
</head>
<body bgcolor="#D63B77">
<div id="container"><!-- beginning of container -->
<div class="navBar nb1"></div>
<div class="navBar nb2"></div>
<div class="navBar nb3"></div>
<div id="content"><!-- beginning of content -->
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ie/maps?f=q&source=s_q&hl=en&geocode=&q=Avenida+S%C3%A3o+Camilo,+980,+Cotia+-+S%C3%A3o+Paulo,+Brazil&aq=0&oq=980,+avenida+sao+camilo&sll=-23.583184,-46.836844&sspn=92.879748,186.152344&t=m&ie=UTF8&hq=&hnear=Av.+S%C3%A3o+Camilo,+980+-+Cotia+-+S%C3%A3o+Paulo,+06709-150,+Brazil&ll=-23.583025,-46.83712&spn=0.037758,0.054932&z=14&iwloc=A&output=embed"></iframe><br /><small>Ver mapa ampliado</small>
</div><!-- end of content -->
<div class="strips logo"></div>
<div class="strips footer"></div>
</div><!-- end of container -->
</body>
</html>
If anyone can help me with this, it'd be much appreciated.
Thank you.
normally you simply add:
#content {
text-align: center;
}
another trick would be setting the width of the div and then auto margin your div:
#content {
width: 800px;
margin-left: auto;
margin-right: auto;
}
You can use on your div
margin-left: auto ;
margin-right: auto ;
Do you want to center:
Page
Content of the page
Google Maps (iframe)
Page
In order to center the page you would have to use a wrapper, a div that will surround the div with the #content id.
.wrapper or #wrapper (depends if you want to use ID or Class)
{
margin: 0 auto;
}
Content of the page
Just apply the margin to the #context.
#contet
{
margin: 0 auto;
}
Margin
Just apply margin to the iframe tag through CSS.
iframe
{
margin: 0 auto;
}
** NOTE ** Have in mind that elements need to have width assigned to them in order for this to work. You cant use width: 100%; and expect it to work, but I guess you already know this.
I have been reading all the 100% div height discussions and I can't find a simple solution. How can I make my div take up all of the vertical height of the screen?
Here is my code:
css
#mother {
width: 100%;
margin: 0 auto;
z-index: 1;
}
#stripe_wrap {
width: 1053px;
min-height: 500px;
margin: 0 auto;
background: lime;
}
#stripe1 {
width: 39px;
min-height: 500px;
margin: 0px 0px 0px 0px;
background: #000;
float: left;
}
#stripe2 {
width: 39px;
min-height: 500px;
margin: 0px 0px 0px 0px;
background:#000;
float: right;
}
html
<div id="mother" style="overflow-x: hidden;">
<div id="stripe_wrap">
<div id="stripe1"></div>
<div id="stripe2"></div>
</div>
</div>
You have to make the <body> tag of the height 100% as well, otherwise it is vertically truncated to fit the content.
Also make sure to put the margin of <body> to 0px, because otherwise it will become 100%_of_visible_area + margin, resulting in a vertical scroll bar.
html, body {padding: 0px; margin: 0px; height: 100%;}
http://jsfiddle.net/kEv8F/ - my version.
http://jsfiddle.net/kEv8F/ - your version.
Is that what you meant?
Try to set height:100% for your <body> and <html>, too.
If there is nothing except this div on your page, 100% height will be 0px without these settings.
I have a problem with my site. I want that the shadow stops at the end of my textbox.
HTML
<body>
<div id="shadow" class="floatfix">
<div id="shadowleft"></div>
<div id="shadowtop"><img src="img/shadowcornerleft.png" alt="hoek" id="shadowcornerleft" /><img src="img/shadowcornerright.png" alt="hoek" id="shadowcornerright" /></div>
<div id="shadowright"></div>
<div id="content">
This is my CSS code:
#shadow
{
margin-left: auto;
margin-right: auto;
margin-top: 75px;
width: 974px;
}
#shadowleft
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 42px;
background-image: url("img/shadowleft.png");
background-position: top left;
background-repeat: repeat-y;
}
#shadowright
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 12px;
margin-left: 947px;
background-image: url("img/shadowright.png");
background-position: top right;
background-repeat: repeat-y;
}
#shadowtop
{
width: 892px;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 45px;
background-image: url("img/shadowtop.png");
background-position: 0 0;
background-repeat: repeat-x;
}
#shadowcornerleft
{
position: relative;
left: -42px;
top: 0;
}
#shadowcornerright
{
position: relative;
left: 850px;
top: 0;
}
#content
{
width: 920px;
margin-left: auto;
margin-right: auto;
background-color: white;
border-bottom: 1px solid #cccccc;
}
I think that I have this problem because of the "height: 100%". But I don't know how to fix it.
There's a much simpler way to do this. Make a new background image 960px wide by 10px high that has your shadow at either side of it. (You may need to tweak the width to get 920px of white in the middle with the shadows down the sides)
Use your #shadow div to add that background around #content eg:
#shadow
{
width: 960px;
margin-left: auto;
margin-right: auto;
background: url(shadow-sides.png) repeat-y left top;
}
Alternatively you can probably make your #content div stretch down by adding min-height: 100%; to it and an IE6 hack:
* html #content { height: 100%; }
100% shadow height has no height to count 100% from so it uses auto mode. So so far I see 3 ways to fix problem and none of them are nice as it should be:
Setting fixed height on parent div (bad if content extends)
Use 3x3 table (but once again people say not to use tables for layout)
Use double sided shadow background image to fill content div. 1px height 974px width bg image with repeat-y; (not very elegant if site width changes)
id say that your HTML is wrong. Its bad practice to have self closing div's
wrap them around your content and use negative margin's and background positions to get the right effect that spans the height of the fluid content
this is a bit sudo, as it ripped from another site of mine, but ti should give you the basic of how it should be done
<div id="header">
<div class="wrapper">
<div class="inner">
...
</div>
</div>
</div>
#header {
height:100%;
background:transparent url(../img/left-gradient.png) repeat-y scroll left center;
margin:0 auto;
max-width:60em;
min-width:40em;
padding-left:7px;
text-align:left;
width:60em;
}
#header .wrapper {
background:transparent url(../img/right-gradient.png) repeat-y scroll right center;
padding-right:7px;
}
#header .inner {
background-color:#FFFFFF;
}