when I display img inline-block.but there is a gap between the first line and the second !! below is the sample, picture1 and picture3 have a gap?I dont't want the gap..so help me..
img {
display:inline-block;
width:200px;
background-color:#ccc;
border:5px solid red;
padding:10px;
text-align:center;
margin:0px;
}
<img alt="picture1"/><img alt="picture2"/><img alt="picture3"/><img alt="picture4"/>
Images make a gap by default, you can fix that using vertical-align
img {
display: inline-block;
width: 200px;
background-color: #ccc;
border: 5px solid red;
padding: 10px;
text-align: center;
margin: 0px;
vertical-align: middle;
}
http://jsfiddle.net/opz672zn/
vertical-align may help you to fix the issue.
img {
display:inline-block;
width:200px;
background-color:#ccc;
border:5px solid red;
padding:10px;
text-align:center;
margin:0px;
vertical-align: top; <!--Added-->
}
<img alt="picture1"/><img alt="picture2"/><img alt="picture3"/><img alt="picture4"/>
Working Fiddle
Related
Currently im trying to get 2 divs to align in center, but not quite sure how to do it. They go to the Left side by default.
I had margin-left:14 % and it would align it somewhat in the center, but when you re-sized the window it would look weird because it aligned to the right side.
tried with with with marign-left/right:auto, but no result.
html
<div id="panels">
<div id="panel-left">
</div>
<div id="panel-right">
</div>
css
#panels{
padding-top:15px;
margin-left: auto;
margin-right: auto;
}
#panel-left{
width:32%;
min-width:209px;
overflow:hidden;
background-color:white;
float:left;
padding-left:25px;
height:473px;
}
#panel-right{
width:32%;
min-width:209px;
height:473px;
background-color:white;
float:left;
padding-left:25px;
}
Try this:
CSS
#panels{
padding-top:15px;
text-align:center;
display: block;
}
#panel-left{
width:32%;
min-width:209px;
overflow:hidden;
background-color:black;
height:473px;
display: inline-block;
}
#panel-right{
width:32%;
min-width:209px;
height:473px;
background-color:orange;
display: inline-block;
}
DEMO HERE
Try this style, I have used the box sizing css property to take care of the inherent 1px space that occurs during inline styling.
Fiddle here
Of course there was an un-closed div element in your initial code which is fixed now.
So the CSS looks like,
#panels {
padding-top:15px;
margin: 0 auto;
background: cyan;
width:50%; /* u need this */
height:500px;
}
#panel-left {
width:50%;
box-sizing:border-box;
/* min-width:209px; By doing this you are pretty much giving the width to be 100 % */
overflow:hidden;
background-color:gray;
float:left;
padding-left:25px;
height:473px;
border:1px solid #000;
}
#panel-right {
width:50%;
box-sizing:border-box;
/*min-width:209px;*/
height:473px;
background-color:white;
float:left;
padding-left:25px;
border:1px solid #000;
}
Code snippet::
#panels {
padding-top: 15px;
margin: 0 auto;
background: cyan;
width: 50%;
/* u need this */
height: 500px;
}
#panel-left {
width: 50%;
box-sizing: border-box;
/* min-width:209px; By doing this you are pretty much giving the width to be 100 % */
overflow: hidden;
background-color: gray;
float: left;
padding-left: 25px;
height: 473px;
border: 1px solid #000;
}
#panel-right {
width: 50%;
box-sizing: border-box;
/*min-width:209px;*/
height: 473px;
background-color: white;
float: left;
padding-left: 25px;
border: 1px solid #000;
}
<div id="panels">
<div id="panel-left">left</div>
<div id="panel-right">right</div>
</div>
Hope this helps. Happy Coding :)
I am having some trouble with div positioning. I'm working on a comment system in wich comments can get upvotes and downvotes. For every comment the up/down vote-buttons needs to be left of my comment text, and vertically aligned in the middle of my comment-container div. (regardless of how big the comment is)
At the moment it wont work properly, because the buttons wont get to the middle of the div. (see: http://jsfiddle.net/mcSfe/1838/)
In the testcase i want the leftside to be stretched all the way down, and the red box vertically centered in the middle of the leftside. vertical-align, and display:table-cell, did not brought the right result..
Here is my test html code:
<div class="commentContainer">
<div class="leftside">
<div class="innerleft">
test
</div>
</div>
<div class ="CommentBox">
<p>hello</p>
<p>this is my comment</p>
<p>another line of comment</p>
</div>
and here is my test css code:
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
float:left;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
float:right;
width:200px;
background-color:green;
}
Remove float from .commentbox and .leftside and add display:table-cell with vertical-align:middle
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
width: 50px;
background: gray;
text-align: center;
display: table-cell;
vertical-align: middle
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
width:200px;
background-color:green;
display: table-cell
}
DEMO
LIke this
demo
css
div.commentContainer{
float:left;
border:1px solid blue;
display:table;
}
div.leftside {
display:table-cell;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
width: 25px;
height: 25px;
margin-left:13px;
background: red;
vertical-align:middle;
}
div.CommentBox {
display:table-cell;
width:200px;
background-color:green;
}
Inside of using floats, use inline-block.
JSFiddle
CSS
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
display:inline-block;
vertical-align:middle;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
display:inline-block;
vertical-align:middle;
width:200px;
background-color:green;
}
Issues regarding inline-block whitespace can be addressed separately.
See this fiddle
JSFiddle
CSS:
.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
}
#id4 {
float:right;
margin-right:0;
display:inline;
border:5px solid red;
}
#id5 {
text-align:center;
border:5px solid red;
}
HTML:
<div class='containers'>
<div id='id4'>
margin-right:10px;
</div>
<div id='id5'>
center-text;
</div>
In this fiddle I want center-text to be center of the page, not at the center between left-border and float element.
The below is one possible option by adding position: absolute; right: 10px; to the id4 div. This will make the div always stay at 10px from the right margin. But it has to be noted that the element is no longer a float element.
Note: The texts would overlap if the result window is shrunk beyond a certain level. I will update the answer if and when I manage to find a fix for that.
.containers {
width: 100%;
height: auto;
padding: 10px;
margin-bottom: 0px;
text-align: center;
box-sizing: border-box;
}
#id4 {
display: inline-block;
position: absolute;
right: 10px;
border: 5px solid red;
}
#id5 {
display: inline-block;
border: 5px solid red;
}
.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
text-align:center;
}
#id4 {
float:right;
margin-right:0;
display:inline;
border:5px solid red;
}
#id5 {
margin: 0 auto;
display:inline-block;
border:5px solid red;
}
DEMO
I am trying to style setup a section of a website with a pattern running to each side of certain pieces of text. You an see a screenshot that I took from the PSD file here --> http://screencast.com/t/84RCLRdSZT with red arrows pointing to the areas in question that I am finding difficult to solve.
Any idea how to go about this?
Here is what I am starting with:
<div class="box">
<h2>Some text here</h2>
</div>
and the css:
.box {
width:400px;
height:200px;
text-align:center;
background:yellow;
}
h2:after,h2:before{
content:"";
border:5px double purple;
}
here is the fiddle --> http://jsfiddle.net/HerrLoop/g63LB/1/
As you can see, the stripes are vertical, instead of horizontal as you can see in my initial screenshot.
This isn't quite perfect and requires you set a fixed width on the before/after elements (best I can think of is to use JavaScript if responsive is required), but here goes:
h2{
display:inline-block;
vertical-align:middle;
}
h2:after,
h2:before{
content:"";
margin:0px 20px;
border:1px solid #000;
border-left: 0px;
border-right:0px;
height:5px;
width:50px;
display:inline-block;
vertical-align:middle;
}
http://jsfiddle.net/daCrosby/g63LB/2/
Edit
This is a little bit more responsive, but still gets kind of cut off at small sizes and looks disproportional at others:
.box {
width:50%;
overflow:hidden;
}
h2{
display:inline-block;
vertical-align:middle;
width:100%;
white-space:nowrap;
}
h2:after,
h2:before{
content:"";
margin:0px 20px;
border:1px solid #000;
border-left: 0px;
border-right:0px;
height:5px;
width:20%;
display:inline-block;
vertical-align:middle;
}
http://jsfiddle.net/daCrosby/g63LB/3/
Try the solution described here: http://kizu.ru/en/fun/legends-and-headings/
The quick demo:
h2{
overflow-x: hidden;
white-space: nowrap;
text-align: center;
}
h2:before, h2:after {
content: "";
border: solid #000;
border-width: 1px 0;
height: 5px;
width: 50%;
display: inline-block;
vertical-align: middle;
}
h2:before { margin: 0 .5em 0 -50%; }
h2:after { margin: 0 -50% 0 .5em; }
Demo
Basically, I'm trying to setup something that looks like this:
However, my code for some reason isn't working. Fist of all, in teh tinkerbin, my arrow image isn't even showing. It works fine on my computer though, so I'm not sure why this is. I also tried jsfiddle and it didn't work there either.
I can get the arrow to be there just fine, but I can't get the text to be centered vertically, let alone even go insie the gray box when the image is there. That is what is confusing me here.
HTML:
<div id="answers">
<div id="arrowcenter"></div><div id="answerstext">Text Next To Arrow</div>
</div><!-- end grayAnswer -->
CsS:
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:71px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
margin-left:-140px; }
#answerstext {
margin-top:0;
}
1st of all your arrow was isn't showing because you were using margin-left:140px; in #arrow_center
See my Fiddle
Just with 1 <div> Fiddle
This answer is inspired by Mr. Alien's answer of using less markup (id optional).
Reference: jsFiddle
HTML:
<span>Masculino</span>
CSS:
span {
background-image:url('http://fortmovies.com/brazil/arrow.png'); /* 70px x 31px */
background-position: 3px 10px;
background-repeat: no-repeat;
background-color: #DDDDDD;
border-top: 1px solid black;
border-bottom: 1px solid black;
font-family: Arial;
font-weight: bold;
font-size: 30px;
padding: 8px 10px 8px 80px;
}
Status Update: jsFiddle with Div for Navbar method
Just remove margin-left:-140px; and add float:left; to #arrowcenter
Working Demo
Use the tag instead of the tag.
The tag defaults to display: block, which prevents the content of different s to be aligned next to each other. tags default to display:inline; which suits your ideas better. As analternative you could also set those display rules in your css.
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:75px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
float: left;
}
#answerstext {
margin-top: 16px;
}
Little bit changes that i made in just in your css as follow, and it is working...
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:120px;
height:31px; float:left;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
}
#answerstext {
margin-top:0; float:left; height:50px; line-height:50px;
}
Working Demo
OR
Use this CSS
#answers
{
width: 220px;
height: 50px;
background-color: #DDDDDD;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-top: 20px;
}
#arrowcenter
{
width: 100px;
height: 50px;
background-image: url('http://fortmovies.com/brazil/arrow.png');
background-position: left center;
background-repeat: no-repeat;
float:left;
}
#answerstext
{
line-height:50px;
margin-left:10px;
font-size:20px;
font-family:Arial;
font-weight:bolder;
}
Use this in HTML :-
<div id="answers">
<div id="arrowcenter">
 </div>
<div id="answerstext">
Masculino</div>
</div>
I hope it'll helps!! :)
What's the purpose of margin-left:-140px; it moves #arrowcenter off-screen remove it and you'll be fine.
Also set both divs to display:inline-block and vertical align appropriately
#arrowcenter {
...
display:inline-block;
vertical-align:middle;
}
#answerstext {
...
display:inline-block;
vertical-align:middle;
}
http://jsfiddle.net/XEk5d/