I'm trying to achieve this in CSS:
I would like the green line to always be the width of the text (no fixed width). I have a constraint, the tex is contained in an H3 tag with no ability to add a span tag inside it.
you could maybe try this aproach also:
<div class="container">
<div class="line"></div>
<h3>RECENT EPISODES</h3>
</div>
.container {
width:100%;
position:relative;
}
h3 {
display:inline-block;
border-bottom:1px solid green;
padding-bottom:10px;
margin:0;
position:relative;
}
.line {
height:1px;
background-color:#ededed;
width:100%;
position:absolute;
bottom:0;
}
http://jsfiddle.net/az6pr1mz/
The grey line needs to go on a block level tag while the green needs to go on an inline tag. This means that you need two nested tags for it to work and that you must either add a span inside the h3 or a div surrounding it. An h3 can always be made inline if needed.
A slightly different approach would be to add the secondary element outside the h3 without surrounding it and position that so it lies directly under the h3.
In any case, you will need a minimum of two elements for the borders to cling to.
Update:
I missed that you don't need span inside the h3. I added a workaround. I am not sure whether this is the only solution. But I think it can be improved though. In the below code, I am using css content property to hide the border of the container.
NOTE: Use as many dots . as you can use to make it work on all resolutions.
CSS
.container {
border-bottom: 1px solid red;
padding-bottom: 10px;
position: relative;
max-width: 100%;
word-break: break-all;
}
.container:after {
content:"....................................................................................................................";
color: transparent;
border-bottom: 1px solid green;
padding-bottom: 10px;
position: absolute;
bottom: -1px;
}
Working Fiddle
For example this code: (is clearly and not uses absolute positions)
HTML:
<h3><span>Recent episodes</span></h3>
CSS:
h3{
text-transform:uppercase;
border-bottom:1px solid #ccc;
}
h3 span{
display:inline-block;
border-bottom:1px solid #080;
margin:0 0 -1px 0;
}
http://jsfiddle.net/tp0nnapu
Related
I know this is an old question, but I wanted to know what is the best way to put text into a border of a div tag. This is what I have
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
}
<div class='componentWrapper'>Text inside div </div>
I want to add a title into the border of the div tag. I know one option is to use fieldsets but I prefer not to go with this approach. Another approach is the put a box and move it up and set the background color, but I think this fails when you set a different background color on the page.
What is the best solution for this?
I would suggest something like that, using position:absolute:
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 15px 10px 10px;
width: 95%;
}
.componentWrapper .header {
position:absolute;
margin-top:-25px;
margin-left:10px;
color:white;
background:cadetblue;
border-radius:10px;
padding:2px 10px;
}
<div class='componentWrapper'><div class="header">Headline</div>Text inside div </div>
I am trying to make a CSS :after triangle the usual way. But it does not look as a triangle at all, please see http://jsfiddle.net/lborgman/eX3HL/:
/* triangle after */
#st:after {
position: relative;
margin-left: 10px;
content:"";
border-top:4px solid transparent;
border-bottom:4px solid transparent;
border-left:4px solid black;
}
#st {
line-height: 2em;
}
If I change "position:relative" to "position:absolute" the triangle will become a triangle. But that does not work where I want it (because it is on a float div).
What can I do?
Add display:inline-block to fix the triangle
#st:after {
position: relative;
margin-left: 10px;
content:"";
border-top:4px solid transparent;
border-bottom:4px solid transparent;
border-left:4px solid black;
display: inline-block;
}
JS Fiddle: http://jsfiddle.net/eX3HL/2/
It's a phenomenon that has to do with the native display of an object. The native display property of span is inline. Inline elements behave like plain text, while block elements behave more like images.
In your example when you do not override the default property of the span your element behaves like text and thus has also an font-size shadow-property which is set to inherit. It's an unexpected behavior since the shadow-properties are not visible to developers directly, so causing a lot of unclarities. You don't have to just believe my words, here is a proof: http://jsfiddle.net/eX3HL/5/
I have paragraphs on a page which i would like to add a border.
<p class="valid">paragraph</p>
CSS
p.valid {
padding:5px;
border: 1px solid #ccc;
}
The Problem is this displays the paragrph as 100% of the page
I have also tried adding inline-block which wraps the text as i would like, but inline is like float left.
p.valid {
padding:5px;
border: 1px solid #ccc;
display: inline-block;
}
When you float the element, also set it to clear any (left) floating elements:
p.valid {
padding:5px;
border: 1px solid #ccc;
display: inline-block;
float: left;
clear: left;
}
From the MDN documentation:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them
I would use a <span> tag instead of <p> because a paragraph is supposed to extend across the entire page, and it looks like <span> will help you more with what you're trying to accomplish.
I am currently trying to make a custom underline with border-bottom. However, currently the underline is going all the way of my block-element (whole page).
I’d prefer to have it being only 50px longer than my headline (however the text is flexible and I do not know the length).
Can I do this without adding another <span> tag within the <h2> somehow? I do not wannt to add a <span> element to each <h2> just to change my design.
Current HTML is:
<h1>My title</h1>
CSS:
h1 {
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
}
Is it possible to adjust the border-bottom length to my text length? (e.g. behave like inline element for border, but like block for newlines, padding and margin)
Using display: inline-block works, the only caveat being that the content after the <h1> tag must be the full width of the container element. The other solutions here also assume this. You can also use display: inline (supported by older browsers), but inline-block allows for setting of explicit widths, should you need it.
Here's a JSFiddle
CSS
h1
{
display: inline-block;
padding-right: 50px;
border-bottom: 1px dotted #888;
}
Inline or floating methods can be problematic if you're unable to compensate for them in other rules. One alternative is to use display:table
h1
{
display:table;
border-bottom:1px solid black;
padding-right:50px;
}
You can use
h1 {
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
float: left;
padding-right: 50px
}
Simply add one more property in css like this :
h1 {
display:inline;
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
}
In CSS, is it possible that when I rollover one element, I make another element visible? I have an icon, and when someone mouses over it, I want it to make visible a text element that describes what the icon does.
Here's a CSS only tooltip I use all the time :) Works great, even in IE.
a:hover {
background:#ffffff;
text-decoration:none;
}
/*BG color is a must for IE6*/
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
Easy
<a class="tooltip" href="#">
Tooltip
<span>T his is the crazy little Easy Tooltip Text.
</span>
</a>
Hope it helps.
You can make child-elements visible by hovering on the parent (as Hunter suggests), or siblings:
span:hover + span {display: block; }
There are maybe some slight cross-browser compatibility issues, but with a valid doctype I think IE7+ is okay with sibling selectors (though I've not tried to test that theory).
sure it is!
.me:hover span { display: block; }
If you want to show an element that isn't a child of the element hovered you might need to use javascript
Here's a little slapped-together example that won't work on IE...
<html>
<head>
<style>
div.tooltip
{
margin-top: 16px;
margin-left: -1px;
position: absolute;
border: 1px solid black;
background-color: blue;
color: yellow;
display: none;
}
div.icon
{
width: 16px;
height: 16px;
border: 1px solid blue;
background-color: cyan;
}
div.icon:hover .tooltip
{
display: block;
}
</style>
</head>
<body>
<div class="icon">
<div class="tooltip">This is what the icon does.</div>
</div>
</body>
</html>
But you really should just use jQuery.
Agree with the JavaScript recommendation. Specifically jQuery is easy and most appropriate for page behavior logic. I think CSS should only be look/feel/style...Javascript should be were all your event and behavior logic is.