I'm trying to sort HTML elements. Basically, I would like to set UL LI menu (inline) to the right side, and the INPUT on the left to take all the remaining space, not to be fixed, and all that in 1 line. 3 LI elements, take just as many space as it needs (minimum, not fixed couse i might add some elements), and INPUT take everything else as far as it can (100% of whats left in line) .
I tried with various display: block, inline, inline-block, table, table-cell (with this I almost succeeded), float left, right, and i can't set it without putting fixed width on something...
<main>
<div id="searchBar">
<form>
<input id="searchInput"/>
</form>
<ul id="searchOptions">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</main>
maybe to put some margins, overflows, hacks?
please help!
Like this, maybe?
ul {
list-style-type: none;
display: table-cell;
width: 1px;
padding:0 0 0 5px;
}
form {
display:table-cell;
width:100%;
}
li {
display:table-cell;
white-space: nowrap;
padding:0 5px
}
input {
width:100%;
}
Answer from Alohci is what I was looking for! I solved it like this:
<main>
<div id="searchBar">
<div id="searchText">
<form>
<input id="searchQuery" />
</form>
</div>
<div id="searchOptions">
<ul>
<li>Cla</li>
<li>Res</li>
<li>Pro</li>
</ul>
</div>
</div>
</main>
main div#searchBar {
display:table;
width:100%;
}
main div#searchText {
display:table-cell;
width:100%;
}
main div#searchOptions {
display:table-cell;
width:100%;
}
main input#searchQuery { width:100%; }
main ul { display:table; }
main ul li { display:table-cell; }
main ul li a { display:table-cell; }
I've created more divs around elements, and make main div as table, and those divs as cells, and after that UL as table and LI's as cells... I guess before it didn't work as FORM and INPUT was not in div, and wasn't able to fill 100% up to UL...
But Alochi gave me more compact version of this, THNX!
Related
I have a list that displays numbers with decimals. I want them all aligned in the center but they have different decimal lengths so it's kinda causing some UI issues.
Example its current displaying something like
14.88
18.123
20.452
10.22
3.1
Its current HTML & CSS is simply
.my-list {
text-align: center
}
<ul class="my-list">
<li>14.88</li>
</ul>
Can anyone show me how to update my CSS so it displays something like this
14.88
18.123
20.452
etc
In short I want the list to be aligned on the center, but I want the list items to be aligned on the left.
Assuming you want the list itself centered with the items left aligned:
Option 1: Using the list as a block but a fixed width
ul {
padding: 10px;
list-style-type: none;
background-color:#ccc;
width: 25%;
/*Centers the list*/
margin: 0 auto;
}
/*Not required in my example, but you may need it*/
li
{
text-align:left;
}
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
Option 2: Wrap the list in a div and set the list to inline-block
div {
/*Centers this list*/
text-align: center
}
ul {
padding: 10px;
list-style-type: none;
background-color: #ccc;
display: inline-block;
/*Left align contents of list*/
text-align: left;
}
<div>
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</div>
See this article for more centering options: https://css-tricks.com/centering-css-complete-guide/
You are using text-align:center.
Try the same with:
.my-list {
text-align: left
}
This should do it.
You can try list-style css property for the same, to remove the bullets
.myList{
text-align:left;
list-style:none;
}
.mylist{
list-style:none;
width:100px;
}
.mylist li{
text-align:center;
}
<!DOCTYPE html>
<html>
<body>
<ul class="mylist">
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</body>
</html>
I created a very simple HTML page which has a list and a paragraph. The problem is that the paragraph appears to the right of the list. If I create another paragraph, it is placed correctly. I would like the first one to show in the same manner.
<body>
<ul>
<li>(...)
<li>(...)
<li>(...)
<li>(...)
</ul>
<p>This text is to the right of the list.</p>
<p>This text is in a new line and is left-aligned.</p>
</body>
I don't refer to paragraphs anywhere in my CSS file and this is the part relating lists:
ul {
list-style: none;
margin 0;
}
li {
float: left;
}
Add this
ul:after{
content:'';
display:table;
clear:both;
}
DEMO
This has to be done whenever you use floats. Best practice is to make a class like this -->
.clearfix:after{
content:'';
display:table;
clear:both;
}
and add this class to the parent block if the child is floated .Always try to follow this step.
For more detailed explanation refer this link -- > http://www.impressivewebs.com/clearing-floats-why-necessary/
Don't use float: *; if you don't know what the floating an element does. float takes an element out of the normal flow. However, you want to show the li on a single line without loosing their display: block; properties. That's exactly what display:inline-block; is for (demo):
ul {
list-style: none;
margin 0;
}
li {
display: inline-block;
}
See it in action HERE
The code
HTML
<body>
<ul>
<li>(...)</li>
<li>(...)</li>
<li>(...)</li>
</ul>
<p>This text is to the right of the list.</p>
<p>This text is in a new line and is left-aligned.</p>
</body>
CSS
ul {
list-style: none;
margin 0;
padding: 0;
}
li {
float: left;
margin-right:10px;
}
li:last-child{
margin-right:0;
}
p{
clear: both;
}
Explanation:
you need to add clear:both to your paragraph <p></p> elements.
in ul{...} we set the margin & padding to 0
in li{...} we give some space between the li items by giving margin of 10px to the right.
in li:last-child{...} we removed the margin-right:10px & set it to 0 because it is the last item in the li list.
I'm trying to create something that looks like this:
so far I have: http://jsfiddle.net/ePse6/
Without using something like: margin-top:-25px;, how can I position the Edit/Delete links to be on the right of the title (the part that says "iPhone" or "Android") and have both the title and links halfway between the borders?
Thanks!
just like most of answers, here i come with text-align:right and float:left .
I reduced code to minimal and plain CSS for your actual structure and to make it clear to you : http://jsfiddle.net/ePse6/7/
ul , a { /* basic reset we need */
padding:0;
margin:0;
color:gray;
text-decoration:none;
}
.mini > ul > li {
display:block;/* reset from list-item */
border-bottom:solid;
text-align:right;
overflow:hidden;/* wraps floatting element within */
}
.mini > ul > li> h3 {
float:left;
margin:0;
}
.mini > ul > li ul,
.mini > ul > li li {
display:inline-block;
}
Why not use something simple and really handy?
I have removed all of your messy code, and have created a new fiddle for you.
http://jsfiddle.net/afzaal_ahmad_zeeshan/ePse6/4/
I have used just a few lines of code, I have used a div and inside that, I have used 2 paragraphs to seperate each of them. Then inside that I used span element to seperate the right and left floating elements.
Using CSS I selected the classes and then styled them to get the desired input!
Here is the code:
<div>
<p>
<span class="left">Android</span><span class="right">Delete Edit</span>
</p>
<p>
<span class="left">iPhone</span><span class="right">Delete Edit</span>
</p>
</div>
CSS is as:
p {
border: 1px solid #333; // border that you wanted!
padding: 20px; // padding all around the element
padding-bottom: 40px; // padding at the bottom of the element
}
.left {
float: left; // making the elements float at the left
}
.right {
float: right; // floating elements at the right side
}
You can go to the fiddle page, and check for the design of the layout now. It was a simple thing. Hope its what you wanted.
This is without the lists. Just some CSS to do the trick: http://jsfiddle.net/Lg96p/
CSS:
.wrap{
width:100%;
border-bottom:solid 1px #666666;
margin-bottom:20px;
padding-bottom:10px;
}
.title{
font:bold 16px arial;
}
.fl{
float:left;
}
.fr{
float:right;
}
.lnk{
color:#6c6c6c;
display:inline-block;
text-align:right;
margin:0 10px 0 0;
text-decoration:none;
font:normal 14px arial;
}
HTML:
<div class="wrap fl">
<div class="title fl">iPhone</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>
<div class="wrap fl">
<div class="title fl">Android</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>
You should create two columns that fill the parent div. Make them both float:left; and for the right column you can align the text to the right text-align:right; or put two divs in it with float:right; for edit and delete.
Here is my fiddle: http://jsfiddle.net/ePse6/5/
Whatever you put into the columns or how to format it is up to you. But from here you have 2 columns independently next to each other.
If you want multiples of these stacked on top of each other i would change the container to a class and just add multiple of these containers with the columns to keep it tidy and readable. Like in this fiddle: http://jsfiddle.net/ePse6/6/
HTML:
<div class='container'>
<div class='leftCollumn'>
Iphone
</div>
<div class='rightCollumn'>
<a hreft="">Edit</a><a hreft="">Delete</a>
</div>
</div>
<div class='container'>
<div class='leftCollumn'>
Iphone
</div>
<div class='rightCollumn'>
<div class="button">Edit</div><div class="button">Delete</div>
</div>
</div>
CSS:
.container
{
width:600px;
margin:auto;
}
.leftCollumn
{
float:left;
width:400px;
background-color:#999;
}
.rightCollumn
{
float:left;
width:100px;
text-align:right;
background-color:#CCC;
}
.rightCollumn a
{
margin-left:10px;
margin-right:5px;
}
.button
{
margin-left:10px;
margin-right:5px;
background-color:#000;
color:#FFF;
float:right;
}
I have a nav bar that displays fine when I have 5 navigation objects in it but when I add 3 more it drops below the main header why?
5 Objects:
7 Objects:
HTML:
<div id="header">
<div class="w960">
<div id="logo">
<h2>Text</h2>
<p>Text</p>
</div>
<nav>
<ul>
<li class="first active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li class="last">
5
</li>
</ul>
</nav>
</div>
</div><!-- end of header -->
CSS:
#header{background:#2d2d2f;width:100%; height:120px;clear:both;font-family:Signika,Arial,sans-serif;}
.w960 { width:960px; margin:auto; }
nav{width:auto; float:right;line-height: 50px;}
nav ul li{font-size:14px; float:left;display: inline-block;padding: 0px 11px;text-transform:uppercase;}
nav ul li a{padding: 0px 10px; color:#ffb400; text-decoration:none;}
nav ul li a:hover, .active a{color:#fff}
#logo{width: 40%;float: left;height: 90px;}
#logo h2{line-height: 41px;color:#FFB400;font-size:28px;}
#logo h2 span{color:#FFB400;}
#logo p {margin-top: -25px;color:#b8bbbc;}
You have two floating elements in the same line, if the sum of both width and they are bigger than the available space, they will break the line and place the second floating element below the previous: in your case nav below logo. Add borders to each of them and you will see that they are just too big.
One alternative is this: http://jsfiddle.net/Bs93k/
nav{width:auto; /*float:right;*/ overflow:auto; line-height: 50px;}
This will make nav to take the available space, however, I don't think its contents would behave as you like.
A second alternative is this: http://jsfiddle.net/PU7hV/
#header{display:table;}
.w960 {position:relative;}
nav{/*float:right;*/ position:absolute; top:0; right:0;}
Note that i wrote what you have to add and commented what to delete, the rest, leave them as you already had.
If you mean to ask why the background of the header container does not appear behind the links, it's because of the floated lis.
You will need to add a clearfix class.
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
And apply that class to your header:
<div id="header" class="clearfix">
If you mean why do they break down a line at all, it's because of the fixed width on the <div class="w960"> container.
.w960 { width:960px; margin:auto; }
As long as you have no dropdown submenu I'd recommend to use overflow: hidden.
nav ul {
overflow: hidden;
}
If you can not change the HTML (for example you don't have access to the script which outputs the HTML) adding clearfix, you could just change the CSS like that:
#header {
background: none repeat scroll 0 0 #2D2D2F;
clear: both;
float: left;
font-family: Signika,Arial,sans-serif;
height: auto;
width: 100%;
}
I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.