Consider this markup:
<nav>
<div id="logo"><img src="logo.png" height="44PX"/></div>
<ul id="navItems">
<li>Link1</li>
<li>Link2</li>
</ul>
</nav>
I used this css code for styling:
#navItems
{
display:flex;
z-index:1;
position:fixed;
top:0;
background-color:#333;
width:92%;
height:44px;
list-style-type:none;
}
How to place the logo on the left, just next to the navbar?
If you're using display:flex, can't you just use display:inline-flex?
#logo {
display: inline-flex;
}
#navItems
{
display:inline-flex;
z-index:1;
position:fixed;
top:0;
background-color:#333;
width:92%;
height:44px;
list-style-type:none;
}
<nav>
<div id="logo"><img src="logo.png" height="44PX"/></div>
<ul id="navItems">
<li>Link1</li>
<li>Link2</li>
</ul>
</nav>
I made you the simplest possible navbar
DEMO
html,
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul img {
height: 50px;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
<nav>
<ul>
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" alt="">
<li>Link1
</li>
<li>Link2
</li>
</ul>
</nav>
Related
I need some help with my code. I created a drop-down navigation menu. But when I hover over the sub-menus it pushes the main content of my website down. I don't want that. I want to be able to look at the sub-menus without infecting any of my main content. If I hover the menu it is pushing the other parts of the menu down. I like that, but when I tried to use position absolute, it isn't moving the other parts of the menu down anymore.
(Sorry for my bad English)
A part of the html code:
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>Trajecten
<ul class="submenu">
<li>Sport</li>
<li>Techniek</li>
<li>Moderne Menia</li>
<li>Fast Lane English</li>
</ul>
</li>
<li>2017/18
<ul class="submenu">
<li>Examenreis Berlijn</li>
<li>Examenreis Londen</li>
<li>Examenreis Parijs</li>
<li>Introductie</li>
</ul>
</li>
<li>2016/17
<ul class="submenu">
<li>Diploma uitreiking Havo</li>
<li>Diploma uitreiking Mavo</li>
<li>Introductie</li>
<li>Open Dag</li>
</ul>
</li>
</ul>
</nav>
<center>
<p id="content">2017/18</p>
<img id="picture" src="images/2017,18/Berlijn.jpg">
</center>
Css code:
#content{
font-size: 25px;
position:relative;
top: 25px;
}
#picture{
width: 285px;
position:relative;
top: 30px;
}
html, body {
font-family: Arial, Helvetica, sans-serif;
}
/* Navigatie */
.navigation {
position: relative;
top: 100px;
width: 230px;
}
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu a:hover {
background-color: #C5C5C5;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 420px;
}
.submenu a {
background-color: #999;
text-align: center;
}
.submenu a:hover {
background-color: #666;
}
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.8s ease-out;
}
body{
display:flex;
flex-direction:row;
}
#content{
font-size: 25px;
}
#picture{
width: 285px;
}
html, body {
font-family: Arial, Helvetica, sans-serif;
}
/* Navigatie */
.navigation {
width: 230px;
}
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu a:hover {
background-color: #C5C5C5;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 420px;
}
.submenu a {
background-color: #999;
text-align: center;
}
.submenu a:hover {
background-color: #666;
}
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.8s ease-out;
}
center{
width:calc(100% - 230px);
display:flex;
flex-grow:1;
text-align:center;
flex-direction:column;
align-items: center;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>Trajecten
<ul class="submenu">
<li>Sport</li>
<li>Techniek</li>
<li>Moderne Menia</li>
<li>Fast Lane English</li>
</ul>
</li>
<li>2017/18
<ul class="submenu">
<li>Examenreis Berlijn</li>
<li>Examenreis Londen</li>
<li>Examenreis Parijs</li>
<li>Introductie</li>
</ul>
</li>
<li>2016/17
<ul class="submenu">
<li>Diploma uitreiking Havo</li>
<li>Diploma uitreiking Mavo</li>
<li>Introductie</li>
<li>Open Dag</li>
</ul>
</li>
</ul>
</nav>
<center>
<p id="content">2017/18</p>
<img id="picture" src="images/2017,18/Berlijn.jpg">
</center>
made a few changes,
now it's better centerd
you can make one of the menus open if you use js
Try this:
CSS
nav, center{
display: inline-block;
vertical-align: top;
}
center{
position: relative;
top: 100px;
}
Note: <center> tag is obsolete in HTML5
DEMO HERE
I've added a transparent mask on my background image. The 1st layer will be my navigation bars, contents. Second layer will be the transparent mask, and last layer will be the background image. I manage to make my navigation bar to stay in front of the transparent mask, but now I'm unable to click on the navigation.
HTML:
<body>
<div id="top">
<div id="mask"></div>
<ul>
<li>RACHEL LIM</li>
<li style="float:right">CONTACT</li>
<li style="float:right">GALLERY</li>
<li style="float:right">ABOUT ME</li>
<li style="float:right"><a class="active" href="index.html">HOME</a></li>
</ul>
<h1>I'M A CAT LOVER.</h1>
</div>
</body>
CSS:
body {
font-family:Calibri;
font-size:18px;
margin:0px;
}
#top{
background-image:url(https://static1.squarespace.com/static/5376a044e4b0cf50765bdde1/t/5377554ae4b0aefc671d7dcc/1400329549490/typewriter.jpg);
background-size: 100%;
position:relative;
height:100vh;
z-index:-10;
}
#mask{
position:absolute;
background-color:rgba(0,0,0,0.4);
height:100%;
width:100%;
z-index:-5;
}
ul {
list-style-type: none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
padding:20px;
}
li a {
display:block;
color:#EDECEA;
text-align:center;
padding:14px 16px;
text-decoration: none;
}
li a:hover {
color: white;
}
.active{
color: white;
}
h1{
font-size:100px;
color:white;
text-align:center;
}
I suggest to not use negative z-index in this scenario, as it will make things a lot more complicated. Instead remove all the z-indexes and set the position of your list and headline to relative.
body {
font-family: Calibri;
font-size: 18px;
margin: 0px;
}
#top {
background-image: url(https://static1.squarespace.com/static/5376a044e4b0cf50765bdde1/t/5377554ae4b0aefc671d7dcc/1400329549490/typewriter.jpg);
background-size: 100%;
position: relative;
height: 100vh;
/*z-index: -10;*/
}
#top > * {
position: relative;
}
#mask {
position: absolute;
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
width: 100%;
/*z-index: -5;*/
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
padding: 20px;
}
li a {
display: block;
color: #EDECEA;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: white;
}
.active {
color: white;
}
h1 {
font-size: 100px;
color: white;
text-align: center;
}
<div id="top">
<div id="mask"></div>
<ul>
<li>RACHEL LIM
</li>
<li style="float:right">CONTACT
</li>
<li style="float:right">GALLERY
</li>
<li style="float:right">ABOUT ME
</li>
<li style="float:right"><a class="active" href="index.html">HOME</a>
</li>
</ul>
<h1>I'M A CAT LOVER.</h1>
</div>
I am trying to set the background to go horizontally across this bar to be behind the logo and nav
Here is the HTML
<!--NAV-->
<div class="header">
<div class="title">
<img src="img/logo.png">
</div><!--/.title-->
<nav class="nav">
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
and here is the css
.title
{
display:inline;
float:left;
margin:0 auto;
}
.nav
{
font-size:20px;
color:#0F3;
display:inline;
float:right;
margin:0 1.7%;
padding:1% 4% 0;
}
ul
{
display:inline;
float:right;
list-style:none;
}
li
{
display:inline;
}
You can modify .header class.
Keep in mind that floating divs don't affect the size of the surrounding element. So you can use overflow: auto; in header class to make the surrounding element take the floating elements in consideration:
Example
.header {
background: url(http://lorempixel.com/800/100/abstract/);
width: 100%;
overflow: auto;
}
img {
padding: 12px;
}
.title {
display: inline;
float: left;
margin: 0 auto;
}
.nav {
font-size: 20px;
color: black;
text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);
display: inline;
float: right;
margin: 0 1.7%;
padding: 0 4%;
padding-top: 1%;
margin-bottom: 0;
}
ul {
display: inline;
float: right;
list-style: none;
}
li {
display: inline;
}
<div class="header">
<div class="title">
<img src="http://lorempixel.com/100/40/people/">
</div>
<!--/.title-->
<nav class="nav">
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
I have wasted too much energy and time trying to create this footer in HTML/CSS, I just can't get it right. I was told the best way of doing this was using <ul> and <li>'s, but getting it aligning correctly is a challenge!
This is what it should look like
This is what my version looks like
What I've tried to do is the following: (CSS is below).
<div class="footer">
<div class="wrapper">
<div class="footer_container">
<ul>
<li><strong>Title/header</strong>
<ul>
<li>Adresse, street</li>
<li>Tlf: Phone</li>
</ul>
<ul class="right">
<li>Zipcode/City</li>
<li>Mail: Email</li>
</ul>
</li>
<li><strong>Links</strong>
<ul>
<li>Om skolen</li>
<li>Galleri</li>
</ul>
<ul>
<li>Elever</li>
<li>Forældre</li>
</ul>
<ul class="right">
<li>Kalender</li>
<li>Fag</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
.footer { background:url(images/footer_bg.png) top repeat-x #e4e2de; width:100%; padding:20px 0 30px 0; }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer ul li { display: inline; margin-left: 25px; }
.footer_container { margin:22px 0 0 0; }
.footer_container ul { margin:0; padding:0; color:#413f3d; width:100%; }
.footer_container ul li { display:inline-block; list-style:none; margin:0; font-size:11px; text-align:left; vertical-align:top; padding:0; width:270px; }
.footer_container ul li ul { width:120px; float:left; }
.footer_container ul li ul li { display:block; width:auto; }
.footer_container ul.right { float:right; }
I have inserted the 3 images yet as, the 2nd box doesn't look any good.
I'm open to any suggestions/idéas!
Thank you
I would change it up and instead use containers inside the footer instead.
HTML
<div class="footer_container">
<div class="container">
<strong>Title</strong>
<ul>
<li>Adresse</li>
<li>Tlf: Phone</li>
<li>Zipcode/City</li>
<li>Mail: Email</li>
</ul>
</div>
<div class="container">
<strong>Links</strong>
<ul>
<li>Om skolen</li>
<li>Elever</li>
<li>Kalender</li>
<li>Galleri</li>
<li>Forældre</li>
<li>Fag</li>
</ul>
</div>
<div class="container">
Your FB/Twitter things
</div>
</div>
CSS
.footer_container{
width: 960px;
}
.footer_container strong{
font-weight: bold;
}
.footer_container div.container{
width: 320px;
float: left;
}
.footer_container ul{
list-style: none;
margin: 0;
padding: 0;
}
.footer_container ul li {
width: 160px;
float: left;
}
Demo
Over at jsFiddle.
Using the following CSS, I'm trying to make a navigation bar at the top of the page (fixed to the top) but instead of it being on the absolute left of the screen, I want it centered.
ul#list-nav
{
position:fixed;
top:0;
left:0;
margin:auto;
padding:0px;
width:100%;
height:28px;
font-size:120%;
display:inline;
text-decoration:none;
list-style:none;
background-color: #1F1F1F;
border:none;
z-index:1000;
}
ul#list-nav li
{
float:left;
}
ul#list-nav a
{
background-color:#1F1F1F;
color:#C4C4C4;
/*display:block;*/
padding:5px 15px;
text-align: center;
text-decoration:none;
font-size:14px;
}
ul#list-nav a:hover
{
background-color:#4D4D4D;
text-decoration:none;
}
ul#list-nav a:active
{
background-color:#9C9C9C;
text-decoration:none;
}
Attempts so far make it a vertical list, or make the buttons start in the center (rather than be centered). How can I accomplish this?
EDIT: below is the HTML ... this list is the only thing being styled.
<ul id="list-nav">
<li>Home</li>
<li>Projects</li>
<li>Opinion</li>
<li>Humour</li>
<li>Games</li>
<li>Movies</li>
<li>TV Shows</li>
</ul>
EDIT2: here's a jsFiddle if this helps
http://jsfiddle.net/752jU/1/
You only need one wrapper div to accomplish this...
http://jsfiddle.net/752jU/5/
Note: By using display: inline my answer is also good in IE 6 & 7, if that matters.
CSS:
div#wrapper {
position: fixed;
top: 0;
width: 100%;
text-align: center;
height:28px;
background-color: #1F1F1F;
border: none;
z-index: 1000;
}
ul#list-nav {
padding: 0px;
width: auto;
font-size: 120%;
text-decoration: none;
list-style: none;
}
ul#list-nav li {
display: inline;
}
HTML:
<div id="wrapper">
<ul id="list-nav">
<li>Home</li>
<li>Projects</li>
<li>Opinion</li>
<li>Humour</li>
<li>Games</li>
<li>Movies</li>
<li>TV Shows</li>
</ul>
</div>
You need to insert the list in 3 nested divs:
In your css:
div#container1
{
position:fixed;
top:0;
left:0;
width:100%
}
div#container2
{
margin-left:auto;
margin-right:auto;
text-align: center;
}
div#container3
{
display:inline-block;
}
Then in your html:
<div id="container1">
<div id="container2">
<div id="container3">
<ul id="list-nav">
...
</ul>
</div>
</div>
</div>
See http://jsfiddle.net/jZQ4v/ for a version of your code that center properly
Use:
#list-nav {
padding: 0px;
height: 28px;
font-size: 120%;
margin: auto;
text-align: center;
list-style: none;
background-color: #1F1F1F;
border: none;
z-index: 1000;
}
#list-nav li {
display: inline;
text-align: center;
}
#list-nav a {
color: #C4C4C4;
background-color: #1F1F1F;
display: inline;
text-decoration: none;
padding: 5px 15px;
font-size: 14px;
}
#list-nav a:hover {
background-color: #4D4D4D;
text-decoration: none;
}
#list-nav a:active {
background-color: #9C9C9C;
text-decoration: none;
}
I removed all unnecessary coding which didn't alter the menu in any way.
See a live demo here: http://jsfiddle.net/YFDeX/1/
Edit: Altered for compatibility with IE6+
Hope this helps.