<!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.
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.
I am trying to create one circle around multiple words. Right now I have a circle around each word. Below is the code I am using.
HTML
<span class="numberCircle"><span>Circle</span></span>
<span class="numberCircle"><span>all</span></span>
<span class="numberCircle"><span>words</span></span>
CSS
.numberCircle {
display:inline-block;
line-height:0px;
border-radius:50%;
border:2px solid;
font-size:32px;
}
.numberCircle span {
display:inline-block;
padding-top:50%;
padding-bottom:50%;
margin-left:8px;
margin-right:8px;
}
You have created two different tags with "span" try deleting the tag without the class and try again. Having two tags one with and one without a class is redundant. Also the CSS is redundant as it is referring to two tags affecting the same markup. Dix this by creating a single tag:
<span class="class"> words </span>
Add the CSS to this tag and try again.
To add all words into this class use:
<span class="class"> <div> word 1</div> <div> word 2</div> <div> word 3</div></span>
This will also all divs to have the same class used by the CSS style sheet
Well, you can easily achieve it by wrapping your text with an element and use your .numberCircle class in that element.
HTML
<div class="numberCircle">
<span>Circle</span>
<span>all</span>
<span>djsfkhjdajh</span>
</div>
CSS
.numberCircle {
display: inline-block;
line-height: 0px;
border-radius: 50%;
border: 2px solid;
padding: 20px; /* Add spacing in the edges */
font-size: 32px;
}
.numberCircle span {
display: inline-block;
padding: 50% 0;
/* I dont think the margins are necessary in this way */
}
You can see an example of it working in here
https://jsbin.com/hekehatabu/1/edit?html,css,output
Put all the word you want to circle inside a DIV, which has the class numberCircle.
<div class="numberCircle">
<div>CIrcle</div>
<div>all</div>
<div>words</div>
</div>
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
Here is the problem, I got a simple markup,
a head, menu, footer, and the context.
The menu is at the left and at the right is the context, where should be 3 divs inside:
two divs should be in one row, and the third div should be just under them.
The problem is that the third div gets under the menu.
Here is the code which includes the comments, pelase have a look guys
...... I feel completely doomed about this one, don't have any idea ....
<html>
<head>
<style>
div.header{ border:1px solid black }
div.menu{clear:both;float:left; border:1px solid blue}
div.context{ border:1px solid #0099CC}
div.footer{clear:both; border:1px solid red}
div.one { border:1px solid yellow}
div.two { border:1px solid purple}
div.three { border:1px solid green}
</style>
</head>
<body>
<div class="header">
header
</div>
<div class="menu">
menu<br>menu<br>menu<br>menu
</div>
<div class="context">
<div class="one" style="float:left">Div 1 <BR>Div 1 <BR>Div 1 </div>
<div class="two" style="">Div 2</div>
<div class="three" style="clear:both">Div 3, what the hell are you doing here under the menu? You should be just under the Div 1!</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
If your menu is going to be of fixed width (like 200px), you can apply margin-left:200px for the div.context to align contents for context div.
If your menu is having dynamic width, use this css:
div.menu{
border: 1px solid blue;
display: inline-block;
}
and for context:
div.context {
border: 1px solid #0099CC;
display: inline-block;
}
Take a Quick look at this blog post to see the difference between in-line and block elements.
http://www.techrepublic.com/article/learn-distinctions-between-inline-and-block-html-elements/6094821
By default, HTML displays its elements in one of three ways:
Inline: These elements do not force new lines before or after its placement, and it only consumes as much space as necessary.
Block: New lines appear before and after the element with it consuming the full width available.
Hidden: There are some elements that never display within the browser window, such as meta tags and script and style sections.
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%;">