I have a div with the following CSS:
.glyphicon-arrow-right {
font-size:25px;
margin-top:22.66%;
margin-left:5%;
color: #414141;
}
set inside a div with CSS
.forwardbutton {
width:60px;
height:60px;
border-radius:50%;
margin: 0 auto;
border: 1.75px solid #414141;
opacity: .3;
text-decoration:none;
}
When I resize on a computer screen, the arrow sits directly in the center. However, when I view the div on other devices (tablet, netbook/ phone) the arrow is not centered, with a height noticeable higher than it should be.
I was wondering if anyone could identify the issue. Thanks in advance.
EDIT: HTML
<a href="work.html">
<div class="forwardbutton">
<div class="front glyphicon glyphicon-arrow-right"></div>
</div>
</a>
Related
I want the text in front of the image to be in the middle of it!
My problem is the vertical align middle is not working...
what is wrong?
<div class="comments">
<div class="pull-left lh-fix">
<img class=foto src="/$foto" class="imgborder">
</div>
<div class="comment-text pull-left">
<span class="pull-left color strong">anna:</span> dododod
</div>
</div>
.pull-left { float: left; }
.lh-fix { line-height: 0 !important; }
.comments {
position:relative;
display:block;
overflow:auto;
padding-left:15px;
padding-top:8px;
padding-bottom:8px;
border:1px solid #000;
}
.comment-text {
margin-left: 8px;
color: #333;
vertical-align:middle; //not working?
line-height:normal;
width: 85%;
text-align:left;
}
.foto{
width:50px;
height:50px;
float:left;
}
https://jsfiddle.net/a0bhv4n1/
Vertical-align works on inline elements. You are applying it to the class .comment-text which is for a div element. A div is a block style element which of course means that it will take up the entire space that it is allowed to, thus you cannot center something that already takes up the whole space. Inline elements only take up the space they need to based on the content in them and you can simply add display:inline-block to .comment-text to allow vertical-align:middle to work. More information can be found at MDN's article on vertical-align
I'm building a game page and I'd like to put a top information bar inside a larger container that will hold the full game window. Right now there is a gap between the border of the game window and the green background of the info bar, and I'd like it to be at the very top.
HTML
<div class = "game-window">
<div class ="info-bar">
<p id="messageline">New Game!</p>
</div>
<button class="btn btn-success" id="newpickbutton" onclick="buypick()">Buy a new pick!</button>
<button class="btn btn-primary" id="digbutton" onclick="dig()">Dig!</button>
</div>
CSS
/*------------------------------------------------------------------------------------------------
Layout
------------------------------------------------------------------------------------------------*/
.game-window {
border: solid 3px;
width:800px;
height: 800px;
margin-left:auto;
margin-right:auto;
}
.info-bar {
border: solid 0px transparent;
background-color:lightgreen;
height:100px;
}
/*------------------------------------------------------------------------------------------------
Screen Elements
------------------------------------------------------------------------------------------------*/
#digbutton {
width:500px;
height:500px;
}
#messageline {
margin-top:20px;
}
If I remove the line border: solid 3px; from the game-window class, the info-bar positions itself properly, but I can't figure out how to keep the border and have the info-bar at the top (but still inside the border).
Remove the margin on your messageline paragraph.
#messageline {
margin:0px;
}
jsFiddle example
Related to what j08691 said - if you want that margin, you can add any kind of padding to the parent element - .info-bar in this case, the margin will only 'push' against the parent. One of those weird things about CSS.
.info-bar {
border: solid 0px transparent;
background-color:lightgreen;
height:100px;
padding-top: 1px;
}
See this codepen for an example.
I'm making a menu with floating menu items.
What I want is to always have 10 px padding in top, on hover and not hovering.
My HTML:
<div id="menu">
<div class="menuitem">
Home
</div>
<div class="menuitem">
Item2
</div>
<div class="menuitem">
Item3
</div>
<div class="menuitem">
Item4
</div>
</div>
My css:
#menu
{
margin:0 auto;
background-color:#B89470;
height:50px;
text-align:center;
}
.menuitem
{
font-weight:bold;
padding-top:10px;
height:50px;
width:100px;
float:left;
}
.menuitem:hover
{
background-color:#abca9e;
}
So I have made this.
But for some reasing the padding is only showing while :hover is active.
But I have set the padding in
.menuitemn
and not in
.menuitem:hover
so why isn't there any padding when hover isn't active?
It is because the padding-top: 10px; is adding 10px to the height of the menuitem making it 60px in height. Yet the #menu still remains at 50px with an overlap of 10px. I changed the height of #menu to show you.
DEMO http://jsfiddle.net/6w5kz/1/
height:60px;
Another solution to the proposed ones would be to add:
#menu {
overflow: hidden;
}
The problem is that the child .menuitem is bigger than the #menu, so it overflows it. This happens because of the box model, which I really recommend you to read. So there are several ways to solve it, one is the one I pointed out, other is #Vector's and another is not setting the height of #menu so it's as high as needed.
I've also added cursor: pointer; when you hover the .menuitem to show properly that it's a clickable item.
http://jsfiddle.net/franciscop/6w5kz/3/
I am trying to add a opaque underlay using CSS.
Could you help me understand what I am doing wrong?
CSS
popUp#translucent{
width: 400px;
height: 100px;
background-color: black;
margin-left: auto;
margin-right: auto;
position:fixed;
opacity: .4;
}
popUp#content{
width:400px;
height: 100px;
}
#popContainer{
width: 400px;
height: 100px;
display: visible;
position: fixed;
z-index: 1000;
}
HTML
<div id="popContainer">
<popUp id="translucent"></popUp>
<popUp id = "content">
<button class="btn large btn-custom" data-h="193" data-s="32" data-l="64" ,="" data-p="15">Alpha</button>
</popUp>
</div>
http://jsfiddle.net/CeRX3/
Thanks
Here is a way to create underlay for a button using CSS.
Plz check this fiddle made by using code from w3 schools.
html
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
css
div.background
{
width:500px;
height:250px;
background:url(http://www.w3schools.com/css/klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
You can use above code. There is this problem with Opacity in CSS.
The Problem With CSS Opacity
The problem occurs when we add child elements to the html element that this code
affects. All child elements will inherit the same opacity settings, even if you try to
specify full opacity for all those elements (which would be too troublesome to do
anyhow).
The Hacky Solution
How can we work around this problem? In some instances, you could visually mimic a
parent-child relationship between the elements using absolute positioning, and this
will resolve the problem.
Then if u want to solve your problem then you may have to use a work around method for the purpose.
change your background colour to grey and the opacity to .1 in the translucent. it looks more translucent then.
I'm trying with CSS to display an image centered with a caption overlay, and a liquid capability when the browser window is too small (shrink to fit).
My current best attempt looks like the following HTML (using Google's logo as sample image)
<div align="center">
<div class="container">
<img src="http://www.google.fr/images/logos/ps_logo2.png" class="picture" />
<h3 class="caption">Image Caption</h3>
</div>
</div>
with the following CSS
.container {
position : relative;
max-width : 364px;
}
.picture {
border-radius:0.5em;
box-shadow: 0px 0px 0.5em #000000;
max-width:364px;
}
.caption {
position:absolute;
padding:0.25em;
top:1em; left:0; right:0;
color:black;
background-color:rgba(0,0,0,0.2);
text-align:center;
}
However, if it behaves centered as I want it to be for large browser windows, it doesn't shrink for small browser windows...
Also I don't need IE support, a WebKit-specific (iPhone/Android) would be enough, and I would like to avoid JavaScript if possible.
JSFiddle ready-to play with version http://jsfiddle.net/kWH3C/1/
Just set the max-width to the container instead of the image and tell the image to be width:100%
http://jsfiddle.net/Madmartigan/kWH3C/5/
<div class="container">
<img src="http://www.google.fr/images/logos/ps_logo2.png" class="picture" />
<h3 class="caption">Image Caption</h3>
</div>
.container {
position : relative;
max-width : 364px;
margin:0 auto;
}
.picture {
border-radius:0.5em;
box-shadow: 0px 0px 0.5em #000000;
width:100%;
}
.caption {
position:absolute;
padding:0.25em;
top:1em; left:0; right:0;
color:black;
background-color:rgba(0,0,0,0.2);
text-align:center;
}
You don't need the outer div, and align="center" is deprecated in HTML5, use CSS for alignment and positioning.