https://i.imgur.com/T1hiXMO.png
Here is what it looks like right now. Clicking anywhere inside the black border links to the URL. I only want the text "RANKINGS" to be linked.
HTML:
<div id="div1">
RANKINGS</h4>
</div>
CSS:
#title {
margin-top: -10px;
font-size: 20px;
color: #e846ff;
text-align: center;
font-family: 'Trebuchet MS';
border: 1px solid black;
}
You are adding a Heading element (h4) inside an anchor (a) element.
Even though Anchors are inline elements, meaning they don't take the full width of the screen, you added a Heading element inside that Anchor.
Heading elements are block elements and they do take up the full with of the screen.
It would be better to reverse the html as seen in this codepen:
<h4 id="title">
<a href="https://example.com" target="_blank" rel='noopener noreferrer'>RANKINGS</a>
</h4>
This way you get you wanted.
As h4 is a block level element it takes the entire width of the window. use span tag instead of h4. Also h4 is not valid inside a tag. Still if you want to keep it you need to apply
#title{
display:inline;
}
Because, probably, it's element with value block in property display. Inspect element and check it in such cases. Block elements have 100% width. If you need, change display: block; to display: inline; (in headings width 100% set as default) or another value for auto width. Also, you should check display of link, in this case.
Another way to solve this issue is to give your a element the width: fit-content; property. This will make the link hug the text and not extend beyond it:
<h4 id="title">
<a href="https://example.com" target="_blank" rel='noopener noreferrer'>RANKINGS</a>
</h4>
(CSS:)
h4 a{
width: fit-content;
}
Related
So, I've looked around SO, and I've found the inverse of this question mostly everywhere. That makes me feel this is either a rarer occurrence, or something trivial that I just can't figure out.
https://jsfiddle.net/je5dpqrL/
The above jsFiddle shows that I have an <h2> element within which I've put an anchor tag with the pull-right class of Bootstrap. Since I want the anchor to display in a smaller font, I'm using font-weight and font-size. Now, since it's floating, the text is centered.
Is there any way to align the text so that the baseline of the Title and the <a> element is the same?
You can adjust the vertical position of the <a> with line-height (and use for example em to make it relative size):
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
line-height:4em
}
This is what you need https://jsfiddle.net/p05bu4c2. Create a span inside the link
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
}
.cl span {
line-height: 1;
vertical-align: bottom;
}
h2 {
border:1px solid #ff0000;
}
<h2>Title <a class='pull-right cl'><span>Stuff</span></a></h2>
So, The following code seems to work:
<h2>Text<a class="pull-right"><span class="text-right" style="display:inline-block">Test</span></a></h2>
Turns out that adding an .inside-block to an element inside the .pull-right class seems to fix it. No need to play around with line-heights
JSFiddle: https://jsfiddle.net/je5dpqrL/10/
EDIT: Thanks to Diamond for this suggestion of adding an element inside the <a> tag, although the CSS is completely different from the one suggested by him.
I'd like a generalized solution that will always limit the clickable link area to the text of my h2 text. Note that the issue is that when you hover over or click on the space to the right of the text you are still on a clickable area.
Here is an example:
markup:
<a href="#p1">
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
</a>
css:
h2.services {
font-size: 16px;
}
Here is a demo:
http://jsfiddle.net/j7n3k/
ps - no js or jquery please. Only css and responsive solutions only if possible. Thanks!
You should put the <a> tag inside <h2>. By default, headings have display set to block, which means they will automatically take up all the horizontal space available if the width is not set explicitly. The link contains the heading, so the browser assumes the whole area is a link. If you insert <a> into <h2>, then it wraps only the text and not the entire heading.
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
this will stop it from expanding:
h2.services {
font-size: 16px;
display: inline-block;
}
http://jsfiddle.net/vimes1984/j7n3k/4/
Read up on the display property and the position property.
DISPLAY
https://developer.mozilla.org/en-US/docs/Web/CSS/display
POSITION
https://developer.mozilla.org/en-US/docs/Web/CSS/position
To style:
you can use
.services{
/*this will style any element with a class of services*/
}
.services a{
/*this will style any a inside of a element with a class of services*/
}
I began to learn html'n'css, but I've encountered one thing that I cannot explain. I have a html file, that has a div which acts like a link (in the application I am setting the div size and want for the whole box to act like a link). I cannot remove the text underline decoration for the text in the div though (Link1 in the Example is always underlined). The selector should be "any div within a link element", and because the link is red, I think it is correct.
I managed to do this by introducing a special class for removing the underline explicitly (Link2 in the Example is ok), but I would like to have all the menu styles in one place.
The question is, whether can someone explain why the removing deco like this (Link1) does not work. Moreover, I would like to ask if the organization of the menu is a good style, or if I should reorganize the code, e.g: having this for example:
<div>Blabla</div>
and the style:
a.menuitem {...}
a.menuitem div {width:...;}
Here is the minimal (non-)working Example:
<html>
<head>
<style>
a div.menuitem {
text-decoration: none;
color: red;
}
.remove-under {
text-decoration: none;
}
</style>
</head>
<body>
<a href="./index.html">
<div class="menuitem">Link1</div>
</a>
<a href="./index.html" class="remove-under">
<div class="menuitem">Link2</div>
</a>
</body>
</html>
Thanks a lot!
Semantically speaking a <div> should not go inside an <a>. div tags are block elements where anchor tags are inline elements - and block elements should never go inside inline elements. Instead use <span> if you need to stylize something different inline but in your case, additionally, you can add a class to the <a> which would work better.
Here is your new code:
<a href="./index.html" class="menuitem">
Link1
</a>
<a href="./index.html" class="remove-under menuitem">
Link2
</a>
You can have multiple classes to an element by putting a space, so Link2 has the class "remove-under" and "menuitem"
Update your CSS to remove the underline:
.remove-under {
text-decoration:none;
}
In order to get your whole a tag to be a link (not just the text) add the follow css for your menuitem class:
.menuitem {
display:block;
width: 100px;
height: 50px; /* or whatever your desired width and height */
background: red; /* to show that the whole anchor will be link, not just text */
}
This is not the ideal solution. You really should not be putting block level elements inside inline elements.
However, if you absolutely must get it working, you can add display: inline-block; to the div.
a div.menuitem {
text-decoration: none;
color: red;
display: inline-block;
width:100%;
}
.remove-under {
text-decoration: none;
}
You have 2 problems here:
You can't do something like this
<div></div>
because a is an inline element. What you do here is an invalid HTML code. DO it like this:
<div></div>
You try to apply text-decoration:none on the div element and you should apply it to the a element.
a {text-decoration:none;}
I have made a simple fragment of html, which contains this:
<div>Something here</div>
It obviously alert me that div cannot be inside an <a> tag. I have used a div, because I want the whole box (div in this case) to be a button. So the subclass :hover and a proper button area applies to the whole box, not only a text inside. As far as I remember divs can be used inside tags in html5. I use XHTML 1.0 Transitional. Is there anything I can replace a div with to avoid errors in the code? or should I change xhtml to html5? will it work good without touching the rest of the code? thank you.
You could use display:block.
An example is as follows:
HTML:
<a href="#" class="btn">Button</a>
CSS:
a.btn{
display: block;
background-color: Green;
width: 50px;
height: 25px;
text-align: center;
text-decoration: none;
color: White;
}
a.btn:hover{
background-color: lightGreen;
color: Black;
}
You can test it live here: http://jsfiddle.net/YdCzY/
Try using this:
HTML:
<a id="block-a" href="#">Something here</a>
CSS:
#block-a {
display: block;
}
You could try using 'span' elements within the 'a' element instead of divs...
You can apply styles to the span so that it behaves just like the div you wanted (e.g. rich content which is also overally a link).
AFAICS, the only difference between span and div are the default styles, and the elements they're allowed to be children of. But I am willing to be corrected by more learned contributors...
Use
<div onclick="..">...</div>
or a display: block; on your a-tag (http://green-beast.com/blog/?p=74)
It is way more easier at least
`<div onclik="window.location.href='url'">
</div>`
I am having an issue with a particular aspect of a web dev that I am doing at the moment with regards the css styling.
What I have is the following HTML:
<div id = "spaninsidea">
<ul id="spantest">
<li><a id="nav-button-one" href="javascript:return false;"><span>Link 1</span></a></li>
<li><a id="nav-button-two" href="javascript:return false;"><span>Link 2</span></a></li>
</div>
Styled with the following CSS:
#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px;
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}
What I am trying to get is the spaned text inside the link to sit in the middle of the a tag. When I try to apply the margin setting on the span it simply sits still, however if I change the font color etc it plays cricket. I cant figure why it styles but wont budge.
I will confess the front end stuff is new to me so if there are any glaring issues that you can see in general please do point them out.
Cheers
Usually you shouldn't have a span within an a. That would be the first part... I would suggest try to apply a text-align:center; to the span as well.
Update: See a working version here: http://jsfiddle.net/2eLer/ You just have to set the line-height of the span equal to or greater than the height of the a.
It's important to remember that spans are inline elements not block elements and as such, do not respond to margin and padding like you would think they do.
There is a css display property called "inline-block" that allows elements to float like spans and other inline elements do, but also makes them behave like divs with regards to margin and padding.
You shouldn't use <span> at all, but change the padding property of the link itself.