Hi I want to make fix this iframe into the center between the left table and right table. I'm having trouble with making my site responsive and it appears different on different resolutions: (http://footkick.16mb.com/)
As I said, I wanted this to be bang in the center of the left and right table regardless of resolution. If you can help me out: THANKS SO MUCH
[<]iframe class="channels" src="http://www.bbc.co.uk/sport/football/fixtures" scrolling="yes" style="height: 990px; width: 619px;margin: 45px 0px 0px 115px; border:2px solid black; outline-style: solid; outline-color: green; ">
css:
height: 990px;
width: 619px;
margin: 45px 0px 0px 115px;
border: 2px solid black;
outline-style: solid;
outline-color: green;
Try adding this to your CSS:
margin: 45px auto 0px;
display: block
On your Iframe element remove: margin: 45px 0px 0px 115px; and add margin: 0 auto; display:block;.
Display block:
Margin: 0 auto
Also please learn about why inline css is a bad practice
turn the iframe to a block element like so
.your-frame {
display: block;
width: 80%;
margin: 2% auto;
}
Related
Any idea why there's a thin grey line above my green and how to get rid of it?
Thanks
https://jsfiddle.net/Lc7gym88/
hr {
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
It's because <hr/> has border (at least in FireFox since <hr/> has browser dependent style).
Remove border first.
hr {
border: none;
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
body {
background-color: black;
}
<br/>
<hr/>
Replace this:
border-bottom: 4px solid #469551;
by this:
border: 4px solid #469551;
Here is the JSFiddle demo
Removed default <hr> border and uses height and background
hr {
background: #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 4px;
border:none;
}
Example : https://jsfiddle.net/Lc7gym88/1/
by default tag <hr> taking border so you need first border zero. then add height check my demo
I can't seem to make an element move in CSS. It's a form with a background and it's centered. I can't see what I'm doing wrong.
#skyformbox {
width: 50%;
margin: 0 auto;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-
content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
<div align="left">
<div id="skyformbox">
[gravityform id="12" title="false" description="false"]
</div>
</div>
Why are you positioning 2000px left? As far as I know the "left" property will only work if the positioning is set to absolute...
Anyway try this:
#skyformbox {
width: 50%;
margin-left: 0px;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
Setting the margin-left to 0px did the trick for me (assuming that what you're trying to do here is to get the form to align to the left side of the page).
Any idea why there's a thin grey line above my green and how to get rid of it?
Thanks
https://jsfiddle.net/Lc7gym88/
hr {
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
It's because <hr/> has border (at least in FireFox since <hr/> has browser dependent style).
Remove border first.
hr {
border: none;
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
body {
background-color: black;
}
<br/>
<hr/>
Replace this:
border-bottom: 4px solid #469551;
by this:
border: 4px solid #469551;
Here is the JSFiddle demo
Removed default <hr> border and uses height and background
hr {
background: #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 4px;
border:none;
}
Example : https://jsfiddle.net/Lc7gym88/1/
by default tag <hr> taking border so you need first border zero. then add height check my demo
I have an box which is an image and I have text inside the image which will be geenrated dynamically.
Please look at the attached screenshot for more information.
How do I make sure that the image stretches when there is more text ?
.my-community-box{
background: url('/assets/my-community-box.png') no-repeat !important;
background-size: 100%;
width: 287px;
min-height: 474px;
float: right;
.my-community-details{
background-color: #mild-gray;
margin: 20px 10px 10px 10px;
padding: 5px;
ul{
width: 250px;
margin: 0 0 9px 0;
li{
}
}
a{
color: #darker-green;
}
a:hover{
text-decoration: none;
color: #light-green;
}
}
Why not use a border?
.my-community-box{
background: #F3F3F2;
width: 287px;
min-height: 474px;
float: right;
border: 3px solid #C5C3C3;
}
.my-community-box-wrap{
border-left: 2px solid #C2E2A0;
border-right: 2px solid #C2E2A0;
float: right;
}
Demo: http://jsfiddle.net/AWXHr/
you will need to background-repeat: repeat-y; the image, but will have to change it. as far as it seems, it is one single image - you will have to crop it to have the top border and the "body" of the image will be the part that you want to vertical repeat.
alternatively, due to the simple design, you could just use css borders
EDIT
also, as a few comments suggested, you should show us some code and not just an image, that would help a lot!
Use css border instead of image
div{
border:#333 solid 6px; border-radius:0 0 6px 6px;
box-shadow: 0px 0px 0px 2pt green;
height:auto;
width:200px;
background:#c1c1c1
}
Demo http://jsfiddle.net/wYUFD/12/
Demo
Hi now used to background-size:cover; or max-width
as like this
p{
max-width:200px;
border:solid 10px red;
background:url('http://www.gravatar.com/avatar/eb71f65106648cf6618b10423e8b0451?s=32&d=identicon&r=PG') no-repeat;
background-size:cover;
color:#fff;
}
Demo
I hope this may be helpful to you
.my-community-details{
background-color: #mild-gray;
margin: 20px 10px 10px 10px;
padding: 5px;
max-width: //set what depends up on your image width
max-height: //set what depends up on your image height
overflow-y: auto;
I have the following CSS code for a div that I want to have a min-height and then the height increases as needed. I have no clue why but the CSS is not working in any browser! I tried to google the answer but yet wasn't able to!
Any help would be really appreciated!
.container {
width: 1024px;
margin-right: auto;
margin-left: auto;
left: auto;
right: auto;
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 2px 12px rgba(34,25,25,0.4);
moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4);
background-repeat: repeat-y;
height: auto !important;
height: 1024px;
min-height: 1024px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #999;
padding-bottom:60px;
position:relative;
}
The container div should grow on the increase of height of this div which increases as and when data is entered to the mysql table and then displayed inside this div:
.udis {
float: left;
height: auto;
width: 680px;
position: relative;
box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 2px 12px rgba(34,25,25,0.4);
moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4);
margin-left:10px;
min-height:620px;
height:auto!important;
height:620px;
}
Use overflow hidden in the container.
Or remove the float:left in the children.
You can read in google more about clearing floats
http://www.positioniseverything.net/easyclearing.html
By the way, your three heights are correct, keep using them.
height: auto !important;
height: 1024px;
min-height: 1024px;
Change the following code
height: auto !important;
height: 1024px;
min-height: 1024px;
to
min-height: 1024px;
You have specified a fixed height for both elements, so the min-height settings never come into play. Change this in the .container style:
height: auto !important;
height: 1024px;
min-height: 1024px;
to:
min-height: 1024px;
and this in the .udis style:
min-height:620px;
height:auto!important;
height:620px;
to:
min-height:620px;