What is the modern way of making a line half way across the screen? I saw this in a tutorial and it looks a bit old fashioned now.
Like:
<hr size="6" width="50%">
How would you do something similar if you were making a webpage now?
You can continue to use <hr />, but I would suggest omitting the inline attributes. It is just another element, and you can move your styling information to css:
hr {
width:50%;
}
You can use CSS to style the line
hr{
width:50%;
}
HTML:
<hr />
CSS:
hr { width: 50%; }
This should be controlled in CSS using something like:
hr {
width: 50%;
}
You can change borders etc too. Just make sure you reset the borders and backgrounds as different browsers use different methods to style it
Using a <div> and some styling:
#line {
width: 50%;
margin: 0 auto; /* Centered */
height: 4px; /* The border adds to height */
border: 1px solid #888888;
border-bottom: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
}
Related
I have a div that wraps around my <footer> tag. In the div is an <hr>, which needs to be in the div to have the positioning properties applied. However, it also carries over the coloring of the links in my footer. I don't want the <hr> to be the same color as the links. Is there any way to "escape" this or change the property.
I tried <hr style="color: black;"> but that didn't change anything. If you have any input on how to change the properties despite the set CSS in the div, I would greatly appreciate it.
JS Fiddle: http://jsfiddle.net/o6vmz7t5/1/
HTML
<div id="footer_style">
<hr>
<footer>
Contact
Privacy Policy
Create Account
</footer>
</div>
CSS
#footer_style {
margin: 0 auto;
position: fixed;
bottom:0;
width: 100%;
padding: 20px;
}
#footer_style a {
color: #f2f0e1;
}
#footer_style a:hover {
color: black;
}
hr tags simply have a border-top applied on them
override the hr as below
#footer_style hr {
border-top: 1px solid black;
}
#footer_style hr {
background-color: black;
height:1px;
}
JSFiddle
Whoa, it had me struggling for a minute. Apparently since the hr has no height and you cant see its internal "fill", affecting the color does nothing.
What you actually see is the border, so using border-color did it for me.
Please try below code I have try this code. Using this code solve your problem.
border-color: red;
Instead Using the color: black;
Try using in this way
border: 1px solid #000;
border-width: 1px 0px 0px 0px;
Try it
I create an empty span with css border: 1px solid #333 but didn't see any working separator. I think there must be something inside the span? how to create a border with empty tag? a hr tag is too ugly.
You must give it a size, and display it as a block. Try this.
span.separator {
border-top: 1px solid #333;
width: 100%;
height: 1px;
display: block;
}
JSFiddle
hr tag is not ugly if you use border: 0; and than use border-top: 1px solid #000;, the 3d style of hr is just applied by browser, you can alter it the way I suggested.
hr {
border: 0;
border-top: 1px solid #000;
margin: 10px auto; /* For vertical spacing */
}
Demo
I would suggest you to use <hr /> as semantic goes, it will give a meaning to your page and will also save you few characters in the source.
Secondly about the span tag, it's an inline tag, to span it 100% you need to make it display: block;.
span.separator {
border-top: 1px solid #000;
display: block;
margin: 10px auto; /* For vertical spacing */
}
For more information on inline span you can refer my answer here.
A span is not a block element, in order to get what you want, you would have to give it a height and set it as display:block or inline-block.
If you want the border to be only on one side you can use border-right or border-left;
test <span style="display:inline-block;height:13px;border:1px solid black;"></span> test
Here is an example
http://jsfiddle.net/Cm5fK/
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;
}
This question already has answers here:
Line under text with spaces. Is it possible via html & css?
(5 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 8 years ago.
in CSS, how can i do something like:
---Item---
with the dash connected like a line?
i thought of :
border-bottom: 3px solid #000;
but then i can't move the line upward plus the line would be behind the text, not surrounding the text
my HTML
<ul>
<li class="sub-menu-item" >FACULTY&STAFF</li>
</ul>
(if possible, i would like to avoid touching the HTML)
is all the above possible via css or should i just use an image after all?
i'm aiming for ie8 and above(and all the new browsers of course)
Inject an — before and after your content using the CSS :before and :after selectors. You'll need to use the escaped unicode, as discussed here:
li.sub-menu-item:before, li.sub-menu-item:after {
content: "\2014"
}
See JSFiddle. For a shorter line you could use an ndash.
Here's a start:
.sub-menu-item
{
border-bottom:1px solid black;
height:0.6em;
width:200px;
text-align:center;
margin-bottom:1em;
}
.sub-menu-item > a
{
text-decoration:none;
background:white;
}
http://jsfiddle.net/NpP5F/3/ (updated to work with multiple items)
Tested to work in Firefox, IE and Chrome. Now keep in mind this works in isolation in a fiddle. Would probably require some tweaking to get it to work within other html elements and styles, etc. Proof of concept anyway. It "can" be done.
You can create a div with border-top and border-bottom, line-height: 0 with a span inside it that has a defined background color:
<div class="test">
<span>BLA BLA BLA </span>
</div>
And the CSS:
.test {
border-bottom: 1px solid #D7D7D7;
border-top: 1px solid #A1A1A1;
line-height: 0;
text-align: center; }
.test span {
background-color: #BABABA;
padding: 0 10px; }
In theory you could use the <hr/> and then just set the length of it and force it to display inline. Or use some special unicode characters if your encoding supports it.
Try this. :) It uses an image, which is a plus because it allows you to style your dashes however you want, and doesn't deal with any freaky margins or anything which may mess up the rest of your layout.
li.sub-menu-item
{
background-image: url('http://i.imgur.com/JIa6C.png'); /* Just a transparent PNG with a line in the middle */
}
li.sub-menu-item a
{
background-color: #FFF;
padding: 0 10px;
margin-left: 200px /* So you can see the left side of the line too */
}
http://jsfiddle.net/wAb8C
Without changing the code:
ul li{
position: relative;
border-bottom: 1px solid #000;
}
ul li a{
position: relative;
background: #fff;
left: 0;
bottom: -10px;
margin-left: 10px;
color: orange;
text-decoration: none;
}
Example here
I'm trying to use divs instead of tables to style boxes around my content. The content can be any size and needs to allow the browser to be resized to any degree. Need the background color and border to contain the content. This works fine with tables. How do I get a div to work the same way?
Note: I added "_"s because my non-breaking spaces were getting lost.
Sample Page
Sample image
(source: c3o.com)
Content:
<style type="text/css">
div.box, table.box
{
padding: 10px 1000px 10px 10px;
}
div.box-header, td.box-header
{
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body, td.box-body
{
padding: 6px;
border: solid 1px #BBBBBB ;
border-top: none;
}
</style>
<div class="box">
<div class="box-header">please_help_make_these_divs_stop_overlapping</div>
<div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>
<table class="box" width="100%" cellpadding="0" cellspacing="0">
<tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
<tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>
There is no easy way to do this that is crossbrowser friendly that I know of.
At least in firefox you can create an simulated table by setting divs with
display:table;
display:table-row;
display:table-cell;
So that those divs work like table elements. Then the box will contain it's content. Wether that's a good solution or not is debateable.
I've been having similar issues with page layouts myself. Usually I've solved those by setting min-width and overflow:auto;
If you really don't want to use a table you can do this:
div.box div {
overflow: hidden;
zoom: 1; /* trigger haslayout for ie */
}
Next time this kind of problem comes up go to giveupandusetables.com.
One way is to make your boxes floats. Add float:left; to box, box-header, and box-body. Add clear:both; to box-body to force it below box-header. You'll probably need to add clear property to whatever content follows as well.
You will not get right edges of box-header and box-body to align, though. If you want their widths to be the same, you really want a table. Table is a tool to make all cells in the same column to share the widths.
For other ideas, check out this SO question.
Firstly, you should be using semantic markup. If something is a header and content mark it up as such with header and paragraph tags. That will help you move out of the 'table-way' of thinking were you try to emulate your markup and styles like a table, markup should come first, CSS can come after.
The following should do what you want:
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>
<div class='box'>
<h3>please help make these divs stop overlapping</h3>
<p>please help make these divs stop overlapping</p>
</div>
Thinking about markup and style separately is the path to CSS Zen Mastery :o)
This works (actually holds together better than tables in ie7 too)
div.box{
float:left;
width:auto;
margin: 10px 1000px 10px 10px;
}
div.box-header{
float:left;
width:100%;
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body{
clear:left;
float:left;
width:100%;
padding: 4px;
border: solid 1px #BBBBBB ;
border-top: none;
}
NOTE: both boxes have to have same left and right padding or one juts out a bit.
Floats are not needed, but you seem to be confusing the uses of margin vs. padding. The following minor tweaks to your style works as you need it to:
<style type="text/css">
div.box, table.box
{
margin: 10px 1000px 10px 10px;
border: solid 1px #BBBBBB ;
padding: 0px;
}
div.box-header, td.box-header
{
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
border-bottom: solid 1px #BBBBBB ;
}
.box-body, td.box-body
{
padding: 6px;
}
</style>
I've changed the padding on the box to a margin, moved the border to your box, and added an underline to the header.
I had this problem also using Firefox 6.0.1, Opera 10.62, Safari 5.1, but not in IE 9, and the overflow:auto fixed it in all browsers. Nothing else did. I also tried overflow:contain, which also fixed the problem, but it appears that contain is not a valid value for overflow, so I am assuming that, since the value was not valid, auto was substituted.