I am trying to make an image circular but it does not look to be a perfect circle after-all, here is a snippet of my code and a link showing the result
#aboutme{
padding: 150px;
}
#aboutme img{
border-radius: 50%;
border: 0;
width: 150px;
vertical-align: middle;
float:left;
padding: 0px 10px 10px 0px;
}
This is what happens: https://gyazo.com/92f967809fc4dea91a8a5cbaabf8d087
Padding is included in the calculation, as is everything inside the border-box. Using margin instead of padding, it won't be inside the border-box, resolving your issue.
For a perfect circle to form, you need the width to equal to the height, so the hackie way of border-radius: 50%; for shaping circle would work properly.
img {
border-radius: 50%;
border: 1px solid;
}
.perfect {
width: 150px;
height: 150px;
}
.weird1 {
width: 150px;
height: 83px;
}
.weird2 {
width: 80px;
height: 150px;
}
<img class="perfect"></br>
<img class="weird1"></br>
<img class="weird2"></br>
Related
I have two horizontal lines on top of each other and I want to put a image on top of those lines, but I am not able to achieve this with CSS. The image gets hidden behind the horizontal lines.
JSFiddle
here is the image
my HTML
<div class="creambar"></div>
<div class="graybar silhouette"></div>
my CSS
graybar { height: 20px; background-color: #343434; width: 100%; }
.graybar .silhouette { background: url("graphics/panr_silhouette_2.png"); }
.creambar { height: 5px; background-color: #d4c293; width: 100%; }
Is something like this that you want?
.creambar {
border-bottom: 20px solid #343434;
border-top: 4px solid #d4c293;
bottom: -69px;
position: relative;
width: 100%;
}
.graybar {
border-bottom: 20px solid #343434;
background: url("http://i.stack.imgur.com/3xbAl.png") 0 0 no-repeat;
height: 62px;
position: relative;
}
<div class="creambar"></div>
<div class="graybar"></div>
See Full Page.
Change the z-index. The z-index of the image you want to show should have the highest value.
.graybar .silhouette z-index should be higher than the z-index of .graybar.
.graybar { height: 20px; background-color: #343434; width: 100%; z-index:1;}
.graybar.silhouette { background: url("graphics/panr_silhouette_2.png"); z-index:3; }
.creambar { height: 5px; background-color: #d4c293; width: 100%; z-index:1; }
Try this. I simply changed the z-index For one to be on top of the other. You can read more on the z-index property here
<div class="creambar"></div>
<div class="graybar silhouette"></div>
CSS
graybar { height: 20px; background-color: #343434; width: 100%;position:relative;z-index:1; }
.graybar .silhouette { background: url("graphics/panr_silhouette_2.png"); position:relative;z-index:99; }
.creambar { height: 5px; background-color: #d4c293; width: 100%; position:relative;z-index:1; }
I have this code JSFiddle :
HTML
<div id="logo"></div>
<div id="menu"></div>
CSS
#logo {
width: 400px;
height: 100px;
margin: auto;
background-color: beige;
}
#menu {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
}
#menu:hover {
border-top: 15px #f39539 solid !important;
margin-top: -15px;
}
It works very good but when i was playing with CSS values i found something that i didn't understand.
My question is why when i put value lower than -15px in margin-top, my menu div don't go up when i hover over it ?
why margin-top: -30px; is the same that margin-top: -15px; ?
P.S : 15px is also the value of my border-top-width.
UPDATE
and what is weird is when i drop border-top: 15px #f39539 solid !important; when i hover, My DIV go up without problem even when i put margin-top: -50px; ! JSFiddle
#menu:hover {
/* border-top: 15px #f39539 solid !important; */
margin-top: -50px;
}
I think if I understand what you are asking is....
What you are seeing is margin collapse.
It's when you have two adjoining margins, the largest wins - the smallest is lost.
More details here: http://reference.sitepoint.com/css/collapsingmargins
I'm trying to get a fixed-sidebar-with-fluid-content layout working. I've run into a problem where the sidebar is at height: 100%, but it doesn't seem to be filling the whole window.
See this fiddle: http://jsfiddle.net/samselikoff/ZqycY/2/. The green sidebar should go all the way down.
Any ideas what's happening?
I think it's the issue with height: 100%; setting. When you resize the browser to shorten it, that sidebar will just cover the whole height of the browser window. You may try the following alternative CSS:
/*html, body { height: 100%}*/
body { background-color: #1db34f;}
#side-panel {
float: left;
width: 240px;
padding: 10px 20px 10px 20px;
/* height: 100%;
background-color: #1db34f;
border-right: 1px solid #dddddd; */
text-align: center;
}
#center-panel {
margin-left: 280px;
background-color: #ddd;
text-align: center;
border-left: 1px solid #dddddd;
}
#center-panel .row-fluid {overflow: auto;}
#center-panel .large {height: 400px; padding: 10px; background-color: #f17f49;}
Since you are looking for a fixed sidebar, it should be #side-panel { position: fixed; }. Hope this is what you want
I have tried multiple methods found on this website, and nothing seems to help.
I am trying to center 2 divs that are floating left and right in a container that has a 100% width.
CSS Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
margin: 0 auto;
}
#body-inner {
float: left;
width: 550px;
left: 325px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
right: 325px;
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
}
You need to do some research about how floats work, because I think you have the wrong idea. Floating one div left and one right, there is no way to center them, because they are floated. The left and right properties don't work unless the element is positioned (absolute, fixed, or relative with some implications). Also, it looks like you're trying to get the right edge of #bodybox to line up with the left edge of #body-inner. This won't work, because the right property is calculated from the right edge of the screen, not the left edge. Also, you're mixing fixed box dimensions with a fluid container width. This is fine, if you account for what happens to them when they collide.
If you're just trying to align the two <div> beside each other, centered on the page. In this case, inline-block is probably your friend. There are numerous implications and workarounds regarding white space, font sizes, order of content, etc., but essentially you would do:
#body-container {
width: 100%;
text-align: center;
}
#body-inner {
width: 550px;
}
#bodybox {
width: 200px;
}
In the above, the two <div>s would sit next to each other as long as the container is wide enough, once the container is too small, they will display one before the other, each centered in the container.
Could this be what you're looking for? Click here...
If I understand your question, you're trying to center a <div> that has 2 more <div> parents...
Code Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
/*margin: 0 auto;*/
/* testing border and height, could be deleted */
border: solid;
height: 500px;
}
#body-inner {
width: 550px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
/*border-left: 1px solid #000000;
border-right: 1px solid #000000;*/
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
/*right: 325px;*/
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
Continuing my last question on this thread (Play button centred with different image/video sizes), I will open this one regarding to #Marc Audet request.
Basically I had this code:
.playBT{
width: 50px;
height: 50px;
position: absolute;
z-index: 999;
top: 25%;
left: 25%;
margin-left: -25px;
margin-top: -25px;
}
However I can't use the example given by Marc on the last thread, because the play button doesn't work as expected when the video size changes...
Here is the code
You need to tweak your HTML a bit, here is one way of doing it:
<div id="video-panel">
<div id="video-container" class="video-js-box">
<div id="play" class="playBT"><img class="imgBT" src="http://2.bp.blogspot.com/-RnPjQOr3PSw/Teflrf1dTaI/AAAAAAAAAbc/zQbRMLQmUAY/s1600/player_play.png" /></div>
<video id="video1">
<source src="http://video-js.zencoder.com/oceans-clip.mp4"/>
</video>
</div>
<div id="video-controls">
<div id="footerplay"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/play.png" /></div>
<div id="footerpause"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/pause.png" /></div>
<div id="progressbar">
<div id="chart"></div>
<div id="seeker"></div>
</div>
</div>
</div>
and the CSS is as follows:
#video-panel {
border: 4px solid blue;
padding: 4px 50px;
}
.video-js-box {
width: auto;
height: auto;
outline: 1px dotted blue;
position: relative;
display: block;
}
video {
outline: 1px dotted blue;
margin: 0 auto;
display: block;
}
#play {
position:absolute;
top: 50%;
left: 50%;
outline: 1px dotted red;
}
.imgBT{
width:50px;
height:50px;
vertical-align: bottom;
margin-left: -25px;
margin-top: -25px;
}
#video-controls {
outline: 1px solid red;
overflow: auto;
}
#footerplay {
float: left;
margin-left: 27px;
}
#footerpause {
float: left;
margin-left: 27px;
}
#progressbar {
float: left;
outline: 1px dotted black;
display: inline-block;
width: 200px;
height: 27px;
margin-left: 27px;
}
#footerplay img, #footerpause img{
height:27px;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/EnDHw/
Explanation & Details
User a wrapper div to keep everything tidy, video-panel, and use a separate div for the video video-container and for the controls video-controls.
The play button and the <video> element are positioned with respect to the video-container and note the negative margin trick to position the arrow button image.
The control elements can be positioned in their own div video-controls. I simply floated them to the left with a 27px left margin.
This should help you get started. The outlines and borders are for illustration only and are optional.
Good luck!