I am trying to create a tab with the internal text and image as a link. The problem I am facing is the anchor dimensions and/or positioning seem to be different than the image. As you can see in the jsfiddle link, there is some spacing between the bottom of the image and the bottom of my div and I can't figure out why that is there.
JSFiddle link
If you can't access that link, HTML code:
<div id="SapDataBtn">
<a href="#">
<img runat="server" src="http://i.cubeupload.com/Tm2tPF.png" />
</a>
<a href="#" id="SapBtnText">
Data
</a>
</div>
CSS:
#SapDataBtn {
background-color: #c7ddf2;
text-align: center;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding-left: 15px;
padding-right: 15px;
width: 90px;
}
#SapDataBtn a:link,
#SapDataBtn a:visited,
#SapDataBtn a:hover,
#SapDataBtn a:active {
font-size: 15px;
font-weight: bold;
color: #19456e;
text-decoration: none;
}
#SapDataBtn img {
border-style: none;
}
Add vertical-align:bottom; in your #SapDataBtn img, this should do the trick :)
Try like below... it will help you...
#SapDataBtn img {
border-style: none;
vertical-align: middle;
}
Fiddle : http://jsfiddle.net/XLeGd/1/
Maybe this is what you looking for:
#SapBtnText {
vertical-align: super;
}
Related
I'm trying to move the border-bottom down so more of my active-link can be seen.
.navigation a.active-link {
background-border: #red;
border-style: solid;
border-bottom: solid white;
color: black;
padding:10px;
}
#navigation {
border-bottom: 1px solid currentColor;
text-decoration: none;
word-wrap: break-word;
padding-top: 10px;
margin-bottom: 15px;
overflow: hidden !important;
white-space: no-wrap;
text-overflow: clip;
height: 26px;
}
The problem is when I try and increase the padding-bottom it stacks my text and I'm trying to avoid that.
https://jsfiddle.net/akn5r7y5/2/
You can add the padding-bottom you need and set the anchor line-height accordingly so they don't stack
#navigation a {
line-height:26px;
}
#navigation {
padding-bottom:26px;
}
https://jsfiddle.net/akn5r7y5/3/
Adding padding-bottom to your navigation should fix your problem.
Read more about box model (paddings, margins etc.) here - https://css-tricks.com/box-sizing/
Remove your padding-top, and use line-height, must be equal to the height of the content, so it will be centered:
Your #navigation must look like this then:
#navigation {
border-bottom: 1px solid currentColor;
text-decoration: none;
word-wrap: break-word;
margin-bottom: 15px;
overflow: hidden !important;
white-space: no-wrap;
text-overflow: clip;
height: 26px;
line-height: 26px;
}
I think you're making this way harder than you need. Try to prevent using a fixed height. Also use a display: inline-block; on the anchor. This way it has a height you can actually work with. Example:
#navigation {
border-bottom: 1px solid currentColor;
}
.navigation a {
color: black;
padding: 10px;
display: inline-block;
text-decoration: none;
}
.navigation a.active-link {
background: red;
border: 1px solid black;
border-bottom: none;
}
<div class="navigation" id="navigation">
Show all
<a href="#" >title</a>
<a href="#" >title1</a>
<a href="#" >title2</a>
<a href="#" >title3</a>
<a href="#" >title4</a>
</div>
here is some clue for you.
ok forget what i just said about hr tags.
i just got what is your question, so you wanted to create a navigation with a border bottom, and a full border if you are in that page.. i suggest you to using ul li tags. its a bit comfotable, and dont use too many link if you dont have any responsive yet.
because, the whitegaps u think it's a easy task but it actually a big trouble in here. this <a></a> link should not seperated and you should type the code like this ridiculously like this
<a>link</a><a>link</a>
which mean, you should type it without a gaps in it, if only you put it in li tags, it would be easier to read like this
<li><a>link</a></li><li>
<a>link</a></li><li>
etc
so you only thinking about border inside of a, dont over think about a border in navigation div.
this is the code, have a look
.navigation a.active-link {
border: solid 1px black;
color: black;
padding:10px;
}
.navigation a{
padding:10px;
border-bottom: 1px solid black;
}
#navigation {
text-decoration: none;
padding-top: 10px;
padding-bottom:10px
}
hr{
border:solid black 1px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-lg-10 col-lg-offset-1">
<div class="navigation" id="navigation">
Show all<a href="#" >title</a><a href="#" >title1</a><a href="#" >title2</a><a href="#" >title3</a><a href="#" >title4</a><a href="#" >title5</a>
</div>
</div>
I have an image and some text in p tag and link to be aligned vertically. it works nicely when I float the image. but when I use padding left in the p tag and the link, it doesn't get the padding perfectly.
click here to see the image I need look like
here is a fiddle
.wrapper {
font-family: sans-serif;
width: 400px;
margin-top: 30px;
margin-bottom: 30px;
clear:both
}
img {
float: left;
}
p.text {
padding-left: 30px;
display: block;
padding-bottom: 22px;
color: #222222;
}
a.link {
text-decoration: none;
padding-left: 30px;
text-transform: uppercase;
line-height: 22px;
color: #777777;
}
a.date {
color: #e10622;
text-decoration: none;
}
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | 26 July 2016</p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | 26 July 2016</p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | 26 July 2016</p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<br>
<br>
<br>
Please see here what I need
thanks in advance. :)
You need to add display: block; to your a.link class styles. Also, set margin-right: 30px; on your image, and remove the padding-left: 30px; styles from your p.text and a.link elements. Final CSS would be as follows:
.wrapper {
font-family: sans-serif;
width: 400px;
margin-top: 30px;
margin-bottom: 30px;
}
img {
float: left;
margin-right: 30px;
}
p.text {
display: block;
padding-bottom: 22px;
color: #222222;
}
a.link {
text-decoration: none;
text-transform: uppercase;
line-height: 22px;
color: #777777;
display: block;
}
I have a quick solution for you. Looks like you needed to add a container around the text and then add the padding you wish. See below for quick instructions.
Add the following to your css:
div.textcontainer{
padding-left:130px
}
Also remove padding-left:30px from p.text as shown below:
p.text {
display: block;
padding-bottom: 22px;
color: #222222;
}
and lastly add a container around the text as below:
<div class="textcontainer">
//Insert coding you wish
</div>
This is the quick fix to your solution. Ideally you would want to use something like bootstrap or some other css frame work to make this fluid in design. I hope this works for you.
Yes, I know this has been asked and answered but I can't get this working no matter what I try.
I need to remove the text decoration on a link that I have applied to a div.
The code looks like this:
#about-con a {
text-decoration: none !important;
}
div #about-con a:link {
text-decoration: none;
}
#about {
position: relative;
width: 100px;
height: 1.5em;
font-size: 1.125em;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border: 1.5px;
border-style: solid;
border-color: black;
}
<div id="about-con">
<a href="http://ptunitedbrochure.bkm-tech.com/about.php">
<div class="inline-nav" id="about">
<div style="margin-top: 2px; text-align: center">
About Us
</div>
</div>
</a>
</div>
Instead of this:
div #about-con a:link {
text-decoration: none;
}
Place this:
#about-con a:hover{
text-decoration: none;
color: #337ab7;
}
This will make your link text stay the same on hover. Now, if you are talking about the border around the "About Us", you will have to remove border properties from your #about div.
I want the text centered and not decorated. As you can see, I have a lot of text decoration:none CSS not still no dice...I'm so confused. Should the div be inside or outside the link?
HTML -
<a href=""
data-toggle="modal"
data-target="#videoModal"
data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">
<div class="round-button">
<i class="fa fa-play"></i> Watch Trailer
</div>
</a>
CSS -
.round-button {
width:20%;
width: 15em;
height: 3em;
margin-top: 1em;
moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #f49131;
vertical-align: middle;
text-align:center;
color:white;
font-size: 1.4em;
text-decoration:none;
cursor:pointer;
}
.round-button:hover {
background:#f46800;
text-decoration:none;
}
.round-button a {
display:block;
vertical-align: middle;
text-decoration:none;
}
.round-button a:hover {
text-decoration: none;
}
Regular State -
Cursor State -
Your selector is incorrect.
.round-button a assumes that the link is a descendant of the .round-button class but, in fact the reverse is true.
a .round-button {
width: 20%;
width: 15em;
height: 3em;
line-height: 3em;
margin-top: 1em;
moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #f49131;
vertical-align: middle;
text-align: center;
color: white;
font-size: 1.4em;
text-decoration: none;
cursor: pointer;
}
a {
text-decoration: none;
}
<a href="#" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">
<div class="round-button">
<i class="fa fa-play"></i> Watch Trailer
</div>
</a>
In fact you can simplify the whole thing by not using a div and just styling the link
JSfiddle Demo
I have a blue underline that I'm having trouble removing.
I'm pretty sure that it is either a border:none or text-decoration:none problem, but I can't seem to find the solution.
Here is a screenshot of my problem:
HTML:
<a href="#top"><div class="content_tab" id="first_tab">
<span class="tab_text_centred">Back to top</span>
</div></a>
CSS:
.content_tab {
width: 220px;
height: 340px;
margin-right: 0px;
margin-bottom: 20px;
float: left;
background-color: #000;
overflow: hidden;
color: #FFF;
font-family: Georgia, Times ,serif;
font-size: 30px;
font-style: italic;
}
#first_tab {
background-color: #1b1c20;
text-align: center;
}
.tab_text_centred {
position:relative;
top:153px;
}
JSFIDDLE: http://jsfiddle.net/craigzilla/DptMf/
A tag have the default property display:inline.
DIV tag have defaut property: display:block.
A tag wrap DIV tag is not incompatible with W3C.
With your case, it can be more simple as below:
HTML code:
<a href="#top" class="content_tab" id="first_tab">
<span class="tab_text_centred">Back to top</span>
</a>
CSS code:
.content_tab {
width: 220px;
height: 340px;
line-height: 340px;
margin-right: 0px;
margin-bottom: 20px;
float: left;
background-color: #000;
overflow: hidden;
color: #FFF;
font-family: Georgia, Times ,serif;
font-size: 30px;
font-style: italic;
}
#first_tab {
background-color: #1b1c20;
text-align: center;
}
You can not put a tags around a div in pre-HTML5. This is not how you make a div and it's contents link clickable in pre-HTML5. It seems your issue could be connected to a text decoration issue caused by the use of this tag in this manner. Ensure you adopt the correct way for HTML 4.01 or keep it as you have but ensure you use the correct declaration in the head of your document.
I don't see anything but make sure you haven't got anything underlined by doing the following, then try again.
a, a:focus, a:active, a:hover, a:visited {
text-decoration:none;
}
I don't see the line in your fiddle using Chrome, but that's a lot of extra markup.
http://jsfiddle.net/DptMf/2/
Back to top
.content_tab {
width: 220px;
height: 340px;
line-height:340px;
margin-right: 0px;
margin-bottom: 20px;
float: left;
background-color: #000;
text-decoration:none;
overflow: hidden;
color: #FFF;
font-family: Georgia, Times ,serif;
font-size: 30px;
font-style: italic;
}
#first_tab {
background-color: #1b1c20;
text-align: center;
}
Is putting a div inside an anchor ever correct?
As specified by another person:
'You can not put a tags around a div. This is not how you make a div and it's contents link clickable.
This applies to pre-HTML5, and support for a tags is low. I think it's a text decoration issue caused by this action.