The title may be a bit misleading.
http://jsfiddle.net/whb8A/
I have a h3 element inside a span tag and of course it shouldn't go there, however I cannot seem to style the spanned text in the div in the manner I want.
If you hover over the image in the jsfiddle, the hidden div is shown and that is exactly what I want it to look like but if I take the h3 tag away from the text I can't seem to style it with CSS.
Should I be looking at a Jquery alternate? If so any tutorials of guides would be great, thanks
UPDATE: Thanks for all the help so far but I don't think I've explained very well.
http://imageshack.us/photo/my-images/827/examplewc.jpg/
The left side is how I would like it to be styled however removing the h3 tags and removing h3 from the class .info causes it to be styled as on the right side. It's the border width, postion and padding I am concerned about the most
Another solution is to put the text style definitions directly under the <a> tag, so as to override the default anchor tag styling. Example:
.featured a {
color: #fff;
text-transform: uppercase;
}
If anyone is interested I solved the problem.
Instead of using the h3 tags and a span, I removed both and instead put a div inside the div that appeared on hover. You can see what I mean in the below fiddle. Now validates in html5 which is what I was after, thanks for all the help
http://jsfiddle.net/whb8A/62/
All I see when I drop the <h3> tag is a loss of margin around the text. If you want that back, simply replace the <h3> with a <span>, change the CSS to match that instead of the h3 and add display: block to the rule.
You have this near the end of your CSS:
.item a:hover .info {
display: block;
position: absolute;
bottom: 10px;
left: 30px;
width: 250px;
margin: 0;
padding: 10px;
background: #000;
}
This will select all .info elements inside of hovered a tags inside of a .item element, but in your HTML you have no .item element
Remove .item from the CSS and all is well when you remove the H3
Related
I have two divs on my page and I want to display them side by side. I have tried using float:left and display:inline-block, but it doesn't work.
Can anyone help Please? This is a what my page looks like fiddle
use <p> or <h3> and set it inline-block too , reset white-space for #maincontent and its inner content:
http://jsfiddle.net/ATdkE/15/
div#login, div#register, #maincontent > h3 {
white-space:normal;/* reset to normal */
display:inline-block;
}
div#login, div#register {
background: linear-gradient(top, #fff, #f8f8f8);
border: 1px solid #d0d2d5;
border-bottom: 1px solid #bebfc2;
border-radius: 4px;
margin: 0px 0 10px 0;
padding: 30px;
width: 212px;
vertical-align:top;
}
#maincontent {
white-space:nowrap;/* keep all inline element on one single line */
text-align:center;/* no need of obsolete attribute in HTML markup :) */
}
you can add some margin and change vertical-align http://jsfiddle.net/ATdkE/17/
Try putting them within a parent div that has fixed margins. i.e. margins not set to "auto".
Get rid of the "OR" inside the header tag. Header tags are display block by default, so they are overwriting your float left. You can also change the header tag to float: left;
Its not good practice to write tags inside <p></p> you should get rid of <p> and directly write
<h3>OR</h3>
Give style to
h3{
display:inline-block;
}
See Demo
First the invalid HTML,
You cant have a block level element inside the p tag, so please remove the p tags that surround the h3 tags
Second, make the display of the h3 with text OR as inline-block
Demo : http://jsfiddle.net/ATdkE/14/
You may have to add some more styles
IE supports inline-block, but only for elements that are natively inline.
Use
float:left
http://jsfiddle.net/ATdkE/18/
please take a look at this page.
As you can see there are some "read more" buttons. (translated - "czytaj więcej").
This are just after the excerpts. I want to center this read more button.
I gave the a href ... the following class:
class="readmorebtn"
And this CSS:
.readmorebtn{font-size:23px; text-align:center !important;}
But for some reasons it's not working. Any hints?
You are using a element for your button, so a element is inline by default, so even if you center, the text has no place to get centered,as inline elements don't take 100% horizontal space, so inorder to center the text, you need to make it inline-block or block
.readmorebtn {
display: block;
font-size: 23px;
text-align: center; /* No need of !important here */
}
If you are using inline-block the element will be inline and also block but again, you need to define some width to your inline-block element. Whereas block level element will take up entire horizontal space.
Demo (See what if you don't make it a block level element)
Demo 2 (Making it a block level element)
a element can't have the width because it's an inline element and without width you can't align to center so you should add display: inline-block; or display: block; to your a
.readmorebtn {
display: block;
font-size: 23px;
text-align: center;
}
I have this HTML:
<ul>
<li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></li>
</ul>
I'm appending an icon using the :after pseudo element:
ul li.completed a:after {
background:transparent url(img.png) no-repeat;
content: '';
display:inline-block;
width: 24px;
height: 16px;
}
The problem: if the available width is too small, the icon wraps to the next line. I would want it to stay on the same line as the last word of the link it's appended to:
Is this doable, without adding 'nowrap' to the entire link (I want the words to wrap, just not the icon).
See jsFiddle here.
JSFiddle - http://jsfiddle.net/Bk38F/65/
Add a negative margin to the pseudo element, to compensate its width:
ul li.completed a:after {
background:transparent url(img1.png) no-repeat;
content: ' ';
display: inline-block;
width: 24px;
height: 16px;
margin-right: -24px;
}
Now, that is going to make the icon overflow the container, and the line is going to break only when the text meet the end of the line. If you need to maintain the icon inside the original container width, you can add padding to compensate again:
ul li.completed a {
display: inline-block;
padding-right: 24px;
}
IMPORTANT UPDATE:
For this method to work, there must be no white space between the text and the closing tag of the element holding the pseudo element. Even though the pseudo element's width is compensated by a negative margin, the white space will make the line break when it meets the edge of the parent element. For example, this works:
<span>text goes here</span>
and this doesn't:
<span>
text goes here
</span>
you can add the image to the last word instead. that will make it break together.
add a class to word
<strong class="test">word</strong>
and .test:after { ...
http://jsfiddle.net/52dkR/
the trick is also to make that class to be inline-block
and if you want to keep the underline see this.
http://jsfiddle.net/atcJJ/
add text-decoration:inherit;
This is a little similar to a previous answer, but I thought that I'd flesh it out and explain it fully.
As soon as you set display: inline-block, :after becomes a non-text-binding element. This is why it wraps, and why nowrap has no effect. So leave display alone.
As it's a text element by default, the content binds to previous text, as long as there's no whitespace between them. So don't add any, but make sure you have content: "", or it's the same as display: none. The only problem is height and width are controlled by the content, which in this case is collapsed. So width is 0, and height is the line height.
Resize the area with padding; left or right, it doesn't matter. Add a little margin so the icon doesn't touch the text. Keep everything as relative sizes (em, pt, etc.), and use background-size: contain, so that the icon scales with the text, like an emoji or font. Finally position the icon where you want with background-position.
ul li.completed a:after {
content: "";
background: url('icon.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
margin-left: 0.2em; /* spacing*/
padding-right: 0.75em; /* sizing */
}
I've used this for my external links (a[href*="://"]:after), and it's worked fine in Firefox, Chrome, and iOS. And since the icon remains a text element, even direct text after it binds, so any closing punctuation will wrap too.
If using an icon font: Using the "non-breaking space" unicode \00a0 along with the pseudo-element content (in this case a Font Awesome glyph).
This works without any extra mark-up or special formatting or classnames.
a[href^='http']::after {
content: '\00a0\f14c';
font-family: 'Font Awesome 5 Pro', sans-serif;
line-height: 0;
}
The line-height: 0; part keeps the lines from twitching when the last 'word + icon' wrap.
CodePen example
I was having the same issue. I didn't really like the idea of adding strong or span tags to the last word, so I tried simply adding the icon as a background image with some padding-right instead of using the :after or :before pseudo elements. Worked for me!
<ul><li class="completed">I want the icon to stay on the same line as this last word</li></ul>
ul li.completed a {
background: url(img1.png) no-repeat 100% 50%;
padding-right: 18px;
}
http://jsfiddle.net/atcJJ/36/
I was attempting this with a link button and had the most success with adding padding to the right of the element as #Hugo Silva suggested, then setting the ::after to absolute position. This was a pretty simple solution and seemed to work across modern browsers.
.button {
position: relative;
color: #F00;
font-size: 1.5rem;
padding-right: 2.25rem;
}
.button::after {
content: '>>';
display: inline-block;
padding-left: .75rem;
position: absolute;
}
Here's a JS Fiddle.
Please make sure you end the tag before
<ul><li class="completed">I want the icon to stay on the same line as this last <strong>word</strong></li></ul>
Try the below css. Instead of using "after" use "before" and float right.
ul li.completed a:before {
background:transparent url(img1.png) no-repeat;
content: '';
display:inline-block;
width: 24px;
height: 16px;
float:right;
}
Please check this:
http://jsfiddle.net/supriti/atcJJ/7/
It is possible to do it without :after.
The element with background should be display:inline.
<h1><span>I want the icon to stay on the same line as this last word</span></h1>
h1 span {
padding-right: 24px;
background: url('icon.svg') no-repeat right top;
}
http://jsfiddle.net/my97k7b1/
The problem occurs when there is whitespace at the end of the text of the element, so it considers the icon as another word. My solution is to remove the white space with javascript and put it outside the element. Also, this way we avoid that text-decoration:underline styles the white space that may be at the end of a link:
$(document).ready(function () {
$("a[href$=\".pdf\"]").each(function () {
var endspace = /\s$/;
if (endspace.test($(this).html())) {
var linktx = $(this).html().replace(/\s*$/, "");
$(this).html(linktx);
$(this).after(" ");
}
});
});
In the css I add a non-breaking space \00A0 before the icon to separate it from the text, and to scale according to the font-size. In some cases, using a narrow no-break space \202F offers a better visual effect:
a[href$=".pdf"]:after {
content: "\00A0\f1c1";
font-family: "Font Awesome 5 Pro";
}
https://jsfiddle.net/poselab/910bw7zt/8/
With my particular set up, the only working solution was to use position relative, and place my icon element in a span with a position absolute. Like so:
h2 a {
position: relative;
width: auto;
}
h2 a span {
position: absolute;
right: -30px;
bottom: 0;
}
<h2>
<a href="#">
The arrow won't drop to the next line as an orphan, even if the text is long and responsive
<span>→</span>
</a>
</h2>
I just used:
white-space: nowrap;
Worked for me!
I'm trying to come up with a solution for this problem.
I have a control where the background is an image.
The text that I would like on the form is included in the bg image, however for the purpose of accessibilty, I'd like to include it in an H3 tag.
The problem I have encountered with the solutions I have is that the space is still allocated and I need it to be supressed. It also needs to be Google friendly too.
Here's 2 solutions I have:
text-indent:-999px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
Any ideas?
The normal way to hide elements is to use one of the following:
visibility:hidden; which hides the element but still takes up space.
display:none; which hides the element and does not take up space.
I believe the second is what you want in this instance.
Well, first of all
display: none;
But, if you want, there might be other solutions for styling your heading tag
/* on its container */
overflow: hidden;
/* on h3 tag */
float: left;
margin-left: -100%;
or
font-size: 0;
line-height: 0;
height: 0;
overflow: hidden;
You may also need to set/reset few other properties, to clear any other space around your heading, like
margin, padding, white-space, text-indent, border, etc.
You can give font-size:0; to your h3 tag HEADING will be in your code with your background.
And this will help you in SEO also..
DEMO
HTML
<div id="wrap">
<h3>heading</h3>
</div>
CSS
#wrap {
height: 230px;
width:660px;
background:url("http://www.eldercarefunding.org/Portals/18/Skins/s_eldercare_green/images/header.bgL.png") no-repeat 0 0;
}
#wrap h3 {
font-size:0;
}
I have an H3 heading that I'd like to style as having a particular background color, but without having the element's background take up the full width of the parent element. Seeing as H3 is by default a block element, my style would need to change the element to an inline-block element, or just an inline inline element like so:
h3 {
background-color: #333;
color: white;
display: inline-block;
}
This will work fine, but only if it is immediately followed by a block element. I do not want to change the markup just to cater for this style, so I was wondering if there is a way to cause any adjacent element, irrespective of how it displays, to start on the next line?
Assume I can use CSS3.
try this:
h3:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
display:block;
width:auto;
This will make the width as small as possible (not filling the whole parent element) and make other elements appear below.
How often does it happen that the element after the <h3> is an inline element? (Usually after a header there should be like a <p>, <ul> or other block elements, although this totally depends on your html. Is it predictable? Is it an option to just turn every element that directly follows a <h3> into a block element?
h3 ~ * { display: block }
The only other way I know to have a block-element not take up all the space is floating it, but this leaves another problem.
I come across this all the time in my code, usually for div's that are inline-block'ed. The best way I've seen is to force a new line is to wrap your code in an additional div. Your original html gets the formatting you expected and the div wrapper forces a new line.
Assuming this is your h3 styling,
h3 {
display: inline-block;
}
Then just wrap it in a div.
<div>
<h3>My heading</h3>
</div>
I've had to do something similar with inline nav items that need breaking at certain points. Does this work?
h3:after {
content: "\A ";
line-height: 0;
white-space: pre;
display:inline-block;
}
I seem to remember IE7 having an issue with it.
If you don't need to center h3, this may help:
h3 {
background-color: #333;
color: white;
display: inline-block;
float: left;
clear: left;
}