I would like to center the two containers horizontally on the site.
So that the menu with the logo on the right side and the contentblock should be centered.
I tried a lot of things, but nothing works.
Until now i worked with frames, but now i would like to use containers.
Can you please help me?
Thanks a lot!
Best regards, Ronny
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Containertest</title>
<style type="text/css">
body { margin:0; background-color: #333333;}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
/* background: url("ronny_logo.jpg"); */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}
/* MENU */
#main_menu{
margin:0px;
padding:0;
height: 150px;
/* width: 100%; /* Breite vom Hauptmenü Container */
padding: 0px 0;
/*overflow: hidden; Remove this*/
position: fixed;
background-color: black;
z-index: 2;
}
#main_menu li{
list-style: none;
float: left;
line-height: 30px;
margin-left: 10px;
width: 130px;
text-align: center;
margin-top: 120px;
position: relative;
}
#main_menu li a, #footer_menu li a {
color: #FFFFFF;
text-shadow: 0px 1px 1px #000;
display: block;
font-family: 'PT Sans', sans-serif;
text-decoration: none;
font-size: 12pt;
}
#main_menu .logo{
background: none;
width: 445px;
margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
text-decoration: underline;
}
#main_menu li .submenu{
display: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
left: 0;
top:100%;
}
#main_menu li .submenu:hover{
display: block;
}
#main_menu li a:hover + .submenu{
display: block;
}
#main_menu li .submenu li{
margin: 0;
padding: 0;
}
#main_menu li .submenu li a{
font-size: 9pt;
}
/* COLORS */
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }
/* CONTENT */
#content{
padding: 20px 0;
overflow: hidden;
margin: 0;
padding: 20px;
font-size: 9pt;
color: #FFFFFF;
background-color: #555555;
width: 965px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="patterned">
<div class="container">
<ul id="main_menu">
<li class="logo">
<a href="#">
<img src="ronny_logo.jpg" alt="Logo"/>
</a>
</li>
<li class="red">
Home
</li>
<li class="green">
Evenementen
<ul class="submenu">
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
</ul>
</li>
<li class="blue">
Bus
</li>
<li class="orange">
Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div id="content">
<p>fadsfdsfdas</p>
<p>dfsadfaf</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p> </p>
<p>gg</p>
<p> </p>
<p>g</p>
</div>
</div>
</div>
</body>
</html>
Easiest way is to give your container a width and set the margin to 0 (top bottom) auto (left right) along with position: relative so the browser can work out where to position it based on the parent container in this instance your .wrapper class.
.patterned .container{width: 960px; margin: 0 auto; position: relative;}
.container{width: 960px; margin: 0 auto; position: relative;}
By putting the parent class in front of the child class you can selectively target a specific container so if you have two containers with the same class they can be targeted and styled differently.
Another solution using the flex property:
<style>
body {
width: 100%;
margin: 0;
padding: 0;
background-color: #333333;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
}
#main_menu{
margin:0;
padding:0;
height: 150px;
padding: 0px 0;
position: fixed;
background-color: black;
z-index: 2;
width: 965px;
display: flex;
align-items: center;
justify-content: center;
}
#main_menu li{
list-style: none;
float: left;
line-height: 30px;
margin-left: 10px;
width: 130px;
text-align: center;
margin-top: 120px;
position: relative;
}
#main_menu li a, #footer_menu li a {
color: #FFFFFF;
text-shadow: 0px 1px 1px #000;
display: block;
font-family: 'PT Sans', sans-serif;
text-decoration: none;
font-size: 12pt;
}
#main_menu .logo{
background: none;
width: 445px;
margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
text-decoration: underline;
}
#main_menu li .submenu{
display: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
left: 0;
top:100%;
}
#main_menu li .submenu:hover{
display: block;
}
#main_menu li a:hover + .submenu{
display: block;
}
#main_menu li .submenu li{
margin: 0;
padding: 0;
}
#main_menu li .submenu li a{
font-size: 9pt;
}
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }
#content{
overflow: hidden;
margin-top: 150px;
font-size: 9pt;
color: #FFFFFF;
background-color: #555555;
width: 965px;
}
</style>
<body>
<div class="wrapper">
<ul id="main_menu">
<li class="logo">
<a href="#">
<img src="ronny_logo.jpg" alt="Logo"/>
</a>
</li>
<li class="red">
Home
</li>
<li class="green">
Evenementen
<ul class="submenu">
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
</ul>
</li>
<li class="blue">
Bus
</li>
<li class="orange">
Contact
</li>
</ul>
<div id="content">
<p>fadsfdsfdas</p>
<p>dfsadfaf</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p> </p>
<p>gg</p>
<p> </p>
<p>g</p>
</div>
</div>
</body>
There is absolutely no need for more divs.
Cheers!
Related
I am new to HTML and CSS and was trying to make a random website about astronomy. And I can't figure out what my dropdown menu is not working. I googled a lot and saw many youtube videos, but still cannot find a solution. When I change the display in sub-menu in CSS to block, it shows the submenus but in a horizondal line. Should I rewrite the whole code or is it editable? I am new HTML and CSS so excuse my mistakes and lack of knowledge. Thanks.
*{
margin: 0;
padding: 0;
font-family: Century Gothic;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 20px;
}
ul li{
display: inline-block;
}
ul li.active a{
background-color: #fff;
color: #000;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 1%;
left: 1%;
}
.title h1{
font-size: 40px;
color: white;
}
.sub-menu{
display: none;
position: relative;
}
.rocks:hover .sub-menu{
display: block;
position: absolute;
margin: 10px;
}
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li class="rocks">Planets</li>
<ul class="sub-menu">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
<li>Major Moons</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1>ASTRONOMY</h1>
</div>
</header>
It's because you have to place your submenu inside the parent <li>.
Here's a working live Codepen.
*{
margin: 0;
padding: 0;
font-family: Century Gothic;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 20px;
}
ul li{
display: inline-block;
}
ul li.active a{
background-color: #fff;
color: #000;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 1%;
left: 1%;
}
.title h1{
font-size: 40px;
color: white;
}
.sub-menu{
display: none;
position: relative;
}
.rocks:hover .sub-menu{
display: block;
position: absolute;
margin: 10px;
}
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li class="rocks">Planets
<ul class="sub-menu">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</li>
<li>Major Moons</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1>ASTRONOMY</h1>
</div>
</header>
Let me know in the comment if you need a help styling the dropdown menu.
How can i center the float element that you can see in this photo? I want to bring it from the left of the web page to the middle, but keeping it at the top of the page?
Here is the code of the HTML:
<html>
<head>
<title>Batch File Generator | Home</title>
</head>
<link href="style.css" rel="stylesheet" >
<ul>
<li><a>Home</a></li>
<li><a>Download</a>
<ul>
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul>
<li><a>Community forums</li></a>
<li><a>Ask the developers</li></a>
</ul>
</li>
<li><a>News</a></li>
</ul>
</html>
And here is the code of the CSS:
body{
background: url("background.jpg") no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
For HTML Code, use this:
<div class="wrapper">
<div class="middle-content">
<ul>
<li><a>Home</a></li>
<li><a>Download</a>
<ul>
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul>
<li><a>Community forums</a></li>
<li><a>Ask the developers</a></li>
</ul>
</li>
<li><a>News</a></li>
</ul>
</div>
</div>
For css code:
html{
height: 100%;
}
body{
background: url("background.jpg") no-repeat;
background-size: cover;
font-family: Arial;
color: white;
height: 100%;
}
.wrapper{
display: table;
width: 100%;
height: 100%;
}
.middle-content{
display: table-cell;
vertical-align:middle;
width: 100%;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
Solution with flexbox.
* {
box-sizing: border-box;
}
html,
body,
ul {
padding: 0;
margin: 0;
}
nav {
width: 100%;
background-color: darkgray;
}
li {
list-style: none;
padding: 15px;
border: thin solid lightgray;
position: relative;
background-color: white;
}
li>a {
display: inline-block;
text-decoration: none;
}
.main-menu {
display: flex;
justify-content: center;
}
.sub-menu {
display: none;
position: absolute;
left: 0px;
width: 100%;
margin-top: 15px;
}
.main-menu li:hover {
background-color: lightgreen;
}
.sub-menu li:hover {
background-color: lightblue;
}
.main-menu li:hover>.sub-menu {
display: block;
}
<nav>
<ul class="main-menu">
<li><a>Home</a></li>
<li><a>Download</a>
<ul class="sub-menu">
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul class="sub-menu">
<li>Community forums</li>
<li>Ask the developers</li>
</ul>
</li>
<li><a>News</a></li>
</ul>
</nav>
I have been working on creating an HTML/CSS menu. I have the layout and everything looking great, the only thing is that the submenus disappear every time I move off the parent. I have looked around at the various reasons why this can happen, the most common one seems to be some element is getting focus when the mouse moves, however I have been over my code from top to bottom and can't find where this might be happening. Any tips and/or coding errors please let me know.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="site.css" rel="stylesheet" />
<title>My Test Site</title>
<script src="jquery/jquery-1.12.1.min.js"></script>
<script src="jquery/slider.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="menu_strip">
<ul id="menu">
<li>Home</li>
<li>
About
<ul class="hidden_menu">
<li>What We Do</li>
</ul>
</li>
<li>Contact</li>
<li>
Resources
<ul class="hidden_menu">
<li>Bit & Pieces</li>
<li>Reference Documents</li>
</ul>
</li>
<li>Login</li>
</ul>
</div>
<div id="header_wrapper">
<img id="top_logo" src="images/ed_small.png"/>
<h1>My Test Site</h1>
</div>
</header>
<div id="banner">
<div class="slider">
<ul>
<li>
<img src="images/banner1.png" />
</li>
<li>
<img src="images/banner2.png" />
</li>
<li>
<img src="images/banner3.png" />
</li>
</ul>
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
<div id="content">
<p>Content goes here</p>
<div id="footer">
<h3>This is the footer</h3>
</div>
</div>
</div>
</body>
</html>
Relevant CSS
#font-face {
font-family: continuum;
src: url("/fonts/continuum/contm.ttf");
}
body, div, h1, h2, h3, p, header{
margin: 0; padding: 0; border: 0;
}
body {
text-align: center;
}
header {
position: fixed;
z-index: 500;
height: 100px;
background: #FFFFFF;
#background: #008C9E;
#background: #44749D;
width: 100%;
align-content: center;
}
#menu_strip {
position: fixed;
z-index: 58;
height:30px;
width: 100%;
#background: #000000;
background: #343838;
}
#menu_strip ul {
position: absolute;
font-family: continuum;
color: #ffffff;
list-style-type:none;
margin:0;
padding:0;
}
#menu {
right:0;
z-index: 501;
}
#menu_strip li {
display:inline-block;
float: left;
margin-right: 1px;
}
#menu_strip li a {
display:block;
min-width:100px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: continuum;
color: #fff;
background: #343838;
text-decoration: none;
}
#menu_strip li:hover a {
background: #f5f1e9;
color: #343838;
}
#menu_strip li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 30px;
line-height: 30px;
}
#menu_strip li:hover ul a:hover {
background: #19c589;
color: #fff;
}
#menu_strip li ul {
display: none;
}
#menu_strip li ul li {
display:block;
float: none;
}
#menu_strip li ul li a {
width:auto;
min-width: 155px;
padding: 0 20px;
}
#menu_strip ul li a:hover + .hidden_menu, .hidden_menu:hover {
z-index: 503;
display: block;
}
#header_wrapper {
#position: fixed;
position: relative;
margin-top: 31px;
height: 70px;
margin-left: auto;
margin-right: auto;
width: 960px;
}
header h1 {
position: relative;
font-family: continuum;
margin-top: -56px;
margin-left: -500px;
}
#top_logo {
position: relative;
margin-top: 4px;
height: 60px;
margin-left: -900px;
}
#banner {
position: fixed;
width: 100%;
height: 300px;
top: 100px;
#background: #00B4CC;
#background: #CCEBF1;
background: #f5f1e9;
}
Thanks all for your time.
Change this line
#menu_strip ul li a:hover + .hidden_menu
to
#menu_strip ul li:hover .hidden_menu
#font-face {
font-family: continuum;
src: url("/fonts/continuum/contm.ttf");
}
body,
div,
h1,
h2,
h3,
p,
header {
margin: 0;
padding: 0;
border: 0;
}
body {
text-align: center;
}
header {
position: fixed;
z-index: 500;
height: 100px;
background: #FFFFFF;
#background: #008C9E;
#background: #44749D;
width: 100%;
align-content: center;
}
#menu_strip {
position: fixed;
z-index: 58;
height: 30px;
width: 100%;
#background: #000000;
background: #343838;
}
#menu_strip ul {
position: absolute;
font-family: continuum;
color: #ffffff;
list-style-type: none;
margin: 0;
padding: 0;
}
#menu {
right: 0;
z-index: 501;
}
#menu_strip li {
display: inline-block;
float: left;
margin-right: 1px;
}
#menu_strip li a {
display: block;
min-width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: continuum;
color: #fff;
background: #343838;
text-decoration: none;
}
#menu_strip li:hover a {
background: #f5f1e9;
color: #343838;
}
#menu_strip li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 30px;
line-height: 30px;
}
#menu_strip li:hover ul a:hover {
background: #19c589;
color: #fff;
}
#menu_strip li ul {
display: none;
}
#menu_strip li ul li {
display: block;
float: none;
}
#menu_strip li ul li a {
width: auto;
min-width: 155px;
padding: 0 20px;
}
#menu_strip ul li:hover .hidden_menu,
.hidden_menu:hover {
z-index: 503;
display: block;
}
#header_wrapper {
#position: fixed;
position: relative;
margin-top: 31px;
height: 70px;
margin-left: auto;
margin-right: auto;
width: 960px;
}
header h1 {
position: relative;
font-family: continuum;
margin-top: -56px;
margin-left: -500px;
}
#top_logo {
position: relative;
margin-top: 4px;
height: 60px;
margin-left: -900px;
}
#banner {
position: fixed;
width: 100%;
height: 300px;
top: 100px;
#background: #00B4CC;
#background: #CCEBF1;
background: #f5f1e9;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="site.css" rel="stylesheet" />
<title>My Test Site</title>
<script src="jquery/jquery-1.12.1.min.js"></script>
<script src="jquery/slider.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="menu_strip">
<ul id="menu">
<li>Home
</li>
<li>
About
<ul class="hidden_menu">
<li>What We Do
</li>
</ul>
</li>
<li>Contact
</li>
<li>
Resources
<ul class="hidden_menu">
<li>Bit & Pieces
</li>
<li>Reference Documents
</li>
</ul>
</li>
<li>Login
</li>
</ul>
</div>
<div id="header_wrapper">
<img id="top_logo" src="images/ed_small.png" />
<h1>My Test Site</h1>
</div>
</header>
<div id="banner">
<div class="slider">
<ul>
<li>
<img src="images/banner1.png" />
</li>
<li>
<img src="images/banner2.png" />
</li>
<li>
<img src="images/banner3.png" />
</li>
</ul>
<button class="prev">
<</button>
<button class="next">></button>
</div>
</div>
<div id="content">
<p>Content goes here</p>
<div id="footer">
<h3>This is the footer</h3>
</div>
</div>
</div>
</body>
</html>
Add !important like this,
#menu_strip ul li a:hover + .hidden_menu, .hidden_menu:hover {
z-index: 503;
display: block !important;
}
not sure, if i understood your desired color schema. I dared to little alter your aproach
#font-face {
font-family: continuum;
src: url("/fonts/continuum/contm.ttf");
}
body, div, h1, h2, h3, p, header{
margin: 0; padding: 0; border: 0;
}
body {
text-align: center;
}
header {
position: fixed;
z-index: 500;
height: 100px;
background: #FFFFFF;
#background: #008C9E;
#background: #44749D;
width: 100%;
align-content: center;
}
#menu_strip {
position: fixed;
z-index: 58;
height:30px;
width: 100%;
#background: #000000;
background: #343838;
}
#menu_strip ul {
position: absolute;
font-family: continuum;
color: #ffffff;
list-style-type:none;
margin:0;
padding:0;
}
#menu {
right:0;
z-index: 501;
}
#menu_strip li {
display:inline-block;
float: left;
margin-right: 1px;
}
#menu_strip li a {
display:block;
min-width:100px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: continuum;
color: #fff;
background: #343838;
text-decoration: none;
}
#menu_strip li:hover a {
background: #f5f1e9;
color: #343838;
}
#menu_strip li ul li:hover a {
background: #343838;
color: #f5f1e9;
}
#menu_strip li ul {
display: none;
}
#menu_strip li:hover ul {
display: block;
}
#menu_strip li ul li {
display:block;
float: none;
}
#menu_strip li ul li a {
width:auto;
min-width: 155px;
padding: 0 20px;
}
#header_wrapper {
#position: fixed;
position: relative;
margin-top: 31px;
height: 70px;
margin-left: auto;
margin-right: auto;
width: 960px;
}
header h1 {
position: relative;
font-family: continuum;
margin-top: -56px;
margin-left: -500px;
}
#top_logo {
position: relative;
margin-top: 4px;
height: 60px;
margin-left: -900px;
}
#banner {
position: fixed;
width: 100%;
height: 300px;
top: 100px;
#background: #00B4CC;
#background: #CCEBF1;
background: #f5f1e9;
}
<div id="container">
<header>
<div id="menu_strip">
<ul id="menu">
<li>Home</li>
<li>
About
<ul class="hidden_menu">
<li>What We Do</li>
</ul>
</li>
<li>Contact</li>
<li>
Resources
<ul class="hidden_menu">
<li>Bit & Pieces</li>
<li>Reference Documents</li>
</ul>
</li>
<li>Login</li>
</ul>
</div>
<div id="header_wrapper">
<img id="top_logo" src="images/ed_small.png"/>
<h1>My Test Site</h1>
</div>
</header>
<div id="banner">
<div class="slider">
<ul>
<li>
<img src="images/banner1.png" />
</li>
<li>
<img src="images/banner2.png" />
</li>
<li>
<img src="images/banner3.png" />
</li>
</ul>
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
<div id="content">
<p>Content goes here</p>
<div id="footer">
<h3>This is the footer</h3>
</div>
</div>
</div>
my code of menu work fine, but only text is a href, how ever i try to make it a bit more user friendly so make even background in to work as href but its not working, can somebody help me to fix it?
My HTML:
<div id="menu">
<ul>
<li>GAMESITES<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>HRY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>SERVERY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>CLANKY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>FORUM<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>DOWNLOADS<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>BLOGY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>FLASHOVKY<span class="arrow"></span></li>
</ul>
</div>
My CSS:
#menu{
background-image: url("images/menubg.png");
background-repeat: repeat-x;
height: 44px;
width: 983px;
margin: 0 22px;
}
.spacer{
background-image: url("images/menu_spacer.png");
background-repeat: no-repeat;
width: 1px;
height: 25px;
margin: 0px 12px;
}
#menu ul{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
}
#menu ul li{
padding: 0px 5px 0px 0px;
display: inline-block;
color: #f7f7f7;
}
.arrow{
background-image: url("images/sipka.png");
background-repeat: no-repeat;
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Live preview: http://funedit.com/andurit/try4/
Your markup can be heavily simplified into this:
<div id="menu">
<ul>
<li>GAMESITES</li>
<li>HRY</li>
<li>SERVERY</li>
<li>CLANKY</li>
<li>FORUM</li>
<li>DOWNLOADS</li>
<li>BLOGY</li>
<li>FLASHOVKY</li>
</ul>
</div>
Flexbox solution
If you're willing to explore modern CSS specifications, you can always use flexbox instead of relying on inline-block to position your elements — check out the demo fiddle here: http://jsfiddle.net/teddyrised/9FZS8/
#menu {
background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
}
#menu ul{
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
color: #f7f7f7;
flex: 1 1 auto;
}
#menu ul li a {
background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
display: block;
padding: 14px 0;
text-decoration: none;
text-align: center;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Non-Flexbox solution
Otherwise, you can always fallback to floating your individual <a> elements, but that requires you to calculate the padding for each of them carefully so the menu does not overflow: http://jsfiddle.net/teddyrised/9FZS8/2/
#menu {
background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#menu ul li {
color: #f7f7f7;
}
#menu ul li a {
background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Add to your links a padding of x and a margin of -x, for example:
#menu a {
padding: 20px;
margin: -20px;
}
Make link to take full space:
li > a{
display:inline-block;
width: 100%;
height: 100%;
}
I tried making a dropdown menu only with css, now the problem is that my dropdown menu is hiding behing my content. I don't know why its not working, I tried using z-index but nothing worked. Here is a jsfiddle example and some code.
Please help me, thank you.
http://jsfiddle.net/42c6q/
HTML
<div class="wrapper">
<div class="patterned">
<div class="container">
<ul id="main_menu">
<li class="logo">
<a href="#">
<img src="images/logo.png" alt="De Pannenkoekenbus Logo"/>
</a>
</li>
<li class="red">
Home
</li>
<li class="green">
Evenementen
<ul class="submenu">
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
</ul>
</li>
<li class="blue">
Bus
</li>
<li class="orange">
Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div id="content">
</div>
</div>
</div>
CSS
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
background: url("images/kaart_bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}
/* MENU */
#main_menu{
margin:0;
padding:0;
height: 130px;
padding: 20px 0;
overflow: hidden;
z-index: 2;
}
#main_menu li{
list-style: none;
float: left;
line-height: 50px;
margin-left: 30px;
width: 130px;
text-align: center;
margin-top: 40px;
position: relative;
}
#main_menu li a, #footer_menu li a {
color: #FFFFFF;
text-shadow: 0px 1px 1px #000;
display: block;
font-family: 'PT Sans', sans-serif;
text-decoration: none;
font-size: 15pt;
}
#main_menu .logo{
background: none;
width: 224px;
margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
text-decoration: underline;
}
#main_menu li .submenu{
display: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
left: 0;
top:100%;
}
#main_menu li .submenu:hover{
display: block;
}
#main_menu li a:hover + .submenu{
display: block;
}
#main_menu li .submenu li{
margin: 0;
padding: 0;
}
#main_menu li .submenu li a{
font-size: 12pt;
}
/* COLORS */
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }
/* CONTENT */
#content{
padding: 20px 0;
overflow: hidden;
margin: 0;
padding: 20px;
}
In your #main_menu you have this overflow:hidden remove that:
#main_menu{
margin:0;
padding:0;
height: 130px;
padding: 20px 0;
/*overflow: hidden; Remove this*/
z-index: 2;
}
The demo http://jsfiddle.net/42c6q/2/
Remove overflow: hidden from #main_menu
working demo
#main_menu {
overflow: hidden; /*remove overflow */
}