I got a question (capt obvious..)
I have this html:
<div id="row-01-separator">
<ul>
<li>d</li>
<!-- -->
<li><img src="img/scroll_one.png"></li>
<!-- -->
<li>d</li>
</ul>
</div>
the Middle li with the image can noz get a background-color. Just the first and last element should have a background-color.
I got this CSS code
#row-01-separator ul {
height: 32px;
}
#row-01-separator ul li {
display: inline-block;
vertical-align: top;
height: 100%;
min-height:100%;
}
#row-01-separator ul li:first-child, #row-01-separator ul li:last-child {
background-color: white;
width: calc(50% - 38px);
height: 100%;
min-height:100%;
}
And it work. But the Problem is width: calc(50% - 38px); This doesnt work in ie8.
Do you have another idea how can I do this. I know there is a solution with javascript and oneresize.
But maybe you have solution with pure css/html and no js and no calc().
I set up something on CodePen. I think you can understand it better than: http://codepen.io/anon/pen/yBxdq
EDIT:
I decided to do the javascript/jquery alternative. I set up something on codepen, maybe someone can use is it later: http://codepen.io/anon/pen/tfqdL
Related
I've been going through problems in positioning navbar even after the fact that its responsive. Problem comes when zooming in and zooming out (except for Mozilla), and I got no choices than asking experts for a solution because I am a noob in coding.
Chrome zoom-out: https://s31.postimg.org/kjnbou0yj/zoom_out_chrome.png
Mozilla zoom-out (also perfect in zoom-in): https://s31.postimg.org/ud3lz1i3v/zoom_out_moz.png
Basically, I want to join my navbar with another div element so that it do not move from its position and I don't know how to use :target etc, and do not even know if target will solve my problem.
My need: I just need my navbar to stick to one size. With current settings, it is working PERFECTLY with MOZILLA ONLY. I don't know why it show blank space in chrome and other browsers when zoom-out and when zoom-in. Working fine with Chrome 100% zoom and working fine with Opera 100% zoom. The problem comes when zooming in or zooming out. Again, it is working perfectly for mozilla in zooming etc, no such problems with mozilla. And my navbar is responsive too.
My guess: I think that attaching this navbar with hidden div class could solve this problem. BUT I am a complete noob in coding and I can just guess.
Here is the code of my navbar:
ul.pnav {
position: relative;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border: none;
list-style-type: none;
width: 900px;
height: 55px;
margin: auto;
top: 281px;
left: 0;
right: 0;
padding: 0;
overflow: hidden;
background-color: #767676;
z-index: 9999;
}
#-moz-document url-prefix() {
ul.pnav {
top: 286px
}
}
ul.pnav li {float: left;}
ul.pnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 3s;
font-size: 17px;
font-family: Arial;
font-weight: bold;
}
ul.pnav li a:hover {background-color: #111;}
ul.pnav li.icon {display: none;}
#media screen and (max-width:680px) {
ul.pnav li:not(:first-child) {display: none;}
ul.pnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.pnav.responsive {position: relative;}
ul.pnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.pnav.responsive li {
float: none;
display: inline;
}
ul.pnav.responsive li a {
display: block;
text-align: left;
}
}
I have this in html as a code:
<ul class="pnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
This is div class to which I want to attach navbar.
<div class="fornavbar"></div>
I don't know how to proceed further, please help.
Look at this fiddle: https://jsfiddle.net/8qepe4gw/2/
In order for them to align together you just simply put them both inside of a common div like this (.container),
<div class="container">
<ul class="pnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">☰</li>
</ul>
<div class="fornavbar"></div>
</div>
And then you assign a width to the .container, and then you can give both the .pnav and .fornavbar a width of 100% so they stretch all the way out inside of the container, as in they have the same width.
Now the reason why it only worked in firefox is probably because of this part of the code:
#-moz-document url-prefix() {
ul.pnav {
top: 286px
}
}
Because #-moz-document only targets firefox.
It's still gonna work in all browsers now though with the new code I added in the fiddle so you shouldn't have to worry about it, perhaps even delete that part of the CSS code(?).
I have a horizontal navigation using inline-block for li tags as the fowllowing pieces of code:
<ul>
<li>HOME</li>
<li>FEATURES</li>
<li>ABOUT US</li>
</ul>
ul {
list-style-type: none;
background-color: green;
}
ul > li {
display: inline-block;
}
li a {
display: block;
border: 2px solid #00283a;
padding: 2.1em 1.5em 2.5em;
}
The result: http://jsfiddle.net/a0odv8tj/2/
The height of ul tag: 95px;
The height of li tags: 95.5938px;
But I don't know why the height of the ul tag is not equal the height of the li tags. Could you explain the problem and help me to fix it? Thank you so much!
maybe just a hack, but changing
padding: 2.1em 1.5em 2.5em;
to:
padding: 2.0em 1.5em 2.5em;
seams to fix this
The problem has to do with line boxes of your text overflowing your anchor element. Your issue is relative to where the baseline for the text is set versus block level elements which collapse to the size of the text.
One way to verify this is to set overflow:auto; to li a and see how things expand to cover the element.
Re-reading what I wrote, I realize, is not a good explanation but it's been a while since I've thought of the details. I may come back and edit that later.
Or you can read the spec on this which is probably a good idea.
I put this in the following file: index.html
<ul class="youtube">
<li class="gamerscafe"></li>
<li class="destiny"></li>
<li class="halo"></li>
<li class="assassins"></li>
<li class="gearsofwar"></li>
<li class="armyoftwo"></li>
</ul>
And i put this in the style.css sheet...
ul.youtube
{
width: 650px;
margin: 0px auto 0;
height: 10px;
}
ul.youtube li{
float: left;
background: url(../images/youtube.png) left top no-repeat;
position: relative;
height: 20px;
margin-right: 70px;
}
ul.youtube li a{
display: block;
width: 18px;
height: 20px;
}
However when i hover over the images the link doesn't work is there something i am missing ?
Your a anchors do not include any text/elements to be clicked on.
You need to insert something inside your a tags, for example images:
<a href="http://URL/TO/DESTINATION">
<img src="http://URL/TO/IMAGE.png" />
</a>
Or, if you just want so span a clickable area, define some element with dimensions inside
<a href="http://URL/TO/DESTINATION">
<div style="height: 100px; width: 300px;"></div>
</a>
But the main problem is, that your anchors have no content you could click on.
EDIT: I suppose you could edit the dimensions of the a directly as well instead of the div. The a would need a display: block; or display:inline-block for that though
Like Felk said.
You have your <a> tag but it doesn't have anything inside.
In order to make the images links you would have to put them inside the <a> tag; like so.
<li class="gamerscafe"><img src=""></img></li>
//^ image code here
If you move your background image styling into the a tag it should work, like this:
ul.youtube li a{
display: block;
background: url(http://gamerscafe.net/images/youtube.png) left top no-repeat;
width: 140px;
height: 200px;
}
Then you can apply the positioning this way:
ul.youtube li.destiny a {
background-position: -310px 0px;
}
And if you need hover effect:
ul.youtube li.destiny a:hover {
/*style for hover*/
}
I have put your site into jsfiddle. Please take a look here for a working version:
https://jsfiddle.net/4vdr8dLf/
I have a webpage that uses jquery to display a submenu div while a user is hovering over an a:link in the main parent menu.
$('.menu ul li').hover(function() {
$(this).find('.dropnav').stop(true, true).fadeTo('fast', 1);
}, function() {
$(this).find('.dropnav').stop(true, true).fadeOut(800, 0);
});
The problem is, I want this webpage's navigation feature to be independent of javascript. So when users do not have javascript enabled, the menu will still display - just without the effects of scrolls or fades.
Thanks.
Use the :hover CSS pseudo-class.
.menu ul li:hover .dropnav {
opacity: 1;
/* display: block; ? */
}
Here is a pretty solid example of a CSS based menu. There is JavaScript that goes with it, if you are looking for backwards compatibility to IE6.
http://qrayg.com/learn/code/cssmenus/
HTML
<ul class="main-nav">
<li>main nav-1
</li>
<li>main nav-2
<ul class="sub-nav">
<li>sub-nav-2.1</li>
<li>sub-nav-2.2</li>
<li>sub-nav-2.3</li>
</ul>
</div>
</li>
<li>main nav-3
<li>main nav-4
</ul>
css
ul.main-nav > li { position: relative; display: block; float: left; margin: 0 15px;}
ul.main-nav > li > a {display: block; line-height: 40px; }
ul.sub-nav { display:none; position: absolute; top: 40px; left: 0; min-width: 200px;}
ul.main-nav > li:hover ul.sub-nav { display: block; z-index: 999; }
check this one for live demo http://jsfiddle.net/q9YZf/
I've download the Refresh template by Styleshout.com since I really like it. But unfortunately, there was no drop down menu in it, only a normal menu.
So I tried to integrate a drop down menu which I found a nice tutorial for.
It does almost work - almost. Here's the result: the template on my webspace.
The menus are opened - but at the wrong location. Why? What's wrong with my implementation? All 3 drop down lists are opened under the first item.
I hope you can help me. Thanks in advance!
PS: Here's the code:
####################
####### HTML #######
####################
<ul id="nav">
<li>Nav #1
<ul>
<li>Nav #1.1</li>
<li>Nav #1.2</li>
</ul>
</li>
<li>Nav #2
<ul>
<li>Nav #2.1</li>
<li>Nav #2.2</li>
</ul>
</li>
<li>Nav #3
<ul>
<li>Nav #3.1</li>
<li>Nav #3.2</li>
</ul>
</li>
</ul>
####################
#### JAVASCRIPT ####
####################
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
###################
####### CSS #######
###################
ul#nav li ul {
position: absolute;
left: -9999px;
top: 38px;
display: block;
width: 100px;
background-color: transparent;
}
ul#nav li {
position: relative;
}
ul#nav li ul li {
float: none;
}
/* Links in the drop down lists start */
ul#nav li ul li a {
clear: left;
display: block;
text-decoration: none;
width: 100px;
background-color: #333;
}
/* Links in the drop down lists end */
/* Making visible start */
ul#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* Making visible end */
You need to float the container LI's left and set the 'top' value on the pop-up boxes to 100%.
(Tested only in FF3.5)
ul#nav li {
position: relative;
float: left;
}
ul#nav li ul {
position: absolute;
left: -9999px;
top: 100%;
display: block;
width: 100px;
background-color: transparent;
}
I think the reason it's only working in Firefox, or I should say was only working in Firefox since this was posted so long ago, is that IE might need specific pixel locations for the top attribute instead of 100%. I would recommend trying 0px at least for IE, this worked for me recently at least.
Doesn't really explain it directly, but I would reccomend adding and subtracting a class attribute, not modifying (getAttribute, removeAttribute, etc.). Also, your class name has a space in it ( " sfhover" ) which probably isn't a good idea.
Here:
<li>
<a>Nav #1</a>
<ul>
<li>Nav #1.1</li>
<ul>
</li>
To move the entire menu and its submenu. You will have to set float:left at <li> not <a>
#menu ul li a {
float: none;
}
#menu ul li {
float: left;
}
One more thing, this doesn't relate to your problem. But, I think you should use display:none/block instead of left:-9999px/auto.
Hope it help.