I have an issue creating a title for a web page.
Here is title:
<!DOCTYPE html>
<html>
<head>
<style>
.title {
border-top: 2px solid grey;
color: grey;
text-size:20px;
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>
I need to move the market word to the bottom and it should be displayed like that:
Düsseldorf
markets
Any idea how can I do it with the help of CSS only(i.e how can I change title CSS class to get desired view)?
You can use a CSS hack to acheive this if you really want to use CSS only. First, make the text disappear by setting it to the color of the background. Then use the before and after selectors to rerender the content.
However, easier would be to use span tags in your HTML, then make each of them have display: block to get a line break.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--font_size: 20px;
--text_col: grey;
--text_margin: 10px;
}
.title {
border-top: 2px solid grey;
font-size: var(--font_size);
color: white;
}
.title:before {
content: "Düsseldorf";
color: var(--text_col);
position: absolute;
left: 10px;
top: var(--text_margin);
}
.title:after {
content: "markets";
color: var(--text_col);
position: absolute;
left: 10px;
top: calc(var(--font_size) + var(--text_margin));
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>
You can use padding-right with calculation. padding-right: calc(100% - 10ch); This is very simple, no complex.
.title {
border-top: 2px solid grey;
color: grey;
font-size: 20px;
padding-right: calc(100% - 10ch); /* Düsseldorf is 10 character */
box-sizing: border-box;
}
<div class="title">Düsseldorf markets</div>
A simple way to approach this - use a width property on a element. Then, by word-break rule (which is 'normal' by default and you don't need to specify this) words will be auto-wrap on next line, when there is no free place on container
here is demo
P.S. And you have a typo - did you mean font-size except for text-size?
Related
I have a list of links on the left hand side of the page.
I would like to improve this list so that when I put the cursor over an item in this list, some sort of label appears which gives a brief description about what the link is pointing to. The html in question is generated automatically using Antora from AsciiDoc sources and, as far as I can see, all I am able to do is to add a css class or id for the different parts of the link text which are in bold. I cannot add any Javascript or nested css classes.
So here is my attempt:
<!DOCTYPE html>
<html>
<head>
<style>
#Bob.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#Bob.tooltiptext {
font-size: 5px;
}
#Bob.tooltiptext:hover {
visibility: visible;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-size: 10px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
</style>
<title>Page Title</title>
</head>
<body>
<a href="http://www.bob.com" class="searchEngineLink" >
<strong id="Bob" class="tooltip">Bob</strong>
<strong id="Bob" class="tooltiptext">What a great guy!</strong>
</a>
</body>
</html>
This does not achieve what I want obviously. All it does is have one bit of text in a small font that, when I roll over it, increases into a larger font in a kind of box.
If anyone can think of some way to have a label pop up over some link in a page, even using some completely different approach that I have not thought of, I would be grateful. Note that I will have about 200 links so if I can have a solution that does not require me to have a set of css properties for every different id for each link, that would be preferable.
If any of the this question is not clear, please feel free to ask me.
Simple tooltip can be achieved by usi title attribute: The information is shown as a tooltip text when the mouse moves over the element.
<a href="http://www.bob.com" class="searchEngineLink" title="What a great guy!">
<strong id="Bob" class="tooltip">Bob</strong>
</a>
You can also make your own custom tooltip, by using content property to insert generated content. (description of each link).
.searchEngineLink {
display: inline;
position: relative;
}
.searchEngineLink:hover:after {
background: #eee;
border-radius: 5px;
bottom: -34px;
color: black;
content: attr(gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: auto;
white-space:nowrap;
}
.searchEngineLink:hover:before {
border: solid;
border-color: #ddd transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 40%;
position: absolute;
z-index: 99;
}
<a class="searchEngineLink" gloss="What a great guy" href="http://www.bob.com">Bob</a>
<a class="searchEngineLink" gloss="What a smart guy" href="http://www.bob.com">Bob2</a>
<br>
<a class="searchEngineLink" gloss="What a handsome guy" href="http://www.bob.com">Bob3</a>
I'm a beginner/learner with HTML & CSS.
How can i put a line under some text?
I don't want to underline the text but I want to make something along the lines of this
How can i implement this?
You can use a <hr> tag.
Here is a nice page with some example styling: https://css-tricks.com/examples/hrs/
If you wanted to make it only 80% of the containers width you could add some CSS as follows
hr {
width: 80%;
}
<hr>
If you are trying to control the size of the line, you can use CSS.
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>
Another thing you can do is boarder-bottom
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-bottom: thick line #ff0000;
border-top: none;
border-left: none;
border-right: none;
width: 250px;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
You can use the hr tag and style it via CSS:
.x {
width: 40%;
float: left;
}
<h1>Test</h1>
<hr class="x">
Just use an <hr></hr> tag
Example code:
<body>
<h1> Header</h1>
<hr>
<p> text under header </p>
</body>
That's a valid question, I know what you mean
span{
border-bottom:1px solid #000;
}
I'm currently following a UDemy course where the instructor is teaching us Full Stack Development from scratch. Problem is, he made a lot of mistakes that I needed to improvise on like adding <span> next to sign in, instead of his idea of a <p> and my screenshots of the BBC Logo and Sign In button needed it's height modified in order for them to fit properly in that small nav bar.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Wadson's BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-family: Helvetica, Arial, sans-serif;
}
#topbar {
background-color: #7A0000;
width: 100%;
height: 45px;
color: #fff;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
}
#logodiv {
padding-top: 15px;
float: left;
border-right: 1px solid #990000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
position: relative;
width: 200px;
height: 45px;
float: left;
}
#signindiv img {
position: relative;
top: 15px;
left: 15px;
}
#signintext {
position: relative;
top: 10px;
left: 25px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
margin: 0px;
padding: 0px;
}
#topmenudiv li {
list-style: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
padding: 15px 20px 0px 20px
}
</style>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/logo.png" height="25px" />
</div>
<div id="signindiv">
<img class="signinhead" src="images/signin.png" height="20px"/><span id="signintext">Sign In</span>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /#container -->
</body>
</html>
Any suggestions for an aspiring programmer? How can I think much differently so that I can spot errors while his is talking instead of copying his stuff verbatim? I understand HTML very well, I'm getting stuck on position, margin and padding.
There is a few things wrong with the code here, I'm not going to go too deep into structure or how using a CSS framework is a great option for beginners(I highly recommend bootstrap and following a tutorial to understand how they use each component as well following a up to date CSS tutorial).
A few quick pointers to fix the problems your border was going past the #topbar because the list items were being stacked vertically instead of horizontally. This was fixed by adding float: right; to the #topmenudiv li. You need to offset the padding you have on your list item elements by setting a height - the padding in this case 30px.
Check the updated version below and always try to include a codepen or jsfiddle with your answer whenever possible.
http://codepen.io/anon/pen/VLEENL
As I understand your question:
Any suggestions for an aspiring programmer? How can I think much differently so that I can spot errors while his is talking instead of copying his stuff verbatim? I understand HTML very well, I'm getting stuck on position, margin and padding.
Use the CSS property outline When you apply it to a class, tag, or id of an element(s), it looks like the CSS property border. The difference between border and outline is that outline will not affect the area surrounding the element(s) which mikes it perfect for seeing your divs and their actual position.
Place this css under your body rule (ie body {...}) in the <style> block:
CSS
/* body * { outline: 1px solid blue; } */ /* Uncomment to see all elements */
.green { outline: 2px dashed green } /* Highlight in green */
.black { outline: 3px dotted #000; } /* Highlight in black */
.yellow { outline: 4px double #fc0; } /* Highlight in yellow */
In order to handle padding and margins easier put the following at the top of your CSS:
CSS
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
This will unify all of the elements under one box-sizing rule. An element's dimensions, padding, and border are included to the element's content. Normally by default (content-box), only width and height are considered. See this for more on box-sizing
I can't figure out how to write HTML code for the picture below:
The CSS looks like this:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 90%;
width: 90%;
top: 0;
left: 0;
margin: 5%;
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: #00a0df;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: #00a0df;
text-transform: uppercase;
font-family: HelveticaNeueBold;
}
The text is <p> visa fler bästsäljare </p> <h3>+<h3>.
The code I have gotten help with so far is:
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>
The only issue is that this code does not create the image as I posted. URL to the website URL. Scroll down a bit. The browser I am testing this on is Google Chrome.
remove the
.borderbox {
height: 90%;
}
then the dashed border should work as you expected.
I think this might be a solution: http://jsfiddle.net/e7Levykn/
I don't think you can style border with one argument. You would have to use
border-style , border-color, border-width.
EDIT: Nvm about the border thing. Your css-code should work, it works in the jsfiddle. Maybe your elements in html don't have the right classes
Use css border-style property.
.selector{
border-style: dashed;
}
or like this
.selector{
border:2px dashed #F1F1F1;
}
I'm applying the strikeout tag:
<s>$5,000,000</s>
But the line is too low.. .it's about 1/4 from the bottom rather than through the middle. Any way I can modify this so it goes a bit more through the middle?
You can't do it with the strike tag OR the text-decoration:line-through style. The line position is built-in. You could roll your own style for that, but it would be a huge PITA.
I've cooked up this code which gives you total control over strike-through position and style:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.mark {
border-bottom: 1px solid #000;
top: -9px; /* Tweak this and the other top in equal, but opposite values */
position: relative;
}
.offsetMark {
position: relative;
top: 9px; /* Tweak this and the other top in equal, but opposite values */
}
</style>
</head>
<body>
<div>
<p class="strikethrough">This is an <span class="mark"><span class="offsetMark">example</span></span> of how I'd do it.</p>
</div>
</body>
</html>
Eleven years later it is quite simple task:
s{
text-decoration: none;
position: relative;
}
s::before{
content: '';
width: 100%;
position: absolute;
right: 0;
top: calc( 50% - 1.5px );
border-bottom: 3px solid rgba(255,0,0,0.8);
}
old price: <s>$99.95</s>
Not with the strike tag, no. It's part of the rendering engine of the browser. For me (in Chrome) the line is rendered just above the middle.
This solution allows for padding, and uses the csss line-through property
It works for firefox, and chrome/ safari does it right anyway.
div.hbPrice span.linethroughOuter {
padding: 0 10px 0 0;
text-decoration: line-through;
position: relative;
}
div.hbPrice span.linethroughInner {
position: relative;
}
/* Firefox only. 1+ */
div.hbPrice span.linethroughOuter, x:-moz-any-link { bottom: 2px; }
div.hbPrice span.linethroughInner, x:-moz-any-link { top: 2px; }
and the mark up is something like...
<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>
The other solution is to add a background image of a line, and make it the same colour as the text.
2021 Solution
Normally, you would use text-decoration: line-through, but you currently can't change the position of a "line-through" line.
But fortunately, you can change the position of an "underline" thanks to the new CSS property text-decoration-offset.
Here is how it works:
.strike {
text-decoration: underline;
text-underline-offset: -.4em;
}
<p>Only <span class="strike">$199.99</span> $99.99!</p>
Although you may notice that the line seems a bit choppy. That's due to the relatively-new text-decoration-skip-ink which tries to hide the underline in places where it would overwrite the text. It's great for underlining, but fails as a strikethrough.
Luckily, we can turn that feature off, and along with some additional nice color and thickness properties, here's the final result:
.strike {
text-decoration: underline;
text-underline-offset: -.4em;
text-decoration-skip-ink: none;
text-decoration-color: red;
text-decoration-thickness: 2px;
color: gray;
}
<p>Only <span class="strike">$199.99</span> $99.99!</p>
Browser support is widespread with the current exception of Safari.
You could do something like this:
<div class="heading"><span>Test heading</span></div>
.heading {
position: relative;
text-align:center;
}
.heading:before {
background-color: #000000;
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 50%;
}
.heading span {
background-color: #fff;
display: inline-block;
padding: 0 2px;
position: relative;
text-align: center;
}
http://codepen.io/anon/pen/cLBls