I am attempting to control the thickness of an underline, however, it seems its just one huge horizontal line that does not conform to the text. How can I get the text to underline as the same thickness of the text:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div class="title">test</div>
</body>
</html>
The 'border-bottom' style is being added to the 'div' tag. Because by defult 'divs' are set to 'display: block;' the width of the div is 100%. To solve this, add another tag surrounding the text and give the class to that tag.
For Example: <div><span class="title">test</span></div>
New Code:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div><span class="title">test</span></div>
</body>
</html>
you just have to insert display:inline-block; in your css or float the element;
The problem you have is that you're using a border, not an underline. The border extends the full length of the element, which for a div is width: 100% by default.
To change that you should limit the width of the div explicitly, or by using float or changing its display.
Using width:
div {
width: 10em; /* or whatever... */
}
JS Fiddle demo.
Using float:
div {
float: left; /* or 'right' */
}
JS Fiddle demo.
Using display:
div {
display: inline-block; /* or 'inline' */
}
JS Fiddle demo.
Of course, given that you effectively want the underline to be below the text and, presumably, serve to 'underline' the text (see the problem with the demo, using a defined width if the text is longer than the defined width), it'd be easier to simply use an in-line element, such as a span for this, rather than a div, since its default behaviour is the same behaviour that you want.
Change your div to a span.
span is good for short pieces of text on a single line.
See here:
Example
If you use em instead of px, the border adopts the font size.
span {
font-size:5em;
border: solid black;
border-width:0 0 0.1em;
}
Here is a fiddle: Fiddle.
Seems like for IE7 there is only method to make this work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
border-bottom: 3px solid red;
display: inline;
}
</style>
</head>
<body>
<div><h1>Hello, world</h1></div>
</body>
</html>
try adding: margin: auto.
This should scale the line according the length of the text
Related
I have this Japanese text segmented into <span>s. In the images below I added red borders to the spans to illustrate the problem. The vertical text is achieved using the writing-mode: vertical-rl; CSS property on the surrounding div.
Browser: Chromium
Browser: Firefox
Browser: Android
As you can see the text inside centred inside each span either having a gap left or at the top. Or in the case of Android it doesn't even seem to put each character inside of a square. Is there a way to ensure each character is perfectly centred inside of the <span>s?
Example HTML file:
<!DOCTYPE html>
<html lang="ja">
<style>
span {
border: 1px solid red;
text-align: center;
}
</style>
<body>
<div>
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
<br>
<div style="writing-mode: vertical-rl">
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
</body>
</html>
Result seems to depend on the browser!
It would be more helpful if I could see the CSS code, but try using the text-align CSS property if you haven't yet.
You can use it like this: text-align: center;
span {
border: 1px solid red;
text-align: center;
font-size: 30px;
}
<!DOCTYPE html>
<html lang="ja">
<body>
<div>
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
<br>
<div style="writing-mode: vertical-rl">
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
</body>
</html>
You should look at this post. Try padding-right or text-align: center on the CSS. I could probably tell you what is is if I saw the code.
How can I center one div inside another div?
Thank you!
You have some fundamenatal syntactic issues to face here:
You should stop using div to encase image tags and instead use the figure tag in HTML5.
You should (as commented by Hevlastka) remove the size defined in the <img> tag and have the sizing only defined in CSS.
You have set a max-width without setting a width which can cause issues on IE based browsers.
IE10 and IE11 do not appear to support overriding min-width or max-width values using the initial value.
IE7 doesn't support min-width on input button/submit button/reset button.
max-width doesn't work with images in table cells in IE.
Using Normalize CSS is highly recommended (esp. if you don't want to use javascript).
You should try and get out of the habit of using <style> as soon as possible and instead put your CSS in its own specific file to be called by the HTML file.
Edits to your code that I've used to make it work for me on IE 11 and Edge:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title is REQUIRED in HTML head area</title>
<style>
div {
text-align:center;
}
/*
The picture and the div must be Centered
inside their container!
*/
figure {
border: 1px solid red;
padding:20px;
text-align:center;
display:inline-block;
margin:auto;
}
img {
border: 1px solid black;
width: 100%;
max-width:640px;
height: auto;
margin:auto;
}
</style>
</head>
<body>
<div>
<figure>
<img src="https://image.ibb.co/bE3eVF/my_Picture.jpg">
</figure>
</div>
</body>
</html>
Adding Modernnizr.js is solving the problem.
Add this between your <head> tags.
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
and remove display: table; from your CSS.
<!DOCTYPE html>
<html>
<head>
<style>
div.div1 {
align-items: center;
border-style: solid;
border: 1px solid red;
display: flex;
}
</style>
</head>
<body>
<div class="div1">
<img src="smiley.gif">
One<br>Two<br>Three<br><font color="red">Four</font>
</div>
</body>
</html>
I use the above code to display an image and the text One, Two, Three, Four next to it. I am trying to make Four have a red color but it places it seperately from the other numbers, to the left. How can I fix this?
First of all I would advise against using a font element with inline CSS as the font element is now obsolete, instead use a span with the class red which you can then style using CSS.
Secondly wrapping all of the text in a div will keep them aligned.
Example:
div.div1 {
align-items: center;
border-style: solid;
border: 1px solid red;
display: flex;
}
.red {
color: red;
}
<div class="div1">
<img src="https://www.w3schools.com/tags/smiley.gif">
<div>
One
<br>
Two
<br>
Three
<br>
<span class="red">Four</span>
</div>
</div>
Hope this helps!
Just wrap the whole statement in another tag like so :
<p>One<br>Two<br>Three<br><span style="color:red">Four</span></p>
BTW - I dicourage style attributes in favor of a proper css file but just for demonstration's sake ...
This happens because when you use flex in the styling Each in-flow child of the container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.
I recently realised that padding property adds spacing between the content and the border of this content.
I was testing this property when I discovered an instance where padding doesn't add spacing.
I have a paragraph
<p>Some text</p>
and some styling
p {
background: red;
color: white;
border: dashed 2px blue;
margin-left: 44px
}
Result (JSFiddle)
Then I add padding: 49px to CSS. Logically, I shoud get something like it
but finally I obtain it (JSFiddle)
As we can see, the text moves, but the red spacing isn't added. Why?
PS : maybe I express myself badly, I'm sorry about it
You have a margin-left. Difference between Margins and Paddings.
Remove it:
CSS
p {
background: red;
color: white;
border: dashed 2px blue;
padding-left: 49px
}
In this fiddle
No more space :)
The red is the background-color which is also by default painted into the padding area, and not the margin. The behavior you are seeing is correct.
If you don't want the background painted into the padding area, you can set:
background-clip: content-box;
However I think that only works in IE9 and up, so if you need to support IE8, then you can't use that.
The result you get is correct.
Margin - adds space outside your box
Border - adds a border around your box
Padding - adds space between content and border
Look up "css box model" on google for more.
K
I have not understand what you are trying to do but i guess you want this
<html>
<head>
<style>
p
{
background: red;
color: white;
border: dashed 2px blue;
/* display: inline-block; */
padding-left: 49px
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
I'd like to have a line that starts right after my text on the same line, I've tried with the following simple code
<html><body>My Text<hr/></body></html>
It seems that <hr> is not an option because it is always on a new line and I'd like the line to start at the right of my text.
Any help ?
The <hr> has default styling that puts it on a new line. However that default styling can be over-ridden, in the same way as it can for any other element. <hr> is in essence nothing more than an empty <div> with a default border setting.
To demonstrate this, try the following:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
There are a number of ways to override the styling of <hr> to acheive your aim.
You could try using display:inline-block; along with a width setting, as I have above. The down-side of this approach is that it requires you to know the width you want, though there are ways around this - width:100%;, and the whole line in a container <div> that has overflow:hidden; might do the trick, for example:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
Another option would be to use float:left;. You'd need to apply this to all the elements in the line, and I dislike this option as I find that float tends to cause more problems than it solves. But try it and see if it works for you.
There are various other combinations of styles you can try - give it a go and see what works.
Using FlexBox Property this can be achieved easily.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}
<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div>
Try this:
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
The inline CSS float: right will keep it on the same line as the text.
You'll need to adjust the width if you want it to fill the rest of the line.
Using inline or float, as far as I tested it doesn't work properly even if this was my first thought. Looking further I used the following css
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
<div>My Text</div><hr/>
Demo http://jsfiddle.net/mFEWk/
What I did, is to add position relative in both elements (to give me the advantage of z-index use). Also from the moment I had position:relative for hr I moved it from the bottom:17px. This move it above the div that contains the text. Applying z-index values and adding background:white for the div puts the text above the the line. Of course don't forget to use a width for the text, otherwise will take the whole width of the parent element.
<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">
Exactly what you want.
Try this. It works
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
You can also use this to draw a line between texts like
Hello -------------------------- Hello
The OP never specified the purpose of the line, but I wanted to share what I ended up doing when I was making an html template where the user needed a line to write on after the document was printed.
Because the hr tag defaults to its own line and defaults to being centered in the line, I decided to use a div and style it instead.
HTML
This is my text.<div class='fillLine'></div>
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
JSFiddle Demo
Style Div for Line After Text
Hope that helps anyone who had the same goal as me.
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
That sort of make sense?
<p>My text</p>
<hr />
Here's one potential approach, but it has some assumptions/requirements. Your question should be edited to give more specific information about what you're building.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
I used the following technique:
Give the container div a background-image with a horizontal line.
Put an element (like <h3>) in the container div (I have it on the right so float: right; )
Use the following css:
.line-container {
width: 550px;
height: 40px;
margin-top: 10px;
background-image: url("/images/horizontal_line.png");
}
.line-container h3 {
padding-left: 10px;
float: right;
background-color: white;
}
Below code did the job for me
HTML File:
----------
<p class="section-header">Details</p><hr>
CSS File:
----------
.section-header{
float: left;
font-weight: bold
}
hr{
float: left;
width: 80%;
}
INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">