I'm trying to make these wo sections at the same line where the <ul> section at right and the <span> section, but, I can't find how.
PS: I use here bootstrap.
<ul class="pagination pagination-sm">
<li class="disabled">«</li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
<li>5 </li>
<li>»</li>
</ul>
<span>
<span class="glyphicon glyphicon-plus"></span><span style="margin-left:10px;margin-right:6px;">Nouveau</span> |
<span style="margin-left:5px;"><span class="glyphicon glyphicon-arrow-up"></span><span style="margin-left:10px;"></span></span>|
<span style="margin-left: 5px;"><span class="glyphicon glyphicon-arrow-down"></span><span style="margin-left:10px;"></span></span>
</span>
Any suggestion, please ?
Thanks a lot !
Something like this would work:
EXAMPLE HERE
.pagination.pagination-sm + span {
vertical-align:top;
display:inline-block;
margin:25px 0 25px 10px;
}
Make the adjacent span element inline-block, align it to the top and add margins to match the .pagination element. This assumes that the markup will remain the same.
Try adding divisions around the two parts, and floating the two divisions next to each other. Here's a jsfiddle. See the CSS to see how to float.
<div class="cont-1">
... pagination code ...
</div>
<div class="cont-2">
... span and anchor codes ...
</div>
At the end of the code, make sure to clear your floats.
<div class="clear"></div>
Related
In my list element I want to place the control buttons aside, from the left of the list item text. In order to do that I use a property float: left;, it does the job, but when there are more than one line in a list, every new line has a padding of a size of the previous floating block:
The list is based on Vue.js & Bootstrap.
My CSS/HTML code:
<ul class="items">
<transition-group name="item">
<li v-for="item in items" :key="item.id" mode="out-in">
<span>
{{item.properties.NAME}}
</span>
<span style="float: left;">
<span class="fa fa-wrench"></span>Update
<span class="fa fa-trash-o"></span>Delete
</span>
</li>
</transition-group>
</ul>
How to display buttons inside the list on the right/left side of the list just one under the other?
The final result should be something like that:
Item #1_____________________________________Update___Delete
Item #2_____________________________________Update___Delete
Your issue should be solved by resetting or clearing the float that you’ve created. As you’re using bootstrap you can simply add the class clearfix to your li element that you have added float to. This will add a pseudo after element which will reset the flat after the element.
The final code snippet:
<ul class="items">
<transition-group name="item">
<li v-for="item in items" :key="item.id" mode="out-in" style="padding-bottom:10px;" clearfix>
{{item.properties.NAME}}
<span style="float: left;">
<span class="fa fa-wrench"></span>עדכן
<span class="fa fa-trash-o"></span>מחק
</span>
</li>
</transition-group>
</ul>
Try style="clear:left;". If that doesn't work, you would actually do the float or the clear left on the 'li' element, not on the span containing the buttons. This way each 'li' containing the buttons will contain the buttons themselves.
Try something to this affect below. Since there is not a JS Fiddle, editing code for what your needs are harder to edit.
<ul class="items">
<transition-group name="item">
<li v-for="item in items" :key="item.id" mode="out-in" style="float:left; clear:left; width:100%; display:block">
<span>
{{item.properties.NAME}}
</span>
<span>
<a href="#" class="btn btn-success btn-xs" #click="edit_item(item)">
<span class="fa fa-wrench"></span>Update</a>
<span class="fa fa-trash-o"></span>Delete
</span>
</li>
</transition-group>
</ul>
Kind of like this. Quick and dirty. Except on the elements, instead of inline styling, highly recommend CSS.
https://jsfiddle.net/y1x53zx2/1/
Looking at this simple code why the textarea is pushed 10/15 pixel down?
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
How can I fix this via css? I wish to have the textarea inline with the list.
div is a block element
So either you use display:inline-block ( or inline, depending on what you want ) on the div
div {
display:inline-block
}
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
Either you use float:left . But i suggest you don't do that. Using float left will get the element out of the normal flow
Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack.
Using float:lett
Try this, it works fine :
<ul>
<li>
<div style = 'float:left' >
<textarea></textarea>
</div>
</li>
</ul>
HTML:
<ul>
<li>
<div class="text-div">
<textarea></textarea>
</div>
</li>
</ul>
CSS:
.text-div{
float: left;
}
Hope that helps.
it's because you have used list-style. remove it through css
ul{
list-style:none;
}
I have two elements that are fairly unrelated, the .menu, and the .content_selection_button. The only thing that ties them together is that they are both inside <li> elements in the same <ul>, other than that they share nothing. Yet, for some reason when I change the font-size of a .content_selection_button it affects the vertical placement of the menu. I had a similar problem here. Why is font-size ruining my placement, and how can I stop it?
JSFIDDLE
Font Size 10
Font Size 25
Menu CSS
.menu {
display: inline-block;
background-color:lightblue;
margin: 1px;
padding: 2px;
box-sizing: border-box;
border-radius:5px;
}
Content Selection Button CSS
.content_selection_button{
font-size: 10px;
box-sizing: border-box;
border-radius:5px;
}
HTML
<ul class="t_inject_container">
<li class="t_inject_row">
<ul class="menu">
<li id="LI_4">
<button class="add_button t_intect_button">
+
</button>
</li>
<li>
<button class="minimize_button t_intect_button">
m
</button>
</li>
</ul>
</li>
<li>
<ul class="content_selection_container">
<li>
<form name="search_form" class="search_form">
<input type="text" name="search_input" class="search_bar" />
<input type="submit" value="🔍" class="search_button" name="search_button" />
</form>
</li>
<li id="LI_14">
<button class="content_selection_button">
My Timeline
</button>
</li>
<li>
<button class="content_selection_button">
relevent
</button>
</li>
<li>
<button class="content_selection_button">
mentions
</button>
</li>
</ul>
</li>
</ul>
I hinted that playing with bottom vertical alignment of the inline-block elements could fix the alignment issues. This could be avoided by simplyfing the UI by reworking the mark-up and CSS.
[ELEMENT] {
vertical-align: text-bottom;
}
You've main parent element's with height 150px with LI inside 25% height. so that comes around 37.5px. The height wont increase due to the increase in font size, but it will affect the calculated line height, the line-height will increase pushing the text below a central axis of the button.
So at the top of my page I have a title and a facebook logo. Here's a working example: fiddle
So everything is in a neat row at the top of the page. However, I want the logo and the text Join us on... to be on the right side, and the heading stays where it is. I've tried adding class="pull-right" to the 2nd and 3rd <li> elements, like this. But you can see how that really screws up the vertical alignment. Other than the alignment that's how I want it to look.
Any ideas on how to fix the alignment?
You can apply the pull-right on the li. Also, H4 will cause a break so, you should put the img and "Join Us..." inside the H4.
Try this:
<ul class="inline">
<li><h3 class="muted">Heading</h3></li>
<li class="pull-right">
<div class="media">
<h4 class="media-heading">
<a href="#">
<img src="http://cache.boston.com/universal/site_graphics/facebook/facebook_logo_36x36.png" style="max-width:100%;" alt="Join us on Facebook" />
</a>
Join Us on Facebook
</h4>
</div>
</li>
</ul>
you should add another element and give it "pull-right" class. Your join us code should be in that .
So you should have like this;
<ul>
logo
</ul>
<ul class="pull-right">
join us
</ul>
I'm stumped on this. Ive attempted to put in position:relative and various z-index in to no avail.
Below is my code for a simple drop-down menu.
It works fine in every browser except IE.
html page:
<div id="nav">
<ul id="navul">
<li id="rootHome">
<ul id="Home"></ul><a href="index.php"><img src="images/LA-icon.png" style=
"height: 40px;" id="home" /></a>
</li>
<li id="rootProducts" onclick="showMenu(this)">Products
<ul id="Products">
<li>
<p class="navLink" onclick="changePage('products-1.php')">Product 1</p>
</li>
<li>
<p class="navLink" onclick="changePage('products-2.php')">Product 2</p>
</li>
<li>
<p class="navLink" onclick="changePage('products-3.php')">Product 3</p>
</li>
</ul>
</li>
<li id="rootNews">
News
</li>
<li id="rootCompany" onclick="showMenu(this)">Company ∨
<ul id="Company">
<li>
<p class="navLink" onclick="changePage('./company-aboutUs.php')">About Us</p>
</li>
<li>
<p class="navLink" onclick="changePage('./company-contactUs.php')">Contact
Us</p>
</li>
</ul>
</li>
</ul>
CSS: (formatting didn't work on here)
http://pastebin.com/raw.php?i=CjyQhXCs
Try using position: relative and z-index: 100 on the id=nav div. Z-indexes work in layers. If the parent of an element has a z-index of 0, and the that element has a z-index of 100, the element would still appear behind another element that is the sibling of the parent with a z-index of 1.
The issue was a direct result of using the filter on the #navul ul. Somewhere in its calculations IE makes the element automatically hide any overflow. To fix, move the background to its own element and absolutely position it.
http://jsfiddle.net/uTBZN/30/
Credit to:
How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
Just like #Stu, I had a filter on my nav ul (in my case, .navbar):
.navbar {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#64d7f4',GradientType=0 ); /* IE6-9 */
}
Per #Greg, as soon as I removed that filter, the dropdown menu stayed on top of the page content in IE9. Thank you, saved my day!