I have problem with align two buttons, I want to make something like this download button on this picture http://i.stack.imgur.com/MYt2K.png .
I tried to add padding for left button and margin, but without success.
JSFIDDLE
HTML
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="publish">
<button class="btplus"><i class="fa fa-plus-circle"></i></button><button class="publishbt"> PUBLISH </br> NEWS </button>
</div>
css
.publish{
font-family: 'Roboto', sans-serif;
display:inline-block;
margin-left:80px;
margin-top:12px;
}
.publishbt{
background-color:#FF6900;
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color:white;
font-family:'Roboto', sans-serif;
font-weight:bold;
padding:5px;
}
.btplus{
background-color:#FF6900;
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
color:white;
font-family:'Roboto', sans-serif;
margin-top:5px;
padding-bottom:18px;
font-weight:bold;
}
.fa-plus-circle{
margin-top:10px;
}
.buttonsearch{
height:38px;
width:100px;
background-color: #36545f;
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.fa-search{
color:#dbe2e5;
}
it's a padding issue. You have unequal padding in your button elements. to make both of the buttons the same height, you need to make the padding same.
CSS:
.btplus{
padding:15px 5px; /* no need for a bottom padding. if you want the bottom big, add corresponding padding to your text button too. */
vertical-align:top /* to align with the publish button, which has multiple lines*/
}
.fa-plus-circle{
margin:0px; /*no need for a margin. it pushes the circle down, but creates empty space. */
}
.publishbt{
padding:6px 5px 7px; /*padding adjustment */
}
And you should take off the <br/> from inside the button too. it creates more empty space that is hard to match. If you want a big button, adjust padding to achieve it.
I updated the fiddle here : https://jsfiddle.net/Snowbell92/dvnd98x6/4/
Set the vertical-align property on btplus. One possible solution is to set vertical-align: middle and increase the height of publishbt accordingly so that they align (height: 43px) worked well. You can explore further options of vertical-align.
Related
I am trying to make a site from a PSD document but I have no idea how to create this shape in my nav.
Is it a big <div> with negative margin-top and some border-radius?
Also, how can this design be achieved on a page using bootstrap? Like the div is coming from outside the center area and the "chat bubble effect" from the client photo.
For first question
border-bottom-left-radius: value;
border-bottom-right-radius: value;
On the second question - the question is not quite clear.
for the bottom radius you can try this code:
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
You can use the properties border-bottom-left-radius: value; and border-bottom-right-radius: value; to create a rounded bottom in an element. Below is an example similar to the screenshot in your post
.div-container {
font-size:12px;
width:220px;
padding:5px 30px;
background: #aaa;
color: #222;
border-bottom-left-radius:50px;
border-bottom-right-radius:50px;
}
.div-right{
padding:5px 30px 6px 30px;
left:40px;
display:inline;
position:relative;
background:#4286f4;
color:white;
border-bottom-left-radius:50px;
border-bottom-right-radius:50px;
}
<div class = "div-container">
916.543.1543
<div class = "div-right">
GET A FREE QUOTE
</div>
</div>
So, in my website, I have some text at the front. I'm trying to put a <hr> 3 pixels under the text, however even when I try to dynamically position it, the <hr> still stays in the same place. Even try positioning it in this JSFiddle:
Text on top of HR line 3px
As you could probably tell, I cannot position it... and at the moment, it kind of looks ugly.
In the full website that I made, I have a <video> html tag, which is playing. It also has a top menu so that you can choose what category of my website you want to choose. Here's a screenshot:
I'm also planning to add a button directly under the <hr>, but I think I should stick to this problem first.
What happens in your current code is that the browser defaults are p {margin: ...some value depending on browser...;}.
So you must first add your own CSS rule to overwrite it, here: #toptext p {margin: 0;}.
Then you can freely choose how to position your <hr> using its margin-top.
Note that, as you have a big font-size for the text, it keeps some space under it, so you may have to use a negative margin for <hr>, like in the example below:
#toptext {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
}
#toptext p {
margin: 0;
}
#line {
height: .5px;
background-color: #03f;
margin-top: -15px;
}
<div id="toptext">
<p>MatthewTheBottleFlipper</p>
<hr id="line"/>
</div>
Hide the <hr> and try adding the line to the paragraph.
Like this:
#toptext p {
border-bottom: 1px solid red;
line-height: 66px;
}
Then adjust the line-height.
remove all the excess css overkill and lets keep life simple :)
HTML
<p>MatthewTheBottleFlipper</p>
CSS
p {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
border-bottom:solid 1px #000; /* u need this */
padding-bottom:3px /* ...and this */
}
The p tag naturally has margins and padding. Just remove it, and everything will work how you want:
#toptext {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
}
#line {
height:0.5px;
background-color:#03f;
margin-top: 3px /* I can't position this three pixels under text */
}
p { padding: 0; margin: 0; }
I am trying to align a button placed inside span, it looks fine in desktop browser but in mobile browser the button is not aligned centred, see attached image
I have simple css attached to the span
.navigatebutton
{
display:inline-block;
width:40px;
height:40px;
border-radius:50px;
font-size:20px;
color:#fff;
text-align:center;
text-decoration:none;
cursor: pointer;
background:rgba(0,0,0,.3);
}
and the html look like below
For RIGHT navigation button
<span style='top: calc(45% - 10px); right:2%; position:absolute;' class='navigatebutton preview-next'><button aria-hidden='true' data-icon='\e62d;' class='icon-arrow-right2' style='margin-top: 7px; background: rgba(0,0,0,0);'></button></span>
For LEFT navigation button
<span style='position:relative;top: calc(45% - 10px); left: 2%; class='navigatebutton preview-previous'><button aria-hidden='true' data-icon='\e630;' class='icon-arrow-left2' style='margin-top: 7px; background: rgba(0,0,0,0);' ></button></span>
I am using icommon font for the arrows.
Please help to align the arrows perfectly.
Cheers.
This will work for you https://jsfiddle.net/ezj1Lfbw/11/
change .navigatebutton{display: flex}
change margin-top: 7px; to margin: auto
Thanks for your help.
I figured out the solution, culprit was border-radiuswhich supposed to be half the width to make circle, the value was greater and thus it was failing. So the correct css would be
.navigatebutton
{
display:inline-block;
width:40px;
height:40px;
border-radius:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
font-size:20px;
color:#fff;
text-align:center;
text-decoration:none;
cursor: pointer;
background:rgba(0,0,0,.3);
}
Thanks.
I'm trying to make a simple 3-cell div that will show a list of ratings for cigars. I want the left cell to be a square image of the cigar, the middle to be the name, and the right to be the rating. The code works fine until I add the image - it then seems to add an 8px border on the bottom of the image, revealing the cell's background color. Using Wordpress (if that helps). Any help is appreciated!
This is the page: http://cigardojo.com/best-cigars/
HTML
<div class="ratingWrapTopRated">
<div class="cigarImage"><img src="http://cigardojo.com/wp-content/uploads/2014/08/cigar-test.jpg" alt="test" width="90" height="90" class="alignnone size-full wp-image-14045" /></div>
<div class="cigarName">Opus XXX Power Ranger</div>
<div class="numericalScoreTopCigars"></div>
</div>
CSS
.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0 auto;
display:table;
font-family:Helvetica, Arial, sans-serif;
margin-bottom: 10px;
}
.cigarImage {
background:#fff; color:#fff;
display:table-cell;
width: 90px;
}
.cigarName {
background:#ff5100; color:#fff; text-align:center;
display:table-cell;
vertical-align:middle;
text-transform: uppercase;
}
.numericalScoreTopCigars {
background:#000; color:#fff; text-align:center;
width:25%;
display:table-cell;
vertical-align:middle;
font-weight:bold;
border-left: 4px solid; border-color: #fff;
}
Add line-height: 0; to .cigarImage and you will get rid of it. Many people will tell you to use display: block; and that will work but that is not the real problem. The problem is that img tags are inline and you get that space because you get the image plus the line-height it is in that container, and that creates the space you see below your image. The correct solution to that is to add what I just told you.
So edit your class like this:
.cigarImage {
background:#fff; color:#fff;
display:table-cell;
line-height: 0; /* Here is the solution */
width: 90px;
}
And you will get that working right :)
This is because images are inline (that is, they're treated like they're on a line of text) by default, and the bottom of them is aligned to the "baseline" of the line of text, not the absolute bottom. Below the image you get the space from the rest of the line below the baseline. If you just set the image to display: block; it should get rid of it (then it won't be considered part of a line of text, and will instead be its own block).
Just add a padding right of 5px or so on the .cigarImage class. You should also increase your image height or decrees the height of the info bar next to your images as they dont line up.
In your class ratingWrapTopRated class set line-height to 0:
.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0;
display:table;
font-family:Helvetica, Arial, sans-serif;
padding-bottom: -8px;
margin-bottom: 10px;
line-height: 0; /*here*/
}
I need help with the frontend. Is it possible to set the style for the number (string) without breaking it in HTML?
How I wish that it looked like in HTML:
<div>Dodano: <span>127</span> stylizacji</div>
The effect that I want to get should look like this:
link to Dropbox
You can use pseudoelement "after" and it works fine with any number of digits without breaking into html. You will need a background-image from the first answer.
span {
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 21px;
padding-left:8px;
position:relative;
margin-left:10px;
margin-right:-2px;
}
span:after {
content:'';
display:block;
position:absolute;
width:8px;
height:66px;
background:#fff;
top:0;
right:0;
}
Here is an example JSFIDDLE
Here is completely CSS solution without changing your HTML. However, I did create a custom image for the background to go behind the numbers. You will have to tweak the size to make sense with your website.
Using a repeating background with a rectangle including a small space on the right-side to "space" out the digits. Use letter-spacing to give more space between the numbers.
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 20px;
overflow: hidden;
padding-left: 8px;
text-align: justify;
width: 130px;
See the example: http://jsfiddle.net/amyamy86/6FaLd/
You can apply styling to the span element.
<div>Dodano: <span style="color:blue;">127</span> stylizacji</div>
<div style="background-color:#f1f1f1; border:1px solid#dddddd; width:190px; padding: 27px;">
Dodano:
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">1</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">2</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">7</span>
stylizacji
</div>