I want to put a line beside my text Like THIS
----- Hello WOrld -----
the line should be continued and BOLD and align side middle wise And RED
Have you tried :before and :after selectors?
<span class="dashes">Hello WOrld</span>
<style type="text/css">
.dashes { font-weight: bold; }
.dashes:before, .dashes:after { content:"----"; color:#f00; }
</style>
This is how it comes out: image sample
UPDATE
Based on your updates and comments, I think this fits your description:
<h4 class="sidelines"><span>Hello WOrld</span></h4>
<style type="text/css">
h4.sidelines { text-align: center; border-bottom: 1px solid #f00; height: 0.5em; }
h4.sidelines span { display: inline-block; background: #fff; padding:0 0.25em; }
</style>
This will give you a centered, bolded title with continuous lines on each side.
Here's an example of the update: http://o7.no/PVXvaH
No css required
─── Hello World ───
Looks like this
──── Hello World ────
try this. but not compatible for all browser versions.
p:before,p:after {
content: "---";
}
<p>Hello WOrld</p>
I achieved this using div's. check this link to see the result.
HTML
<div class="line"></div>
<div class="text">Hello WOrld</div>
<div class="line"></div>
CSS
.line
{
width:100px;background-color:black;
border: 0.1em solid black; /* dashed, groove, inset */
margin-top:0.45em;margin-bottom:0.45em;
}
.line, .text
{
float:left;
}
.text
{
padding-left:10px;padding-right:10px;
}
Remember that when you add the scales(height) of margin-top, margin-bottom and border, it should be equal to one. Like 0.45 + 0.45 + 0.1 = 1 in my example. This will keep layout clean.
If you want to make the lines more bold then just increase the scale of border keeping in mind about the scales of margin-top and margin-bottom.
Hello World
p {
text-align:center;
border-left: 50px solid #363454;
border-right: 50px solid #363454;
width:150px;
line-height: 2px;
}
<p>Hello World</p>
Related
I have several different spans all wrapped up in a single div and I'm trying to add background color that wraps close to the text instead of a block (rectangle) around the span. So, I'm using inline, but this then puts all the spans on the same line. How can I get this background effect but putting getting line breaks in between the spans. Note that I can't change the HTML, but I have full control over CSS.
body {
background-color: red;
color: #fff
}
#page {
width: 800px;
}
.header-content {
width: 500px;
}
h1.module_header,
.fullwidth_header_subhead,
.header_content_wrapper {
display: inline;
background: #292d31;
box-shadow: 10px 0 0 #292d31, -10px 0 0 #292d31;
}
<body>
<div id="page">
<div class="header-content">
<h1 class="module_header">
This is the really long main title that can be many lines
</h1>
<span class="fullwidth_header_subhead">
Here is a subhead that can also be multiple lines so this can wrap also
</span>
<div class="header_content_wrapper">
<span>
Here is a shorter line but could be multiple lines
</span>
</div>
</div>
</div>
</body>
You can see the result here: https://codepen.io/jonmrich/pen/gdjBbK
One trick is to use the ::after pseudo-element to insert a line break character. You have to set white-space to pre in order for it to not collapse like other white space. The use of white-space: pre is credited to this answer by Adrift.
To add space between the lines, simply make the ::after pseudo-element display:block. That will add a line below the current line at the same font size as the element it is "after". Set the font-size property to equalize the height.
body {
background-color: red;
color: #fff
}
#page {
width: 800px;
}
.header-content {
width: 500px;
}
h1.module_header,
.fullwidth_header_subhead,
.header_content_wrapper {
display: inline;
background: #292d31;
box-shadow: 10px 0 0 #292d31, -10px 0 0 #292d31;
}
h1.module_header::after,
.fullwidth_header_subhead::after,
.header_content_wrapper::after {
content: '\0A';
white-space: pre;
display: block;
font-size: 10px;
}
<body>
<div id="page">
<div class="header-content">
<h1 class="module_header">
This is the really long main title that can be many lines
</h1>
<span class="fullwidth_header_subhead">
Here is a subhead that can also be multiple lines so this can wrap also
</span>
<div class="header_content_wrapper">
<span>
Here is a shorter line but could be multiple lines
</span>
</div>
</div>
</div>
</body>
I have been looking for a way to center an anchor tag vertically according to a span tag, which are both encased within div tag.
My HTML
<div id="project_list">
<div class="title">
Example Project
<span class="show_details">Show Details</span>
<div style="clear: both"></div>
</div>
</div>
My CSS
div#project_list {
border: 2px solid #000000;
}
div#project_list div.title {
background: grey;
padding : 10px;
}
div#project_list div.title a {
font-size: 1.231rem;
}
div#project_list span.show_details {
background: orange;
float : right;
padding : 13px 5px;
}
I have also create a JSFiddle here, so you may see what I am speaking about.
Thank you to everyone in advance as I have been racking my brain on how to do this for a couple days now.
You could set the line height to match the button height:
a { line-height:46px; }
Note: I just used a but you will probably want to add a class so the style doesn't get applied to all anchor tags.
http://jsfiddle.net/GxqTh/2/
#OpenNoxdiv- try adding padding to your a tag; 20px seemed to center nicely for me. - see below
#project_list div.title a {
padding-top:20px;
}
I'm trying to change style of WORK div when hovering at one of the hexagons. I've put them all into a table as a container, but it doesn;t seem to work.
Maybe you can give me a hint, thank you.
Example
I just answered another question like this (but was specific to a task). I shall use the same example so you can have a look at how it works.
You can do this just using CSS:
HTML:
<img name="image1" src="./goal/images/normalButton.png" style="vertical-align: middle; width : 183px;" />
<h2 class="mnrImageH2"><span class = "mnrImageSpan">Haberler</span></h2>
CSS:
.mnrImageH2 {
position: absolute;
top:1px;
left: 0;
width: 100%;
}
.mnrImageSpan {
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
padding: 10px;
}
h2 {
color: white;
}
img:hover + h2 {
color: #000;
}
So using the + selector we can select the h2 when we hover over an img. Take this and do what you need to do with it.
DEMO HERE
If I correctly understand your point the answer is "You cannot with current schema."
You shall use + or ~ selector. They works if elements have the same parent so you can apply CSS rule if any of hexagon is hovered but you cannot determine particular one.
Add the rule to your example to see what i'm saying:
*:hover + * > * > .work-box{
border: solid red;
}
If your elements have the same parent solution is quite simple - Example
There is good site for Russian speakers about ~ selector
This can help you in your problem and if you are not satisfy by this then comment on this post i will try to solve that also.
<div>
<div class="e" >Company</div>
<div class="e">Target</div>
<div class="e" style="border-right:0px;">Person</div>
</div>
<div class="f">
<div class="e">Company</div>
<div class="e">Target</div>
<div class="e" style="border-right:0px;">Person</div>
</div>
And use hover like this,
.e
{
width:90px;
border-right:1px solid #222;
text-align:center;
float:left;
padding-left:2px;
cursor:pointer;
}
.f .e
{
background-color:#F9EDBE;
}
.e:hover{
background-color:#FF0000;
}
Here is fiddle example: example
Question1: I have a flowing arrow triangle css:
.wrapper {
background-color: black;
width: 100px;
height: 100px;
}
.downArror {
float: left;
display: inline-block;
border: 15px solid rgba(0, 0, 0, 0);
border-bottom-color: #fff;
margin: 8px;
}
HTML:
<div class="wrapper"><div class="downArror"></div></div>
Just wondering, is there a way to change the css that make this triangle to a '^' shape?
what I'd like to have is something like this:
Question2:
Is there a way to make a tick like this using code?:
I am currently using √ but, the shape is slightly different
I actually created this effect awhile back for a menu. You can find it here:
http://codepen.io/spikeyty/pen/IFBro
Basically, I took a transparent div, added bottom-left and bottom-right borders, and then rotated the div 45deg using transform. For extra sweetness the example has a neat hover effect. Enjoy!
It's possible using css : (Hope you meant this)
.wrapper{
background-color:black;
width:20px;
height:20px;
text-align:center;
}
.downArror_black:before{
content:'\2227';
color:#fff;
}
.tick:before{
content:'\2713';
color:#fff;
}
<div class="wrapper">
<div class="downArror_black"></div>
</div>
<br />
<div class="wrapper">
<div class="tick"></div>
</div>
In a way this is simple but I have been trying to figure out this for hours now so I decided to write the problem down and maybe with your help I could find a solution.
On layout heading (h1, h2, h3) have a line next to them. Basically somehting like this:
Example Heading--------------------------------------------
Another Example Heading---------------------------------
One more------------------------------------------------------
So that is end result (----- is gfx as background-image). How would you do it? The background color could change and/or have opacity.
One thing what I was thinking would be this:
<h1><span>Example Heading</span></h1>
when the CSS would look lke this:
h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}
But since the background color can be something else than white (#fff) that doesn't work.
Hopefully you did understand my problem :D
Hacky but, maybe something like this:
HTML:
<h1>
<span>Test</span>
<hr>
<div class="end"></div>
</h1>
And the css:
h1 span{ float :left; margin-right: 1ex; }
h1 hr {
border: none;
height: 1px;
background-color: red;
position: relative;
top:0.5em;
}
h1 div.end { clear:both; }
Fiddle here
This worked for me.
HTML
<div class="title">
<div class="title1">TITLE</div>
</div>
CSS
.title {
height: 1px;
margin-bottom: 20px;
margin-top: 10px;
border-bottom: 1px solid #bfbfbf;
}
.title .title1 {
width: 125px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 22px;
color: #4c4c4c;
background: #fff;
text-align: center;
position: relative;
top: -12px
}
I don't think you can achieve this with pure css because the heading text could be any length. Here is a dynamic javascript solution which sets the width of the line image based on the width of the heading text.
Click here for jsfiddle demo
html (can be h1, h2 or h3)
<div class="heading-wrapper">
<h1>Example Heading</h1>
<img src="line.png" width="193" height="6" alt="" />
</div>
css
h1{font-size:16px}
h2{font-size:14px}
h3{font-size:12px}
h1,h2,h3{margin:0;padding:0;float:left}
.heading-wrapper{width:300px;overflow-x:hidden}
.heading-wrapper img{
float:right;padding-top:9px;
/*ie9: position:relative;top:-9px */
}
jquery
setHeadingLineWidth('h1');
setHeadingLineWidth('h2');
setHeadingLineWidth('h3');
function setHeadingLineWidth(selector){
var hWidth;
var lineWidth;
var wrWidth = $('.heading-wrapper').width();
hWidth = $(selector,'.heading-wrapper').width();
lineWidth = wrWidth - hWidth;
$(selector).siblings('img').width(lineWidth);
}
heading width = width of the heading text inside the wrapper
line image width = wrapper width - heading text width
Hope that helps :)