I've tried lots and it still won't style! My css looks like this:
#subnav {
background: url(../_img/subnav.png);
height: 36px;
width: 455px;
margin: -15px 0 0 25px;
position: absolute;
}
.subnav {
font-family: verdana;
font-size: 6px;
color: #676767;
padding: 8px;
}
and my html looks like:
<div id="subnav" class="subnav">
testing 123
</div>
and it looks this way:
Side-Note: I was wondering what's the most efficient way of coding that navigation with the sub-nav? I'm kind of outdated with my html/css at the moment.
"the white bit in the picture above is my sub-nav and the blue bit is the navigation so upon click options are shown in the white bit"
LAYOUT: http://uploadir.com/uploads/v8qafb1w/downloads/new
The content of the image that you showed us is different to the content that you have present in the question.
You have sn as your class in your html and you are trying to reference subnav via css
To add a sub menu I would personally use the following.
<ul>
<li>
itsHabbo
</li>
<li>
Radio
<ul>
<li>
AM
</li>
<li>
FM
</li>
</ul>
</li>
<li>
Events
</li>
<li>
Forum
</li>
So you basically have you sub menu within the item you wish to select.
I hope this helps.
You have sn class not subnav. I changed to sn in you code and you can now see styling
<div id="subnav" class="sn"> come at me bro </div>
Related
I'm looking to make a very simple dropdown menu for a navbar, very similar to how Bootstrap's dropdown menu works - without being Bootstrap (with some regular links in my navbar and some dropdown links). Essentially what I want is to come up with some with some js and probably a little bit of CSS that will enable this to happen for the following HTML code:
<ul class="main-nav">
<li>HOME</li>
<li>CONTACT</li>
<li class="dropdown">
ACCOUNT <b class="caret"></b>
<ul class="dropdown-menu">
<li>CHANGE PASSWORD</li>
</ul>
</li>
</ul>
I just don't really know where to start on something like this. I spent a few hours trying to put together an all-CSS way of doing this but my CSS just started interfering with itself and I kind of gave up on that. I don't really know any js but it strikes me that there should be a really easy way to toggle a dropdown style on and off with js by clicking a link. I even tried for quite a while to implement js dropdown scripts other people have put out and other StackOverflow answers that essentially did that but their HTML was structured significantly different than mine and I didn't know enough js to restructure their code.
At this point, I'd be more than content with the simplest way possible - a dropdown link that when clicked, opens up a single-colored rectangle 'under it' with the links stacked within in it. I know that's a lot to ask for, but if anyone could point me in the right direction, it would be much appreciated. I apologize for not showing more code but after working on this all day, I really just don't have anything useful to show for.
The idea is that the dropdown-menu is hidden using display: none and when its parent dropdown has the class open then you show it using display: block, to toggle the classes we use js.
$(document).ready(function(){
$("[data-toggle='dropdown']").click(function(e) {
$(this).parents(".dropdown").toggleClass("open"); /*when you click on an element with attr data-toggle='dropdown' it toggle the class "open" on its parent with class "dropdown"*/
e.stopPropagation();
});
$("html").click(function() {
$(".open").removeClass("open"); /*when you click out of the dropdown-menu it remove the class "open"*/
});
});
.main-nav{
background: deepskyblue;
padding: 0;
}
.main-nav li{
list-style: none;
display: inline-block;
position: relative; /*with respect to this element dropdown-menu is positioned*/
}
.dropdown-menu{
display: none; /*hide the menu*/
/*this style are just to position the menu*/
position:absolute;
top: 100%;
left: 0;
}
.open .dropdown-menu{
display: block; /*show the menu when its parent has class "open"*/
}
a.nav-item{
display: inline-block;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
.dropdown-menu{
background: skyblue;
padding: 10px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li><a class="nav-item" href="index.html">HOME</a></li>
<li><a class="nav-item" href="contact.html">CONTACT</a></li>
<li class="dropdown">
<a class="nav-item dropdown-toggle" data-toggle="dropdown">ACCOUNT <b class="caret">></b></a>
<ul class="dropdown-menu">
<li>CHANGE PASSWORD</li>
</ul>
</li>
</ul>
The above is just a basic example to point you in the right direction, most of the CSS code is just to make viable the example, the important parts are commented.
This code is based on this.
<div class="tree">
<ul>
<li>
Great Grand Child
</li>
<li>
Great Grand Child
</li>
<li>
Great Grand Child
</li>
</ul>
</div>
https://jsfiddle.net/danyaljj/sq6wy6bq/
I want to add labels on the edges. Any idea what is the best way to do this? (the set of the possible labels is limited, like 10 labels). Something like this:
Here's a solution far from robust that will only allow a label on first and last item of your 3-items list (there's no phydical place for a label on second one...)
Fiddle https://jsfiddle.net/sq6wy6bq/2/
HTML code: I'd add the label in each item before the labelled child so:
<ul>
<li>
<span class="so-label">Label 1</span>
Great Grand Child
</li>
<li>
Great Grand Child
</li>
<li>
<span class="so-label">Label 2</span>
Great Grand Child
</li>
</ul>
Relevant CSS: yay absolute positioning (sigh)
.so-label {
position: absolute;
top: -40%;
width: 100%;
font-size: 0.8em;
}
li:first-child .so-label {
left: 50%;
}
li:last-child .so-label {
left: -50%;
}
In case of 2 or 4-10 children (wow), you can still know the number of items in the list and position by hand each label: trick from André Luís. Labels that should not be too long or it'll surimpose...
Possible improvements:
flexbox or CSS table layout can achieve a correct visual display of a row of labels but then those labels would decorrelated of their respective items (children) and that would lead to bad semantics. Improving this semantics by associating back labels and items could be achieved via WAI-ARIA (aria-describedby or similar ARIA attributes)
Or you could use (accessible) SVG :) Graphs love SVG!
I'd like the functionality of the Bootstrap tabbable nav but I want to style each tab with a background image and text underneath. In fact, what I'd really like is to just put my photoshop images right in each tab and set the active state to my selected image.
I'm having a very difficult time doing this. Is it going to take a lot of custom work to get this working with this component?
I thought I could just try with some CSS but it's not giving me the correct formatting I want:
ul.nav.nav-tabs li {
display:inline-block;
background:url(../images/skypeIcon.png) no-repeat left center;
background-size:20px auto;
font-size:15px;
padding:2px 0 2px 28px
}
By the way, I'm using Bootstrap 2.3 so I can't use Bootstrap 3 Navbar Generator.
I can use a div tag inside my a tag and put whatever content I want in there.
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
<div>
<img src="<%=context%>/images/defaultAvatar.png"/>
<br/>
Computer
</div>
</a>
</li></ul>
<div style="border-radius: 10px; border: 2px solid #a1a1a1; padding: 10px 20px; width: 94%;">
<ul>
<li>Course details in different countries
<ul>
<li>India</li>
<li>Australia</li>
<li>United Kingdom</li>
<li>China</li>
<li>England</li>
</ul>
</li>
</ul>
</div>
I wrote this code to jump to that particular div tags according to their # id's in the href. I wanted to jump to the div with smooth scrolling effect. Any CSS implementation needed?
try this jQuery.ScrollTo
$.scrollTo('a[href=bdpaus]');
In Firefox and Chrome, you can use the scroll-behavior: smooth CSS; this is not yet supported in other browsers, but polyfills do exist.
* {line-height: 3em}
body {scroll-behavior: smooth}
Click
<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>
<div id="bottom">end of page</div>
You could also use jQuery to animate the page's scrollTop, but unless you are already using jQuery for other purposes I wouldn't think it worth including the entire library for just one cosmetic function.
I'm coding a tab system for my website that must be entirely CSS/HTML/JS (without using any images). Problem is, I keep hacking the code until when I'm finished its just a mess. I don't know whether to use positioning, or float the tabs or what. Basically one of the big problems is that after I take away the bottom-border CSS of the selected tab, I need to move it down 1px so it seamlessly blends with the sorting headers - I don't know whether to use margin: -1px or position: relative/absolute etc. I'd love some advice on a good way to code a tab system like this, so that it can be reused across the website!
Here's an example with CSS that makes it work:
HTML:
<body>
<div class="tabs">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<div class="tabInner">
<div id="item1">
bla1
</div>
<div id="item2">
bla2
</div>
<div id="item3">
bla3
</div>
</div>
</div>
</body>
CSS:
.tabs ul {
list-style: none;
}
.tabs ul li {
float: left;
background: #eee;
border: 1px #aaa solid;
border-bottom: none;
margin-right: 10px;
padding: 5px;
}
.tabs ul li.active {
margin-bottom: -1px;
padding-bottom: 6px;
}
.tabInner {
clear: both;
border: 1px solid #aaa;
height: 200px;
overflow: hidden;
background: #eee;
}
.tabInner div {
height: 200px;
padding: 10px;
}
It even works without JS (to some degree). You'll still need some JS to move the 'active' class arround and also if you want fancy transitions.
See it in action here: http://jsfiddle.net/V8CK4/
I would use divs nested inside a list.
<ul>
<li>Tab1
<div> Content for Tab1</div>
</li>
<li>Tab2
<div> Content for Tab2</div>
</li>
<li>Tab3
<div> Content for Tab3</div>
</li>
</ul>
Then with css style ul li div to not show. I would use jQuery to show the child divs upon click of the parent li.
EDIT: Thanks to the comment... Note the li's would have to be styled inline so they do not break line after every one. Also set the li list-style to none.
In my opinion I would write it like this:
<div class="tabContainer">
<ul class="tabList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<em class="tabMessage">This is the message on the right.</em>
<div class="tabInnerContainer">
<div id="item1">
bla
</div>
<div id="item2">
bla
</div>
<div id="item3">
bla
</div>
</div>
</div>
This way will allow you to make it function al least to some extent without Javascipt, degrading nicely in browsers with JS turned off. Some of the classes could be removed if using CSS3 sleectors.
I assume the problem is to make the tab and the bar below it seem like one piece without using too much code.
What I have done before is to make the two elements I want to join overlap slightly (or not at all) and then put a third element (in the same color as both other elements) where the overlap is. This acts as a kind of patch.
Like this:
I. without patch
_________________
| |
| tab |
__|_________________|________________________________
| |
| menu bar |
|_____________________________________________________|
II. with patch
_________________
| tab |
|- - - - - - - - -|
___| patch |_______________________________
| - - - - - - - - - |
| menu bar |
|_____________________________________________________|
You will only need to use z-indexes to make this work properly. The patch may extend over the tab div it is contained in by using position: absolute and an adequately high value for top.
Update: demonstration
http://jsfiddle.net/7GJaW/
Like #Otis mentioned, nesting is a pretty good technique. I usually nest ul's
Link 1
Link 1 Item 1
Link 1 Item 2
However, if you are not trying to attempt to do a dropdown...