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;.
Related
I have a CSS file that will display a background image in IE, but that same background image won't in firefox. Specifically, its the headerdoc image that's the problem, the one above the menu.
What I'm trying to do is create a main div section and then create the rest of the layout in sections.
Yes, I know you could do this with a table, yuck, ugly hard to manage and even more difficult to maintain not to mention its ugly, hard to manage and even more difficult to manage.
Any help with this would be greatly appreciated.
P.S. Here is what I'm trying to accomplish - I have a page that is the full width and heighth of the screen minus a 2.5% margin around the edges. No biggy here, that's working just fine.
within that container I have a header section called #headerDoc. That should be the full width of the parent container and x % in heighth. It is here that I want to have a background covering the full area of this container.
Within the header section I have a menu section that will comprise just the bottom edge of the #headerDoc parent. say 10% of the bottom. This has its own background so its colored correctly.
After that I'll finish building out the rest of the screen. But that is what I'm attempting to do here.
Here is the CSS data:
/************************* ID's *************************/
#mainDoc {
margin-top: 2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
margin-left: 2.5%;
background-color: #494948;
}
#headerDoc {
width="100%";
height="10%";
background-image: url('./images/bg1.jpg');
}
#menu {
/* position: relative;*/
width: 100%;
height: 32px;
margin-top: 50px;
/* font-size: 14px;*/
font-size: 1em;
font-family: Tahoma, Geneva, sans-serif;
/* font-weight: bold;*/
text-align: center;
/* text-shadow: 3px 2px 1px #FFFFFF; */
background-image: url('./images/dpmenu.gif');
/* background-color: #8AD9FF;*/
background-color: #494948;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
padding: 10px;
}
#menu a {
text-decoration: none;
color: #ffffff;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #000000;
}
Here is the html use of the tags
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<title>Css Test</title>
</head>
<body>
<div id="mainDoc">
<div id="headerDoc">
<div id="menu">
<ul class="bdr-t bdr-b">
<li class="bdr-r ctr">HOME</li>
<li class="bdr-r ctr">CLASSIFIEDS</li>
<li class="bdr-r ctr">PLACE AD</li>
<li class="bdr-r ctr">DIRECTORY</li>
<li class="bdr-r ctr">HELP DESK</li>
<li>MANAGE ACCOUNT</li>
</ul>
</div>
</div>
</div>
</body>
Sorry about the "=" I missed that one (had a few others I forgot the syntax for, but even after changing those it still didn't make a diff.
Try
#menu ul { ... background-image: url('./images/dpmenu.gif'); .... }
by the way, whats in
bdr-t,
bdr-b,
bdr-r,
ctr css class?
I have an <h2> title into a fixed with <div> (238px). When this page is rendered, the browser manage line breaks into the title to make the text fit the width (238px).
But the width property of the h2 element is still 238px, no matters where the line breaks are.
I want to set a border-bottom only under the text, and not under the full width of the h2 element, and I don't know how to achieve this using CSS.
You can see what I mean here : http://jsfiddle.net/np3rJ/2/
Thanks
I think this is what you need:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
h2 span {
position: relative;
padding-bottom: 5px;
}
h2 span::after{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
content: ""
}
Working demo in jsFiddle
I used the technique described in this answer: Advanced CSS challenge: underline only the final line of text with CSS
I introduced a span into the H2 in order not to change the display attribute of it, but you could just as easily use the same technique with a display: inline on your H2. This method would allow the control of the actual line though rather than setting display: inline if needed
This works on Chrome.
h2 {
width: fit-content;
}
If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).
The HTML does not change:
<div class="dossier_titre">
<h2>Horizon 2020, nouvelles opportunités</h2>
</div>
and you can apply the following CSS:
.zone_33 {
width: 238px;
padding: 0px;
margin: 0px;
}
.zone_33 .dossier_titre {
margin: 0px 0px 20px 0px;
}
.zone_33 h2 {
color: #616263;
font-size: 150%;
font-weight: lighter;
padding: 0px 0px 12px 0px;
background: none;
border-bottom: 1px solid grey;
display: table-cell;
text-transform: uppercase;
}
.zone_33 .dossier_titre:after {
content: "";
display: table-cell;
width: 100%;
}
For the <h2> element, set display: table-cell, and add a pseudo-element after .dossier_titre (the containing block for the header/title element). The pseudo-element is also a table-cell and has a width of 100% (this is the key).
Also, since h2 is no longer a block element, add your margins to .dossier_titre to maintain the visual spacing in our layout.
How This Works
I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.
Limitations
table-cell is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.
If the title had many short words, you might get the line breaking in unexpected places. You would need to insert   to keep specific words together as needed.
Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/
Maybe display: inline-block; Or display: inline; is what you need?
Why not try:
text-decoration:underline
?
EDIT
Just make a span around "OPPORTUNITÉS" with the underline.
<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
text-decoration:underline
}
Can try "text-underline-position" property instead of table-cell and border. Make it simple!
text-decoration: underline;
text-underline-position: under;
All you can do is put your h2 element text into span like this:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
and in css remove border-bottom from .zone_33 h2 {} and put it like this:
.zone_33 h2 span{ border-bottom: 1px solid grey;}
by this border-bottom will come under full text.
Try this, (I think it will help you)
.heading {
position: relative;
color: $gray-light;
font-weight: 700;
bottom: 5px;
padding-bottom: 5px;
display:inline-block;
}
.heading::after {
position: absolute;
display:inline-block;
border: 1px solid $brand-primary !important;
bottom: -1px;
content: "";
height: 2px;
left: 0;
width: 100%;
}
You could put a border-bottom and change the width of your h2 so that the border length matches your h2 length. Adjust the width to the width of your h2, taking into consideration it's font-size. Then add a padding-bottom to your h2 and set it to your liking.
<h2>Cats</h2>
h2{
border-bottom: 5px solid black;
font-size: 16px;
padding-bottom: 5px;
width: 64px;
}
In Play 2, there's a sample computer-database-jpa supporting the sorting of columns. By default it's sorted by computer, an arrow is indicating the sort order. I need this CSS style / arrow in another project, but even after examining the CSS code for this table header
<th class="name header headerSortDown">
Computer name
</th>>
I still can't see where the arrow is coming from? Any hint on this? Thanks!
Update:
One can browse the CSS here: https://github.com/playframework/Play20/tree/master/samples/java/computer-database-jpa/public/stylesheets
But on e.g. headerSortDown I can't find something that looks like an arrow ):
For a follow up question:
How to get the arrow directly next to the text?
The easiest way is to use inspection tool of your browser (ie FireBug in Firefox or built-in inspector in Chrome)
Here's standalone extract of the arrows, as you can see they are 'drawing' the arrows with CSS border (no image required)
<!DOCTYPE html>
<html>
<head>
<title>Arrows a'la Twitter Bootstrap</title>
<style type="text/css">
.header {
width: 200px;
background-color: #c2ccd1;
padding: 4px;
margin: 2px;
}
.header:after {
content: "";
float: right;
margin-top: 7px;
visibility: hidden;
}
.headerSortDown:after, .header:hover:after {
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
visibility: visible;
}
.headerSortUp:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
visibility: visible;
}
</style>
</head>
<body>
<div class="header">Not selected</div>
<div class="header headerSortDown">Arrow up (sorting ASC)</div>
<div class="header headerSortUp">Arrow down (sorting DESC)</div>
</body>
</html>
And here's nice tutorial about drawing triangles with CSS border.
Edit
DIV tag uses a block display so it tries to use full width OR the width given in CSS style (in above sample it's 200px) if you'll use that arrow with some inline element like A or SPAN the arrow will be 'glued' to the text. Of course you can also force displaying DIV as an inline, the simplest way to do that (by modifying sample)
for .header declaration: remove width and add display: inline-block;:
.header {
/* width: 200px; don't set width anymore */
background-color: #c2ccd1;
padding: 4px;
margin: 2px;
display: inline-block; /* force displaying DIV as an inline element */
}
To control space between text and arrow just use margin-left property for .header:after part:
.header:after {
content: "";
float: right;
margin-top: 7px;
visibility: hidden;
margin-left:4px; /* space between text and arrow for inline elements */
}
OR if you want to preserve a space for the arrow in the inline elements (to avoid width changes on hover) - you can also add transparent 'arrow'
.header:after {
content: "";
float: right;
margin-top: 7px;
visibility: visible; /* make it visible by default */
margin-left:4px; /* space between text and arrow for inline elements */
border: 4px solid transparent; /* set borders to transparent, so they won't show */
}
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.
I have what I think is some pretty basic css, and it behaves differently in FF4 and IE8.
The CSS in question is like this:
div.showme {
border: 1px dotted blue;
position: absolute;
top :10px;
bottom :10px;
left: 1%;
right: 33%;
overflow: auto;
padding: 0.8em 1em 0.8em 1em;
line-height:1.75em;
}
div.showme a {
padding: 0em 5px 0em 5px;
margin: 0;
white-space: nowrap;
color: #FF00FF;
background-color:#E6E6FA;
border: 1px solid grey;
padding: 0em 4px 0em 4px; }
div.showme a:link { color: blue; }
div.showme a:visited { color: #1E90FF; }
div.showme a:active { color: red; }
The relevant HTML looks like this:
<div class='showme'>
<a href='one'>one</a>
<a href='two'>two</a>
...
</div>
The problem is, the padding is not consistently displayed, in IE8.
In Firefox, it works as I would expect.
working example:
http://jsbin.com/ogosa4
Using the above working demonstration, if you resize the window you will see the padding on the "leading" element on each line within the div, change from zero to non-zero.
How can I fix this?
If you add display: inline-block; to your div.showme a {} the padding will be applied in IE also, but it has some impact with the line height and you may need to specify additional margin's
I have seen this behaviour in Opera too. The padding goes to the upper line. Try display: inline-block and white-space:nowrap if you have more than one word in the link...
You can safely use inline-block in IE7 with inline tags.