I have created expandable search box and set it to "float:left".
But Moving "float:right" for a search box. - https://www.screencast.com/t/mZ5LpKkjH1O
You can see this in action at http://www.test3.guru99.com/
Add float:left!important; for class="maximenuck maximenuckmodule item1509 last level1 ". Refer below image.
image
Instead of floating right the search box element, float right its container, in this case the <li> element.
There are 2 way according to your requirements.
Make background-position: right center. It'll help to looking animation from right to left.
If you really want animation from right to left so you have to make search box as an overlay(in this case search box will overlap with menu) by position:absolute and it'll stick first time in same position and after click it'll expand to left and overlap with menu.
and as per your website, you just have to fix width like 50px of parent li tag of search-box.
Related
Hello Stackoverflow community, ive got question about positioning my div. When i double click td, div appears, but if that td is near right side, my div goes out of width, is it possible somehow to change floating from right side of mouse to left side? Here is the picture. Thats how it looks like if i want to change date which is in the right corner:
As you can seee:
How can i fix this to fit in window no matter what?
It's not a floating div, it's absolutely positioned.
The problem is that left: 1094px rule you have. Change it to right: 0px and experiment with the number that works the best.
If you want to lock it on the right edge of the parent element, make sure you put position: relative to the parent element.
I have a very basic CSS problem.
I have a floating image in my top-left corner with a margin-right. The content is made of paragraphs and lists with bullets. I want my lists to have a padding-left for more visibility and my bullets appear in "list-style-position: outside" (text must be aligned).
My problem is, when a list is displayed next to my floating image, ul padding is not applying.
Here is an annotated screenshot for your comprehension :
This kind of behavior happens with FF and Chrome. With IE, it is worse because the bullets appear at the very left of the floating image...
Edit : css property "ul{overflow: hidden;}" is not an option because I want to avoid this :
I'm sorry I can't show you a piece of code because it is a Drupal website and the content of the node is generated by wysiwyg module and written by webmaster and editors. I have no access to the generated structure. The content is not fixed and lists could appear everywhere in the text.
This Fiddle represents well my situation: http://jsfiddle.net/34Cuf/
I think you have to get rid of this:
list-style-position: outside
This is putting your bullets points outside of padding. In the box model, anything outside the border box collapses during a float.
Lists have initial left padding on them (so there is enough space to show the bullet) so unless you give the ul a padding that is greater than this initial value, your list will actually move left instead of right.
Have a look at this example
To make your ul behave properly next to a floated element you just need to float it too: Example
Padding won't apply to list at right of floating div, because it stays behind floating div.
It doesn't count from after div, it still counting from left as ul after floating div.
It happens because the div "floats" with text.
To understand it better, play it ul li padding in my example in fiddle
See that a put a little margin in floating div to you see that the content of ul extends form the left margin behind floating div.
You'll have to apply a bigger right margin to the floating div.
I am trying to make a expandable menu which should get on top of one div and push some other divs down.
A mockup of what I am trying to do:
And a concept Plunker:
You're using Bootstrap and in order to achieve your desired behaviour you should "extract" TITLE div from document flow, for example using "position:absolute" and then move it to accomodate to deisred position.
Don't forget that you must extend it more than 100% in width... and push on the left with negative left position.
for reference here is a jsfiddle link:
http://jsfiddle.net/STmwz/4/
To start off with, there is only the top div. When the user clicks the edit button, I have some javascript to replace the top div with the bottom div. Problem is, when the replace happens, there is a slight twitch of sorts: everything jumps a couple of pixels.
I think the best way to fix this would be to have the top div vertically aligned. I have a height set for the top div that matches the height of the bottom div when it replaces the top one. So if both are aligned vertically, then no jump!
Problem is, vertical-align isn't working on the top div.
Any idea on what I could do?
I believe the elements that you want to vertically align must have "inline" or "table-cell" display.
Source: https://developer.mozilla.org/en/CSS/vertical-align
Here's an example of it working: http://jsfiddle.net/STmwz/19/
I think this may sound pretty simple, but still I can not get it to work.
My design has different icons of same size and height and I need to display them one below another and at the same time I need to give a small description about the icon on the right side for every icon.
The text for every icon on the right side consists of two lines, the first line in bold(header) and the second line normal(description). The padding and margin is my call. But I need to display them in that way in my content.
you can simply left align your image and then devide 2 lines of your text with line break
<img src="image.jpg" style="float:left;" />
<strong>Header</strong><br />
<span>description</span>
this fiddle should set you in the right direction.
It basically floats both the <img> and <p>
Its not a finished artical, but it should point you in the right direction.
Check out this fiddle
Basically there is a container div with an unordered list inside it, each list item has a background image to the left and text to the right, no floats are used.