How do I expand the length of a border past the length of my text? This is what I have so far:
color: #8C4600;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
border-bottom: 1px solid #D1D1D1;
This is the HTML: <li class = "vendors">VENDORS</li>
Use padding and negative margins.
E.g.:
div {
padding: 1em;
margin: 0 -1em;
border-bottom: 1px solid red;
}
The above gives padding on all sides, and negative 1em margin on left and right. You may wish to fiddle w/ that.
CSS borders are placed between the margins and padding of an HTML element. If you want the borders of an HTML element to extend past the width (or height) of that element, you can add CSS padding to the element in order to push the borders outward.
For example, if your html is <li class=vendors">VENDORS</li> adding padding:0 10px; to your CSS would push the borders outwards on the right and left by 10px.
.inner {
width: 80%;
}
.outer {
border-bottom: 1px solid #D1D1D1;
color: #8C4600;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
}
<div class="outer">
<p class="inner">Your text</p>
</div>
You will probably need to set the outer width though. As it might not auto-scale correctly in each browser. Or just make outer 120%, and inner a fixed width. This should be possible in multiple approaches.
Just expand your border to the vw instead of its parent element.
Here is what I mean:
.vendors {
width: 100vw;
border-bottom: 1px solid hsla(0, 0%, 0%, 1);
}
<li class="vendors">VENDORS</li>
You have to specify "border: ##px color; in css.
This will create a border around the related html tag.
A sample code is:
<!DOCTYPE html>
<html>
<head>
<style>
p {
width:225px;
border-style:solid;
border:2px solid red;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
By default, without the width and border-style, the border will occupy 100% of the space. You can restrict its width and style in any way you want.
Here's a link To a website that will help you the most.
Related
This jsfiddle looks like this:
I want it to look like this (I created this with MS Paint)... flush:
Is there anything I can add to the styles to achieve this?
div {
border: 1px solid blue;
font-size: 50px; // this number should be treated as arbitrary
}
One option is to use line-height. The amount will depend on the font-family you are using. The advantage would be that line-height can directly depend on font-size so it can be dynamic. However, it doesn't have a concept of vertical top and bottom individually (it applies to both) so you won't have that space under the text.
div {
border: 1px solid blue;
font-size: 70px;
font-family: 'Times';
line-height: 0.7; /* This will work for any font-size on 'Times'*/
}
<div>Hello</div>
You could simulate that bottom space by wrapping the text in an element with margin-bottom.
div.outer {
border: 1px solid blue;
font-size: 70px;
}
div.inner {
font-family: 'Times';
line-height: 0.7;
margin-bottom: 20px;
}
<div class="outer">
<div class="inner">Hello</div>
</div>
Another option is to use relative positioning. An advantage of this method over line-height is that the div size does not change.
div {
border:1px solid blue;
font-size: 64px; // works for arbitrary font sizes
}
span{
position:relative;
top:-0.21em;
}
<div>
<span>Hello</span>
</div>
As with line-height, you might have to adjust "-0.21em" depending on your font. -0.21em worked well for me for sans-serif and serif, but not cursive.
I am playing with various css properties to see how they work. And my question is, why is it when I set "margin-top" that is more negative than -20px my link doesn't move more upwards any more. Setting a more negative value like -21px and above doesn't move the link more to the top at all.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nav</title>
<style>
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: inline-block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 20px;
border-bottom: 2px solid red;
margin-top: -20px; /* more negative value doesn't move the link more to the top */
}
</style>
</head>
<body>
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
</body>
</html>
For inline (inline-block) elements it appears they don't go beyond their height (can't say/find why), so if you for example change padding greater that 20px, you can have a negative margin as big.
If you do change the anchor to a block level element though, the negative margin applies properly.
Sample 1 - padding
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: inline-block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 40px;
border-bottom: 2px solid red;
margin-top: -40px; /* more negative value doesn't move the link more to the top */
}
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
Sample 2 - block element
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 20px;
border-bottom: 2px solid red;
margin-top: -40px; /* more negative value doesn't move the link more to the top */
}
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
It will never go more negative because there is a h1 tag which dosen't have any spaces above it to do the margin
you have to use position:absolute; to make a tag move freely
All the elements in your example have what is called (are in) a "Normal Flow". The very first element in the flow is <h1> which is block element, it occupies the whole available width and makes the line break. When you use negative margin-top you go up to the element above. 20px of padding is the available negative margin for the element. To go out of the "Normal flow" you can use position: absolute. To stay in the flow you may use position: relative, and use top: -21px;.
I have this block:
For example: I add the text: Last News in the world.
I would like to have the width of the block as wide as the text, but the corners should still remain as a curve.
CSS:
.cat-box-title h2 {
background: transparent url(.../images/testtitle.png) repeat-y;
padding-left: 5px;
color:#5E5E5E;
float:left;
margin-right:10px;
font-size: 22px;
font-family: BebasNeueRegular, arial, Georgia, serif;
}
HTML:
<div class="cat-box-title">
title
</div>
Your solution will be more easy if you use the border-radius instead of background image.
.round-btn
{
background:#4679bd;
color: #FFF;
border-radius:5px;
padding : 10px;
border:none;
}
of-course you need to check the browser compatibility whether your browser supports this property or not. If not then you need to use some hack.
JsFiddle Demo
and if you goes with background-image solution then you need to use two images; one for left side border-radius and another one for right side and use the background-color for rest of the button.
CSS:
.cat-box-title {
background-color: #4679bd;
color:#5E5E5E;
float:left;
border-radius:5px;
margin-right:10px;
font-size: 22px;
padding: 5px;
font-family: BebasNeueRegular,arial,Georgia, serif;
}
When resizing the browser I noticed that all the elements get out of place and the website layout gets distorted. This also occurs on with low-resolution.
Is this because I have used position:relative;? How can I make the page elements not move from their position when resizing.
body{
background:url(../img/bg-silver.jpg) #F2F2F2;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:11px; line-height:18px; color:#636363;
margin-top:10%;
}
#containerHolder {
background: #eee;
padding: 5px;
position:relative;
}
#container {
background: #fff;
background:rgba(245,245,245,0.8);
border: 1px solid #ddd;
}
#main {
margin: 0 0 0 20px;
padding: 0 19px 0 0;
}
That usually only happens with floats. In any regard what you want to do is create a wrapper div with the width you want, and then just set overflow to scroll:
HTML:
<body>
<div id="wrapper">
<!-- content here -->
</div>
</body>
CSS:
#wrapper {
width:980px;
overflow-x:scroll;
}
It's impossible to tell without seeing your html code but using the css style "min-width" on your outer container (whichever element that might be) should solve the problem.
I am trying to create highlighted text effect with line break(s).
Example:
I cannot figure out how to add padding to the text. Here is the CSS for the span element that contains the text:
background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 24px;
padding-left: 5px;
When adding padding it only adds padding to beginning of the text and the end, as seen here:
CSS:
background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 3em;
padding: 10px;
Does anybody have any idea on how to make this happen?
I had this same question and I did some hunting and found a pure CSS solution this that only requires a little bit of CSS: CSS create padding before line-break
The basic solution is using padding on top and bottom and a solid box shadow to pad the left and right sides of the text, like this:
.highlight {
color:#fff;
background:#000;
box-shadow:5px 0 0 #000, -5px 0 0 #000;
padding: 5px 0;
}
Here's a method of achieving a multi-line, padded, highlight behavior for text using just CSS.
This is based on the box-shadow method found elsewhere, however as of Firefox 32 the traditional box-shadow solution no longer renders correctly.
Reviewing the changelog for FF32 I found there's a new property: box-decoration-break that causes the breakage.
This property defaults to 'split' but needs to be specified as 'clone' to achieve the desired multiline padding effect.
For more info see:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
.box {
width: 50rem;
margin: 1rem auto;
font-family: arial, verdana, sans-serif;
}
h1 {
color: white;
font-size: 2.5rem;
line-height: 4rem; /* reduce size to remove gap between text */
margin: 0px;
}
h1 span {
background-color: #A8332E;
padding: 0.5rem 0;
-webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
-webkit-box-decoration-break:clone;
-moz-box-decoration-break:clone;
box-decoration-break: clone;
}
<div class="box">
<h1>
<span>Multi-line, padded, highlighted text that display properly in Firefox using box-decoration-break: clone</span>
</h1>
</div>
Building on Brandon's solution, I figured out you can actually avoid the padding altogether and do it purely using box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
you can use box-decoration-break
-moz-box-decoration-break:clone;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
working sample codepen
Just add:
If space in the text area is all you are looking for.
If this is a "title" or something similar and it wraps because the container is fluid, why not set the background color on the container, then when/if your text/title wraps, all of the space between the lines of text, as well as the text line length, will appear to be the same.
<html>
<head><title>...blah...blah</title>
<style type="text/css" title="text/css">
#masthead{
background-color:black;
color: white;
}
#masthead h1{
text-transform:uppercase;
}
#container{
background-color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="masthead">
<h1>some sort of title goes here</h1>
</div>
</div>
</body>
</html>
Additionally, you can probably just enhance the text in the h1 tag with margin/padding styles to get the appearance you are after.
Add padding for the surrounding block-level element (e.g. div or td) and remove the padding from your span.