How can I have a dropdown submenu with Twitter Bootstrap

How can I have a dropdown submenu with Twitter Bootstrap - javascript

I am trying to put a submenu inside "The best movies by genre" but it's now working
http://www.bootply.com/y1aWXXwQDR
How can I put the links (action, thriller, comedy..) as a submenu?

Using Bootstrap 3, this is a little tricky. I found this resource which provides a good example by including a chunk of extra CSS:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
The HTML to use this code is pretty intuitive:
<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
Here it is as a JsFiddle for forking and re-use: http://jsfiddle.net/zephod/9vkbgp74/1/

Is something like this what you're looking for?
$(function() {
$('#byGenre').popover({
content: $('#genres').html(),
trigger: 'click',
html: true,
});
});

Related

Unable to view ls in the overflow css

I am facing the problem of displaying the ls elements which is in a div > ul with overflow css. This is a vertical list with drop-down list. I am using a 'overflow:scroll' on the vertical list. Now if there is no overflow in the code, it just works fine. But with the overflow, the dropdown menu is not being shown.
Here is the jsfiddle. https://jsfiddle.net/aryasobn/mpb6h831/
Here is the css and html code.
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu{float:none;}
.dropdown-submenu>.dropdown-menu{left:-100%;margin-right:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.sidebar{
position: absolute;
top: 0px;
right:0px;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
z-index: 10;
float:right;
margin-right:20px;
height: 700px;
overflow: scroll;
}
.sidebar ul{
z-index:25;
}
#mainist li{
z-index:50;
}
</style>
<div id="floating-panel" class="sidebar">
<ul class="dropdown-menu" style="display: block; position: static;" id="mainlist">
<li class="dropdown-submenu">Set1
<ul class="dropdown-menu" id="usa">
<li>Reebok</li>
<li>Nike</li>
</ul>
</li>
<li class="dropdown-submenu">Set1
<ul class="dropdown-menu" id="canada">
<li>Reebok</li>
<li>Nike</li>
</ul>
</li>
</ul>
</div>
Can some one help me with this.
Here is an image how it is currently looking:
Thanks all.

