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>
Related
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>
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 am building a website using singularity.gs which I am fairly new to.
I am having trouble giving a div a background-color, this is my html structure:
http://oi44.tinypic.com/205xt1i.jpg , the "green" part is my about div.
<div class="about">
<div class="photo">
<img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
</div>
<div class="text">
<h1>Hello I'm Jeroen Druwé</h1>
<p>...</p>
</div>
</div>
To achieve this affect is had to set a height for the div:
#include breakpoint(70em) {
.about {
height: 340px; //This property will set the height of the div
}
.about .photo {
padding: 1em;
#include grid-span(2, 4);
}
.about .text {
padding-top: 7em;
padding-left: 1em;
display: inline;
#include grid-span(4, 6);
}}
If I remove the "height:340px" no background will be drawn:
http://oi39.tinypic.com/2s16ezl.jpg (only my thin borderline)
Is there a way to let the div wrap its height around its content (.photo,.text)?
Note: if i remove #include grid-span for .photo and .text the background shows but I do not want to lose the singularity functionality
Thanks in advance!
Don't span the container.
The problem you experience happens because Singularity columns are floated, and floated elements are taken out of the flow. This means that the container does not "know" about your columns any more, so it behaves like an empty element.
There's a property called clear that positions an element below any nearby floated element. If you create an extra element inside the container after all your columns, the clear: both; rule applied to it will push it below the floated columns, effectively stretching the container as high as columns are:
<div class="about">
<div class="photo">
<img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
</div>
<div class="text">
<h1>Hello I'm Jeroen Druwé</h1>
<p>...</p>
</div>
<div class=clear></div>
</div>
.clear { clear: both; }
But don't add an extra element, that's not semantic. Instead, use the :after pseudo element that appears at the end of an element's contents. Using :after is just like creating a blank element at the end of element's contents.
.about {
&:after {
content: ''; // This is required for the pseudo-element to exist
display: block; // Default display is inline, have to change that for `clear` to work.
clear: both; // Yay, magic!
}
}
This technique is called "clearfix".
This can be done even simpler with the multi-purpose Toolkit extension from Team Sass, the authors of Singularity:
#import 'toolkit';
.about { #extend %toolkit-micro; }
The %toolkit-micro extendable has some additional rules that makes the clearfix trick work in older browsers. There's also the %clearfix-legacy extendable that works even in ancient browsers.
I fixed it.
Forgot to add an #include grid-span(12, 1); for my .about
I have two selectors to play with to achieve this design:
I have tried almost everything but I just cant seem to get the text to float right next to the big letters
Here is the code:
Jsbin
html:
<div class="processlinks-section-template">
<div class="processlinks-section-item" data-letter="H">
<div class="processlinks-section-item-title">
Haftonbladet.se
</div>
<div class="processlinks-section-item-title">
Hteabagz.com
</div>
</div>
<div class="processlinks-section-item" data-letter="C">
<div class="processlinks-section-item-title">
Cftonbladet.se
</div>
<div class="processlinks-section-item-title">
Cteabagz.com
</div>
</div>
</div>
CSS:
[data-letter] {
margin:7px;
background:#ef8;
}
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
}
.processlinks-section-template
{
width: 270px;
height: 100%;
}
}
.processlinks-section-item-title
{
margin-top:5px;
}
.processlinks-section-item-title a
{
color:black;
}
.processlinks-section-item-title a:visited
{
color:black;
}
.processlinks-section-item-title a:hover
{
color:#0084c9;
}
Any kind of help is appreciated
Note: I have a javascript that appends stuff so I rather just stay with these two selectors.
If there is one item it seems to ruin the design and I think thats the problem.
Take a look: jsbin.com/UHiZUJU/9/edit
Float both the letter and link to left and add clearfix with it.
Updated jsfiddle
Add float: left to the :before psuedo-element that contains the letter, and clear: left to the section container:
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
display:inline-block;
}
.processlinks-section-item {
clear:left;
}
Updated JSBin
Currently your :before psuedo-element is display: block by default in the absence of another display declaration, which means it automatically fills 100% the width of its parent and functions like it has a line break after it (as compared to inline elements).
Floating a block element means it only fills the width it needs rather than its usual behavior of filling the full width and also removes the implicit presence of a line break. The clear: left on the container just ensures the float is reset for each section.
To make it like in your image change your margin:auto 7px;
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.