I'm working on my homepage and I'm trying two get a header with 3 columns.
The first column should be a logo, the second a navigation menu and the third a language switcher.
The nav and the lang. switcher should be align to the right and have auto width (so only the width needed by the content).
The img should be floated to the left and should fill the empty width (!but not bigger than 100% of the img width and with max-height!)
If the browser width gets smaller, than the img should be shrinked, but the right contents should be the same size.
.frame {
max-width: 90%;
height: 75px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
#top-header {
width: 100%;
height: 100px;
position: fixed;
z-index: 100;
text-transform: uppercase;
font-weight: bold;
background-color: #CCC;
}
#top-header .frame {
position: relative;
top: 10px;
}
#top-header .frame div {
white-space: nowrap;
}
#top-header .frame > div,
nav {
float: right;
}
#top-header .frame > div:first-child {
float: left;
max-width: 60%;
}
#mainmenu {
position: relative;
top: 25px;
}
#mainmenu .moduletable {
display: block;
position: static;
}
#mainmenu ul.nav.menu {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
margin: 0;
padding: 0;
list-style-type: none;
}
#mainmenu ul.nav.menu li {
font-size: .92rem;
-ms-flex: 1 1 auto;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
position: relative;
}
#mainmenu ul.nav.menu li a {
display: block;
margin: 10px;
}
<body>
<header id="top-header">
<div class="frame">
<div id="logo">
<div class="moduletable">
<div class="custom">
<p>
<img alt="logo" src="http://lorempixel.com/1637/100">
</p>
</div>
</div>
</div>
<div id="language-switcher"></div>
<nav id="mainmenu">
<div class="moduletable">
<ul class="nav menu">
<li class="item-101 current active"> Home
</li>
<li class="item-102 deeper parent"> About us
</li>
<li class="item-103"> XXXXXXXX
</li>
<li class="item-104"> XXXXXX
</li>
</ul>
</div>
</nav>
</div>
</header>
</body>
Here's an example of my current try at jsFiddle
Thanks and have a nice day :)
I think i understand now.
I changed your layout to work similar to a table with
dislpay:table
for the #top-header .frame
and dislpay:table-cell
for the logo and the menu
here is the fixed jsFiddle
Related
I'm quite new to HTML and CSS. I have a list that serves as a navigation bar for a website, which is inside the div "inner header." I was able to align the "nav" container (in teal) to the right edge of the "inner header" container, but I am struggling to do the same for the items within nav (in red).
Containers Appearance
Essentially, I would like the text to align with the teal on the right side, but I noticed no matter what I do, the red will not expand. I've tried changing width to 100%, but that causes each word to separate into three rows (possible due to the display type?).
If I add width: 98px, it gets closer to my desired outcome, but it doesn't perfectly align with the teal.
Close to desired outcome
Any advice is appreciated!
.inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
background-color: #8ecae6;
display: flex;
justify-content: center;
align-items: center;
}
.nav {
float: right;
height: 100%;
width: 70%;
background-color: teal;
text-align: right;
}
.nav a {
height: 100%;
display: table;
table-layout: fixed;
float: left;
padding: 0px 20px;
background-color: red;
overflow: hidden;
width: 98px;
}
.nav a:last-child {
padding-right: 0px;
}
.nav a li {
display: table-cell;
vertical-align: middle;
height: 100%;
font-family: 'Montserrat';
font-weight: 300;
}
<div class="header">
<div class="inner_header">
<div class="logo_container">
<img src=".png">
<img src=".jpeg">
</div>
<p>Text <br> Text</p>
<ul class="nav">
<a>
<li>Home</li>
</a>
<a>
<li>Data</li>
</a>
<a>
<li>Tool</li>
</a>
</ul>
</div>
</div>
I still don't understand what you wanted, I'm just taking a guess here and tried to get the result closer to your screenshot and based on what you explained.
.inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
background-color: #8ecae6;
display: flex;
justify-content: center;
align-items: center;
}
.nav {
float: right;
height: 100%;
width: 70%;
display: table;
background-color: teal;
text-align: right;
padding:0;
}
.nav a {
height: 100%;
display: table-cell;
padding: 0px 20px;
background-color: red;
overflow: hidden;
width: auto;
}
.nav a:last-child {
padding-right: 0px;
}
.nav a li {
display: table-cell;
vertical-align: middle;
height: 100%;
font-family: 'Montserrat';
font-weight: 300;
}
<div class="header">
<div class="inner_header">
<div class="logo_container">
<img src=".png">
<img src=".jpeg">
</div>
<p>Text <br> Text</p>
<ul class="nav">
<a>
<li>Home</li>
</a>
<a>
<li>Data</li>
</a>
<a>
<li>Tool</li>
</a>
</ul>
</div>
</div>
At the beginning I want to say that I just study frontend so I need to help with something.
I want to prepare some tab slider.
I have something in left and right so my tab slider will be on center.
My tab slider have two buttons: < and > (slide to left; slide to right).
In my tab slider are a lot of elements which sum of widths exceeds a max-width of parent div (it has "content" class).
I want to hide all elements which are out of parent div bounds so I try to use
overflow: hidden;
but unfortunately those elements fell to second row.
div.menu {
width: 100%;
display: block;
float: left;
}
div.content {
display: inline-block;
width: 50%;
max-width: 50%;
background-color: lightgray;
max-height: 40px;
overflow: hidden;
}
div.left,
div.right {
display: inline-block;
width: 24%;
background-color: green;
}
div.flex {
display: flex;
}
ul,
li {
display: inline-block;
}
li {
background-color: yellow;
width: 30px;
}
<div class="menu">
<div class="left">something in left</div>
<div class="content">
<div class="flex">
<i><</i>
<ul>
<li>i-1</li>
<li>i-2</li>
<li>i-3</li>
<li>i-4</li>
<li>i-5</li>
<li>i-6</li>
<li>i-7</li>
<li>i-8</li>
<li>i-9</li>
<li>i-10</li>
<li>i-11</li>
<li>i-12</li>
<li>i-13</li>
<li>i-14</li>
<li>i-15</li>
<li>i-16</li>
</ul>
<i>></i>
</div>
</div>
<div class="right">something in right</div>
</div>
What I'm doing wrong?
I expect that if I use overflow and max-height my exceeds elements will be hide (on right - on one row) and not will be fall to second row.
There is my example.
Will you help me with that?
You need to use white-space: nowrap in .flex so that all items remains in the same line
div.menu {
width: 100%;
display: block;
float: left;
}
div.content {
display: inline-block;
width: 50%;
max-width: 50%;
background-color: lightgray;
max-height: 40px;
overflow: hidden;
}
div.left,
div.right {
display: inline-block;
width: 24%;
background-color: green;
}
div.flex {
display: flex;
white-space: nowrap;
position: relative;
}
ul {
padding-left: 10px;
padding-right: 10px;
}
ul,
li {
display: inline-block;
}
li {
background-color: yellow;
width: 30px;
}
.flex i {
position: absolute;
top: 10px;
}
.flex i.prev {
left: 0;
}
.flex i.next {
right: 0;
}
<div class="menu">
<div class="left">something in left</div>
<div class="content">
<div class="flex">
<i class="prev"><</i>
<ul>
<li>i-1</li>
<li>i-2</li>
<li>i-3</li>
<li>i-4</li>
<li>i-5</li>
<li>i-6</li>
<li>i-7</li>
<li>i-8</li>
<li>i-9</li>
<li>i-10</li>
<li>i-11</li>
<li>i-12</li>
</ul>
<i class="next">></i>
</div>
</div>
<div class="right">something in right</div>
</div>
I have an inline-block nav element that needs to be centered inside its parent container. But because the width is auto (because I need it to shrink to its content), I can't center it.
And I can't use text-align: center because I don't want the text content to be centered. I just want the mainNavigation element to be centered.
http://jsfiddle.net/vpvzmg3j/3/
How can I center this thing?
*{margin:0;padding:0;}
#mainNavigation
{
display: inline-block;
width: auto;
height: auto;
margin: 0 auto;
background-color: blue;
}
#mainNavigation div
{
width: auto;
float: left;
}
#mainNavigation div p
{
float: left;
width: 100%;
}
#mainNavigation div ul
{
width: auto;
height: auto;
float: left;
}
#mainNavigation div ul li
{
list-style-type: none;
display: inline;
}
<nav id="mainNavigation">
<div id="homeMenuContainer">
<p class="noDisplay">Home</p>
<ul id="homeMenu">
<li>Home</li>
</ul>
</div>
<div id="helpAndSupportMenuContainer">
<p>Help & Support</p>
<ul id="helpAndSupportMenu">
<li>User Guides</li>
<li>Video Tutorials</li>
</ul>
</div>
<div id="myAccountMenuContainer">
<p>My Account</p>
<ul id="myAccountMenu">
<li>Sign In</li>
<li>Register</li>
</ul>
</div>
</nav>
Is this what you are looking for?
The code updates :
#mainNavigation {
text-align: center; /*this does the trick with its child*/
height: auto;
width: 100%;
margin: 0 auto;
}
#mainNavigation div {
/*you said you want them on the left side*/
text-align: left;
background-color: blue;
display: inline-block;
vertical-align: middle;
margin-left: -4px; /*inline-block space remove*/
}
Demo: http://jsfiddle.net/vpvzmg3j/9/
add blow changes, that will center align the nav and same time left align the content:
#mainNavigation{text-align: left;}
.center-div{text-align:center;}
HTML
<div class="center-div"> <nav id="mainNavigation"> .....</nav> </div>
I'm working on a navigation bar that needs to display multiple divs side by side. But the parent div doesn't have a fixed width. Just some padding. So the question is how can I achieve this?
.nav {
width: 100%;
height: 50px;
}
.nav ul {
width: 100%;
height: 50px;
}
.nav ul li {
display: inline;
list-style-type: none;
background: gray;
padding: 10px 30px;
margin: 0 10px;
height: 100%;
position: relative;
}
#container {
position: absolute;
left: 0;
top: 100%;
background: black;
padding: 10px;
}
#container .category {
position: relative;
display: inline-block;
width: 50px;
height: 80px;
}
<div class="nav">
<ul>
<li>AB
<div id="container">
<div class="category" style="background: #4285f4;"></div>
<div class="category" style="background: #ea4335;"></div>
<div class="category" style="background: #fbbc05;"></div>
<div class="category" style="background: #34a853;"></div>
</div>
</li>
<li>CD</li>
<li>EF</li>
<li>GH</li>
</ul>
</div>
Those four colored divs must be inline.
You can use display: flex on the #container element. The default direction for the elements inside a container with display set to flex is row. So the elements go from left to right.
.nav {
width: 100%;
height: 50px;
}
.nav ul {
width: 100%;
height: 50px;
}
.nav ul li {
display: inline;
list-style-type: none;
background: gray;
padding: 10px 30px;
margin: 0 10px;
height: 100%;
position: relative;
}
#container {
position: absolute;
left: 0;
top: 100%;
background: black;
padding: 10px;
display: none;
}
.nav li:hover > #container {
display: flex;
}
#container .category {
position: relative;
display: inline-block;
width: 50px;
height: 80px;
}
<div class="nav">
<ul>
<li>AB
<div id="container">
<div class="category" style="background: #4285f4;"></div>
<div class="category" style="background: #ea4335;"></div>
<div class="category" style="background: #fbbc05;"></div>
<div class="category" style="background: #34a853;"></div>
</div>
</li>
<li>CD</li>
<li>EF</li>
<li>GH</li>
</ul>
</div>
I have a div with its content (list inside),
<div id="container">
<ul id="list">
<li>
<div class="title">
something
</div>
<div class="text">
something again
</div>
</li>
<li>
<div class="title">
something
</div>
<div class="text">
something again
</div>
</li>
</ul>
</div>
And my items from list are displayed float:left, and I want to the div container expand in height as its content.
#container{
position: relative;
width: 100%;
padding-bottom: 30px;
}
#list{
position: relative;
padding-top: 80px;
width: 95%;
/*height: 100%;*/
padding-bottom: 10px;
}
#list li{
position: relative;
float: left;
list-style: none outside none;
width: 20%;
height: 170px;
/*border:1px solid black;*/
}
You have several options:
Clearfix on the container:
#container:after {
clear: both;
content: "";
display: table;
}
The use of overflow:
#container {
overflow: hidden; /* or: auto | scroll */
}
Float the container:
#container {
float: left;
}
Using inline-block instead of float for the list items:
#container ul li {
display: inline-block;
float: none;
}
Try this approach...
li {
display: inline-block;
float: none; /* only if you have this set as you mentioned in your post */
}
#container {
height: auto;
}