I have pieced together a PHP navigation for my site with following code:
* {
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
img {
position: absolute;
top: 10px;
left: 40%;
}
ul#navi {
float:left;
background:#3104B4;
width:97.2%; /* geändert von 150px auf 100% */
border-radius: 10px;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 100px;
font-size: 18px;
}
ul#navi a {
display:block;
padding:0px;
color:white;
font-weight:bold;
border-left: 1px solid red;
text-align:center;
font-size: 25px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul#navi li:first-child a {
border-left: 0 none;
}
ul#navi li {
position:relative;
float:left; /* hinzugefügt um eine horizontale Ausrichtung zu erzielen */
width:12.375em /* Hinzugefügt 150px / 16 = 9.375em */
}
/* Alle Ebenen ausblenden */
ul#navi ul ,
ul#navi li:hover ul ul ,
ul#navi li:hover ul ul ul {
position:absolute;
left:-9999px;
background:blue;
}
ul#navi li:hover ul {
background:blue;
}
ul#navi li:hover ul ul {
background:#3104B4;
}
ul#navi li:hover ul ul ul {
background:#3104B4;
}
ul#navi ul {
top:auto; /* Neue Position definiert 16px Schriftgröße + (2 x 5px) padding = 30px / 16 = 1.875em*/
}
/* Einzelne Ebenen einblenden */
ul#navi li:hover ul {
left:0;
background: #3104B4;
}
/* Neuer Deklarationsblock um die Unterpunkte präzise zu positionieren */
ul#navi ul li:hover ul ,
ul#navi ul ul li:hover ul {
position:absolute;
left:100%;
top:0;
}
/* Hover Hinter- und Vordergrundfarbe für alle Ebenen */
ul#navi li:hover > a , ul#navi ul li:hover > a, ul#navi ul ul li:hover > a, ul#navi ul ul ul li:hover > a {
background:#2E64FE;
color:white;
border-left-width: 1px;
}
ul#navi a span {
float:right;
font-weight:normal;
}
<img src="acid.png" alt="logo" />
<ul id="navi">
<li>Home </li>
<li><a class="titel" href="sortiment.php">Unser Sortiment </a>
<ul>
<li>Reiniger </li>
<li>Ungezieferspray </li>
<li>Arbeitsschutz </li>
<li>Thema 4
<ul>
<li>Thema 4.1 </li>
<li>Thema 4.2 </li>
<li>Thema 4.3
<ul>
<li>Thema 4.3.1 </li>
<li>Thema 4.3.2 </li>
<li>Thema 4.3.3 </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a class="titel" href="aktuelles.php">Aktuelles </a>
<ul id="knoten_3">
<li>Aktionen </li>
<li>Neue Produkte </li>
<li>Sonstiges </li>
</ul>
</li>
<li><a class="titel" href="#kat3">Kontakt </a>
</li>
<li><a class="titel" href="#kat4">Jobs</a></li>
<li><a class="titel" href="#kat4">Impressum</a></li>
</ul>
And now wanted to add this image gallery (dwuser. com/education/content/creating-responsive-tiled-layout-with-pure-css/) on a subpage with the navigation.
Unfortunately the image gallery overlaps with the navigation or doesn't show at all. I tried clear:both but that had no effect.
It seems to me that the positioning of the image gallery is wrong, but I don't know which elements positions I have to change and to what values?
Can anyone point me to a solution?
Also how do i have HTML code start after my PHP-Navigation in general?
With text i used clear:both, but I guess positioning would make more sense?
Thank you
Try adding
ul {
overflow:hidden;
}
Related
I'm working on old Wordpress page created with myMag theme, and i after centering menu to fill whole menu space, i have troubles with drop down menu.
I'm new in CSS and maybe you could say where I did a mistake?
menu before:
menu after:
inspecting the drop down element shows this:
<ul class='children'>
<li class="page_item page-item-187">Progetti di formazione</li>
<li class="page_item page-item-183">Progetti di mobilità</li>
<li class="page_item page-item-185">Progetti pilota</li>
<li class="page_item page-item-168">Ricerche e studi</li>
</ul>
the css looks like this:
#navcontainer #navbar {
float:left;
height: 51px;
line-height:50px;
margin-left: -15px;
margin-top: 1px;
}
#navbar, #navbar ul {
margin:0;
padding:0;
width:900px;
list-style-type:none;
display: table;
position:relative;
line-height:50px;
z-index:5;
}
#navcontainer #navbar a {
height: 40px;
display:block;
padding:0 21px;
text-decoration:none;
text-align:center;
line-height:28px;
outline:none;
float: left;
z-index:35;
position:relative;
color: #FFF;
text-shadow:1px 1px 0 #515151;
font-weight: bold;
vertical-align: middle;
}
#navcontainer #navbar a:hover {
color: #CCC;
}
#navcontainer #navbar ul a {
line-height: 30px;
}
#navcontainer #navbar li {
z-index:20;
text-align: center;
display: table-cell;
font-size: 13px;
vertical-align: bottom;
}
#navcontainer #navbar li li {
border-left:none;
margin-top:0;
}
#navcontainer #navbar ul {
position:absolute;
display:none;
width:172px;
top:38px;
left:-1px;
background: #f5f5f5;
}
#navcontainer #navbar li ul a {
width:130px;
height:auto;
float:left;
text-align:left;
padding:0 21px;
color: #606060;
text-shadow: none;
}
#navcontainer #navbar ul ul {
top:auto;
}
#navcontainer #navbar li ul ul {
left:172px;
top: 0px;
}
#navcontainer #navbar li ul ul a {
border-left:1px solid #CCC;
}
#navcontainer #navbar ul {
border-top:none;
}
#navcontainer #navbar ul a, #navcontainer #navbar ul li {
background-color:#e7e7e7;
}
#navcontainer #navbar ul a:hover, #navcontainer #navbar ul a:focus {
color: #18649a;
}
#navcontainer #navbar li:hover ul ul, #navcontainer #navbar li:hover ul ul ul,#navcontainer #navbar li:hover ul ul ul ul {
display:none;
}
#navcontainer #navbar li:hover ul, #navcontainer #navbar li li:hover ul, #navcontainer #navbar li li li:hover ul, #navcontainer #navbar li li li li:hover ul {
display:block;
}
and php file that creates this menu looks like this:
<div id="navcontainer">
<div class="navigation">
<div class="wrapper">
<ul id="navbar">
<?php $exclude = $myOptions['pages_excl'];?>
<?php if(!$myOptions['pages_limit']) {
$limit = '10'; } else {
$limit = $myOptions['pages_limit'];
}
if($myOptions['pages_limit'] == '0') {
$limit = 0;
}
?>
<li>Home</li>
<?php wp_list_pages("exclude=$exclude&title_li=&depth=3&number=$limit");?>
</ul>
</div>
</div>
</div>
You will need to set
ul ul{
width: 100px;/*or whatever you want for the drop downs width*/
}
ul ul li {
display: block;
}
As there is a width set in just one UL of 900px you can overwrite to ensure constraint. Adding the display block to the LI's causes then to display on top of each other as they take full width of parent up.
I have an existing CSS that only shows a two level menu. I want to add a third level but I'm out of ideas. Could soeone please assist me on what i need to add to the CSS. Below is the current code.
#topnav{
display:block;
float:left;
//width:660px;
margin:0;
padding:0;
list-style:none;
font-size:10px;//was 13
font-weight:normal;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul, #topnav li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
display:block;
margin:0;
padding:15px 20px;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul ul li a:link, #topnav ul ul li a:visited{
border:none;
}
#topnav li.last a{
margin-right:0;
}
#topnav li a:hover, #topnav ul li.active a{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li li a:link, #topnav li li a:visited{
//width:150px;
float:none;
margin:0;
padding:7px 10px;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
background-color:#000000;
}
#topnav li li a:hover{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li ul{
background:#FFFFFF;
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
border-left:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
}
#topnav li ul a{width:140px;}
#topnav li ul ul{margin:-32px 0 0 0;}
#topnav li:hover ul ul{left:-999em;}
#topnav li:hover ul, #topnav li li:hover ul{left:auto;}
#topnav li:hover{position:static;}
#topnav li.last a{margin-right:0;}
Here is the HTML
<div id="topnav">
<ul>
<li <?php if($menu== 0) { echo "class='active'"; } ?>>
Home
</li>
<li class="last">
Set Up
<li class="last">
EMR
<ul>
<li class="last" >
Out-Patient
</li>
<ul>
<li>
Registration
</li>
<li>
File Edition
</li>
</ul>
<li>In-Patient</li>
</ul>
</div>
The two sub-menus under out-patient (Registration & File Edition) are not showing.
Thanks.
You need to close a few elements correctly and also the CSS for your solution is:
#topnav li li:hover ul {left: 160px; margin-top: -3em;}
Closed and corrected HTML:
<div id="topnav">
<ul>
<li>Home</li>
<li class="last">Set Up</li>
<li class="last">EMR
<ul>
<li class="last" >Out-Patient
<ul>
<li>Registration</li>
<li>File Edition</li>
</ul>
</li>
<li>In-Patient</li>
</ul>
</li>
</ul>
</div>
Working Snippet
#topnav{
display:block;
float:left;
margin:0;
padding:0;
list-style:none;
font-size:10px;//was 13
font-weight:normal;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul, #topnav li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
display:block;
margin:0;
padding:15px 20px;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul ul li a:link, #topnav ul ul li a:visited{
border:none;
}
#topnav li.last a{
margin-right:0;
}
#topnav li a:hover, #topnav ul li.active a{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li li a:link, #topnav li li a:visited{
//width:150px;
float:none;
margin:0;
padding:7px 10px;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
background-color:#000000;
}
#topnav li li a:hover{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li ul{
background:#FFFFFF;
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
border-left:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
}
#topnav li ul a{width:140px;}
#topnav li ul ul {margin:-32px 0 0 0;}
#topnav li:hover ul ul{left:-999em;}
#topnav li:hover ul, #topnav li li:hover ul{left:auto;}
#topnav li:hover{position:static;}
#topnav li.last a{margin-right:0;}
#topnav li li:hover ul {left: 160px; margin-top: -3em;}
<div id="topnav">
<ul>
<li>Home</li>
<li class="last">Set Up</li>
<li class="last">EMR
<ul>
<li class="last" >Out-Patient
<ul>
<li>Registration</li>
<li>File Edition</li>
</ul>
</li>
<li>In-Patient</li>
</ul>
</li>
</ul>
</div>
Please put your third level menu inside parent li, which makes hierarchical order or level of menu
<li class="last" >Out-Patient
<ul>
<li>Registration</li>
<li>File Edition
</li>
</ul>
<li>
I am creating a menu bar with rollovers, when i roll over the option the background and text colour change but when i move my mouse down to the sub menu that appeared with hovering on the menu the text colour changes back but the background stays.
This is my HTML for the menu bar:
<div id="menuBar">
<div id="nav">
<div id="nav_wrapper">
<ul>
<li class="bar">Home
</li>
<li class="bar"> Services
</li>
<li class="bar"> Sales →
<ul>
<li class="bar">dropdown #1 item #1
</li>
<li class="bar">dropdown #1 item #2
</li>
<li class="bar">dropdown #1 item #3
</li>
</ul>
</li>
<li class="bar"> Repairs →
<ul>
<li class="bar">Bar
</li>
<li class="bar">Kitchen
</li>
<li class="bar">dropdown #2 item #3
</li>
</ul>
</li>
<li class="bar"> Installations
</li>
<li class="bar"> Contact Us
</li>
</ul>
</div>
<!-- Nav wrapper end -->
And the CSS that im using:
#menuBar {
background:#FF0;
box-shadow:5px 5px 2px #888888;
position:absolute;
height:55px;
width:1000px;
left:0;
right:0;
margin:auto;
top:253px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
behavior: url(/css/border-radius.htc);
z-index:5;
}
#nav {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 21px;
left:0;
right:0;
margin:auto;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: center;
}
#nav a {
color:#0000FF;
}
#nav a:hover {
color:#FF0;
}
#nav a:active {
color:#FF0;
}
#nav a::focus {
color:#FF0;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #00F;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
color:#FF0;
border-radius: 10px;
behavior: url(/CSS/border-radius.htc);
}
#nav ul li a, visited {
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
color:#FF0;
border-radius: 15px;
behavior: url(/CSS/border-radius.htc);
}
#nav ul ul {
display: none;
position: absolute;
background-color: #FFFF00;
border: 3px solid #00F;
border-top: 1;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color:#FF0;
}
.bar {
color:#FF0;
}
Im sure that im missing something simple but i cant find it at all.
Help!
Building on what Niet the Dark Absol said:
you would need to add styles (notice the > - this selects ONLY direct children, works with IE8+ and elsewhere)
#nav ul li:hover > a {
color: #ff0;
}
and you can probably remove this because it would be redundant:
#nav ul ul li a:hover {
color:#FF0;
}
You are applying the color change to a:hover, but the background-color change to li:hover.
Both must be on the li:hover to work. You may need to add color:inherit to the a elements within the menu to ensure natural link colours don't override the setting.
I've a css menu, but this getting problem when I add more menu items.
What should I do to create a menu for unlimited menu items ?
my css
<style type="text/css">
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
#nav a:link, #nav a:active, #nav a:visited{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}
#nav a:hover{
background-color:#fff;
color:#333;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:1.5em;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
</style>
my sample menu for static items
<ul id="nav">
<li>1 HTML</li>
<li>2 CSS
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download
<!-- If I add this ul here then it doesn't follow the current css.
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
-->
</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
<li>3 Javascript
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
</ul>
(suppose,I want to show product menu where product categories will come from database. so its also required to use some php,mysql.just show me how should I design the css menu for the unknown number of category and subcategory)
-Thanks.
here comes the HTML:
<ul id="plugins_fullMenu">
<li> Főoldal </li>
<li> Bemutatkozás </li>
<li> Termékek </li>
<li> Kategóriák
<ul class="plugins_fullMenu first">
<li> kateg1 </li>
<li> kateg2 </li>
<li> prognyelv
<ul class="plugins_fullMenu ">
<li> C# </li>
<li> C </li>
<li> C++ </li>
</ul></li>
</ul></li>
<li> Linkek </li>
<li> Admin felület
<ul class="plugins_fullMenu">
<li> a </li>
<li> b </li>
</ul></li>
<li> veg </li></ul>
and the CSS:
#plugins_fullMenu, .plugins_fullMenu, #plugins_fullMenu .plugins_fullMenu li
{
margin:0px;
padding:0px;
display: table;
}
#plugins_fullMenu li
{
float:left;
display: inline;
cursor:pointer;
list-style:none;
padding:0px 0px 0px 0px;
border:1px #000 solid;
position:relative;
}
#plugins_fullMenu li ul.first
{
left:-1px; top:100%;
background-color: red;
}
li, li a
{
color:#000;
text-decoration:none;
padding: 10px 0px 10px 0px;
}
#plugins_fullMenu .plugins_fullMenu li
{
width:100%;
/* text-indent:10px;
line-height:30px;
margin-right:10px;*/
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:red;
}
#plugins_fullMenu li a
{
display:block;
width:inherit;
height:inherit;
}
ul.plugins_fullMenu
{
display:none;
}
#plugins_fullMenu li:hover > a, #plugins_fullMenu li:hover
{
color:#fff;
background:green;
}
li:hover > .plugins_fullMenu
{
display:block;
position:absolute;
width:auto;
top:-1px;
left:50%;
z-index:1000;
border:1px #000 solid;
}
li:hover
{
position:relative;
z-index:2000;
}
now the problem is the two submenu of "admin felület" overlaps it. It should not, whats wrong?
ok. as suggested
your fist submenu class is plugins_fullMenu first while the next one is only plugins_fullMenu