I'm new to this, so I apologice if the questions are stupid.
I have some code I inherited that I need to customize. I have an input defined in my html file:
<div style="display: none;">
<input id="homeIcon" type="hidden" value="true" />
I also have this in my html:
<div id="header">
<div style="float: left;">
<div id="headerTitle">
My Website
</div>
</div>
</div>
In the CSS I want to decide where to place this home icon. I want it to appear in the header to the right of the headerTitle.
Can I use the CSS to move an html element so that it appears in another div?
I managed to change the location within the current div - but not move it to an entirely new place.
Thanks,
Rocky
It's bad idea to relocate elements using CSS (absolute positioning and other stuff that will break your layout).
CSS is just for visual representation of elements, so use HTML to change elements position
<div id="header">
<input id="homeIcon" type="hidden" value="true"/>
<div id="headerTitle">
My Website
</div>
</div>
hello Rocky using css you can not move the element to another div but you can "over lap on the div area" so look like you put them to another div.using position
Related
I have an image, single character in a span (equal sign), and then a div where child elements are added/replaced via js.
However, I can't for the life of me figure out how to get it all aligned properly (fear I'm over thinking and complicating it.)
I'm using bootstrap's grid (row/col) system as well.
Something akin to...
<div class="container">
<div class="row">
<div class="col-lg-2 col-offset-lg-1">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp1" class="opensans inline" style="width: 50px;">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp2" class="opensans inline" style="width: 50px;">
<span class="opensans">X</span>
</div>
</div>
</div>
</div>
</div>
See jsfiddle
Wanting image centered middle along equal sign (vertical-align) as well as span within neighboring div (and the text in that span appearing just a few pixels off the bottom line.)
I saw this but none of the solutions are addressing the problem for me (I can only guess it is because of the third element and font, etc.)
UPDATE1: Edited sample html to correctly reflect the scenario in which the response-part.div is empty (initial state, possible transition state as user interacts with the page.) Updated fiddle
UPDATE2: I "fixed" the issue occurring with no child elements by adding an initial element in the initial html for the response-part, and then adding one back in when the user removes all other elements. A bit hackish, would appreciate a fix that didn't involve this workaround if possible. Updated fiddle
PS: I initially considered using bootstrap v4 (with flexbox support) but it is still alpha. Alternatively, I also looked into using FlexboxGrid, however I still need bootstrap for other features and FlexboxGrid uses similar classes ("row", etc) as bootstrap, which I assumed would cause name conflicts (if I included both in my project, eg: which "row" class would be used!)
Try using display: flex; on your response-part class. Something like this:
.response-part {
display: flex;
align-items: center;
}
I edited your fiddle. Take a look on it: https://jsfiddle.net/gusLnyyh/6/
I want to have some text on a row, followed by an input box on the same row.
However, the input box is always going to the next row, even though there's enough space for it on same row as the text. I looked in the documentation, and there is only advice there to do what I want for forms (i.e class form-horizontal).
However, I just want some text (<p> tag) and then an input box.
See simple JSFiddle
http://jsfiddle.net/dz089gac/1/
<div class="container">
<div class="row">
<p>Hi</p>
<input type="text" placeholder="hi">
</div>
</diV>
Use below code:
<div class="container">
<div class="row">
<span>Hi</span>
<input type="text" placeholder="hi">
</div>
</diV>
Use span instead of p tag as p creates block of element and place a new line after the tag close.
This is because the p is a block element and the next element will start on a new line.
If you can not change the element type or move the input into the p tag then you can use css to make the p element inline.
.row p{
display:inline-block;
}
http://jsfiddle.net/dz089gac/3/
A paragraph (p) is a block-level element. That means it takes up the entire "row" it is on.
You should strongly consider using a label (label) instead, which is more semantically correct in this context and, as such, provides a few benefits:
<div class="container">
<div class="row">
<label for="my_input_element">Hi</label>
<input type="text" placeholder="hi" id="my_input_element">
</div>
</diV>
Clicking on the label will set the focus on the corresponding input element, and screenreaders (and other devices) recognize that the label is associated with the input, rather than a block of unrelated text. This is exactly what a label is INTENDED to be used for.
fiddle: http://jsfiddle.net/s62evwmz/
Put inside the paragraph.
<p>Hi <input type="text" placeholder="hi"></p>
But that is much more better, if you are using labels instead of p
<label>Hi <input type="text" placeholder="hi"></label>
I don't know if this is what you want, but i have put the input type into the </p> tag.
Updated fiddle here
just put the input inside the <p></p>
e.g.
<div class="container">
<div class="row">
<p>Hi <input type="text" placeholder="hi"></p>
</div>
</diV>
fiddle
You can set the display property of <P> tag to the inline-block value i.e. display=inline-block and if required you can give some margin for the Box this will add space between them.
ie .
<div class="container">
<div class="row">
<p style="display:inline-block;">Hi</p>
<input type="text" placeholder="hi" >
</div>
</diV>
Demo Link : http://jsfiddle.net/dz089gac/10/
I am making a WYSIWYG webpage editor: http://brokenmyriad.com/editor2.php, however I have come across a problem when trying to add image functionality.
Note: the image is not inside a contenteditable element, but is just a normal floated image.
The problem can be recreated by clicking into either the paragraph or the heading and the clicking the insert image button on the toolar (the far right button). (on the above linked page).
In standards based browsers it works as expected, and the heading and the paragraph are both to the right of the image, however in ie6 the paragraph is under the floated image like in this picture: http://tinypic.com/view.php?pic=2mfcfo8&s=3
My simplified code structure is as follows:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div>
<p>Click here to edit!</p>
</div>
What I want is for the <p> element to be alongside the floated image, and under the <h1> element as it is in standards based browsers.
Any help would be greatly appreciated!
Why is the paragraph in a separate div? Wouldn't the following work:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
<p>Click here to edit!</p>
</div>
If you must have the divs, then the second one needs to be nested
<div style="float: left;">
<img style='float:left'>
<h1>Click here to edit!</h1>
<div style="float: left;">
<p>Click here to edit!</p>
</div>
</div>
Your second div should be floated left:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div style="float:left;">
<p>Click here to edit!</p>
</div>
It turned out that the elements had width:100% on them, which was causing the error.
i have this code:
<span>your password</span><div style="display:inline; width:160px;height:22px;background-image:url('pics/BGfield.gif');"><input name="password" type="password"></div>
the back ground get height of maybe 18-20 px... why is that?
if i use span it does the same - if i use div as block it is ok
as said - problam in Chrome, FF but not in IE
If I remember correctly, you are not allowed to set the height of an inline element. That's why, when you set the display:block it works as expected. Also, you cannot set the height of a span element.
The fact that it works in IE only means that IE is not following the standards, as usual.
UPDATE:
What I usually do, instead of using an inline element, is using a floated one. For example:
<div style="float:left">your password</div>
<div style="float:left; width:160px;height:22px;background-image:url('pics/BGfield.gif');">
<input name="password" type="password">
</div>
<div style="clear:left;"></div>
UPDATE 2:
Maybe something like this will work
<div id="container" width="THEWIDTH">
<div style="float:left">your password</div>
<div style="float:left; width:160px;height:22px;background-image:url('pics/BGfield.gif');">
<input name="password" type="password">
</div>
<div style="clear:left;"></div>
</div>
Where THEWIDTH is the width of the divs inside "container" plus some margins/paddings you want to give them.
The spacing between the divs, you will have to set it in each divs' style, though.
I am trying to learn more CSS. I inherited a nice layout that I have been using for a little while now and I want to keep the CSS going instead of mixing tables in there. I am currently designing a separate form to handle side by side textboxes. I was using span tags to keep these textboxes side by side but now I'm wondering what the best practice for this type of design would be. Should I use a div container and spans as I was doing or should I just use straight divs and float them as in my example?
<div style="overflow:hidden; width:100%; border:1px solid #000;">
<div>
<div style="float:left"><input type="text" /></div>
<div style="float:right"><input type="text" /></div>
</div>
<div style="clear:left">
<div><input type="text" /></div>
</div>
</div>
As far as markup choices are concerned, it is always a good hint to test your page in a text browser (Lynx, Links, Elinks), and check how it is displayed there. I am usually using some kind of list (ul, ol or dl) for my forms.
Don’t forget to checkout A List Apart’s Prettier Accessible Forms article, which gives a good start for styling forms.
I'm not entirely sure what you're trying to achieve in terms of layout, but you can get the same result using a lot less markup:
<div style="overflow:hidden; width:100%; border:1px solid #000;">
<div>
<input type="text" style="float:left" /><input type="text" style="float:right" />
</div>
<div style="clear:left">
<input type="text" />
</div>
</div>
Make sure you move those in-line styles into class or id definitions too. Avoid having css definitions in your markup.