I am building a drop down menu which will shows a second level. I am about 98% there, but i cant get it bang on. On the drop down menu for the second level, i want to show the results in two col's, with minimal space. At the moment, i have the two col's, but there is around 14px space to the left and also around 8 px space from the top.
Please help.
Many thanks:
I have updated the CSS, but still cant get it to close in on the drop second menus. Any ideas please
.drop_menu {
LIST-STYLE-TYPE: none;
HEIGHT: 38px;
}
.drop_menu LI {
float: left;
background-color:#fff;
height:40px;
margin-top:-6px;
}
.drop_menu LI A {
float: left;
color: #000;
padding: 10px 10px 10px 10px;
text-decoration: none;
line-height: 1.389;
font-size: 17px;
text-transform: uppercase;
}
.drop_menu LI A:hover {
COLOR: #fff;
BACKGROUND-COLOR: #b52723;
}
.drop_menu UL {
LIST-STYLE-TYPE: none;
POSITION: absolute;
LEFT: -999px;
Z-INDEX: 1000;
TOP: -999px;
margin-top:19px;
margin-left:14px;
}
.drop_menu LI:hover {
BACKGROUND: #fff;
POSITION: relative;
}
.drop_menu LI:hover UL {
BACKGROUND: #fff;
BORDER-TOP: #b52723 4px solid;
BORDER-RIGHT: #ccc 1px solid;
BORDER-BOTTOM: #ccc 1px solid;
BORDER-LEFT: #ccc 1px solid;
TOP: 30px;
WIDTH: 320px;
LEFT: 0px;
padding:0;
}
.drop_menu LI:hover UL LI {
MARGIN: 0px;
DISPLAY: block;
}
.drop_menu LI:hover UL LI A {
width:140px;
FONT-SIZE: 12px;
padding:0;
text-align: left;
float:left;
border:1px solid #333;
}
.drop_menu LI:hover UL LI A:hover {
BACKGROUND: #fff;
COLOR: #b52723;
}
Thanks for the reply guys. Fiddle as requested
http://jsfiddle.net/dalew36/06pp180k/
Related
I'm doing a CSS exercise wherein the old BBC's site is to be cloned. The original problem was that the white bottom borders of the #topmenu li's appeared wonky (I included this code in the page below as a comment)
That has been fixed by adding the right red border using pseudo elements. However, the anchor tags have been disabled. I think it's due to the red border's "absolute" position, but I can't get the menu to appear as it should without the absolute position. Now, it looks how I want it, but the top menu links don't work anymore: http://jsbin.com/poginowibe/1/edit?output
Any ideas on how this can get sorted out? Any help would be appreciated.
/* This is the original code when the white bottom borders appeared weird */
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
border-right: 1px solid #990800;
float: left;
position: relative;
z-index: 1;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
padding: 14px 15px 8px 15px;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
/* This is the code after the wonky appearance is fixed but the tags were disabled */
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
float: left;
position: relative;
z-index: 1;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
padding: 14px 15px 8px 15px;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
#topmenudiv li::after {
content: "";
position: absolute;
bottom: 0; top: 0; left: 0; right: 0;
border-right: 1px solid #990800;
}
With some tweaks to Joerg's code, I was finally able to make it work!
#topmenudiv ul {
margin-top: 0px;
padding: 0;
}
#topmenudiv li {
list-style: none;
height: 38px;
line-height: 40px;
float: left;
position: relative;
z-index: 3;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
#topmenudiv li a {
height: 100% !important;
font-size: 1em;
line-height: 40px;
border-right: 1px solid #990800;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#topmenudiv li a:hover {
text-decoration: none;
}
Thanks a bunch! :)
Remove the #topmenudiv li::after from your css and change #topmenudiv li in this way:
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
float: left;
position: relative;
z-index: 1;
border-right: 1px solid #990800;
}
Update
Use this code and see the remarks below:
#topmenudiv ul {
height: 40px;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style: none;
height: 40px;
float: left;
border-bottom: 3px solid #FFFFFF;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid blue;
outline: 0;
}
#topmenudiv li a {
height: 40px !important;
font-size: 1em;
line-height: 40px;
border-right: 1px solid #990800;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#topmenudiv li a:hover {
text-decoration: none;
}
Remove all your topmenudiv stuff in CSS, also this one above the comments.
I made the border-bottom line for hovering blue, so you can see that it works.
You are using an image on the right site of the topbar, #sphere. This should be an background-image in CSS, so you have not to handle with z-index and then the rest of the links will work.
What I have done is, give the a tags some height and line-height and bind the red border-left to it. I also removed some paddings and margins.
I'm working on a css/html site and I have this problem: in my style.css I got two divs, one for sidebar and one for content. I would like the sidebar to be, well, at the side, but when both are present the content always goes below the sidebar, unless I put that in position:absolute. In that case I have a problem when small screens are used, 'cause they get one over the other.
I paste the code, hope you can help!
/* This is for content */
article, aside, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
#modal {
position: relative;
width: 100%;
display: inline-block;
display: table;
display: table-cell;
float: none;
border: 1px solid #CCC;
box-shadow: 0 1px 5px #CCC;
border-radius: 5px;
font-family: verdana;
margin: 25px auto;
text align: center;
background-color: #f2f2f2;
overflow: auto;
}
#modal header {
background: #f1f1f1;
background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
box-shadow: 0 1px 2px #888;
padding: 10px;
}
#modal h1 {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 2px white;
color: #323232;
text-align: center;
}
#modal section {
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
font-size: 12px;
line-height: 175%;
color: #333;
text-align: center;
}
while this is the sidebar
/*sidebar */
#sidebar{
position: static;
margin-top: 15px;
max-width: 150px;
}
#sidebar ul,
#sidebar ul li,
#sidebar ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
top: 5%;
}
#sidebar ul {
position: static;
top: 90px;
z-index: 1000;
}
#sidebar ul li {
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#sidebar ul li.hover,
#sidebar ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#sidebar ul ul {
margin-top: 1px;
visibility: hidden;
position: absolute;
top: 1px;
left: 99%;
z-index: 598;
width: 100%;
}
#sidebar ul ul li {
float: none;
}
#sidebar ul ul ul {
top: 1px;
left: 99%;
}
#sidebar ul li:hover > ul {
visibility: visible;
}
#sidebar ul li {
float: none;
}
#sidebar ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#sidebar {
font-family: 'Lato', sans-serif;
font-size: 18px;
width: 180px;
}
#sidebar ul a,
#sidebar ul a:link,
#sidebar ul a:visited {
display: block;
color: #000000;
text-decoration: none;
font-weight: 300;
}
#sidebar > ul {
float: none;
}
#sidebar ul {
background: #a0a0a0;
}
#sidebar > ul > li {
border-left: 3px solid #000000;
}
#sidebar > ul > li > a {
padding: 10px 20px;
}
#sidebar > ul > li:hover {
border-left: 3px solid #9b1a1c;
}
#sidebar ul li:hover > a {
color: #9b1a1c;
}
#sidebar > ul > li:hover {
background: #f6f6f6;
}
/* Sub Menu */
#sidebar ul ul a:link,
#sidebar ul ul a:visited {
font-weight: 400;
font-size: 14px;
}
#sidebar ul ul {
width: 180px;
background: none;
border-left: 20px solid transparent;
}
#sidebar ul ul a {
padding: 8px 0;
border-bottom: 1px solid #eeeeee;
}
#sidebar ul ul li {
padding: 0 20px;
background: #fff;
}
#sidebar ul ul li:last-child {
border-bottom: 3px solid #000000;
padding-bottom: 10px;
}
#sidebar ul ul li:first-child {
padding-top: 10px;
}
#sidebar ul ul li:last-child > a {
border-bottom: none;
}
#sidebar ul ul li:first-child:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 13px;
border-left: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
I've created a custom breadcrumb in jsfiddle http://jsfiddle.net/jimbodeni/Ata9k/ . When you shrink the width of the page the text is on 2 lines on the last 2 breadcrumbs but is only on one line on the first breadcrumb. This causes the grey background to be out of line on the first breadcrumb with the other 2.
How can I get this to always be the max height of the largest breadcrumb so they're all uniform height no matter if one has got one line of text and another 2 lines of text?
<div id="breadcrumb-container">
<ul class="breadcrumb">
<li>Surgery Started</li>
<li class="current">Surgery Started</li>
<li>Surgery Compl'd</li>
</ul>
</div>
div#breadcrumb-container {
width:100%;
}
div#breadcrumb-container li {
width: 33%;
}
div#breadcrumb-container li:last-child {
width: 34%;
}
.breadcrumb {
list-style: none;
overflow: hidden;
font: 13px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
background: #C7C7C7;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 5px 5px 5px 45px;
position: relative;
display: block;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #C7C7C7;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #001940;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 3px;
left: 100%;
}
.breadcrumb li:first-child a {
padding-left: 12px;
border:none;
}
.breadcrumb li:last-child a:after {
border:none;
}
.breadcrumb .current {
background:#007ACC; color:#fff;
pointer-events: none;
cursor: default;
}
.breadcrumb .current a:after {
border-left-color:#007ACC;
pointer-events: none;
cursor: default;
}
.breadcrumb li a:hover { background: #007ACC; }
.breadcrumb li a:hover:after { border-left-color: #007ACC !important; }
Also, how do I get all 3 breadcrumbs to be exactly the same size? At the minute the first one is bigger than the other 2.
Thanks in advance to anyone who can help!
I have got a task to do horizontal menu. While creating the menu i got a problem with the style.When we are hovering the menu it is jumping and also the sub child menu is comes at different position depending on the size of the text. My css file is
#wrapper {
width:100%;
height:500px;
}
h2 {
color:#787878;
}
#menu, #menu ul {
list-style: none;
//padding: 2px;
}
#nav{
border-bottom: 1px solid #CCCCCC;
border-spacing: 0;
display: table;
float: left;
height: 25px;
width: 100%;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav > ul > li:hover {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
border-radius:1px;
}
.menu-child {
width:160px;
display:block !important;
}
#nav ul li ul li:hover {
}
#nav ul li ul :hover {
}
#menu {
float: left;
height: 25px;
}
#menu> li {
float: left;
}
#menu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menu ul {
position: absolute;
display: none;
z-index: 999;
}
#menu ul li a {
}
#menu li:hover ul {
display: block;
}
#menu {
font-family: Arial;
font-size: 12px;
//background: #F8F8F8;
}
#menu > li > a {
font-family: Verdana, Arial, sans-serif;
font-style: normal;
color:#787878;
font-weight: bold;
}
#menu > li > a:hover {
color: #000;
}
#menu ul {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
#menu ul li a {
color: #000;
}
#menu ul li a:hover {
background: #E0E0E0;
}
.logout {
float:right;
width:300px;
}
.title {
float:left;
width:300px;
}
#footer {
width:100%;
height:100px;
float:left;
}
.subchild-list {
margin:0;
position: absolute !important;
top:0;
right:-87px;
//border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
.child-list ul {
display: none !important;
position: absolute !important;
z-index: 999 !important;
}
.child-list li {
position:relative !important;
}
.child-list li:hover ul {
display: block !important;
}
.child-list li{
border-left:1px solid #C0C0C0;
border-right:1px solid #C0C0C0;
}
.child-list ul{
border-top:1px solid #C0C0C0;
border-bottom:5px solid #C0C0C0;
}
.child-list{
border-bottom:5px solid #C0C0C0;
}
.nav-subchild
{
border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
You can see my code from http://jsfiddle.net/ucpcA/1/ How can i solve this problem?
Add to css this:
li {border: 1px solid #fff;}
I tried it in fiddle and it solved "jumping"
//Edit
The main idea is to set border to the top li elements so when you add additional border with color it will not jump
//Edit 2 to solve your 2nd problem
To sovle your 2nd prbolem put this line
.subchild-list {
margin:0;
right:-150px;
position: absolute !important;
top:0; }
#menu ul li {width: 150px;}
It is just an example so you will see what it does. Put there the ewidth which you really need.
At this Test Link I seek to install header and main site navigation on to the top of a blog script.
My clear:both; worked on the main site script but throws everything to the side now. Have tried numerous fixex without success! Thanks in advance for ant pointers to resolve. Clear:both; is in the footer.
/*/////////////////////MAIN SITE NAVIGATION BAR////////////////////*/
.dropnav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3b3b44; /*Navigation Active Background*/
border-top: 1px solid #ccf;
}
.dropnav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.dropnav li {
float: left; }
.dropnav li a {
display: block;
padding: 8px 25px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #fff; /*Active Text Color*/
border-right: 1px solid #ccf;
border-bottom: none;
}
.dropnav li:first-child a {
border-left: 2px solid #ccf; }
.dropnav li a:hover {
color: #000; /*Active Hover Color*/
background-color: #8db3ff; } /*Navigation Hover Background*/
/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/
.dropnav li ol {
display: none;
width: 13em; } /*Define width of dropdown button*/
.dropnav li:hover ol {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.dropnav li:hover li {
float: none; }
.dropnav li:hover li a {
background-color: #3b3b44; /*Navigation Active Background*/
border-bottom: 1px solid #ccf;
border-top: 1px solid #ccf;
border-right: 1px solid #ccf;
border-left: 1px solid #ccf;
font-size: 16px;
color: #fff; } /*Text Color*/
.dropnav li li a:hover {
color: #000;
background-color: #8db3ff; /*Navigation Hover Background*/
}
/*//////////////////END MAIN SITE NAVIGATION////////////////////*/
#container {
width: 950px;
padding-left: 0px;
padding-right: 0px;
margin: 1px auto;
background: #fafafa;
}
#header {
width: 950px;
margin-top: 15px;
}
#content {
padding-left: 5px;
padding-right: `5px;
}
#footer {
clear: both;
background: #3b3b44;
color: #ccf; /*text*/
/*margin-top: 10px;*/
margin-bottom: 10px;
padding-top: 5px;
padding-left: 15px;
padding-bottom: 5px;
border-top: 2px solid #cc0;
line-height: 1.2em;
}
you have two id's with the same name as container. you id needs to be unique and also id fieldset and i guess all your tags are not closed properly very those.
you can put a clear div after you menu to clear out this row. It is the same principle use in the 960 grid sytem.
www.960.gs
But here is a link to see the code and the result.
http://jsfiddle.net/etienne_carre/9x2P3/
Thx