I need to draw a horizontal line after some block, and I have three ways to do it:
1) Define a class h_line and add css features to it, like
#css
.hline { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <div class="h_line"></div>
2) Use hr tag
#css
hr { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <hr />
3) use it like a after pseudoclass
#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
<div class="block_1 h_line">Lorem</div>
Which way is the most practical?
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
Here is how html5boilerplate does it:
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
I'd go for semantic markup, use an <hr/>.
Unless it's just a border what you want, then you can use a combination of padding, border and margin, to get the desired bound.
.line {
width: 53px;
height: 0;
border: 1px solid #C4C4C4;
margin: 3px;
display:inline-block;
}
<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>
In HTML5, the <hr> tag defines a thematic break. In HTML 4.01, the
<hr> tag represents a horizontal rule.
http://www.w3schools.com/tags/tag_hr.asp
So after definition, I would prefer <hr>
If you really want a thematic break, by all means use the <hr> tag.
If you just want a design line, you could use something like the css class
.hline-bottom {
padding-bottom: 10px;
border-bottom: 2px solid #000; /* whichever color you prefer */
}
and use it like
<div class="block_1 hline-bottom">Cheese</div>
I wanted a long dash like line, so I used this.
.dash{
border: 1px solid red;
width: 120px;
height: 0px;
}
<div class="dash"></div>
My simple solution is to style hr with css to have zero top & bottom margins, zero border, 1 pixel height and contrasting background color.
This can be done by setting the style directly or by defining a class, for example, like:
.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
it is depends on requirement , but many developers suggestions is to make your code as simple as possible .
so, go with simple "hr" tag
and CSS code for that.
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
emphasized text
This is relatively simple example and worked for me.
hr {
width: 70%;
margin-left: auto;
margin-right: auto;
}
Resource: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html
Related
I'm looking to find out how to add another box inside my box which would be faded to act as a title bar for that specific box (If that makes sense)!
So basically, in the SOCIALBOX I'm looking to get a sub-faded bar at the top inside which would act as a title bar.
After a few comments of people saying they're not sure what I mean, I created a quick image in photoshop to act as some reference point.
Code Snippet:
body {
background: url("../images/backgroundimage.jpg") repeat 0 0;
}
/* CSS MENU BAR CODE GOES HERE */
#menubar {
width: 98.5%;
height: 40px;
background-color: #000000;
position: fixed;
border: 2px solid #ffffff;
}
.inside_text {
color: #FFFFFF;
float: right;
margin: 11px 7px 0 0;
}
.inside_text2 {
color: #FFFFFF;
float: left;
margin: 11px 0 0 7px;
}
/* CSS SOCIALBOX (RIGHT) GOES HERE */
#socialbox {
width: 40%;
height: 40%;
position: relative;
float: right;
margin: 0 8px 0 0;
background-color: #000000;
border: 2px solid #126b72;
}
<div id="menubar">
<div class="inside_text">
PLACEHOLDER TEXT
</div>
<div class="inside_text2">
PLACEHOLDER TEXT
</div>
</div>
<br />
<br />
<br />
<div id="socialbox">
</div>
So you are asking for a faded line within SOCIALBOX div, to serve as underline for a title?
If thats correct create another class
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
}
position with margin-left & margin-top values inside that class based on where you want it within SOCIALBOX.
for example:
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
margin-left:50px;
margin-top:30px;
float:left;
}
create a:
<div class="title-bar"></div>
and place that inside
<div id="socialbox"></div>
BTW make it a habit to use float:left when positioning divs with CSS, try to avoid position:absolute or fixed, unless absolutely necessary. It just comes out cleaner this way.
I need to implement a menucard in to a website. My customer wants, that it looks exactly like on the card in the restaurant.
Is it with HTML possible to put a border-line directly under the text like on the image below ("Hauptgerichte")? And if yes, how could I realize that?
Thanks!
If you want the border to touch the text, you can adjust the line-height to something small:
p
{
border-bottom: 1px solid black;
line-height: 10px;
}
http://jsfiddle.net/kz43g/
Here is 1 variant - here is a fiddle.
html:
<div>
<p> some text </p>
</div>
css:
*{
padding:0;
margin:0;
}
div{
border-bottom:1px solid #000;
}
p{
margin-bottom:-5px;
}
i just put negative bottom margin to the text container (in this case the p tag)
This is possible in HTML / CSS: Example
HTML:
<h3 class="yourClass">Text place</h3>
CSS :
.yourClass{
width:300px;
border-bottom: 1px solid #000;
text-indent:50px;
line-height:80%;
}
In this example I'm changing the line height to move the text under the line and the then using text-indent to move it to the correct positioning. It should give you the desired results. There are a few ways to do this, but this will require less HTML.
Here is a JS Bin that shows how this could be done. I added a border to the bottom of the paragraph and a little padding to the left. Then I changed the line height of the paragraph so it would sit right on the border.
You could try working with:
text-decoration: underline;
I choose to use the border property for easy customization.
CSS from JS Bin:
p {
border-bottom:1px solid #333;
line-height: 50%;
padding: 0 0 0 40px;
}
Pure CSS solution is possible with pseudoelement after, see fiddle. The distance from text is done by the bottom:3px:
.underline {
position:relative;
}
.underline::after {
content: '';
width: 100%;
position:absolute;
bottom: 3px;
left:0;
border-bottom: 1px solid black;
}
edit: the line-height solution looks better :)
Put the text inside of a div. Then, make the div a set width. Then, add a border to the div.
<div id="title">
<h2> Hauptgerichte </h2>
</div>
/*CSS*/
#title{
width: 50px;
border-bottom: 2px solid #000000;
}
Put the header in H tags, then target the H tag with CSS and apply border bottom.
HTML
<div id="content">
<h1>title</h1>
</div>
CSS
#content h1{
Border-bottom:1px solid #999;
Width: 150px;
}
I'm having trouble figuring out how to apply a split border on an element using CSS.
The effect I'm trying to achieve is this:
Where the red line and the grey line take up a % of the elements width. Preferably, I would like to apply this effect to an element using a single class.
Edit: for those asking for a code sample:
<!-- spans width 100% -->
<div id="wrapper">
<h1 class="title">DDOS Protection </h1>
</div>
Red text and a red underline? There's some simple CSS for this.
<span style='color:red; border-bottom: 1px solid red;'>DDOS</span>
<span style='color:#999; border-bottom: 1px solid #999;'>Protection</span>
Well, assuming that you want to use a single class, and without seeing your exact markup, this will work:
<div class="message">
<span>DDOS</span>
<span>Protection</span>
</div>
And then your CSS could look like this:
.message span {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
color: #ccc;
}
.message span:first-child {
border-bottom-color: red;
color: red;
margin-right: 10px;
}
Here's a jsFiddle demo.
You can also try to play with :before and :after:
.line {
background-color: #DDD;
padding: 5px 10px;
position: relative;
}
.line:before, .line:after {
content: '';
width: 10%;
height: 2px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
.line:after {
width: 90%;
background-color: green;
left: 10%;
}
http://jsfiddle.net/DHDuw/
Ok I've made a similar one but that was asked for vertical, but now am changing the gradient direction so that it will help you
Demo (Works On Chrome, If Anyone Knows Cross-Browser, Please Feel Free To Edit, Because Am Using Old Browsers So Won't Be Able To Test)
CSS
div {
font: 40px Arial;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0505), color-stop(50%,#ff0000), color-stop(50%,#000000), color-stop(100%,#000000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Is a simple exercice, probably some solution better than others, but I wonder which is the best to create this kind of structure in html and css:
What I want is the text, then create 2 pixel line, 1px red and other 1 px green.
Not sure what is the best solution for crossbrowser , want to lines end same time.
Already tried with border, hr , background .. but seems not perfectly finish.
ps-looking for a solution without recurring to a image
Simple answer is to use a simple tag (<i> for example) and apply CSS styles to it.
<p>Your text <span class="line"></span></p>
CSS might look like this:
.line {
position: relative;
display: inline-block;
* display: inline; /* fix for IE bugs */
* zoom: 1; /* fix for IE bugs */
height: 1px;
width: 100px;
background-color: #f00;
border-bottom: 1px solid #00f;
vertical-align: middle;
margin-bottom: 5px;
}
CSS:
#lines{
border-bottom: 1px solid red;
border-top: 1px solid green;
display: inline-block;
height: 5px;
margin-left: 10px;
width: 100px;
}
Markup:
<span id='text'>My text</span>
<span id='lines'></span>
Here is my 2 cents... similar to Rodolfo but no spacers
http://jsfiddle.net/c4HjQ/
Use the CSS :after along with content:
<div class="container">
<div class="linetext">Text</div>
</div>
.container {
padding: 15px;
border: 4px solid black;
}
.linetext:after {
content: "";
display:inline-block;
width: 50px;
height:1px;
border-top: 1px solid green;
border-bottom: 1px solid red;
margin-left: 6px;
}
Try it: http://jsfiddle.net/wBTqV/
Documentation
CSS :after pseudo-selector on MDN - https://developer.mozilla.org/en/CSS/:after
CSS content property on MDN - https://developer.mozilla.org/en/CSS/content
you probably have a 'spacer' image (1x1 transparent image), so you can just do a
<div style="float:left">Your text</div>
<div style="float:left">
<div style="background-color:green"><img src="spacer.gif" width="100px" height="1px"></div>
<div style="background-color:red"><img src="spacer.gif" width="100px" height="1px"></div>
</div>
I want to make something like a horizontal line with a text in the middle of it. It should look like this (text image follows):
------------------------------------------ TEXT --------------------------------------------
the line should be dotted and the text in the middle should separate the line in half.
I came up with the idea of using a table with 3 elements with percentage values in width attribute but maybe there is a better solution.
I hope it's clear. Thanks for ideas
<div id="line"><span>TEXT</span></div>
And CSS:
#line{
border-bottom: 1px black dotted;
overflow:visible;
height:9px;
text-align:center;
margin: 5px 0 10px 0;
}
#line span{
background-color: white;
text-align:center;
padding: 0 5px;
}
See Example on JSFiddle
I would use CSS, and two containers:
Demo: http://jsfiddle.net/LRSuJ/
HTML:
<div class="something">
<div class="content">Text</div>
</div>
CSS:
.something {
border-bottom: dotted 1px #000;/* Border style */
height: 10px; /* Adjusted height */
margin-bottom: 10px; /* Proper offset for next element */
line-height: 20px; /* Actual text height */
text-align: center; /* Center text */
}
.content {
background-color: #FFF; /* Hide previous dots */
display: inline; /* Inline element */
padding: 0 10px; /* Customisable left/right whitespace */
}
You could use a fieldset and legend:
<fieldset>
<legend>TEXT</legend>
</fieldset>
fieldset
{
border-top:solid 1px black;
}
fieldset legend
{
text-align:center;
}
http://jsfiddle.net/2amBc/
I would do it like this:
HTML
<fieldset>
<legend>Text with dotted line</legend>
</fieldset>
CSS
fieldset {
border: 0;
border-top: 1px dotted gray;
}
legend {
text-align: center;
}
jsFiddle demo: http://jsfiddle.net/XZcRB/