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
Related
This question already has an answer here:
Break unordered list items across columns with flexbox
(1 answer)
Closed 4 years ago.
I try to make 2 column list and vertical order using flexbox
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
see image for the example
Here's a simple wrapping column layout in flexbox.
Each li element takes up 6em height (5em height + .5em margin * 2), so we set the parent container to 30em height to fit five elements.
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
height: 30em;
}
li {
background: gray;
width: 5em;
height: 5em;
margin: .5em;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
The HTML is straight-forward:
<div class="items">
<div class="item">Heriberto Nickel</div>
<div class="item">Brittaney Haliburton</div>
<div class="item">Maritza Winkler</div>
<div class="item">Carmon Rigg</div>
<div class="item">Alice Marmon</div>
<div class="item">Lyman Steakley</div>
<div class="item">Zenia Correa</div>
</div>
<div class="items">
<div class="item">Heriberto Nickel</div>
<div class="item">Brittaney Haliburton</div>
<div class="item">Maritza Winkler</div>
<div class="item">Carmon Rigg</div>
<div class="item">Alice Marmon</div>
<div class="item">Lyman Steakley</div>
<div class="item">Zenia Correa</div>
</div>
Using floats, the CSS for this would be:
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 25%;
}
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 25%;
}
This gives us four columns that wrap. We can also add a little bit of style to give it a more pleasing look:
.items .item {
float: left;
width: 25%;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.items .item {
float: left;
width: 25%;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
Hope this helps.
.list-one {
display: inline-block;
float: left;
list-style-type: none;
}
.list-two {
display: inline-block;
float: left;
list-style-type: none;
}
li {
margin-top: 10px;
}
.line-item {
background-color: grey;
height: 50px;
display: block;
color: #fff;
width: 50px;
padding: 30px 20px 0px 20px;
text-align: center
}
<ul class="list-one">
<li><span class="line-item">1</span></li>
<li><span class="line-item">2</span></li>
<li><span class="line-item">3</span></li>
<li><span class="line-item">4</span></li>
<li><span class="line-item">5</span></li>
</ul>
<ul class="list-two">
<li><span class="line-item">6</span></li>
<li><span class="line-item">7</span></li>
<li><span class="line-item">8</span></li>
<li><span class="line-item">9</span></li>
<li><span class="line-item">10</span></li>
</ul>
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 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>
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>
iam trying to do a top menu with the width of the background color to 100%.
and keep the content of my menu inside my wrap id which 960px.
Can somebody explain me how to do it.
Demo: http://jsfiddle.net/NnCVv/246/
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
<!DOCTYPE html>
<html>
<head>
<style>
*
{
padding: 0px;
margin: 0px;
}
#banner
{
width:100%;
background-color:green;
}
#wrap1
{
background-color:black;
width: 960px;
}
#wrap
{
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;
}
</style>
</head>
<body>
<div id="banner">
<div id="wrap1">
<ul id="wrap">
<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>
</ul>
</div>
</div>
</body>
</html>