I've tried to use the display:table method of centering vertically, but I can't quite get it working. My work so far is here:
http://jsfiddle.net/PTSkR/11/
I'm trying to center that text vertically and horizontally. I think it's a little tougher than normal because I'm using bootstrap spans, but maybe not. Any tips would be awesome!
Code:
.side-study-box {
background-color: white;
color: black;
border: 3px solid #0072A6;
text-align: center;
height: 220px;
margin-left: 10px;
display: table;
padding: 10px;
-webkit-box-shadow: 3px 3px 3px #888888;
-moz-box-shadow: 3px 3px 3px #888888;
box-shadow: 3px 3px 3px #888888;
}
.side-study-box span {
position: relative;
width: 100%;
font-size: 24px;
display: table-cell;
vertical-align: middle;
}
.card-box {
background-color: #f5f5f5;
color: black;
margin-right: 0px;
margin-bottom: 15px;
margin-top: 15px;
padding: 5px 0 5px 0;
}
<div data-bind="visible: !editing()" class="row-fluid card-box">
<div class="span2 card-details-box">
</div>
<div class="span5 side-study-box">
<span>TEST</span>
</div>
<div class="span5 side-study-box">
<span>TEST</span>
</div>
</div>
side-study-box's display:table is being reverted back to display:block. Add an important flag. display:table !important.
Related
I have three inline block elements inside a a container div.
The HTML looks like this:
<div class="container">
<div class="field">Text</div>
<div class="field">Text</div>
<div class="arrow"></div>
</div>
The CSS looks like this:
.container {
padding: 10px;
border: solid 1px #e5e5e5;
border-radius: 3px;
background-color: white;
box-sizing: border-box;
font-size: 0;
}
.field {
font-size: 16px;
display: inline-block;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f00;
vertical-align: middle;
}
I can't see anything wrong with this HTML/CSS, but the arrow does not appear in the middle of the container. Instead, the arrow is near the bottom of the container. Also, when I unset the vertical-align: middle property, the arrow moves farther up in the div, which is weird. If I set vertical-align: top then the arrow does go to the top of the div. Any idea why this is?
Default vertical-align is baseline. This will operate differently than true middle when paired with middle. Try setting all three to middle.
.container {
padding: 10px;
border: solid 1px #e5e5e5;
border-radius: 3px;
background-color: white;
box-sizing: border-box;
font-size: 0;
}
.field {
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f00;
vertical-align: middle;
}
<div class="container">
<div class="field">Text</div>
<div class="field">Text</div>
<div class="arrow"></div>
</div>
Change .arrow from inline-block to inline
https://jsfiddle.net/aznfacLe/
I'm banging my head against the wall trying to understand why my image is not moving into the div that I'm specifying, but rather straddles the lower border. I don't see any styling conflicts in looking over the elements with Firebug. I'll also throw out that my CSS position skills are not anywhere near where I would like them.
I want to place the image to the left of the text. So what am I doing wrong?
My html:
...
<div id="container">
<div class="header">
<h1 id="mgtitle">Pierce County, Washington<br/>
Master Gardener Foundation</h1>
<img src="images/flower-1.jpg" height="75" id="hdr-img" />
</div>
<div class="mainbody">
<div id="menu">
<ul> ...
My CSS:
#container {
width: 900px;
// max-height: 750px;
margin: 10px auto;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.header {
height: 130px;
border: 1px solid black;;
background-color: #ffffff;
background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8- scaled.jpg");
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
#hdr-img {
position: relative;
display: block;
margin-top: 0%;
margin-left: 0;
/* margin-right: auto; */
/*z-index: 1;*/
}
#mgtitle {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
}
First, you need to move the image above the <h1> in the code in order to place it on the left:
<div class="header">
<img src="images/flower-1.jpg" height="75" id="hdr-img" />
<h1 id="mgtitle">Pierce County, Washington<br/>
Master Gardener Foundation</h1>
</div>
Then, change display: block of #hdr-img to display: inline-block.
Finally, add display: inline-block to a new h1 CSS class:
h1 {
display: inline-block;
}
Fiddle: http://jsfiddle.net/hxX6u/1/
You need to change the image to display:inline-block because if it is display:block it will be pushed onto its own line. Also, you need to put the image inside the <h1> tag, since the <h1> is set to display:block otherwise it will push the image to its own line. After those changes, the only problem is the height you have set on the header. You can shrink the contents and make them fit in the header, by changing the line-height or shrinking the image, etc. I took the height off of the header to allow it to adjust according to the height of its contents.
CSS:
#container {
width: 900px;
// max-height: 750px;
margin: 10px auto;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.header {
border: 1px solid black;;
background-color: #ffffff;
background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8- scaled.jpg");
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
#hdr-img {
position: relative;
display: inline-block;
margin-top: 0%;
margin-left: 0;
/* margin-right: auto; */
/*z-index: 1;*/
}
#mgtitle {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
}
http://jsfiddle.net/NABjE/
I have a circle which have both inside and outside box-shadow, but there is 1px unwanted border. Would anyone please help me to understand why this is happening with only circle and share the solution.
.wrapper {
padding: 30px;
}
.circle {
width: 120px;
height: 120px;
border-radius: 50%;
box-shadow: inset 0 0 0 16px #f9f9f9, 0 0 0 16px #f1f1f1;
background: #32a500;
}
<div class="wrapper">
<div class="circle"></div>
</div>
I think box-shadow: inset is messing up with border-radius.
While waiting for other solutions, you can always avoid using inset and apply instead a border, removing manually the 32px (16px + 16px) from the height and width of your div.
.wrapper {
padding: 30px;
}
.circle {
border-radius: 50%;
background: #32a500;
box-shadow: 0px 0px 0px 16px #f1f1f1;
border: 16px solid #f9f9f9;
width: 88px;
height: 88px;
}
<div class="wrapper">
<div class="circle"></div>
</div>
updated code with help of #Andrea Ligios
.wrapper {
padding: 30px;
}
.circle {
border-radius: 50%;
background: #32a500;
box-shadow: 0px 0px 0px 16px #f1f1f1;
border: 16px solid #f9f9f9;
width: 120px;
height: 120px;
box-sizing: border-box;
}
<div class="wrapper">
<div class="circle"></div>
</div>
I have the following CSS:
.side-study-box {
background-color: white;
color: black;
border: 3px solid #0072A6;
text-align: center;
height: 220px;
margin-bottom: 15px;
margin-top: 15px;
display: table;
-webkit-box-shadow: 3px 3px 3px #888888;
-moz-box-shadow: 3px 3px 3px #888888;
box-shadow: 3px 3px 3px #888888;
}
.side-study-box p {
position: relative;
width: 100%;
margin: auto;
font-size: 24px;
display: table-cell;
vertical-align: middle;
}
And the following HTML:
<div class="side-study-box span6 ">
<p>SIDE 1</p>
</div>
However the text isn't being centered vertically or horizontally. If I either remove the span6 class from the div or target the span6 as opposed to side-study-box in my css, it works. I do need both classes though... what am I doing wrong?
Sounds to me like another rule which is targeting the span6 class name is affecting things. Try increasing the specificity. Add an #id selector, or prefix them with body. Something like:
body .side-study-box { /*...*/ }
body .side-study-box p {/*...*/ }
I have got problem with positioning 2 divs inside a div. I want to have 2 divs next to each other but I dont know how. Here is my html
<div id="game">
<div id="choice" onmouseover="npcRoll()">
<p>Chosse your weapon!</p>
<button id="rock" onClick="choose(1)">Rock</button>
<button id="paper" onClick="choose(2)">Paper</button>
<button id="scissors" onClick="choose(3)">Scissors</button>
<p>You chose <span id="userChoice">none</span>!</p>
</div>
<div id="confirm">
</div>
</div>
And this is my CSS:
#choice {
border: 2px solid #87231C;
border-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background-color: #FF5A51;
width: 350px;
}
#game {
border: 2px solid #fff;
border-radius: 15px;
background-color: white;
width: 500px;
margin: 0 auto;
}
#confirm {
border: 2px solid #00008B;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #1E90FF;
width: 142px;
height: 100px;
}
body {
background-color: #DFEFF0;
text-align: center;
}
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
padding-top: 36px;
}
button:active {
font-size: 22px;
border: 2px solid #328505;
color: #32A505;
border-radius: 100px;
width: 100px;
height: 100px;
padding-top: 36px;
}
You can check it out here how it looks. http://jsfiddle.net/VcU7J/
Thank you for any help!
EDIT: I also tried to add float elements into to the CSS but it screwed it more. :/
There are several ways to do this. The most traditional being to use CSS' float property your two divs:
CSS
#choice {
border: 2px solid #87231C;
border-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background-color: #FF5A51;
width: 350px;
float:left;
}
#game {
border: 2px solid #fff;
border-radius: 15px;
background-color: white;
width: 500px;
margin: 0 auto;
/* this is needed to make sure your container background
"contains" your floated divs */
overflow:auto;
}
#confirm {
border: 2px solid #00008B;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #1E90FF;
width: 142px;
height: 100px;
float:left
}
fiddle
More on floats here
Use css floats to position divs next to each other, but do not forget to clear the floats after your done.
#game {
float:left;
}
#confirm {
float: right;
}
.clear {
clear: both;
}
and then the html would look like:
<div id="game">
<div id="choice" onmouseover="npcRoll()">
<p>Chosse your weapon!</p>
<button id="rock" onClick="choose(1)">Rock</button>
<button id="paper" onClick="choose(2)">Paper</button>
<button id="scissors" onClick="choose(3)">Scissors</button>
<p>You chose <span id="userChoice">none</span>!</p>
</div>
<div id="confirm">
</div>
<div class="clear"></div>
</div>