I have a menu and a logo on the header, and I am struggling to make the logo to be at the far edge of the left side of the website and the menu to the edge of the right side.
The problem is, when both of them are displayed as inline-block which means they are going to float to the default orientation which is left, I can't figure out a way to change this, please help.
Here's the CSS code:
/*Header*/
.wrapperHeader{
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
width: 100%;
padding: 15px 0px;
z-index: 1000;
}
.content{
width: 1000px;
max-width: 100%;
margin: auto;
}
.header-logo, #logoImage{
width: 250px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
/*Main Menu*/
.header-menu{
width: 690px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
#MainMenu li{
position: relative;
padding: 15px;
display: inline-block;
right: 0px;
}
Note: in the html, the logo is in a section and the menu is in anther section and both of them are inside a divide.
HTML code:
<header>
<div class="wrapperHeader">
<div class="content">
<section class="header-logo">
<img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/>
</section>
<section class="header-menu">
<nav id="MainMenu">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li id="PortfolioMenu"><a id="Portfolio" href="#">Portfolio</a>
<ul class="subMenu">
<li>Web Design</li>
<li>Visual Identity</li>
<li>Photography</li>
</ul>
</li>
<li>Testimonials</li>
<li>About Me</li>
<li>Get In Touch</li>
<li><a class="getStartedButton" href="get-started.html">Get Started</a></li>
</ul>
Menu<p id="SmartMenu-logo">LOAI Design Studio</p>
</nav>
</section>
</div>
</div>
</header>
Here I've edited your CSS code, so you can try this
/*Header*/
.wrapperHeader{
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
padding: 15px 0px;
z-index: 1000;
overflow: hidden;
}
.content{
width: 1000px;
margin: auto;
}
.header-logo, #logoImage{
width: 250px;
float: left;
}
/*Main Menu*/
.header-menu{
width: 690px;
float: right;
}
#MainMenu ul{
margin: 0;
padding: 0;
list-style: none;
}
#MainMenu li{
position: relative;
padding: 5px 15px;
float: left;
list-style: none;
}
li#PortfolioMenu{
padding: 0;
}
li#PortfolioMenu > a{
padding: 5px 15px;
}
ul.subMenu{
display: none;
position: absolute;
}
li:hover ul.subMenu{
display: block;
}
I've used float:left; for the logo, float:right; for the header-menu, removed display:inline-block; and did some other fixes ...
Hope this will help you ...
I would float logo section left, float menu section right and then clear the wrapper using clear:both. Remove the inline-block for this to work properly.
Related
I'm trying to make my menu / navigationbar to center horizontally. I can't quite figure out what I've done wrong / forgotten. Also after my last li is right padding. How do I remove it?
HTML
<div class="wrapper">
<div class="header"></div>
<div class="Header"></div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
CSS
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
text-align: center;
border: 1px red solid;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
padding-left: 20%;
padding-right: 18%;
min-width: 80%;
max-width: 80%;
}
.menu li {
float: left;
display: block;
padding-right: 5%;
}
.menu li:after {
content: '/';
padding-left: 20px;
}
https://jsfiddle.net/sdzLn5hd/
Well, first of all, are you sure this is how your HTML code should be?
<div class="Header">
</div>
<ul class="menu">
<li>Home </li>
<li>Over mij </li>
<li>Mijn diensten </li>
<li>Contact </li>
</ul>
instead of :
<div class="Header">
<ul class="menu">
<li>Home </li>
<li>Over mij </li>
<li>Mijn diensten </li>
<li>Contact </li>
</ul>
</div>
I'd suggest you to check this first.
Secondly, your menu is centered (the menu-items are not. Maybe that's what you meant). Just taking a look at your CSS and adding background-color to it makes it all clear.
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
float: left;
display: block;
padding-right: 5%;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
div.wrapper {
background-color: orange;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
</div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Now, onto the solutions, I am not sure what exactly you are looking for, but I can suggest you two possible solutions.
Solution 1:
Modify the .menu li class as below :
.menu li {
display: block;
text-align: center;
}
See this below :
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
display: block;
text-align: center;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
Solution 2:
Modify the .menu and .menu li class as below :
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
text-align: center; /*Add this property*/
}
.menu li {
display: block;
text-align: center;
}
See this below :
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
text-align: center;
}
.menu li {
display: inline-block;
text-align: center;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
To remove padding from the last li item, you need to target it:
.menu li:last-child {
padding-right: 0;
}
Looking at your code, I can't really figure out what is that you need. Html is all messed up. Why do you close header div before menu?
Change the li to display inline-block, target the last of the li's with :last-child:
.menu {
text-align:center;
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
display:inline-block;
padding-right: 5%;
}
.menu li:last-child {
padding-right: none;
}
JSFiddle Demo
Here is the best I could do. I added flexbox style to the ul, and removed some padding to get it centered.
fiddle: https://jsfiddle.net/sdzLn5hd/7/
HTML
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
</div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:flex;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
margin:auto;
display: block;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
https://jsfiddle.net/sdzLn5hd/9/ something like this perhaps is what you're looking for
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
removing some unneeded tags in your html
put in your .menu
.menu { text-align:center; }
.menu li {
display: inline-block;
padding-right: 5%;
}
Your float:left will always send the elements to their furthest left possible.
and add this line in your css (remove the last '/' and padding)
.menu li:last-child:after {
content: '';
padding-left: 0px;
}
see here: https://jsfiddle.net/sdzLn5hd/5/
To center text and inline elements, a block parent should have text-align: center applied.
Since you have this tagged as HTML5, I would like to provide you with a more semantic approach to your HTML too. There were a lot of extra styling properties left over from you trying to get this to work, so I re-wrote your CSS thus far (including a few more changes that I try to explain in comments). You can see my code in the snippet below:
* { margin: 0px; padding: 0px; } /* Simple CSS reset */
header { display: block; text-align: center; }
h1,
nav > ul {
display: inline-block;
border: 1px red solid;
padding: 20px 0px;
width: 80%;
}
nav > ul { border-top: none; }
nav > ul > li { display: inline; }
nav > ul > li:after { content: "/" }
nav > ul > li:last-child:after { content: "" } /* Remove trailing separator */
nav > ul > li > a {
padding: 15px; /* Padding here is important for touch */
color: black;
text-decoration: none;
}
nav > ul > li > a:hover { text-decoration: underline; }
<header>
<h1>Title</h1>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
Is there a better way of making footer menu for responsive? rather than duplicating and display: none; in the css?
Here are my attempts:
<header class="row">
<div class="container">
<div class="col-12 columns">
<img src="images/logo.png" alt="" class="logo">
Navigation
<nav role="primary" >
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
Footer nav. Commented out the nav for the purpose of this question.
<nav role="secondary_menu">
<!-- <ul id="nav2">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav> -->
<footer id="footer">
<div class="container">
<p>Created by: </p>
</div>
</footer>
CSS:
a.nav-link{
float: right;
text-align: center;
text-decoration: none;
background: #808080;
color:#fff;
font-weight: bold;
padding:1em 2em;
margin-top: 1.5em;
}
nav[role="primary"] ul{
list-style-type: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
nav[role="primary"] ul li a{
text-decoration: none;
font-weight: bold;
background: #3c3c3c;
display: block;
padding:.75em;
color:#ccc;
border-bottom: 1px solid #ccc;
}
.container .columns{
float: left;
margin: 0 0 0 0;
padding-right: 1em;
padding-left: 1em;
}
.row{
float: left;
clear: both;
width: 100%;
}
.columns.col-12 { width: 100%; }
So the codes above shows when the screen is below 600px however this way it pushes the footer the menu rather than at the bottom, Sure I positioned the footer absolute but it just sits above the menu rather than under it. So I made another attempt which I duplicated the nav and just hiding the when its below 600px.
position:none
position:absolute
Trying to achieve without duplicating and remove whitespace
I saw your main nav was set to position: absolute. I would suggest looking at CSS templates to see how they structure things like footers. For example, http://bootswatch.com/default/ Try this CSS:
a.nav-link{
float: right;
text-align: center;
text-decoration: none;
background: #808080;
color:#fff;
font-weight: bold;
padding:1em 2em;
margin-top: 1.5em;
}
nav[role="primary"] ul{
list-style-type: none;
bottom: 0;
left: 0;
width: 100%;
}
nav[role="primary"] ul li a{
text-decoration: none;
font-weight: bold;
background: #3c3c3c;
display: block;
padding:.75em;
color:#ccc;
border-bottom: 1px solid #ccc;
}
.container .columns{
margin: 0 0 0 0;
padding-right: 1em;
padding-left: 1em;
}
.row{
margin-right: -15px;
margin-left: -15px;
clear: both;
width: 100%;
}
.columns.col-12 { width: 100%; }
I am wanting to display <li>'s as squares in a horizontal line, and have nested squares within them positioned at the bottom left and bottom right of the containing square.
____________ ____________
| | | |
|___ ___| |___ ___|
|_x_|__|_y_| |_x_|__|_y_| etc
I tried adding span's to the <li> but wasn't able to position them correctly.
I've gotten closer with a nested <ul> and two <li>'s within the nested <ul> but there is undesired space between the top level squares.
How do I get control of the spacing between the top level <li>'s?
jsFiddle
http://jsfiddle.net/rwone/4Hzp6/
HTML
<ul class="images_list">
<li class="style_one"><img src="http://dummyimage.com/50/ccc/fff&text=1.png">
<ul class="nested"><li class="delete_span"></li><li class="crop_span"></li></ul>
</li>
<li class="style_one"><img src="http://dummyimage.com/50/ccc/fff&text=2.png">
<ul class="nested"><li class="delete_span"></li><li class="crop_span"></li></ul>
</li>
<li class="style_one">
<img src="http://dummyimage.com/50/ccc/fff&text=3.png">
<ul class="nested"><li class="delete_span"></li><li class="crop_span"></li></ul>
</li>
<li class="style_one">
<img src="http://dummyimage.com/50/ccc/fff&text=4.png">
<ul class="nested"><li class="delete_span"></li><li class="crop_span"></li></ul>
</li>
<li class="style_one">
<img src="http://dummyimage.com/50/ccc/fff&text=5.png">
<ul class="nested"><li class="delete_span"></li><li class="crop_span"></li></ul>
</li>
</ul>
CSS
ul.images_list {
list-style: none;
margin: 0px !important;
padding: 0px !important;
}
ul.nested {
margin: 0px !important;
padding: 0px !important;
display: inline;
position: relative;
left: -54px;
}
li.style_one {
position:relative;
display:inline-block;
/*width: 50px;
height:50px*/
}
.delete_span {
width: 15px;
height: 15px;
background: red;
display: inline-block;
}
.crop_span {
width: 15px;
height: 15px;
background: green;
display: inline-block;
position: relative;
left: 20px;
}
It seams that the problem come from user agent stylesheet (on chrome). Chrome is adding a rules This SO question is talking about it.
It suggest to add ul { padding:0 } but that is not working on your case..
But It might get you on the direction.
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;//I guess this one is the problem
}
I have tried to override this rules adding !important but it doesn't work.
This achieves the behaviour of what I wanted, I used div's within <li>'s:
http://jsfiddle.net/rwone/4Hzp6/6/
HTML
<ul class="images_list">
<li class="style_one"><img src="http://dummyimage.com/50/ccc/fff&text=1.png">
<div class="crop_it"></div><div class="delete_it"></div>
</li>
<li class="style_one"><img src="http://dummyimage.com/50/ccc/fff&text=2.png">
<div class="crop_it"></div><div class="delete_it"></div>
</li>
<li class="style_one">
<img src="http://dummyimage.com/50/ccc/fff&text=3.png">
<div class="crop_it"></div><div class="delete_it"></div>
</li>
<li class="style_one">
<img src="http://dummyimage.com/50/ccc/fff&text=4.png">
<div class="crop_it"></div><div class="delete_it"></div>
</li>
<li class="style_one">
<img src="http://dummyimage.com/50/ccc/fff&text=5.png">
<div class="crop_it"></div><div class="delete_it"></div>
</li>
</ul>
CSS
ul.images_list {
list-style: none;
margin: 0px !important;
padding: 0px !important;
}
li.style_one {
display: inline-block;
height: 50px;
margin-left: 15px;
position: relative;
width: 50px;
}
li.style_one:first-child {
margin-left: 0px;
}
.crop_it {
background: none repeat scroll 0 0 #FF0000;
bottom: 0;
display: inline-block;
height: 15px;
left: 0;
position: absolute;
width: 15px;
z-index: 9;
}
.delete_it {
background: none repeat scroll 0 0 #008000;
bottom: 0;
display: inline-block;
height: 15px;
left: 35px;
position: absolute;
width: 15px;
}
Simple just change the class ul.nested position relative to position absolute and little bit changes in left and top or copy paste the code below:
CSS CODE:
ul.images_list {
list-style: none;
margin: 0px !important;
padding: 0px !important;
}
ul.nested {
margin: 0px !important;
padding: 0px !important;
display: inline;
position: absolute;
left: 0px;
top: 34px;
}
li.style_one {
position:relative;
display:inline-block;
/*width: 50px;
height:50px*/
}
.delete_span {
width: 15px;
height: 15px;
background: red;
display: inline-block;
}
.crop_span {
width: 15px;
height: 15px;
background: green;
display: inline-block;
position: relative;
left: 20px;
}
I have following code:
<div class="settingsMenu" style="top: 135px; left: 149px; display: block;">
<ul>
<li class="download" onclick="downTemplate('template1')">Download</li>
<li class="delete" onclick="showConfirmationDialog ($(this))">
Delete
<div class="deleteItemConfirmation">
<div class="confirmationText">Are you sure?</div>
<div class="buttons"><button onclick="deleteTemplate ('template1')">Yes</button> <button onclick="hideConfirmationDialog();">No</button></div>
</div>
</li>
<li class="info">Info</li>
</ul>
</div>
CSS:
.settingsMenu{
position: absolute;
top: 0;
left: 0;
display: none;
background-color: #FFFFFF;
border: 1px solid #b5044a;
border-radius: 5px;
width: 150px;
padding: 10px 0;
margin: 0;
z-index: 200;
}
.settingsMenu ul{
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0;
}
.settingsMenu ul li {
color: #000000;
cursor: pointer;
float: left;
font-size: 14px;
font-weight: normal;
font-family: Arial;
height: 18px;
max-width: 100px;
margin: 5px 20px;
padding: 0;
display: block;
padding-left: 30px;
}
.settingsMenu ul li.edit{
background: url("../img/edit-context-menu-icon.svg") no-repeat scroll center left white;
}
.settingsMenu ul li.delete{
background: url("../img/delete-context-menu-icon.svg") no-repeat scroll center left white;
}
.settingsMenu ul li.info{
background: url("../img/info-context-menu-icon.svg") no-repeat scroll center left white;
}
Problem is: while div.deleteItemConfirmation has "display: none;" everything is displaying correctly, when it`s display property becomes "display: block;" strange space appears before text of
<li>Delete</li>
Try changing
<li class="delete" onclick="showConfirmationDialog ($(this))">
Delete
To
<li class="delete" onclick="showConfirmationDialog ($(this))">Delete
Could this help you out:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
or with comments...
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
I took the idea from http://css-tricks.com/fighting-the-space-between-inline-block-elements/ and helped me in a few similar situations.
#Menu
{
position: relative;
width: 90%;
margin: 0 auto;
height; 50px;
min-height: 50px;
padding: 5px;
}
And children blocks:
#MenuItem
{
position: relative;
float: left;
margin: 0 auto;
margin-top: 2px;
margin-left: 5px;
margin-right: 5px;
text-align: center;
width: 142px;
height: 37px;
}
And html:
<div id="Menu">
<div id="MenuItem"><span>Home</span></div>
<div id="MenuItem"><span>Home</span></div>
<div id="MenuItem"><span>Home</span></div>
</div>
How to make MenuItem divs to be centrated horizontally in parent div?
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
and here is the css
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
The following code should do it
#Menu
{
position: relative;
width: 90%;
margin: 0 auto;
height; 50px;
min-height: 50px;
padding: 5px;
text-align: center; /* added this rule */
}
#MenuItem
{
position: relative;
display: inline-block; /* changed from float:left */
margin: 0 auto;
margin-top: 2px;
margin-left: 5px;
margin-right: 5px;
text-align: center;
width: 142px;
height: 37px;
}
Also, I would recommend you'd use
<ul id="Menu">
<li>...</li>
<li>...</li>
</ul>
instead of the nested divs.