My link has a background color. I need it to be centred but for its background to not take up the full width. I also cant set a fixed width for the link, as the text is provided by a CMS and will var. Cant this be solved without adding additional HTML?
http://jsfiddle.net/jx3e4/2/
<a class="green-button" href="#">Download</a>
<a class="green-button two" href="#">Download</a>
.green-button {
background: none repeat scroll 0 0 blue;
border-bottom: 1px solid red;
color: #FFFFFF;
}
.two {
margin: auto;
display: block;
}
EDIT - Sorry, I didnt mention, but there is also text within the same parent div that needs to keep its default text align of left.
http://jsfiddle.net/jx3e4/7/
Give the parent div text-align:center and the green button - display:inline-block
UPDATED FIDDLE
Try this..........
HTML
<div class="links">
<a class="green-button" href="#">Download</a>
<br />
<br />
<a class="green-button two" href="#">Download</a>
</div>
CSS
.green-button {
background: none repeat 0 0 blue;
border-bottom: 1px solid red;
color: #FFFFFF;
text-align:center;
margin:auto;
padding: 6px 12px 6px 12px;
}
.links {
width:100%;
display:block;
text-align:center;
}
jsFiddle
Related
How do I get rid of the underline for the image inside the link in SCSS. Could anyone please help?
I created a working example using CodeSandbox
HTML
<p>
<a href="#">
Link
<span>
<img src="imagePath" alt="logo" />
</span>
</a>
</p>
SCSS
a {
text-decoration: none;
&:hover{
border-bottom: 1px solid red
}
}
As yiu can't alter the HTML, this snippet puts the underline on a pseudo element rather than on the actual element. The pseudo element is made to have the same width as the text ('Link') by using that as its content - which is slighly nasty as it means if the text of the Link changes the CSS/SCSS will also have to change.
a {
text-decoration: none;
position: relative;
}
a:hover::before {
content: 'Link';
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100%;
border-bottom: 1px solid red;
z-index: 1;
}
<p>
<a href="#">
Link
<span>
<img src="imagePath" alt="logo" />
</span>
</a>
</p>
Try to put background color on span border-bottom:
body {
font-family: sans-serif;
}
a {
text-decoration: none;
border-bottom: 1px solid transparent;
}
a:hover{
border-bottom: 1px solid red;
}
a:hover span {
border-bottom: 1px solid white;
}
<div id="app">
<p>
<a href="#">
Link
<span>
<img
width="10"
src="https://bitsrc.imgix.net/3b69976526d31a20a1fd238f5a32a704cf437dd6.png"
alt="logo"
/>
</span>
</a>
</p>
</div>
We'll thats tricky and also not the best practices when it comes to frontend buuutt
Since you know the size of the image, you can add a fake border-bottom with the pseudo:after element with width 100% - [width-of-the-element]:
a {
text-decoration: none;
position:relative;
&:before{ // we initialize it before showing to avoid creating elements on interaction
position:absolute;
content:'';
left:0;
bottom:-2px;
border-bottom:1px solid red;
width:calc(100% - 10px - 0.2em); // the image is 10px and the space bar is ~0.2em
display:block;
opacity:0; // just some nice transitioning
transition:all .5s ease;
}
&:hover{
//border-bottom: 1px solid red;
&:before{
opacity:1;
}
}
}
<p>
<a href="#">
Link
<span>
<img
width="10" src="https://bitsrc.imgix.net/3b69976526d31a20a1fd238f5a32a704cf437dd6.png" alt="logo"
/>
</span>
</a>
</p>
Check here a working sample
There's a few different ways to do it but here's one that doesn't change your HTML flow. Since the image is inside the <a> and the border is being applied to the <a>, you can move the img outside the bounds of the <a> with positioning so it doesn't affect the width of the element and thus the border.
a
{
text-decoration: none;
position: relative;
&:hover{
border-bottom: 1px solid red;
}
img
{
position: absolute;
left: 100%;
padding-left: 5px;
padding-top: 3px;
}
}
The left is to push it to the outside of the element on the right side, and the padding-left and padding-top are to put it in roughly the same position it was in your sandbox.
Updated sandbox
An alternative would be to wrap the text inside the <a> in their own element, like a span, and then apply the border just to the span.
I would recommend wrapping your anchor text inside the span and using CSS to underline that. One thing to keep in mind is that border is going to add to the elements height and will cause a "jumping" effect when you add/remove the border. I would go about making sure a border is always present, but "hidden" when it's being hovered over. You can do this by either using "transparent" as a color or match the color with the background hex value.
https://codesandbox.io/s/cocky-rgb-6he0j
<p>
<a href="#">
<span>Link</span>
<img src="imagePath" alt="logo" />
</a>
</p>
body {
font-family: sans-serif;
}
a {
position: relative;
&, &:hover, span {
text-decoration: none;
}
span {
border-bottom: 1px solid transparent;
}
img {
position: absolute;
left: 100%;
padding-left: 5px;
padding-top: 3px;
}
&:hover span {
border-bottom-color: red;
}
}
EDIT: updated code formatting and added missing body styles
I'm looking to find out how to add another box inside my box which would be faded to act as a title bar for that specific box (If that makes sense)!
So basically, in the SOCIALBOX I'm looking to get a sub-faded bar at the top inside which would act as a title bar.
After a few comments of people saying they're not sure what I mean, I created a quick image in photoshop to act as some reference point.
Code Snippet:
body {
background: url("../images/backgroundimage.jpg") repeat 0 0;
}
/* CSS MENU BAR CODE GOES HERE */
#menubar {
width: 98.5%;
height: 40px;
background-color: #000000;
position: fixed;
border: 2px solid #ffffff;
}
.inside_text {
color: #FFFFFF;
float: right;
margin: 11px 7px 0 0;
}
.inside_text2 {
color: #FFFFFF;
float: left;
margin: 11px 0 0 7px;
}
/* CSS SOCIALBOX (RIGHT) GOES HERE */
#socialbox {
width: 40%;
height: 40%;
position: relative;
float: right;
margin: 0 8px 0 0;
background-color: #000000;
border: 2px solid #126b72;
}
<div id="menubar">
<div class="inside_text">
PLACEHOLDER TEXT
</div>
<div class="inside_text2">
PLACEHOLDER TEXT
</div>
</div>
<br />
<br />
<br />
<div id="socialbox">
</div>
So you are asking for a faded line within SOCIALBOX div, to serve as underline for a title?
If thats correct create another class
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
}
position with margin-left & margin-top values inside that class based on where you want it within SOCIALBOX.
for example:
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
margin-left:50px;
margin-top:30px;
float:left;
}
create a:
<div class="title-bar"></div>
and place that inside
<div id="socialbox"></div>
BTW make it a habit to use float:left when positioning divs with CSS, try to avoid position:absolute or fixed, unless absolutely necessary. It just comes out cleaner this way.
I need help to center a link in a div. horizontal and vertical align, I dont know how it works I test multiple possibilities but I failed.
.Menu {
height:81px;
left : 0px;
right : 0px;
border:1px solid #727272;
border-radius:9px;
-webkit-border-radius:9px;
box-shadow: 1px 1px 6px #333;
background-color: #FFFFFF;
margin:5%;
vertical-align:middle;
padding-left : 25%;
}
.Picto {
position:absolute;
left : 7%;
height:42pt;
width:42pt;
}
a {
text-decoration : none;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:36px;
color: #666;
}
html :
<div class="Menu" style="display:none;" id="Trav"><img src="img/trav.png" alt="Travaux" class="Picto"/>Travaux</div>
<div class="Menu" style="display:none;" id="Equi"><img src="img/arbo.png" alt="Equipements" class="Picto"/> Equipements</div>
Thanks in advance.
Regards
try this
.Menu {
height:81px;
line-height:81px;
text-align-center;
}
for vertical align middle
line-height and height same amount
for horizantal align center
use text-align
for image and text align middle use
vertical-align:middle in image class
if I remember correctly in your CSS try content-align:center. this is what I have used in every web page I have made and it has worked every time, also you would be better off with posistion:relative instead of position:absolute
Here is an example
http://jsfiddle.net/Lm11a0we/
I'm trying to have it so that an image of a yellow cog sits inside a div with a yellow border and a white background, and then upon hover the cog changes to white and the background changes to yellow. I'm currently setting the first image as the background of the div, and then using div:hover to change the background on hover, however the spacing etc. doesn't quite work and the border doesn't go around the image properly. Is it possible to have it so the image is inside a link rather than as the background of the div? Here is the code I'm using:
HTML:
<div id="settings">
</div>
CSS:
#settings {
border: 4px solid #ffff00;
padding: 10px 20px 10px 20px;
background: #fff url(img/cog_yellow.png) 0 0 no-repeat;
}
#settings:hover {
background: #ffff00 url(img/cog_white.png) 0 0 no-repeat;
}
Any ideas?
It is possible although not very efficient. You can have two images and show and hide them based on hover:
HTML
<div class="button_link">
<img src="http://www.placecage.com/50/50"/>
<img src="http://www.placecage.com/60/50"/>
</div>
CSS
.button_link a:last-child{
display: none;
}
.button_link:hover a:first-child{
display: none;
}
.button_link:hover a:last-child{
display: block;
}
FIDDLE
If you can post a fiddle recreating the issue with the images you're using there is probably a more efficient way of doing this with just CSS and no additional HTML involved
UPDATE
This is how I would do this, with just CSS:
NEW FIDDLE
You can use this instead:
#settings a{
display:block;
width:100px; /* adjust your width */
height:100px;/* adjust your height */
border: 4px solid #ffff00;
padding: 10px 20px 10px 20px;
background: url(img/cog_yellow.png) 0 0 no-repeat;
}
#settings a:hover {
background: url(img/cog_white.png) 0 0 no-repeat;
}
this is my html
<div class="logoArea">
<img src="images/oifcoman-logo.jpg"/>
<div class="titleClass">Call Center Dashboard</div>
</div>
this is my css
.logoArea {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
.titleClass {
color: #343434;
font-weight: normal;
font-family: 'Ultra', sans-serif;
font-size: 36px;
line-height: 42px;
text-transform: uppercase;
text-shadow: 0 2px white, 0 3px #777;
margin:auto;
background-color:red;
width:40%;
top:10px;
}
This is what the result:
I want it to be this:
Set the image float:left; and the text display:inline-block; and the .logoArea text-align:center;.
Working fiddle
There are few ways to solve this. Here is one with minimal changes to your existing styling.
.logoArea img {
float: left;
}
Usually it requires additional changes in the code for actual centering in the parent window, but it seems to go well with the other styles you already have.
EDIT
Looking again at the result, I'm having second thoughts. My solution is good only for non-dynamic elements (elements that won't change dynamically but remain the same). Since it appears to be a header and therefore a relatively static element, my solution may still be valid, only with adding a required amount of padding-top to the center div. I don't know how much because in your example you used a very large font-size and I have no idea of the size of the image.
You can use CSS vertical-align:middle if the element is td (not div) or try this trick: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Try using:
<div class="logoArea" style="display:table-cell; vertical-align:middle">
<img src="images/oifcoman-logo.jpg"/>
<div class="titleClass">Call Center Dashboard</div>
</div>
Try this:
HTML:
<div class="logoArea">
<img src="http://i.stack.imgur.com/O3d6S.jpg?s=128&g=1"/>
<div class="titleClass">Call Center Dashboard</div>
<div style='clear:both;'></div> </div>
CSS:
.logoArea {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
.logoArea img {display:block;width:100px;height:100px;float:left;}
.logoArea .titleClass {float:left;}
JavaScript (must include jQuery first)
$(document).ready(function(){
var h=$('.logoArea').height();var ch=$('.logoArea .titleClass').height();
var pTop=((h-ch)/2)+'px';
$('.logoArea .titleClass').css('paddingTop',pTop);
});
Demo: http://jsfiddle.net/zcAjq/