I have a simple problem with a menu, its a 2 part menu : on the left, a traditional UL. On the right, a link contained in a div.
The right div has fixed width. The left div must take all remaining space.
I tried the overflow:hidden technique, to no avail
https://coderwall.com/p/0ph8lg/overflow-hidden-trick-to-fill-remaining-width
https://jsfiddle.net/3gfqyux4/
.container {
width:800px;
height:50px;
}
.left-menu {
background-color:red;
width:auto;
height:50px;
overflow:hidden;
}
.left-menu ul li {
display:inline;
}
.right-menu {
background-color:blue;
float:right;
width:100px;
height:50px;
}
Use calc
.container {
width:800px;
height:50px;
}
.left-menu {
background-color:red;
width:150px;
height:50px;
float:left;
}
.left-menu ul li {
display:inline;
}
.right-menu {
background-color:blue;
width:calc(100% - 150px);
height:50px;
}
Updated your fiddle: https://jsfiddle.net/3gfqyux4/3/
I assume you mean your "right" div has a fixed width (as indicated in your code) and that the left div should take up the remaining width.
flexbox can do that.
.container {
width: 80%;
height: 50px;
display: flex;
}
.left-menu {
background-color: red;
flex: 1 0 auto;
}
.left-menu ul li {
display: inline;
}
.right-menu {
background: green;
flex: 0 1 100px;
}
<div class="container">
<div class="left-menu">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
<div class="right-menu">
<a href="xyz.com">
xyz.com
</a>
</div>
</div>
JSfiddle Demo
CSS-Tricks: Complete Guide
if you don't change the order: remember display:inline-block;
.container {
width:800px;
height:50px;
}
.left-menu {
background-color:red;
width:calc(100% - 100px);
height:50px;
/*overflow:hidden;*/
display:inline-block;
}
.left-menu ul li {
display:inline;
}
.right-menu {
background-color:blue;
float:right;
width:100px;
height:50px;
display:inline-block;
}
Change an order of this two lists ;)
<div class="container">
<div class="right-menu">
<a href="xyz.com">
xyz.com
</a>
</div>
<div class="left-menu">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
https://jsfiddle.net/3gfqyux4/2/
Related
i have piece of code which contain an <ul> element and the <ul> element have a css property display:block by default.here is the code snippet,
ul,li{
list-style-type:none;
padding:0;
/*display:inline;*/
}
#parent{
width:100%;
/*height:50px;*/
background-color:red;
}
#child{
width:50%;
height:100%;
background-color:yellow;
}
#grand-child-1,#grand-child-2 {
width:30%;
height:100%;
float:left;
}
#grand-child-2{
background-color:green;
}
#grand-child-1{
background-color:blue;
}
<div id="parent">
<ul id="child">
<li id="grand-child-1">title 1</li>
<li id="grand-child-2">title-2</li>
<li id="grand-child-3">title-3</li>
</ul>
</div>
but when i added display:inline to the tag to remove it's default display:block property , then the width property of grand-child-1,grand-child-2 is changed.i added the snippet below.how to fix this problem?.thanks is advance.
ul,li{
list-style-type:none;
padding:0;
display:inline;
}
#parent{
width:100%;
/*height:50px;*/
background-color:red;
}
#child{
width:50%;
height:100%;
background-color:yellow;
}
#grand-child-1,#grand-child-2 {
width:30%;
height:100%;
float:left;
}
#grand-child-2{
background-color:green;
}
#grand-child-1{
background-color:blue;
}
<div id="parent">
<ul id="child">
<li id="grand-child-1">title 1</li>
<li id="grand-child-2">title-2</li>
<li id="grand-child-3">title-3</li>
</ul>
</div>
Make the li display: inline (or display: inline-block) but NOT the ul. Like this:
li {
list-style-type:none;
padding:0;
display:inline; /* or inline block */
}
The entire code:
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
padding: 0;
display: inline;
}
#parent {
width: 100%;
/*height:50px;*/
background-color: red;
}
#child {
width: 50%;
height: 100%;
background-color: yellow;
}
#grand-child-1,
#grand-child-2 {
width: 30%;
height: 100%;
float: left;
}
#grand-child-2 {
background-color: green;
}
#grand-child-1 {
background-color: blue;
}
<div id="parent">
<ul id="child">
<li id="grand-child-1">title 1</li>
<li id="grand-child-2">title-2</li>
<li id="grand-child-3">title-3</li>
</ul>
</div>
I've created simple responsive navigation menu with media queries. I faced the weird situation. After applying text-align:center to center text in blocks, the first li element is moved slightly to left, others are centered fine. I can't figure out what's the issue. I tried margin: 0 auto, it doesn't work for me.
This is what's happening:
Here's the code:
<header>
<div class="logo">Logo</div>
<div class="menu" role="button">
<span></span>
<span></span>
<span></span>
</div>
<nav class="navigation">
<ul>
<li>home</li>
<li>blog</li>
<li>team</li>
<li>contact</li>
</ul>
</nav>
</header>
CSS:
header{
background:grey;
.logo{
font-size:40px;
color:white;
background:blue;
width:200px;
display:inline-block;
}
.menu{
display:inline-block;
float:right;
}
nav{
display:inline-block;
ul{
margin:0;
padding:0;
li{
display:inline-block;
margin: 0 20px;
background:orange;
}
}
}
}
#media screen and(max-width:600px){
header{
.menu{
display:inline-block;
height: 40px;
width: 40px;
margin:10px;
span{
border-top: 5px solid #fff;
display: block;
margin: 5px 0;
}
}
.navigation{
display:block;
ul{
margin:0;
padding:0;
text-align: center;
li{
width:100%;
display:block;
background:orange;
margin:0;
}
}
}
}
}
I am new to css my dropdown menu is hiding behind the div please help me to find out the problem. my HTML and CSS code is:
<style>
*
{
margin:0px;
padding:0px;
}
body
{
background-color:mintcream;
}
#header
{
height:260px;
width:auto;
margin:5px;
}
#headerimg
{
height: 260px;
width:100%;
}
#wrap #menu
{
width:550px;
margin:0 auto;
padding:10px;
}
#wrap
{
height:50px;
background-color:lightsalmon;
border:1px solid white;
border-radius:5px;
}
#wrap #menu ul li
{
background-color:black;
border-radius:5px;
width: 120px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
list-style-type:none;
margin-left: 3px;
}
#wrap #menu ul li a{
color:white;
text-decoration:none;
display:block;
}
#wrap #menu ul li a:hover
{
background-color:mistyrose;
color:orangered;
border-radius:5px;
}
#wrap #menu ul li ul li
{
display:none;
}
#wrap #menu ul li:hover ul li
{
display:block;
}
#content
{
width:100%;
height:500px;
background-color: teal;
margin:5px;
}
#content1
{
width:50%;
height:500px;
background-color: yellow;
float:left;
}
#content2
{
width:50%;
height:500px;
background-color:red;
float:left;
}
</style>
<body>
<div id="header">
<img id="headerimg" src="doc.jpg" />
</div>
<div id="wrap">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Services
<ul>
<li>Food</li>
<li>Hospital</li>
<li>Medical</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="content1"> </div>
<div id="content2"> </div>
</div>
</body>
I am new to css. My dropdown menu is hiding behind the div. Please help me to find the problem.
Please add below css
ul {position: relative; z-index: 99999; }
Just add position:relative in "#wrap #menu ul li" . I think your problem was solved. If you have any other problem then put it here.
Thanks for asking.
I have two that I need horizontally centered to each other, wrapped in a single div. can you please explain what I am doing wrong?
My HTML
<div id="center">
<div id="logo"><img src="images/blackcat_logo.png" width="200px"></div>
<nav>
<ul>
<li>SHOP</li>
<li>ARTIST</li>
<li>SERVICES</li>
<li>FAQs</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
My CSS:
header{
height:500px;
width:auto;
background-image:url(images/headerphoto.png);
text-align:center;
}
#center{
width:960px;
margin:auto;
overflow:hidden;
display:inline-block;
}
#logo{
float:left;
display:inline-block;
}
nav{
float:right;
display:inline-block;
}
#center {
text-align:center;
}
#logo, nav {
display: inline-block;
}
The above code works for me http://www.cssdesk.com/QKNNj .
Remove the float from #logo and nav. Then set your #center div to text-align:center;
#center {
width:960px;
margin:auto;
overflow:hidden;
display:inline-block;
text-align:center;
}
Is that what you had in mind?
Your full CSS should be:
#center {
width:960px;
margin:0 auto;
overflow:hidden;
left:0;
right:0;
text-align:center;
}
I have the following:
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
CSS:
div {
height: 178px;
}
#wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
#left, #center, #right {
display: table-cell;
}
#center {
width: 1100px;
}
#left {
background: url(left.gif) repeat-x;
}
#center {
background: url(center.gif) no-repeat center center;
}
#right {
background: url(right.gif) repeat-x;
}
See: fiddle
I want to put a horizontal menu in orange part of center section and another horizontal menu in yellow part;
I tried this:
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="center">
<ul id="menu1">
<li>Home</li>
<li>What We Do</li>
<li>Locations</li>
<li>Partnerships</li>
<li>Contact</li>
</ul>
<ul id="menu2">
<li>Home</li>
<li>What We Do</li>
<li>Locations</li>
<li>Partnerships</li>
<li>Contact</li>
</ul>
</div>
<div id="right"></div>
</div>
Added CSS:
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}
See: fiddle
But no had no success, please help!
You can use relative positioning (https://developer.mozilla.org/en-US/docs/Web/CSS/position#Relative_positioning) e.g.
http://jsfiddle.net/67UWv/
css
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:85px;
right:30px;
}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:110px;
right:30px;
}
edit - related to last comments
in order to remove the white spacing around the menu image it is required to set margin:0 for the body element to override the default user agent style rules.
body{
margin:0px;
}
http://jsfiddle.net/67UWv/1/
edit - response to the latest comments
The white gap noticed was caused in ff from the beginning (test original fiddle http://jsfiddle.net/6GE3x/27/show/ ) when content was placed within #center div. So there is some issue there when using display:table and display:table-cell and also adding content.
In order to avoid using an actual table for layout and all the consequences related to them, it is possible to position the center part using absolute layout as follows,
http://jsfiddle.net/eH2m6/show/
http://jsfiddle.net/eH2m6/
css
div {
height: 178px;
}
#wrapper {
/* display: table;
table-layout: fixed; */
width: 100%;
}
#left, #right {
/* display: table-cell; */
/*the following will make #left and #right take full width*/
float:left;
width:50%;
}
#center {
width: 1100px;
/*the following will position #center in the center*/
position:absolute;
left:50%;
margin-left:-550px;
}
#left {
background: url(http://dentaliran.ir/left.gif) repeat-x;
}
#center {
background: url(http://dentaliran.ir/center.gif) no-repeat center center;
}
#right {
background: url(http://dentaliran.ir/right.gif) repeat-x;
}
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:85px;
right:30px;
}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:110px;
right:30px;
}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}
body{
margin:0px;
}
has been tested in ie8,ie9,chrome32.x,ff25.x