Apply overflow scroll to inner ul not on .sidebar. Check Snippet. If you want another thing, please tell and I will modify it.
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #ffffff;
}
.dropdown-submenu {
float: none;
}
.dropdown-submenu>.dropdown-menu {
left: -100%;
margin-right: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.sidebar {
position: absolute;
top: 0px;
right: 0px;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
z-index: 10;
float: right;
margin-right: 20px;
height: 700px;
}
.sidebar ul {
z-index: 25;
}
.abc {
width: 150px;
height: 150px;
overflow: scroll;
}
#mainist li {
z-index: 50;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div id="floating-panel" class="sidebar">
<ul class="dropdown-menu" style="display: block; position: static;" id="mainlist">
<li class="dropdown-submenu">Set1
<ul class="dropdown-menu abc" id="usa">
<li>Reebok</li>
<li>Nike</li>
<li>Reebok</li>
<li>Nike</li>
<li>Reebok</li>
<li>Nike</li>
<li>Reebok</li>
<li>Nike</li>
</ul>
</li>
<li class="dropdown-submenu">Set1
<ul class="dropdown-menu abc" id="canada">
<li>Reebok</li>
<li>Nike</li>
</ul>
</li>
</ul>
</div>
</body>

up and down arrow onclick

I Have created HTML and css for a button where I need a up and down arrow toggle based on click. I am fine with the HTML and CSS however not so good with using jQuery for this. Could anyone start me off on this?
On click .js-custom-sleeve-option arrow should change up/down.
.js-custom-sleeve-option {
width: auto;
min-width: 3.8rem;
height: 3rem;
display: inline-block;
border: 1px solid #d1cac5;
background: #f7f7f7;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
text-align: center;
}
.js-arrow-down {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #233354;
position: relative;
left: 7px;
}
.js-arrow-up {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid #233354;
position: relative;
left: 6px;
bottom: 12px;
}
<div>
<a class="js-custom-sleeve-option">
<span class="js-arrow-down"></span>
</a>
</div>

this will be something like this.. ofcourse you have to modify it according your needs
$(function(){
$(".js-custom-sleeve-option").on('click' , function(){
this.find('span').removeClass('js-arrow-down').end().addClass('js-arrow-up');
});
});

you could do with toggleClass() of jquery function
$('.js-custom-sleeve-option').click(function(){
$(this).children('span').toggleClass('js-arrow-down js-arrow-up')
})
.js-custom-sleeve-option {
width: auto;
min-width: 3.8rem;
height: 3rem;
display: inline-block;
border: 1px solid #d1cac5;
background: #f7f7f7;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
text-align: center;
}
.js-arrow-down {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #233354;
position: relative;
left: 7px;
}
.js-arrow-up {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid #233354;
position: relative;
left: 6px;
bottom: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a class="js-custom-sleeve-option">
<span class="js-arrow-down"></span>
</a>
</div>

How to format a multi-level drop down menu

I wanted to use the following drop down on my webpage:
Html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
CSS:
html{
height:100%;
}
body{
height:50%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: table;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
display: table-cell;
position: relative;
vertical-align: top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display: table-cell;
vertical-align: top;
position: relative;
padding: 0;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 101vh;
width: 216px;
background: #272930;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/MaGiO/pen/YXXzeJ
But, when I hover over any list item and another sub-list opens, then I don't want the black part to extend till the end of the screen, I want that when I hover over a list item then a new list extending only till the last list item should occur. What do I change in this?
Also, when I try to use margin-left in the .mn-sidebar in CSS, then the dropdown shifts to the right, but a bullet symbol appears before the first list item (outside the dropdown menu), why is that happening? I want the dropdown menu to appear a bit on the right.

Comment the height part under .dropdown-submenu >
.dropdown-menu { css
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
/* height: 101vh;*/Comment this out
width: 216px;
background: #272930;
}
And please explain what do you mean by I want the dropdown menu to appear a bit on the right.
See This
Ok try the below code
.mn-vnavigation li a {
margin-left:15px; Add this style
}
give the margin-left according to your requirement
See This

JQuery slideshow not working probably

I'm new to web development, I integrated this slider into my page : Slideshow source+tutorial
The slider work if I run it on any local page different to mine it runs perfectly, but on mine the following problems occur :
1-pagination + arrows don't show up
2-I cant center it
my CSS :
<style>
#font-face {
font-family: imp1;
src: url(fonts/blackchancery/BLKCHCRY.TTF);
}
* { margin: 0; outline: none; }
html {
background: #32c951 url(img/noise.png);
}
body {
padding-right: 25px;
padding-left: 25px;
padding-top: 10px;
padding-bottom: 25px;
width:1200px;
}
#header
{
position:top fixed;
padding-bottom:15px;
}
#menu-bar {
margin: 0px 0px 0px 0px;
padding: 6px 0px 4px 0px;
line-height: 100%;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
box-shadow: 0px 0px 0px #666666;
-webkit-box-shadow: 0px 0px 0px #666666;
-moz-box-shadow: 0px 0px 0px #666666;
background: #2D964D url(img/noise.png);
border: solid 1px #FFFFFF;
z-index:999;
}
#menu-bar li {
margin: 0px 0px 3px 0px;
padding: 0px 6px 0px 12px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bolder;
font-family: helvetica;
font-style: italic;
font-size: 16px;
color: #FFFDFD;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
margin: 0;
margin-bottom: 3px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
text-shadow: 0px 0px 0px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #82FF4D;
color: #2A7D35;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #82FF4D !important;
color: #000000 !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul {
background: #2A7D35;
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 30px;
left: 0;
border: solid 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#FFFFFF !important;
font-size:15px;
font-style:italic;
font-family:helvetica;
font-weight: bold;
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
#wrapper {
background-color: rgba(255, 255, 255, 0.8); /* (R, B, G, OPACITY */
position:center;
}
#main_content {
text-align:center;
}
#footer {
position:fixed;
height:20px;
background-color:red;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
background:#FFFFFF url(img/noise.png);
text-align:center;
}
#footer_content {
width:960px;
}
#footer li {
display:inline;
}
p {
font-family:imp1;
}
#welco_mes {
font-family:imp1;
font-size:35px;
color:black;
}
</style>
I suspect the whole problem comes from my CSS; an element is causing the slideshow to behave this way.
JSFiddle link: https://jsfiddle.net/nvsp94d7/3/
Though if the js+css of the slideshow are included, the slideshow immediatly sticks to the left+all its controls never show up

