I have a menu within a ul li and I'd like to change the background image for only one of the menu items.
In the css below the current background image is menu-ul.jpg and I need the additional background image for the "Capsules" menu item to be menu-ul2.jpg
Here's my current menu html:
<ul class="menu">
<li><strong>home</strong><span></span></li>
<li><strong>Products</strong><span></span>
<ul>
<li>Dew Drops</li>
<li>Capsules</li>
<li>Salvation Balm</li>
</ul>
Here's the piece of css that deals with the background image for the menu items:
.menu ul {
position: absolute;
padding: -3px 10px;
top: -999em;
width: 107px;
background: url(../images/menu-ul.jpg) left top repeat;
}
Any help would be greatly appreciated...thanks.
Meg
You can reach that effect by adding a class to the list item you want to change.
Add this to your CSS
.menu ul li.capsule {
background: url(../images/menu-ul2.jpg)
}
And this in your html
<li class="capsule">Capsules</li>
Off course there are many other ways...
Related
Trying to make the top nav bar stick while scrolling like the main nav does when scrolling, and need to add social media icons to the left of the top bar. Website is http://www.stephensengineering.com/stephens33/ any help is greatly appreciated. :)
i tried adding position: sticky but no luck.
<!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>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<style type="text/css">
<!--
#navbar ul {
margin: 0;
padding: 10px;
list-style-type: none;
text-align: right;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
-->
</style>
</head>
<body>
<div id="navbar">
<ul>
<li>project#stephensengineering.com</li>
<li>888-300-0642</li>
<li>Stephens University</li>
<li>Submit Assignment</li>
</ul>
</div>
</body>
</html>
To make the top black navbar stick to the page when user scrolls down,
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
This will place the element on top of the page when user scrolls, but you will have a new problem. The black navbar now overlaps the slidein Main menu that appears when user scrolls. So, you will need to place the slidein Main menu below the top black nav bar. This can be achieved by setting:
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
Adding social icons will need additional markup in your HTML code.
I just began building a website, to make it short:
I'm making a deadly simple dropdown menu which isnt working out.
To make it short, i gave every element a background color.
I would like to know why the boxes behave like that, they
have all their own sizes. The grey one is wider than it should be.
Also the float:right doesnt seem to work on both elements the same. One is further away than the other, they should all be positioned to the right border.
The red border should disappear also:
#dropdown{
display:block;
float:right;
background:#666;
width:120px;
}
#logo-type{
height:90px;
background-image:url("https://picload.org/image/rgrwoopr/logo_font.jpg");
width:90px;
background-color:green;
float:right;
}
#dropdown ul{
margin-top:91px;
background-color:red;
width:120px;
}
#dropdown ul li{
font-size:12px;
width:120px;
height:40px;
background-color:black;
list-style:none;
text-align:center;
}
#dropdown ul li a{
color:white;
text-decoration:none;
}
#dropdown ul li a:hover{
text-decoration:none;
}
#dropdown ul li:hover{
background-color:#0C6;
}
<div id="dropdown">
<a id="logo-type" href="#"></a>
<ul>
<li>DELUXETRAVEL</li>
<li>BLOG</li>
<li>PREMIUM CLUB</li>
</ul>
</div>
So here is a picture reference for this question:
What I would like to do is, using flexbox layout 3 columns (left side bar, center content, *optional right side bar). Basically, you have the 3 columns but only show the left side bar and content columns normally. Then, when the user clicks the menu button, have the right side bar content come into view (as shown by the red part in the drawing).
I figured the parent container to start would look something like:
body {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: stretch;
}
What else would be needed (especially for the right side push in sidebar) to get this working with flexbox?
You are so close.
In order to make the content column grow when the right sidebar is hidden, you need a positive flex-grow on it.
And in order to make the body cover all the screen, remove its margin and use height: 100% on both html and body.
Here is a working example:
document.querySelector('button').addEventListener('click', function() {
document.getElementById('right').classList.toggle('hidden');
});
html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
flex-flow: row nowrap;
}
.sidebar {
width: 25%;
background: #777;
}
#content {
flex-grow: 1;
background: #000;
}
.hidden {
display: none;
}
<div id="left" class="sidebar"></div>
<div id="content">
<button type="button">Toggle sidebar</button>
</div>
<div id="right" class="sidebar hidden"></div>
Does anybody have any example of styling Dojo Name Text Box control on xPages.. (djextNameTextBox)
It seems it doesn't work when you try to set it up through Properties dialogue..
I want to change e.g. font, background color, hide border, change color of [x] sign, etc...
You can style the names with class .lotusFilter and the "x" with class .lotusClose.
Here is an example for styling
.lotusFilters a.lotusFilter {
background-color: rgb(255, 0, 0);
border-color: blue;
color: white;
}
.lotusFilters a .lotusClose {
color: white;
}
When you create a Dojo TextBox, it actually creates a few wrapper divs and other inner divs that each have their own functionality. A normal dijit/form/TextBox has this structure:
<div class="dijit dijitReset dijitInline dijitTextBox>
<div class="dijitReset dijitValidationContainer"> /*...Validation stuff here...*/</div>
<div class="dijitReset dijitInputField dijitInputContainer">
<input class="dijitReset dijitInputInner"/>
</div>
</div>
I may have missed a few classes here or there but that's the general gist of what declaring a Dojo TextBox does. If you want to modify the inner textbox, you can add css for .dijitTextBox .dijitInputField and .dijitTextBox .dijitInputInner. If you want to make it specific to just this Dojo TextBox, then you can add a "class" attribute to your TextBox properties and then use css again. Here is an example of the css:
.dijitTextBox.myClass .dijitInputField {
width: 100px;
}
.dijitTextBox.myClass .dijitInputInner {
width: 100px;
font-size: 12px;
}
I have a footer with dynamic content & height, so i'm using the display:table version of sticky footer. The problem is I have a menu with an absolute positioned drop-down that extends past the footer if the page is too small, menu too big, etc. This creates a gap below the footer. Check out the fiddle for an example. Thanks.
http://jsfiddle.net/wmTn9/
Here's the css, although its easier to see in the fiddle.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.content {
display: table-row;
height: 100%;
background: turquoise;
position:relative;
}
.menu {
position:absolute;
left:0;
width:50%;
background:yellow;
overflow:hidden;
max-height:20px;
}
.menu:hover {
max-height:1000px;
}
.menu li {
height:800px
}
.footer {
display: table-row;
background: lightgray;
}
.footer:hover h3 {
height:300px;
}
In your CSS, take position:absolute; out of the menu class and the footer will move down to accommodate the long menu. If you want the footer to remain at the bottom of the browser window, add the following into your footer class...
width:100%;
position:fixed;
bottom:0;
position:absolute; takes the element out of the document flow. The element is then positioned relative to its first positioned (not static) ancestor element. Taking it out of the menu class puts the menu back into the document flow and stops the menu overlapping the footer.
Amended Fiddle with footer stuck to the bottom of the browser window