Using the emenu Yii extension for a menu. The underlying project for this extension is http://lwis.net/free-css-drop-down-menu/ .
Right now the sub menus display in a row (which does eventually wrap to a 2nd row). I'm using the "nvidia" theme.
How do I make submenus vertical? I want the items in the sub menu to stack vertically on top of one another.
This is a css issue. The inner <ul> should have the style: width : 100% which comes from dropdown.css, but it is being overridden by themes/nvidia.com/default.css where it is specified as: width: 170px. So you can change that value back to 100% by adding it in your own custom css file.
dropdown.css:
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
themes/nvidia.com/default.css:
ul.dropdown ul {
width: 170px;
background-color: #333;
color: #fff;
font-size: 11px;
text-transform: none;
filter: alpha(opacity=90);
-moz-opacity: .9;
KhtmlOpacity: .9;
opacity: .9;
}
mystyle.css:
ul.dropdown ul{
width:100% !important;
}
Related
I'm a newbie to html and css, and I was wondering if this is possible in pure css.
So I made 3 divs, all fitted perfectly to my screen size. What I am wondering is if you make the "Menu" fixed so it scrolls along, can you change the starting position of it?
<div class="red"></div>
<div class="blue">
<h1>Menu</h1>
</div>
<div class="green"></div>
This is the CSS that goes along with it:
.red{
background-color: red;
width: 100%;
height: 1080px;
}
.blue{
background-color: blue;
width: 100%;
height: 1080px;
}
.green{
background-color: green;
width: 100%;
height: 1080px;
}
h1{
font-size: 100px;
position: fixed;
top: 0;
}
So what I basically mean is can "Menu" be fixed from when I scroll across the blue div and downwards while it's not visible yet on the red div? (so the 'starting position' of it is actually on the blue div)
Sorry if the question is poorly explained, english is not my native language. Thank you in advance.
You can just hide "Menu" on red and green divs using z-index.
CSS:
.red{
background-color: red;
width: 100%;
height: 1080px;
z-index:3;
position: relative;
}
.blue{
background-color: blue;
width: 100%;
height: 1080px;
z-index:1;
}
.green{
background-color: green;
width: 100%;
height: 1080px;
z-index:3;
position: relative;
}
h1{
font-size: 100px;
position: fixed;
top: 0;
z-index:2;
}
Example: http://jsfiddle.net/3k3wyscL/
But with this solution problematically would be to add another text visible only on red or green div.
Edit: as you want to see "Menu" on green div too, you can delete green class z-index and position parameters in css.
I know you mentioned you want the solution in pure css, but if you would like to use JQuery that will be a solution.
make the menu absolute:
.persist-menu
{
position: absolute;
}
right a function to update the position of the menu
function UpdateMenuPosition() {
var el = $(".blue"),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".persist-menu", el)
if (scrollTop > offset.top) {
floatingHeader.css({top:(scrollTop)});
} else {
};
}
and call it while scrolling
$(function() {
$(window)
.scroll(UpdateMenuPosition)
.trigger("scroll");
});
Check the demo: http://jsfiddle.net/wfff74w9/4/
I'm trying to center my content div. It's set to 100%, and the div is contained in body, which is also set to 100%. I have a max-width: 1400px because I don't want my content to stretch more than that if the screen resolution is higher. The thing is, it doesn't work using margin: auto. My content stands on the left, uncentered on screen wider than 1400px.
If I delete the max-width, everything is perfectly centered on wide screens, but the content is stretched to the the whole screen...
#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;
}
Easiest way to achieve this, is to set the width property to the max width you need, and add max-width: 100%;. This will prevent it from being bigger than 100% but still go up to the max width. Also, you should remove the absolute positioning:
JS Fiddle
You can use the transform technique, which doesn't require extra mark-up or media queries.
#content {
position: relative; /* 'fixed' will work also. */
max-width: 500px; /* Your required width here. */
width: 100%;
left: 50%;
transform: translateX(-50%);
}
Here's a demo https://jsfiddle.net/matharden/6uduf7av/
Use Flexbox...
Put this classes in the parent element (the body):
The HTML
<body class="p-flexbox flex-hcc">
<!-- The content -->
</body>
Where:
p-flexbox means parent-flexbox
flex-hcc means flexbox-horizontal-center-center
The CSS
.p-flexbox {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Cheers,
Leonardo
I have an OUTER div with two inner divs:
one of them is VERTICAL SIDEBAR whose content is fairly short
second one is div with MAIN PAGE whose content varies
They are both set to float: left, so they are next to each other.
I already learned that when setting height or min-height in percentage, all the parents need to have their height specified also.
I would like them both to be stretched to the end of the page. Havent managed to do that, problems begin when MAIN PAGE div is longer than monitor height( so there needs to be scrollbar), then I usually end with that nasty scrollbar inside MAIN PAGE div or I end with the SIDEBAR div being too short.
ok you should set the Outer divs css like so
.outer{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:auto;
}
This will set the outer div to completely fill the window, with a side bar to scroll the length of the rest of the page. You would only have one main side scrollbar.
Now if you want the sidebar to just fill the page. set its css like so:
.sideBar{
position:absolute //can be relative if necesary.
top:0;
bottom:0;
overflow:none;
}
Now this sets the sidebar to the exact height of the outer div. so it will span the entire page and the overflow is set to none to ensure no scrollbar.
Now the outer div's and sidebar div's height should be dictated by the main div, and you should only have one clean scroll bar.
You could do something like this:
jsFiddle
Setting display: table-cell on both div's inside the outer div with display: table-row will ensure they are always the same height, you'll have to set display: table on body for this to work, or you could just set it directly on the outer div instead of table-row. That will work just fine. This approach should work on anything better than IE7.
CSS:
html {
position: absolute;
bottom: 0px;
top:0px;
left: 0px;
right: 0px;
overflow: scroll-x;
}
body {
height: 100%;
padding: 0px;
margin: 0px;
display: table;
}
.outer {
display: table-row;
height: 100%;
width: 100%;
}
.sidebar, .mainpage {
display: table-cell;
height: 100%;
}
.sidebar {
width: 200px;
background-color: #EFEFEF;
}
HTML
<div class="outer">
<div class="sidebar">sidebar</div>
<div class="mainpage">mainpage</div>
</div>
After seeing your site, this is the fix:
.Page {
width: 970px;
min-height: 100%;
width: 100%;
display: table;
}
.Sidebar {
width: 257px;
background: url(img/sidebar-bg.png) repeat-y;
margin-left: 23px;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
EDIT: I forgot the .Page styles, I added it.
EDIT: Also, if you want to center it, then use this:
html, body {
height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
line-height: 21px;
background: url(img/bg-page-01.jpg) no-repeat;
background-position: 50% 0%;
}
.Page {
height: 100%;
display: table;
margin: 0 auto;
}
.Sidebar {
width: 257px;
height: 100%;
background: url(img/sidebar-bg.png) repeat-y;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
height: 100%;
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
If your talking about height issues here, then use this:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#main, #sidebar {
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box; /* eliminates increased height due to padding & child margins */
}
#sidebar { background: blue; width: 200px; float:left; margin: 0; }
#main { background: green; width: 960px; margin: 0 0 0 200px; }
edit: fiddle: http://jsfiddle.net/jTwqe/
I'm not really sure what your issue is, but is an alternate solution.
.outer { display: table; }
.sidebar, .main { display: table-cell; padding: 10px; }
.sidebar { background: green; }
.main { background: blue; }
Fiddle: http://jsfiddle.net/Q5CmR/
What code do I add/ replace/ remove to change the size ofmarketbot.net
Are you talking about the global navigation menu or the slider that is on the page? The slider looks like it has a margin problem (in both I.E. 8 and Google Chrome).
I adjusted the css class named content-top to the following, so it isn't overflowing into the header:
.content-top
{
position:relative;
margin-top: 80px;
margin-bottom: 5px;
}
After I made the adjustments, it looks somewhat cleaner in the slider and header divs.
#header {
background: #FFFFFF
width: 100%;
padding: 30px 0px;
position:relative;
margin-top: 80px;
margin-bottom: 5px;
}
i didn't completely understand your question but i have tried to answer it.
you would need to edit
#header {
background: #FFFFFF
width: 100%;
padding: 20px 0px;
}
My modal css settings are:
.ModalWindow {
background-color: #FFFFFF;
position: absolute;
top: -1000px;
display: block;
z-index: 1000;
border: 0px solid #000000;
border-radius: 6px;
}
I haver a textbox in y modal popup and the color picker sits next to it. but when I click the colorpicker it goes behind the modal popup.
Add following css style rule: .ajax__colorPicker_container { z-index: 1001 !important; } or change z-index property of .ModalWindow class to 999;