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.
Related
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.
I'm getting these really crisp/pixelated circles and I don't really know what to do to stop it.
Here's the code:
.flex-control-nav a {
padding:3px;
border-radius:100%;
width:0px;
height:0px;
border:2px solid #fff;
float:left;
cursor: pointer;
text-indent: -999em;
margin-left:5px;
}
I'm not having any problems with that code, could it be your screen resolution?
You could try just changing the percentages, but keeping 100% should be just fine.
border-radius: 100px;
http://jsfiddle.net/8tsdLxny/
http://i.imgur.com/eV81Xom.png
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>
I'm trying to build a button that has some notification attached to it and am trying to emulate the facebook notification styles. A little red circle in the top right corner with a number in it.
I'm having some issues with it though. I can't seem to get the circle in the right place or to get the number to actually sit inside of it.
my button looks like this
<button class="btn btn-blue" id="noteBtn">Notes <span class="notification">1</span></button>
and I've tred to do this with my css
.notification:before {
content: ' \25CF';
font-size: 5em;
color:red;
}
here is a js fiddle I was working with
http://jsfiddle.net/N8cjB/5/
<span> and I don't get along, so I changed it to a <div>
Here you go: http://jsfiddle.net/aXvqW/3/
edit moved it out of the button a little bit, as requested.
To make it simple you don't need :before.
Add border-radius to the span, and to center the number use text-align: center
.notification {
border-radius: 30px;
text-align: center;
border: red;
width:20px;
height:10px;
background: red;
padding: 2px;
}
Check this in fiddle
Change <span> to <div> and make button position:relative; and notification position:absolute; using CSS then put it wherever you want.
Check it out here: http://jsfiddle.net/N8cjB/26/
Code
.button{
margin:20px 0px;
border:1px solid #e2e2e2;
background:#f9f9f9;
padding:5px 10px;
position:relative;
cursor:pointer;
transition:all 0.4s;
}
button:hover{
background:#333;
border:1px solid #333;
color:#fff;
}
.notifications {
position:absolute;
border-radius:2px;
font-size:14px;
background-color:red;
color:#fff;
padding:2px 5px;
top:-10px;
right:-10px;
}
<button class="button">
Notes<div class="notifications">1</div>
</button>
I'm pretty terrible at CSS/design so I'm struggling with some CSS here.
The page looks fine when loaded in a full screen browser at 1920x1080, however, as soon as you minimise or load the page on a mobile device the header content completely loses its placing but the body is fine.
Here's the CSS elements in question:
#header {
background: url(assets/header_bckg.gif) repeat-x ; height:120px;
}
#logo { display:inline-block; float:mid-left; padding:50px 0 0 570px; }
#logo { color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:20px; text-transform:uppercase;}
#login { display:inline-block; float:mid-right; padding-left:400px; padding-bottom: 7px; vertical-align:middle;}
#login{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:12px; text-transform:uppercase;}
#avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; }
#avatar_online {
background: linear-gradient(to bottom, #7BAFD6 5%, #506D92 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
background-color: #545454;
border-radius: 3px 3px 3px 3px;
}
#avatar_offline {
background: linear-gradient(to bottom, #706C6B 5%, #4E4D4D 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
border: 1px solid #545454;
border-radius: 3px 3px 3px 3px;
}
#avatar_playing {
background: linear-gradient(to bottom, #9BC861 5%, #789E4C 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
border: 1px solid #545454;
border-radius: 3px 3px 3px 3px;
}
#menu {position: absolute; margin-left:550px; top:88px; color:#fff; text-align:center; margin-top:0px;}
#menu ul{ width:800px; margin:0 auto;list-style:none; padding:0; text-align:left;}
#menu ul li{display:inline}
#menu ul a { float:left; font-weight:bold; font-size:13px; text-decoration:none; color:#fff; padding:8px 10px; width:118px; text-align:center; text-transform:uppercase; background:url(assets/menu_active.gif) no-repeat bottom center; color:#232323; }
#menu ul a:hover {
color: #85B0DF;
cursor: pointer;
text-decoration: none;
}
As always, help is greatly appreciated.
Make sure your CSS and HTML are valid. As others have pointed out, there is no such thing as float:mid-left. Also, if your jsfiddle is indicative of your HTML, you're probably throwing browsers into quirksmode, because your HTML isn't structured properly (your first three tags need to be wrapped in a <head> tag, everything needs to be wrapped in an <html> tag, and the very first line should be <!DOCTYPE html>). Use the W3C's HTML validator and CSS validator to ensure your code is correct. Only then can you begin to fix other issues.
Learn what the various CSS declarations do. While your CSS may be valid, it doesn't mean it's right. This: #avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; } will technically validate once the float part is fixed. However, position: absolute and float are mutually exclusive -- float doesn't work when position is absolute or fixed. It will also help to learn how padding and margin affect the positioning of the element, and how they differ from one another. Finally, vertical-align doesn't work at all unless the element is a table cell, or display is set to table-cell (and the table-related set of display properties has its own quirks, so you can't necessarily just throw display: table-cell on an element and expect it to work a certain way).
Learn how elements naturally behave, so that you can work with them, instead of against them. Make sure you know how block, inline, and inline-block elements behave, and then work with them to get the layout you want, instead of throwing display: inline-block on everything and hoping for the best. The same goes for things like links (which will naturally have cursor: pointer on hover, unless you've disabled it elsewhere). Doing this will substantially clean up your CSS, making it easier to maintain. It may also clean up your HTML, as you find out what wrapper elements you truly need or can do without.
It's a little difficult to tell what the intended result should be at smaller or "mobile" widths, even with the screenshots that you included above.
It looks like there are a number of issues with your HTML, too. Be careful with things like the <font> tag (it's deprecated as of HTML4).
That said, fixing things in your CSS such as float: mid-right and float: mid-left, which are both invalid, should help a bit. Additionally, you might want to investigate CSS positioning - specifically, you'll likely want to use position: relative on your #header div.
Take a look at this slightly cleaned up version of your example - with background colors added to see where the header ends and what space the navigation occupies.
It looks like you have multiple issues but it is hard to tell without seeing your HTML as well. For starters, #menu { margin-left:550px; } is going to be part of the problem if you are trying to align on the left edge.. You should also know that float:mid-right; is not valid CSS. Check out http://www.w3schools.com/cssref/pr_class_float.asp for more information on float.
EDIT AFTER JSFIDDLE
Put your <div id='header'> inside of your <div id='main'> and change your #menu css to be:
`
#menu { margin: 0px auto; top:88px; color:#fff; text-align:center; width:800px;}
#menu ul{list-style:none; padding:0; text-align:left;}
`
Since you already have a width defined on your menu, you can use margin: 0 auto; to keep it centered based on window size. This will allow you to remove your margin-left and keep it from being pushed to the right.