Here's a fork of your fiddle, https://jsfiddle.net/68z476g2/1/, that has the pagination and the slideshow centered compared to the parent div. I had to replace the slideshow pictures because they were not provided.
What comes to pagination not showing, I suspect it is because you didn't copy pagination.png to the correct location. It is referred to by the CSS and therefore it needs to be at ../images/pagination.png compared to the location of craftyslide.css
Centering the div was just matter of adding
#slideshow {
margin: 0 auto;
}
to your CSS file

div property width not maximum/Collapse Expand

I have two questions please.
1 - I have div called id="rightcolumn" in the right side padding: 10px;
Inside the div id="rightcolumn" I have anther div called rightcolumn_s.
This div id = rightcolumn_s not open to max-width:100%;.why?
2 - In the div id="rightcolumn" I have Collapse/Expand this Collapse Expand have points.
The points are on the left side after the item_1,item_2,item_3. I need the points
Before the words item_1,item_2,item_3 in the right side.
Thanks for any help.....
The website
css code:
a { color:blue; }
#content { background-color:#dddddd; width:200px; margin-top:2px; }
html{
height:0px;
text-align: right;
width:1280;
height:1024px;
}
body {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_body.png');
background-repeat:repeat;
overflow:hidden;
font-family:Palatino Linotype;
font-family: Arial;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height:600px;
}
.insidWindow {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_inside_window.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
margin: 0px auto 10px auto;
padding: 10px;
position: relative;
top:-515px;
width:52.5%;
}
h2 {
color: #443333;
font-size: 14px;
line-height: 7px;
margin: 0px 5px 0px 5px;
padding: 5px;
color: white;
}
.lineAzure{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
line-height: 7px;
margin: 0px 0px 0px 0px;
height:15px;
}
#lineAzurebotom {
background: none repeat scroll 0 0 #880000;
line-height: 11px;
margin: 0;
position: relative;
top: -516px;
}
#leftcolumn_s {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 115px;
margin: 0 auto 0 auto;
padding: 10px;
position: relative;
top: 360px;
width: 88%;
}
#rightcolumn_s{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 115px;
max-width:100%;
margin: 0px;
padding: 10px;
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
}
#chatRead {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_dark.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 90px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#chatWrite {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 25px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#lineYelow{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 7px;
height:15%;
color: #745B1B;
font-family: 'CarterOneRegular';
font-size: 16px;
line-height: 34px;
margin: 0;
padding: 0;
text-shadow: 1px 1px 0 #FFF0D8;
width: auto;
}
#wrapMein{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_wrapMein.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
overflow:hidden;
margin: 0px 5px 20px 5px;
padding: 0px 0px 0px 0px;
position: relative;
height:540px;
}
.column {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 505px;
margin: 5px;
padding: 0 5px;
position: relative;
top: -15px;
width: 20%;
}
.rcolumn{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
margin: 0px 0px 0px 0px;
padding: 10px;
position: relative;
width:20%;
height:495px;
position:relative;
top:-528px;
float:right;
color: red;
}
.ui-wrapper {
border: 2px solid #70A029;
}
.ui-resizable {
position: relative;
}
.ui-resizable-e {
background: url("../pic/resizable-e.gif") repeat scroll right center transparent;
cursor: e-resize;
height: 100%;
right: 0;
top: 0;
width: 6px;
}
.ui-resizable-handle {
display: none;
font-size: 0.1px;
position: absolute;
}
.ui-resizable-s {
background: url("../pic/resizable-s.gif") repeat scroll center top transparent;
bottom: 0;
cursor: s-resize;
height: 6px;
left: 0;
width: 100%;
}
.ui-resizable-se {
background: url("../pic/resizable-se.gif") repeat scroll 0 0 transparent;
bottom: 0;
cursor: se-resize;
height: 9px;
right: 0;
width: 9px;
}
.maintitle1 {
background: center top #2C6987 repeat-x scroll ;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
box-shadow: 0 1px 0 #528CBC inset;
color: #FFFFFF;
font-size: 16px;
font-weight: 300;
padding: 6px 10px 6px 10px;
}
#logo{
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
position:fixed;
top:34px;
left:0px;
height: 9.6%;
}
.resolution span {
color: #2B8E00;
display: block;
font-size: 55px;
text-transform: lowercase;
}
HTML code:
<body >
<img id="logo" src="http://www.centerwow.com/linkguide/guide_files/pic/Notebook.png" alt="Link Guide" />
<h2>this is body background.</h2>
<div class="lineAzure">this is div class lineAzure </div>
<div id="lineYelow">this is div id LineYelow</div>
<div id="wrapMein">
<div class="lineAzure" style="margin: 0px 22.6% 0px 22.6%;" "width:52.5%"="">this
div
classlineAzurespnbsp;| | | | | |</div>
<div id="leftcolumn" class="column">here is div id = leftcolumn
<div id="leftcolumn_s">here is div id = leftcolumn_s</div>
</div>
<div id="rightcolumn" class="rcolumn">div id="rightcolumn"
<div class="floatRight"><H3 class="maintitle1">articals</H3></div>
<ul>
<li>
Item 1
<ul id="node1" style="display:none">
<li>Sub-item 1</li>
<li>
Sub-item 2
<ul id="node2" style="display:none">
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
</ul>
</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>
Item 2
<ul id="node3" style="display:none">
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<div id="rightcolumn_s">here is div id = rightcolumn_s</div>
</div>
<div class="insidWindow">insidWindow
<div id="windowResize" class="ui-wrapper" style="height: 340px; width: 350px;">
<div style="position: absolute; top: 20px; left: 20px; ">
Resize me<br>
Please try to resizeme:<br> www www www.
<div class="resolution">
You are using
<span id="resolutionNumber"></span>
</div>
</div>
</div><br>
</div><!--insidWindow-->
<div id="chatRead">here is div id = chatread</div>
<div id="chatWrite">here is div id = chatWrite</div>
<div id="lineAzurebotom">here is div id = lineAzurebotom</div>
</div><!--wrapMein-->
</body></html>

1) This div id = rightcolumn_s not open to max-width:100%;
In order for the max-width property to work, you also need to set width for the element.
max-width: 100%;
width: 100%;
2) I need the points Before the words item_1,item_2,item_3 in the right side.
Define float: right; to the ul and this will put the points on the right as well.
<ul style="float: right;">

We Keep Coding

JavaScript is the programming language of the Web.

How can I have a dropdown submenu with Twitter Bootstrap - javascript

I am trying to put a submenu inside "The best movies by genre" but it's now working http://www.bootply.com/y1aWXXwQDR How can I put the links (action, thriller, comedy..) as a submenu?

Is something like this what you're looking for? $(function() { $('#byGenre').popover({ content: $('#genres').html(), trigger: 'click', html: true, }); });

Related

Unable to view ls in the overflow css

up and down arrow onclick

How to format a multi-level drop down menu

JQuery slideshow not working probably

div property width not maximum/Collapse Expand

Categories

Resources