I am trying to align the ul li depending on the float value.
So if the float is left then it will align left else right. But the issue is that when a li gets float right then it aligns to the right but not at the top.
Html code--
<ul>
<li style="float:left;">Text 1</li>
<li style="float:left;">Text 2</li>
<li style="float:right;">Text 3</li>
</ul>
Demo -- https://jsfiddle.net/squidraj/t2qmfkya/
Now they are all in one line but I would like to display it in the following way
Text 1 Text 3
Text 2
I have no clue if this is at all possible by the html format I have.
Any help is highly appreciated.
you can use CSS3 columns
ul {
columns: 2;
-moz-columns: 2;
-webkit-columns: 2;
}
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
UPDATE
More random lis
ul {
columns: 5;
-moz-columns: 5;
-webkit-columns: 5;
}
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
<li>Text 6</li>
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
<li>Text 10</li>
</ul>
This isn't the prettiest, but might help you...
You can target the elements with a particular inline style.
jsfiddle
ul li[style="float:left;"] {
clear: left;
margin-right: 20px;
}
ul li[style="float:right;"] {
float: none !important;
}
ul {
width: 180px;
background: red;
display: block;
float: left;
padding: 1rem;
list-style: none;
}
ul li[style="float:left;"] {
clear: left;
margin-right: 20px;
}
ul li[style="float:right;"] {
float: none !important;
}
<ul>
<li style="float:left;">Text 1</li>
<li style="float:left;">Text 2</li>
<li style="float:right;">Text 3</li>
<li style="float:right;">Text 4</li>
<li style="float:left;">Text 5</li>
</ul>
Updated
ul li[style="float:right;"] {
float: none !important;
padding-left: 100px;
}
This ensures that all float:right elements line up.
fiddle
Try to do it in this way https://jsfiddle.net/t2qmfkya/5/
<ul>
<li class="right-item" style="float:right;">Text 3</li>
<li class="right-item" style="float:right;">Text 4</li>
<li>Text 1</li>
<li>Text 2</li>
</ul>
ul {
width: 180px;
background: red;
padding: 1rem;
list-style: none;
overflow: hidden;
}
ul li {
overflow: hidden;
}
.right-item{
width: 51%;
}
Rearrange element and use clear both can handle this :
ul {
width: 180px;
background: red;
display: block;
float: left;
padding: 1rem;
list-style: none;
}
ul li {}
<ul>
<li style="float:left;">Text 1</li>
<li style="float:right;">Text 3</li>
<li style="clear:both;">Text 2</li>
</ul>
Related
there are navigation panel(div id=#nav) in which is located horizontal menu(nav_main_ul). It has submenu. When I load site main horizontal is appear but on hover submenu of main manu is not appear.
I write:
.nav_main_ul li a:hover .submenu{
top:150;
}
What is wrong?
Everything did work while I use flexbox for sidebar, content and footer.
I'm newbie in html and css. I think reason of failure is conflict between position(absolute, relative) and flexbox.
Thanks in advance.
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#nav {
left: 0;
top: 120px;
background-color: #00004d;
width: 100%;
}
.nav_main_ul {
position: relative;
margin: 0px 0 0 400px;
}
#nav ul {
height: 50px;
list-style: none;
background-color: #00004d;
}
#nav li {
display: block;
float: left;
font-family: Arial, sans-serif;
font-size: 20px;
position: relative;
}
#nav li a {
color: #fff;
display: block;
height: 50px;
padding: 0 10px;
text-decoration: none;
line-height: 50px;
}
.nav_main_ul li a:hover {
background: #000080;
}
/*.nav_main_ul li a:hover .submenu{
top:50;
}*/
.submenu {
position: absolute;
width: 250px;
top: -9999em;
}
.submenu li {
width: 100%;
height: 40px;
background: #00004d;
}
.submenu li a {
line-height: 50px;
height: 50px;
transition: background 0.5s;
}
.submenu li a:hover {
background-color: red;
}
li:hover .submenu li {
display: block;
z-index: 100;
}
<div id="nav">
<ul class="nav_main_ul">
<li>Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
<li> News
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</li>
<li>About us
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Gallery
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Contacts
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
</ul>
</div>
Edit
Hi Delphi - To answer your question about the + selector, let's take a look at your HTML markup:
<li>
Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
We need to understand that in the above markup, we can express it as:
LI (Parent / Root)
- A (Child of LI, Sibling of UL)
- UL (Child of LI, Sibling of A)
- LI (Child of UL, Grand-Child of LI)
Your desired action is that when a user hovers over the A, we show the UL.
USUALLY with CSS, we think of NESTED (or PARENT/CHILD) use-cases. But in YOUR use case, the A and UL are NOT in a parent/child relationship. Rather, they are siblings.
So, what we want is: When a user hovers over the A, we want the SIBLING(s) of A (in this case, only UL) to have TOP: 50PX.
There are TWO sibling selectors in CSS, "Adjacent" and "General". Adjacent means that it will ONLY apply when the siblings are directly together. For example:
<div>
<p></p>
<span></span>
<span></span>
<p></p>
</div>
OR:
DIV
- P
- SPAN
- SPAN
- P
Let's assume in the above, we wanted to select every SPAN that is a SIBLING of P. If we did:
p + span { color : red }
Only the FIRST span would be applied. That's because, it's the only span that immediately is next to a P element. Demo: http://jsfiddle.net/ucq5pg13/
What if we wanted ALL spans following a P to be red? That's where our GENERAL sibling selector comes into play:
p ~ span { color: red }
What this says is that ANY span that's a SIBLING of P, that comes AFTER IT, will be red.
It's important to note that it MUST come after. For example:
p ~ span { color: red }
<div>
<span></span> <!-- I WOULD NOT BE RED -->
<p></p>
<span></span> <!-- I WOULD BE RED -->
<span></span> <!-- I WOULD BE RED -->
<p></p>
</div>
Demo: http://jsfiddle.net/kb7n5236/
Hopefully that helps :)
Original:
When you hover over the a link, you'll need to position the .submenu. You can do something like:
<!-- On hover, show submenu -->
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
top: 50px;
}
JSFiddle: http://jsfiddle.net/1us0q4m3/1/
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#nav {
left: 0;
top: 120px;
background-color: #00004d;
width: 100%;
}
.nav_main_ul {
position: relative;
margin: 0px 0 0 400px;
}
#nav ul {
height: 50px;
list-style: none;
background-color: #00004d;
}
#nav li {
display: block;
float: left;
font-family: Arial, sans-serif;
font-size: 20px;
position: relative;
}
#nav li a {
color: #fff;
display: block;
height: 50px;
padding: 0 10px;
text-decoration: none;
line-height: 50px;
}
.nav_main_ul li a:hover {
background: #000080;
}
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
top: 50px;
}
.submenu {
position: absolute;
width: 250px;
top: -9999em;
}
.submenu li {
width: 100%;
height: 40px;
background: #00004d;
}
.submenu li a {
line-height: 50px;
height: 50px;
transition: background 0.5s;
}
.submenu li a:hover {
background-color: red;
}
li:hover .submenu li {
display: block;
z-index: 100;
}
<div id="nav">
<ul class="nav_main_ul">
<li>Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
<li> News
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</li>
<li>About us
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Gallery
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Contacts
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
</ul>
</div>
I have a 'ul' tag that already styles something else. I need to create another 'ul' tag to stylize something else in my HTML page.
This is the first ul style:
ul {
list-style: none;
padding: 0px;
margin: 0px;
font-family: arial;
color:white;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
I need to style another ul where I create a list of items. I want the default CSS settings for the ul tags, but I don't know how to make that work.
Here is the HTML code for the ul list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
What code will make the above ul tag go back to the default CSS settings?
Better assign a class for the first ul and add styles for that CSS class, then other ul in the page will not get affected.
.first-ul {
list-style: none;
padding: 0px;
margin: 0px;
font-family: arial;
color: #000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul class="first-ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You could wrap the two inside of a div and style using accordingly.
simple markup
<div class="somediv">
<ul></ul>
<ul></ul>
</div>
simple css
.somediv ul:first-child {
background: blue
}
.somediv ul:nth-child(2) {
background: red
}
You can use different class names (one common and one different name) to the UL and give as many properties as you wish.
.common{
list-style: none;
padding: 0px;
margin: 0px;
font-family: arial;
color:white;
text-align: center;
}
.red
{
color:red;
}
.green
{
color:green;
}
<ul class="common red">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="common green">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="first">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="scnd">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
add like this in your stylesheet
.first ul
{
Your style here
}
.scnd ul
{
Your style here
}
I have a navigation menu, and the last item contains a search input field. I would like the input field to be responsive, so that I can resize the window and avoid a menu line break at any cost.
I don't want to use media queries, since the menu will eventually be in a wordpress theme, so the items will be dynamic (different amounts of items, and different length of words). Of course at some stage the menu will break if there are too many items, but I would have still liked to find a solution to have a min-/max width for the input search field.
I am not sure if this is even possible. If not, are there any alternative solutions?
http://jsfiddle.net/aobrien/271vx59d/
<div class="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
<li>
<form method="get" class="search-form2" action="/" >
<input type="search"placeholder="Search" />
</form>
</li>
</ul>
</div>
css:
.menu {
color:#FFF;
width:100%;
background:#000;
}
.menu > ul {
display: inline-block;
width:100%;
padding:5px 0;
margin:0;
}
.menu > ul > li {
list-style:inside none;
float:left;
border-right:1px solid #FFF;
padding: 0 5px;
}
.menu > ul > li:last-child{
float:right;
overflow:hidden;
border-right:none;
}
input {
width: 100%;
max-width: 400px;
}
I would like the input field to be responsive, so that I can resize the window and avoid a menu line break at any cost.
You can remove the float and use display: table-cell and white-space: nowrap on the <li> elements like this:
http://jsfiddle.net/271vx59d/7/
.menu {
color: #FFF;
width: 100%;
background: #000;
}
.menu > ul {
display: table;
width: 100%;
padding: 5px 0;
margin: 0;
}
.menu > ul > li {
list-style: inside none;
border-right: 1px solid #FFF;
padding: 0 5px;
display: table-cell;
white-space: nowrap;
}
.menu > ul > li:last-child {
overflow: hidden;
border-right: none;
text-align: right;
}
input {
width: 100%;
max-width: 400px;
}
<div class="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
<li>
<form method="get" class="search-form2" action="/">
<input type="search" placeholder="Search" />
</form>
</li>
</ul>
</div>
I am trying to make a top menu which should be 100% filled with background-color and also keep the content of my menu inside my wrap id which 960px.
Can somebody explain me how to do it.
Demo: JSFiddle
HTML:
<div id="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>
CSS:
*
{
padding: 0px;
margin: 0px;
}
#wrap
{
width: 960px;
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
}
ul li a
{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
Try this
*
{
padding: 0px;
margin: 0px;
}
#wrap
{
width: 100%;
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
width:11%;
}
ul li a {
display: block;
padding-top: 20%;
padding-bottom: 20%;
color: white;
text-decoration: none;
}
<div id="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>
Add a section as wrapper around it. And since you might want to re-use your wrap declare it as class.
CSS:
#header {
background: navy;
}
.wrap {
width: 960px;
margin: 0px auto;
margin: 0px auto;
}
ul {
overflow: hidden;
}
HTML:
<section id="header">
<div class="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>
</section>
JSFiddle
I need to achieve this layout, please note on the current item,
The 3 sublists are supoused to be children of the current item,
The problem here is that if I set the position absolute and left:0 and width:100%; the max width would be determined for the parent's width,
So,
How can I keep the lists children and make them use the whole avaliable space?
this is my markup for now: (can i keep it?)
<nav>
<ul class="main">
<li><?=lang('grupo-cabau')?></li>
<li class="active">
<?=lang('nuestros-hoteles')?>
<ul>
<li>
<ul>
<li>list
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
<ul>
<li>listt <ul>
<li>item</li>
</ul>
</li>
</ul>
<ul>
<li>list
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><item</li>
<li>item</li>
</ul>
<ul class="lang">
<li>ESP
<ul>
<li>ENG</li>
<li>DEU</li>
</ul>
</ul>
</nav>
My current implementation (almost there):
header .wrapper > div nav ul.main > li.active > ul {
background: none repeat scroll 0 0 #FFFFFF;
display: block;
height: 141px;
left: 0;
position: absolute;
top: 60px;
width: 100%;
}
Problem when I set li.active to position:relative (very far from there):
So question is,
How can the position:absolute child be bigger (and left,right properties respond to the layout) with the parent being position:relative???
Is my only chance to take the list out of the tree?
What you are trying to do is set the width based on a parent's parent. That is the problem. But as you commented, the menu has a fixed width, which makes it easier.
I cleaned the HTML up to this:
<ul class="nav">
<li>item 1</li>
<li>item 2
<ul>
<li>List 2.1
<ul>
<li>item 2.1.1</li>
<li>item 2.1.2</li>
<li>item 2.1.3</li>
</ul>
</li>
<li>List 2.2
<ul>
<li>item 2.2.1</li>
<li>item 2.2.2</li>
<li>item 2.2.3</li>
</ul>
</li>
<li>list 2.3
<ul>
<li>item 2.3.1</li>
<li>item 2.3.2</li>
<li>item 2.3.3</li>
</ul>
</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</ul>
Then made this CSS:
body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
list-style: none;
margin: 0;
padding: 0;
width: 500px; /* needs to be a fixed width */
background: lightblue;
}
.nav > li {
display: inline-block;
background: lightblue;
margin-right: -4px;
padding: 15px;
}
.nav > li > ul {
position: absolute;
display: table;
width: 500px; /* same width as .nav */
left: 0;
margin-top: 15px;
background: lightgreen;
}
.nav > li > ul > li {
display: table-cell;
width: 33%;
}
Check this demo: http://jsfiddle.net/LinkinTED/4a98c/
You'll probably want to show the submenu on a :hover effect, check http://jsfiddle.net/LinkinTED/4a98c/2/