I have a div with this style:
#menudiv{
width:20%;
padding:3px;
float:left;
height:100%;
font-family:ubuntu;
font-size:25px;
color:#404040;
}
The problem is that although the div is placed correctly and has the right visual attributes, the content in this div is disabled. As in, the data cannot be selected with click-moving the mouse and the links in this place are unclickable :S
What am I doing wrong here?
P.s. there are two other divs in this section of the page which these styles:
#content{
position:relative;
}
div.sidebar{
float:right;
margin-right:25px;
margin-left:5px;
padding:5px;
font-family:verdana;
font-size:10pt;
width:300px;
border:solid 2px #a0b0c0;
display:flex;
text-align:justify;
}
The content in these divs is normal and can be interacted with.
The content in the div is this:
<div id="menudiv">
<img class="titleico" src="images/home.png" /> HOME<br />
<ul id="menulist">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</div>
UPDATE 2
You can check the whole thing # http://daera.net/daera
The leftmost div (the one with HOME text and 2 list items) has the problem.
If your HTML/CSS/Javascript/JQuery code contains the following, please remove them...
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
-o-user-select:none;
unselectable="on"
onselectstart="return false;"
onmousedown="return false;"
Option 1
remove this block from the code
#contentdiv {
position: relative;
}
Option 2
#contentdiv {
position: relative;
float: left;
width: 200px; // give what ever required
}
issue will be resolved
Related
Well, I coded this page, but I got stuck at why does the third column is pushing down my text (or other elements). It uses the same style from the first box, but while the first box is ok, the third one is pushing the elements down by some pixels.
Like this:
HTML
<div id="contentWrapper">
<div id="sideBar">
<div class="sidebarBox"></div>
<div class="sidebarContent">
<h4>
Índice
</h4>
<ul class="tree">
<li>
Sinopse
</li>
<li>
Tropas
</li>
<li>
Geladeira
<ul>
<li>
Lógica
</li>
<li>
Gênio
</li>
<li class="last">
Horror
</li>
</ul>
</li>
<li>
Notas
</li>
<li>
Mídia
</li>
<li class="last">
Referências
</li>
</ul>
</div>
</div>
<div id="mainBody"></div>
<div id="infoBar">
<div class="sidebarBox"></div>3º Column
</div>
</div>
CSS
* {
margin:0;
padding:0;
font:normal normal 14px/20px Helvetica,Arial,sans-serif
}
h4 {
font-size:14px;
font-weight:700;
text-transform:uppercase;
padding-top:10px;
border-bottom:2px solid #2a558c;
margin-bottom:10px
}
#contentWrapper {
display:table;
border-spacing:0;
width:100%;
height:500px
}
#contentWrapper > div {
display:table-cell
}
#sideBar {
background-color:#E4E5DD;
width:200px
}
#mainBody {
background-color:#EEEEE6
}
#infoBar {
background-color:#e4e5dd;
width:200px
}
#footer {
background-color:#323540;
height:50px
}
.sidebarBox {
background-color:#323540;
height:30px;
width:100%
}
.sidebarContent {
padding:15px
}
I messed a lot with the Firebug and even tried to open it in IE and Chrome, with same results. Both columns use the same CSS, and this difference is freaking me out. I thought about "fixing" it with some negative margins, but I want to understand the problem first, insted of "workahacking" away.
Thanks a lot in advance!
Add vertical-align: top to #contentWrapper > div. Currently it is baseline.
Have a fiddle!
CSS
#contentWrapper > div {
display: table-cell;
vertical-align: top;
}
Without vertical-align: top, the div is basing its vertical alignment on .sidebarContent which has 15px of padding. This is resulting in the 15px gap.
Change the following and it should fix your problem. I've found that when using display:table-cell it always mis-aligns the last cell unless I specifically give it a vertical alignment
#contentWrapper > div {
display: table-cell;
vertical-align:top;
}
Example
Add display:inline-block to this class:
.sidebarBox {
background-color: #323540;
height: 30px;
width: 100%;
display: inline-block;/*Add this*/
}
fiddle
.sidebarBox {
float:right;
}
will work.
I am trying to make a list with square bullets in different colors with square size independant of the font size.
I need to use font sizes in em or %.
That's my best try so far: http://jsfiddle.net/3GMjp/29/
<ul>
<li>
<div>
<span class='li_box green'></span>
<span>Element 1</span>
</div>
</li>
<li>
<div>
<span class='li_box red'></span>
<span>Element 2</span>
</div>
</li>
<li>
<div>
<span class='li_box blue'></span>
<span>Element 3</span>
</div>
</li>
<ul>
css:
ul {
padding:0;
margin:0;
}
li {
font-size: 1.5em;
list-style-type:none;
line-height: 2em;
}
.li_box {
float:left;
width:10px;
height:10px;
vertical-align:middle;
margin-right:10px;
}
.red{ background-color:red}
.green{ background-color:green}
.blue{ background-color:blue}
Could someone help me to center the boxes without adding px-measures?
Any working solution (would be appreciated)!
See I have done modification in the CSS and HTML :
Please see URL : http://jsfiddle.net/3GMjp/33/
HTML code:
<li>
<div>
<span class='li_box green'></span>
<span class='spn'>Element 1</span>
</div>
</li>
CSS changes :
ul {
padding:0;
margin:0;
}
li {
font-size: 1.5em;
list-style-type:none;
line-height: 2em;
}
li div {
display:table;
}
.spn{
display:table-cell;
}
.li_box {
display:table-cell;
float:left;
width:10px;
height:10px;
vertical-align:middle;
margin-right:10px;
}
.red{ background-color:red}
.green{ background-color:green}
.blue{ background-color:blue}
I've updated your fiddle here.
If you float an element, it will become a block element, and thus vertical align won't work. The span with the text, unless floated as well, will wrap to the next line.
Inline block seems to work just fine:
.li_box {
display: inline-block;
width:10px;
height:10px;
margin-right:10px;
}
If you're simply looking to center the content of the divs, this should be all you need:
div { text-align: center; }
try to use this:
li {
...
text-align:center;
}
Adding margin top to .li_box will fix your issue.
.li_box {
...
margin-top: 1%;
}
I am trying to make the horizontal navigation menu take up all available width from parent element.
I have tried using the display:table and display:table-cell but that did not work.
Other methods such as using overflow and width:auto doesn't work either.
The list is created by Joomla through a menu module.
html
<div id="DivN">
<jdoc:include type="modules" name="position-1" />
</div>
html (When viewing on browser)
<div id="DivN">
<ul class="nav menu nav-pills">
<li class="item-101 current active">
Home
</li>
<li class="item-113">
School Info
</li>
<li class="item-114">
Achievements
</li>
<li class="item-115">
News & Events
</li>
<li class="item-116">
Parents & Carers
</li>
<li class="item-117">
Community
</li>
<li class="item-118">
Contact Us
</li>
</ul>
</div>
css
#DivN{
width:100%;
height:42px;
border-top:1px solid black;
border-bottom:1px solid black;
text-decoration:none;
background-color:black;
text-align:center;
font-size:13px;
font-weight:700;
}
#DivN ul{
list-style:none;
width:100%;
}
#DivN ul li{
display:inline-block;
/*float:left;*/
line-height:22px;
height:32px;
list-style-type:none;
margin:4px;
overflow:hidden;
width:auto;
}
I have already tried numerous ways for the past few days...
Yet none of what is found on the internet works.
I do not know what the classes added by Joomla do, nor do I know where they are.
The navigation bar looks like this: https://www.dropbox.com/s/5sw94euzbsgwvrc/Capture.PNG
When mouse is over a button: https://www.dropbox.com/s/lv73war905ii0rh/2.PNG
How can I get it so the list will take up all available space while they are the same size?
If equal width among the items is important to you, you can float the items to the left and give them a set equal width (this works when you know how many items you have. Alternatively, you can use js to determine the width if you have a variable number of menu items):
#DivN{
width:100%;
height:42px;
border-top:1px solid black;
border-bottom:1px solid black;
text-decoration:none;
background-color:black;
text-align:center;
font-size:13px;
font-weight:700;
}
#DivN ul{
list-style:none;
width:100%;
height: 100%;
padding: 0;
margin: 0;
}
#DivN ul li{
float:left;
line-height:37px;
height:100%;
list-style-type:none;
margin:0;
overflow:hidden;
width: 14.28571428571429%;
cursor: pointer;
}
#DivN ul li:hover{
background-color: gray;
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
#DivN ul:before,
#DivN ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
#DivN ul:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
#DivN ul {
*zoom: 1;
}
Here is a fiddle: http://jsfiddle.net/kZb9C/
Updated to make the cf (clearfix) target your element: http://jsfiddle.net/4LUQe/16/
If you want to use the display: table approach, just remember to use display: table-cell on the <li> elements. Also, use vertical-align: middle if you want to vertically center them. (Note that table and table-cell CSS properties do not work in IE7 and below).
Here's a fiddle with the second approach (table): http://jsfiddle.net/kZb9C/1/
I think You should try to use
display: table
once again (for the nav element) and display: table-row for the ul, and display: table-cell for the li.
If You have any problems, please write, but this method SHOULD work.
Don't be afraid of display: table, it isn't an old table element, but really a great trick to make good layout with validate and semantic HTML. Hope it helps
UPDATE
The same working solution: CSS dynamic horizontal navigation menu to fill up specific width (table behavior)
<style>
div { border:1px solid red; width:400px; height:400px; }
ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; }
li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; }
</style>
<div>
<ul>
<li>CELL 1</li>
<li>CELL 2</li>
<li>CELL 3</li>
<li>CELL 4</li>
</ul>
</div>
I have a normal li element, it contains a picture. Now when I hover it, it should be surrounded by a div for example which contains some descriptions for the image in the li. Please check out this link http://www.zalando.de/damenschuhe-sandaletten/ and hover the shoes. As you see, it adds information around the image.
I tried several things but the results are not really what I want. Any ideas how to to that in a good way?
Thanks!
Something like this?
<ul>
<li>
<div class="info">Info 1</div>
[Image 1]
</li>
<li>
<div class="info">Info 2</div>
[Image 2]
</li>
<li>
<div class="info">Info 3</div>
[Image 3]
</li>
<li>
<div class="info">Info 4</div>
[Image 4]
</li>
</ul>
ul{
list-style:none;
text-align:center;
padding: 0 35px;
}
li{
display:inline-block;
background: #ddd;
height:200px;
width:200px;
margin:10px;
padding:0;
position:relative;
}
li > .info{
display:none;
position:absolute;
top:0;
left:-40px;
width:35px;
height:100%;
background:#ffa;
}
li:hover{
background:#ccf;
border:5px solid #afa;
margin:5px;
}
li:hover > .info{
display:block;
}
DEMO: http://jsfiddle.net/NhfF3/
you should add a hidden div inside the li element. http://jsfiddle.net/SKxjM/
this is the CSS
.expandable .expansion { display: none; }
.expandable:hover .expansion { display: inline; }
And the HTML should look like this
<ul>
<li class="expandable">this is expandable
<div class="expansion">more info</div>
</ul>
You could try using the CSS :after tag with content.
<li>
<img src="whatever.jpg">
</li>
li:hover:after{
content: 'image caption here';
}
Also, you could dynamically add it, if that makes it work for your site easier:
document.styleSheets[0].addRule('li:hover:after', 'content: \'image caption here\'');
I have a drop down menu (#dropDownMenu) which appears when the "#headerNav" of my website is hovered over. It works properly if I position the #dropDownMenu (originally hidden with display:none until link is hovered over) slightly over the #headerNav div.
This stops the slight flickering that is caused if the cursor isn't moved over fast enough to the drop down menu when it appears. By slightly overlapping #dropDownMenu over #headerNav this makes it seem like the #headerNav is still being hovered over when cursor is actually in the #dropDownMenu.
Anyway I now want to hide the overlapping part of #dropDownMenu behind header or #headerContent so everything looks neater and so the drop down menu actually looks like it's appearing beneath the #headerNav.
I've tried different z-index settings and none seem to work which is quite annoying. When I set the z-index of #headerNav:hover #dropDownMenu to -1 it is hidden behind all content as expected.
If I set z-index of header or #headerContent to a number higher than "#headerNav:hover #dropDownMenu" then hover over #headerNav there is no difference. I can still see #dropDownMenu overlapping.
CSS:
header {
position:fixed;
top:0;
right:0;
left:0;
height: 40px;
z-index:20;
}
#headerContent {
background-color: $main-background-color;
width: $site-width;
margin:0px auto 0px auto;
height:40px;
}
#headerNav {
float:right;
height:37px;
width:auto;
margin-top:1px;
background-color:#464646;
color:#cccccc;
}
#headerNav:hover {
background-color:#626262;
cursor:pointer;
color: white;
}
#headerNav:hover #dropDownMenu {
position:absolute;
background-color:white;
border:1px solid gray;
top:35px;
right:-39px;
height:300px;
width:200px;
font-weight:bold;
color:gray;
display:block !important;
z-index:1;
}
ul li {
float:right;
}
#photoThumbnail img {
height:28px;
width:31px;
padding-top:5px;
padding-right:8px;
-moz-border-radius: 1px 12px 1px 12px;
border-radius: 1px 12px 1px 12px;
}
#currentUser {
position:relative;
padding-top:12px;
padding-left:12px;
padding-right:6px;
}
#siteNavigation {
display:none;
}
HTML
<header>
<div id='headerContent'>
<div id='LogoHolder'>
</div>
<nav id='headerNav'>
<ul>
<li id='photoThumbnail'></li>
<li id='currentUser'>
<ul id='dropDownMenu'>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
Examples and corrections will be greatly appreciated.
Kind regards
If your z-index setting is being ignored you might need to add position property, set it to relative or whatever it needs to be. I'm pretty sure z-index is ignored if position property is not set.
I think you'll find that you are trying to hack your way around a fundamental markup issue. THe usual way to do ul based drop downs is this
<ul id='headerNav'>
<li>Menu Title
<ul class='dropDownMenu>
<li>link1</li>
<li>link2</li>
</ul>
</li>
</ul>
This way you set the hover action on #headerNav li:hover and your drop down is a child of your hover element and the menu will stay open (and not flicker) when you move your mouse over the .dropDownMenu as it is also being hovered. You're close.. you just need to wrap your html a bit better and adjust your css to hover on the li and show and hide the "li ul.dropDownMenu"
This should get rid of the need for your overlap - and fix your problem.