I have design this box with angular material. I can not break these two words in two line(up and down).i have included a image. Here i want 1349 and New Feedback in two line. I am new in angular material. thanks
<style>
.box-item {
background-color: cornflowerblue;
width: 100px;
height: 120px;
}
.box-text {
color:white;
}
</style>
<div layout="row" style="padding: 32px;" ng-cloak>
<md-whiteframe class="md-whiteframe-2dp box-item" md-colors="[enter image description here][1]background:'blue-400'}"
flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout
layout-align="end center" layout-margin>
<span class="md-display-1 box-text">1349</span>
<span class="box-text">New Feedbacks</span>
</md-whiteframe>
</div>
That is a css question.
You want to order 2 inline elements (span) in 2 lines.
You should try to style one of them as block element or to add br tag between them.
<style>
.box-item {
display: inline-block;
background-color: cornflowerblue;
height: 120px;
}
.box-text {
color:white;
display: block;
}
</style>
Example Here
That's because the <span> tag is an inline element by default and only takes up as much width as necessary.
If you need to use a span and require the item's on separate lines then either change the behaviour of the element through CSS by changing it's display property to block as stated by Cuzi, add a single line break between the elements using the <br> tag or use a block-level element such as the <div> tag.
I recommend using the right element for the job. So a block-level tag like the <div> tag would be ideal. This would cause both elements to take up the full width available and thus be on separate lines without the requirement for an extra line of css, (plus you save a byte of space per element within the HTML!
Heres how to do it in CSS.
.box-text {
color:white;
display: block;
}
Heres with a <br> tag:
<span class="md-display-1 box-text">1349</span>
<br>
<span class="box-text">New Feedbacks</span>
And the simplest and most semantic of the three, with div tags:
<div class="md-display-1 box-text">1349</div>
<div class="box-text">New Feedbacks</div>
Related
I have two h1 side by side and I want a space between the two textes.I tried it with just adding space with the spacebar, but it doesn´t work.
header div {
display: flex;
}
<header>
<div>
<h1 id="heading1">Hello my name is </h1>
<h1 id="heading2"> Paul</h1>
</div>
</header>
Try using
It's a dedicated HTML character attributed to "space".
Example:
<div>
<h1>Hello my name is</h1>
<h1>Paul</h1>
</div>
You can also put it inside of HTML tags, like the <h1>, but I personally prefer it outside of it.
I also personally prefer using in general since it's a more explicit way to symbolize "space", whereas implicit spaces (" ") sometimes get "lost in translation", so to speak..
If you use flex you need to read the docshttps://developer.mozilla.org/fr/docs/Web/CSS/flex
and understand how the layout works. In your case, the div take 100% of the width and each h1 is align left by default. You can set
justify-content: space-between; on the div by example, for more see this
trying adding a margin to one of your h1. And please don't use two h1 on a single page.
Remember h1 is a block level element. It will always be in one line. To bring them in same line, change display to inline-block like so.
h1 {
display: inline-block;
margin: 0;
}
<div>
<h1>Hello my name is</h1> 
<h1>Paul</h1>
</div>
There are multiple ways to do it. One of them is:
#header {
display: flex;
gap: 1vw;
}
<div id="header">
<h1 id="heading1">Hello my name is </h1>
<h1 id="heading2">Paul</h1>
</div>
If you want to display two h1 elements in the same line, but color them different or anything like that, just use one h1 element and a span element. Per defintion, every html-page should just have one h1 element, because it should be used as a page-title.
Also, if you dont need the id's for js or something else, just select them via css.
Here's a full example:
#heading span:nth-child(1) {
color: green;
}
#heading span:nth-child(2) {
color: red;
}
<header>
<div>
<h1 id="heading">
<span id="first_heading">Hello my name is </span>
<span id="second_heading">Paul</span>
</h1>
</div>
</header>
I'm trying to position two HTML elements with the CSS attribute float: right;, an input element next to it the metric unit of the input. So far I've tried placing the unit next to input without placing it in an element, also placing it in a p element, and both input and the element inside a div element; didn't work. I'd like to ask whether there's a way to stick an element next to another?
here's the code:
.caloriesinput {
position: relative;
float: right;
}
<div>
<h5>Calories</h5>
<div class="caloriesinput"><input type="text">
<p>kcal</p>
</div>
</div>
and here's how the code shows:
much appreciated for your time.
I think you must change the display of p tag so add this line of code to your CSS:
.caloriesinput p {
display: inline-block;
}
.caloriesinput {
position: relative;
float: right;
}
<div>
<h5>Calories</h5>
<div class="caloriesinput"><input type="text"<p>kcal</p>
</div>
</div>
I'm attempting to recreate Zork, and so I have a large chunk of text that always ends with ">" on a new line, to mark where the input area is, as seen here:
https://i.imgur.com/NYwSfB4.png
The issue is that I'd like that input area to take up the remaining space on the page. Everything I have tried so far either pushes it to the next line, or works but is pretty janky in terms of implementation. To get it to work I had to break the text into two sections, the majority of the text, and the indicator. This can be seen here:
<div id="game-text">
West of House<br/>
You are standing in an open field west of a white house,
with a boarded front door.<br/>
There is a small mailbox here.<br/>
<br/>
</div>
<span id="indicator">
>
</span>
<span id="input-span"><input id="user-input"/></span>
#indicator{
display: table-cell;
}
#input-span {
display: table-cell;
width: 100%;
}
#user-input{
width: 100%;
}
This works, but ideally i'd like to remove the indicator span entirely and have the '>' symbol placed within the game-text div itself, which I imagine from my experimenting will require me to switch the div to a span anyways. Any help to smooth this out would be greatly appreciated.
EDIT: This is what i'd like the html to end up looking like, if possible:
<span id="game-text">
Big wall of text<br/>
<br/>
>
</span>
<span id="input-span"><input id="user-input"/></span>
No need to use another span around the > to get the desired look. You can use display:flex; and add flex-grow:1; to the input to make it fill the row.
body {
color: #fff;
background: #000;
}
.user-input-container {
display: flex;
justify-content: start;
}
#user-input {
margin-left: 5px;
flex-grow: 1;
}
<div id="game-text">
West of House<br/> You are standing in an open field west of a white house, with a boarded front door.<br/> There is a small mailbox here.<br/>
<br/>
</div>
<div class="user-input-container">><input id="user-input" /></div>
You can use Flex properties:
HTML
<div class="flexContainer">
<span>
>
</span>
<input id="user-input"/>
</div>
CSS
.flexContainer{
display: flex;
flex-direction: row;
input{
width: 100%
}
}
If the idea is to use the table-layout, then you need a parent acting like a table and only set the first span as a cell, This should not be your answer :
p[id] {
display: table;
width: 100%;
padding: 0 1em;
box-sizing: border-box;
}
#indicator {
display: table-cell;
width: 0;/* first funny thing about table-layout */
}
#input-span {
display: block;/* nop , i'll be a block, not a cell, so i use the whole space left !! */
}
#user-input {
width: 100%;/* let's use the width of my parent */
}
<p id> <!-- i'll be a table or tbody, tr -->
<span id="indicator"> > </span><!-- i'll be a cell -->
<span id="input-span"> <!-- i'll be a block -->
<input id="user-input"/> <!-- i'll be resized to 100% width -->
</span>
</p>
But today, flex or grid are better option and much more easy to understand and set in action ;) that's what i'd go for. In any case, you'll need to wrap those elements together.
Into a page I have the following
<div id="submitEventButtonDiv">
<div id="wwctrl_backButton" align="right">
<input id="backButton" type="submit" onclick="return clickSubmitButton();" value="Back">
</div>
<div id="wwctrl_submitEventButton" align="right">
<input id="submitEventButton" type="submit" onclick="return clickSubmitButton();" value="Submit">
</div>
</div>
As you can see there is an external div having id="submitEventButtonDiv" that contains 2 divs containing in turn 2 input fields.
Obviously when the 2 input field are displayed appear one below the other (because they are contained into a div that is block element).
How can I display one beside the other? (I can't delete the div that contains each input field because it is automatically rendered by a tag library that I am using, this that I have post is the rendered HTML obtained from a page that us Struts 2 tag library that wrap HTML following its logic, so in this case I can only work on CSS to do it)
Tnx
Just display the child elements inline.
#submitEventButtonDiv > div {
display:inline;
}
codepen here http://codepen.io/anon/pen/jEmaed
Depending on your cross browser needs, use flexbox:
#submitEventButtonDiv {
display: flex;
}
Will make all of the children flex items, which by default, stack horizontally, like you want.
If you float them both they'll be positioned next to each other. Adding
#submitEventButtonDiv > div {
float:left;
display:inline;
}
To your css should position them both to the left of the page next to eachother.
If the inner div IDs are always same, then you can add the following styles in your css:
div#wwctrl_backButton {
display: inline-block;
width: 50%;
}
div#wwctrl_submitEventButton{
display: inline-block;
width: 50%;
}
This generates the desired effect.
#submitEventButtonDiv > div {
display:inline;
float:right;
}
I'd like to have something that looks and behaves as hyperlink inside larger rectangle (full page wide) which is also hyperlink. Below there is ASCII-art representation of what it should look like:
|-------------------------------------------|
| Some text [_link_] |
|-------------------------------------------|
The whole outer rectangle (block element) is to be hyperlink. Inside this rectangle there should be some text, and at the end of this text there should be another link.
Unfortunately nesting links (A elements) is illegal in (X)HTML:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested;
an A element must not contain any other A elements.
(from http://www.w3.org/TR/html401/struct/links.html#h-12.2.2), so the most natural way of implementing above
<a href="xxx" style="display: block">
Some text
link
</a>
is not valid HTML. What is even worse is that some web browsers in some cases enforce this requirement by moving inner link element just outside closing element of outer link element. This of course utterly breaks layout.
So what I'd like to ask is how to arrive at layout presented above using HTML and CSS (but no JavaScript), but without nested link elements in HTML source. It would be nice if behaviour was as close as possible to the one with nested link elements (for browsers which are not overly strict in implementing HTML standard).
Edit (16-01-2009)
Clarification: Solutions which use more than two link elements are perfectly acceptable
<a href="xxx" ...>Some text</a>
<a href="yyy" ...>Link</a>
<a href="xxx" ...>& nbsp;</a>
...
You could try something like this:
div.a {
position: relative;
background-color: #F88;
z-index: 0;
}
a.b {
position: relative;
z-index: 2;
}
a.b:hover {
background-color: #8F8;
}
a.c {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
a.c:hover {
background-color: #88F;
}
a.c span {
display: none;
}
<div class="a">
foo
bar
<span>baz</span>
</div>
Perhaps this would work?
div.parentBox {
position:relative;
height:100px;
}
a.someLink {
position:absolute;
top:0;
left:0;
height:100px;
}
// Now just position the two spans
<div class="parentBox">
<span class="someText">Some Text</span>
<a href="#" class="someLink">
<span class="linkText">Link Text</span>
</a>
</div>
What I have done in the past is use Javascript to attach the proper functionality to the div (assuming that is the parent element) so that when it is clicked, window.location is ran opening the .href attribute of the child link.
Something like this perhaps.
// jQuery Code
$(".parentDivLink").click(function(){
window.location = $(this).find("a.mainLink").attr("href");
});
<div class="parentDivLink">
Click Me
</div>
Just place on onclick event handler on the outer element which when clicked calls "window.location ='yourURLhere';"
You could add a style attribute - "cursor:pointer" to get the hand cursor when mouse over.
You could also have a css hover code block to get the colour changes.
EDIT: just realised no javascript, so in that case, keep the 'a' tag and simply define a style for it in css, that way you can give it height, width, etc.
A float with negative margins should work as well.
Tested (in IE6 only):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Link within link</title>
<style type="text/css">
.Parent {
width: 500px;
background-color: yellow;
}
.sub {
float: left;
margin-left: -300px;
}
.foo {
display:block;
float: left;
text-decoration: none;
}
</style>
</head>
<body>
<div class="Parent">foo </div>
<div class="sub">Link text</div>
</body>
</html>
You do realize the great potential for user confusion.