I'm creating a menu and using (position:"absolute" & height:"100%") but does not respond to screen resize properly because of 50px space from top and the last item does not fit into view.
and I don't want to make (top:"0").
Here is the HTML:
<section class="sidebar">
<div class="user-name">
<img src="/" alt="user-name" />
<span>User Name</span>
</div>
<nav class="menu-list">
<ul>
<li>
<a href="#">
<i>☺</i>
<span>Coffee Bourse</span>
</a>
</li>
<li class="current">
<a href="#">
<i>☺</i>
<span>Coffee Bourse</span>
</a>
<ul>
<li>
<a href="#">
<span>fghjk</span>
</a>
</li>
<li class="active">
<a href="#">
<span>fghjk</span>
</a>
</li>
<li>
<a href="#">
<span>fghjk</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i>☺</i>
<span>Coffee Bourse</span>
</a>
</li>
<!-- some other lis here -->
<li>
<a href="#">
<i>☺</i>
<span>End</span>
</a>
</li>
</ul>
</nav>
</section>
The css:
.sidebar {
background: #333;
position: fixed;
width: 200px;
height: 100%;
right: 0;
top: 0;
direction:rtl;
}
.menu-list {
margin-top: 5px;
}
.menu-list ul{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
}
.menu-list ul:hover{
overflow:auto;
}
and here is jsFiddle I created:
http://jsfiddle.net/Meysam/dcPN8/
Thanks to #GCyrillus, I finally fixed it this way
.menu-list ul {
position:absolute;
width:100%;
height:100%;
/* fix */
/* top:0;
padding-top:1.5em; */
box-sizing:border-box;
padding-bottom:55px;
/* end fix */
overflow:hidden;
}
Here is the fixed version :
http://jsfiddle.net/Meysam/dcPN8/9/
you can use box-sizing to include a padding at top of ul and height:100%;
.menu-list ul {
position:absolute;
width:100%;
height:100%;
/* fix */
top:0;
padding-top:1.5em;
box-sizing:border-box;
/* end fix */
overflow:hidden;
}
http://jsfiddle.net/dcPN8/2/
http://jsfiddle.net/dcPN8/5/ (added position:relative for .user-name )
Related
im trying to make the background of a parent div change when hovering over a li in its child.. i did that but now i want to display a different img when hovering over a different li inside the same child div... i cant seem to do that and cant find anyone else having the same problem.. and if it needs JavaScript also i dont mind
i tried to specify the li but it doesnt work
heres the css code
#mainpage{
pointer-events: none;
}
#listman {
pointer-events: auto;
}
#mainpage:hover {
background: url("bg1.jpg");
background-repeat: no-repeat;
height: 500x;
background-position: top;
background-size: 100%;
}
and heres the html part
div id="mainpage">
<div id="listman">
<ul class="bigger">
<li id="listman1" href="#"> <a> 1 </a> </li>
<li id="listman2" href="#"> <a> 2 </a> </li>
<li id="listman3" href="#"> <a> 3 </a> </li>
<li id="listman4" href="#"> <a> 4 </a> </li>
<li id="listman5" href="#"> <a> 5 </a> </li>
<li id="listman6" href="#"> <a> 6 </a> </li>
<li id="listman7" href="#"> <a> 7 </a> </li>
<li id="listman8" href="#"> <a> 8 </a> </li>
</ul>
</div>
</div>
</div>
i want to make a different img to appear when hovering over (listman2) can anyone help me?
Try using this CSS syntax:
div#listman > ul.bigger > div#listman2 > li {
background-image: url("bg1.png");
}
div#listman > ul.bigger > div#listman2 > li:hover + div#listman > ul.bigger > div#listman2 > li {
background-image: url("bg2.png");
}
I'm not sure it will work though
If the li elements do not have their own position and you can make mainpage be the closest positioned element to them then you can put the image on an absolutely positioned pseudo element on each li when it is hovered.
This snippet uses a CSS variable to set the background image for each li element.
#mainpage {
pointer-events: none;
}
#listman {
pointer-events: auto;
}
ul.bigger {
position: relative;
}
li:hover::after {
content: '';
position: absolute;
background: var(--bg);
background-repeat: no-repeat;
background-position: top;
background-size: 100%;
width: 100%;
height: 500px;
z-index: -1;
top: 0;
left: 0;
}
#listman1 {
--bg: url(https://picsum.photos/id/1015/1024/768);
}
#listman2 {
--bg: url(https://picsum.photos/id/1016/1024/768);
}
#listman3 {
--bg: url(https://picsum.photos/id/1018/1024/768);
}
#listman4 {
--bg: url(https://picsum.photos/id/1019/1024/768);
}
#listman5 {
--bg: url(https://picsum.photos/id/1020/1024/768);
}
#listman6 {
--bg: url(https://picsum.photos/id/1022/1024/768);
}
#listman7 {
--bg: url(https://picsum.photos/id/1023/1024/768);
}
#listman8 {
--bg: url(https://picsum.photos/id/1024/1024/768);
}
<div id="mainpage">
<div id="listman">
<ul class="bigger">
<li id="listman1" href="#"> <a> 1 </a> </li>
<li id="listman2" href="#"> <a> 2 </a> </li>
<li id="listman3" href="#"> <a> 3 </a> </li>
<li id="listman4" href="#"> <a> 4 </a> </li>
<li id="listman5" href="#"> <a> 5 </a> </li>
<li id="listman6" href="#"> <a> 6 </a> </li>
<li id="listman7" href="#"> <a> 7 </a> </li>
<li id="listman8" href="#"> <a> 8 </a> </li>
</ul>
</div>
</div>
Below is my code:
#sam_ul li {
height: 41px;
border-bottom: 1pt solid #DEDEDE;
background-color: #F8F8F8;
}
#sam_ul li {
list-style-type: none;
}
#u_l_add:before {
content: '\0FBF';
}
<ul id="sam_ul" style="margin:0px;">
<li>
<a href="#">
<span id="u_l_add" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Add</div>
</a>
</li>
<li>
<a href="#">
<span id="u_l_sear" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Search Artifact</div>
</a>
</li>
</ul>
The content pseudo element is displayed differently in both IE and mozilla. By different I mean in IE it is displaying correctly while in mozilla it is adding some extra padding and displaying the content.
check the difference between the first li element and the second li element.
Can anyone help me with this?
Add padding:0 to unordered list
#sam_ul{
padding:0
}
#sam_ul li {
height: 41px;
border-bottom: 1pt solid #DEDEDE;
background-color: #F8F8F8;
list-style-type: none;
}
#u_l_add:before {
content: '\0FBF'; }
#u_l_sear:before {
content: '\0FBF'; }
<body>
<ul id="sam_ul" style="margin:0px;">
<li>
<a href="#">
<span id="u_l_add" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Add</div>
</a>
</li>
<li>
<a href="#">
<span id="u_l_sear" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Search Artifact</div>
</a>
</li>
</ul>
</body>
Try to normalize everything. HTML and body has default margin and padding for every browser that could ruin your design. Almost all block elements has that.
Try:
html,body{
margin: 0;
padding:0;
}
Or download and add normalize.css
I have a problem with position. I want to make the icons on the right align while links are on the center of navigation. But seems like I hit a wall.
This is my HTML
<div id="nav">
<ul>
<li> HOME
</li>
<li> ABOUT
</li>
<li> MUSIC
</li>
<li> GALLERY
</li>
<li> CONTACT
</li>
<li class="navimage"> <img src="abc.jpg" />
</li>
<li class="navimage"> <img src="abc.jpg" />
</li>
<li class="navimage"> <img src="abc.jpg" />
</li>
<li class="navimage"> <img src="abc.jpg" />
</li>
</ul>
</div>
and this is my CSS
#nav {
border-bottom:2px solid #FFF;
margin-bottom:20px;
padding:0;
text-align:center;
}
#nav li {
display:inline;
}
#nav a {
display:inline-block;
padding:10px;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
#nav a:hover {
color:#DEB887;
}
.navimage img {
width:30px;
height:30px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
}
.navimage img a {
text-align:right;
}
here is the jsfiddle to check.
http://jsfiddle.net/zN92c/
Replace:
.navimage img a {
text-align:right;
}
With:
.navimage {
float:right;
}
According to your css
.navimage img a
is being aligned right. But the list item itself has no position, Try floating it to the right using:
.navimage { float: right; }
That would alight the list item to the right.
I am trying to make a navigation bar with a four columns submenus. I coded most of things, but when I creating the submenu I found the problem.
This is my HTML:
<div id="navigation">
<ul>
<li class="current">
Home
</li>
<li class="sub-menu">
Our Products
<div class="subnav product">
<div class="content">
<div class="col">
<ul>
<li class="one">
Main Menu Item
</li>
<li class="one">
Main Menu Item
</li>
<li class="one">
Main Menu Item
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="two">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="three">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="four">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="five">
<img src="" />
Promoting Peace in the Niger Delta
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="">
Service Maintenance
</li>
<li class="sub-menu">
Frequently Ask Questions
<li class="sub-menu">
Our Products
<div class="subnav product">
<div class="content">
<div class="col">
<ul>
<li class="one">
Main Sub Item
</li>
<li class="one">
Main Sub Item
</li>
<li class="one">
Main Sub Item
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Hope somebody will help me out.
Thank you.
The problem is the container width is defined at 300px
#navigation ul li > div.product {
width: 300px;
}
And its child elements are taking up 100% of that space. So you need to make sure they have room to float left.
#navigation div.col {
float: left;
height:200px;
width: 25%;
}
Hopefully that helps with your question.
Fiddle
Check this http://jsfiddle.net/qtvVK/11/embedded/result/.
I made some changes to your markup and used display:inline-block; instead of floating elements
Relevant CSS syles
/* Dropdown styles */
#navigation ul > li > ul.sub-menu {
display: none;
position:absolute;
padding:10px 0;
background:#fff;
border: 1px solid #DDDCDC;
top: 24px;
z-index: 1;
}
/* Show dropdown when hover */
#navigation ul > li:hover > ul.sub-menu {
display:block;
}
.row {
width:auto;
white-space: nowrap;
}
.col {
display: inline-block;
vertical-align: top;
padding: 0 10px;
}
i suggest using jQuery.
it has simple function called slideDown().
Here is a link to a good tutorial.
You should do like so: First hide your menu when script starts:
$("#idOfDropDownMenu").hide();
And command to drop menu down when mouse enters button and slide up when it leaves it:
$("#idOfButton").hover(function(){ //function that fires when mouse enters
$("#idOfDropDownMenu").slideDown();
}, function() { //function that fires when mouse leaves
$("#idOfDropDownMenu").slideUp();
}
Instead of using IDs you can use any CSS selector.
I hope this helps with your question.
css
ul li ul
{
display: none;
position: fixed;
margin-left: 191px;
margin-top: -37px;
}
ul li:hover ul
{
display: block;
}
ul li a:hover
{
color: #fff;
background: #939393;
border-radius:20px;
}
ul li a
{
display: block;
padding: 10px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul
{
background: #f2f2f2;
list-style:none;
padding-left: 1px;
width: 194px;
text-align: center;
}
html
<ul>
<li>Home</li>
<li>
About
<ul>
<li>About Me
<li>About Site
</ul>
</li>
<li>Contact</li>
</ul>
I'm trying to replicate Excel's Vertical Text feature in HTML and wondering if anyone has tried this or knows of an easy way to do this?
I want my text to look like:
T
H
I
S
inside of a <th> element
You could try this. Gives a little more control over spacing than using <br />
From the site:
CSS:
#vertical {
width:15em;
padding:0;
margin:0 auto;
list-style-type:none;
font-size:1.4em;
font-family:georgia, "times new roman", serif;
}
#vertical li {
float:left;
border:0.2em solid #eee;
margin:0.1em;
}
#vertical li a {
text-decoration:none;
color:#000;
display:block;
width:1.5em;
height:1.5em;
border-top:0.1em solid #000;
height:auto;
}
#vertical li a em {
font-style:normal;
display:block;
text-align:center;
background:#fff;
border-left:0.1em solid #000;
border-right:0.1em solid #000;
}
#vertical li a em.nd {
border-bottom:0.1em solid #000;
}
#vertical li a:hover {
background:#eee;
}
#vertical li a:hover em {
background:#eee;
color:#800;
}
And the markup:
<ul id="vertical">
<li>
<a href="../menu/index.html">
<em>D</em><em>E</em><em>M</em>
<em>O</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../menus/index.html">
<em>M</em><em>E</em><em>N</em>
<em>U</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../layouts/index.html">
<em>L</em><em>A</em><em>Y</em><em>O</em>
<em>U</em><em>T</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../boxes/index.html">
<em>B</em><em>O</em><em>X</em>
<em>E</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../mozilla/index.html">
<em>M</em><em>O</em><em>Z</em><em>I</em>
<em>L</em><em>L</em><em class="nd">A</em>
</a>
</li>
<li>
<a href="../ie/index.html">
<em>E</em><em>X</em><em>P</em><em>L</em>
<em>O</em><em>R</em><em>E</em><em class="nd">R</em>
</a>
</li>
<li>
<a href="../opacity/index.html">
<em>O</em><em>P</em><em>A</em><em>C</em>
<em>I</em><em>T</em><em class="nd">Y</em>
</a>
</li>
</ul>
IE-only soltuion:
<div style="writing-mode:tb-rl;filter: flipv fliph;">
The Vertical Text
</div>
You can try same thing for th tag.