I have a menu with links in the following form, in which I am trying to highlight the current menu item. I can't seem to get it working. Please advice as to what I am doing wrong
HTML
<body id="home">
<div id="topMenu">
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
<div id="nav-about"><p>About</p></div>
<div id="nav-rates"><p>Rates</p></div>
<div id="nav-faq"><p>FAQ</p></div>
<div id="nav-contact"><p>Contact</p></div>
<div id="nav-careers"><p>Careers</p></div>
</div>
<div id="rightTopMenu"></div>
</div>...other stuff</body>
Then for the CSS I have the following:
#home a.nav-home{ border-bottom:2px solid white; }
Do the links HAVE to be in a List, or can I leave them in div's, and if so, how can I make this work?
Thanks.
You've a little bit of a mess here.
Do the links HAVE to be in a List, or can I leave them in div's?
They don't have to be, but they probably should be. There's not good reason to use the strange markup you have chosen, you should definitely consider switching to a list and <li> tags.
Problem with duplicate ids
You have <body id="home"> and <a href="" id="home">
You also have several instances of id="topMenuBlock" (I see you fixed this in your edit.)
You cannot have more than one element with the same id. id attributes must be unique, always. Use class names instead, if anything.
You are using this selector: #home a.nav-home {} but it doesn't match anything. There is no <a class="nav-home">. You can use something like:
#home {} because that's the id of the <a> element you want
.nav-home a {} - Selects the <a> inside an element with class="nav-home"
Perhaps you have the concept of ids and classes mixed up. Ids are supposed to uniquely identify HTML elements, whereas classes can be used as many times as you like. Right now you have 6 elements with the id #topMenuBlock. You should make a .topMenuBlock class instead. I would also make a #nav-home id instead of a class since there should only be one such element on each page.
Secondly, there is no need for the <p> tags you have within your <a> tags. In fact, it's against HTML standards to do so since anchors are inline elements and paragraphs are block-level elements.
Lastly, your CSS selector that sets the border is incorrect because the .nav-home div is not contained within an <a> element. Use this CSS instead (assuming you change nav-home to be an id rather than a class):
#nav-home{ border-bottom:2px solid white; }
Fix these issues and then see what happens. If you're new to HTML and CSS, I would recommend going through some tutorials, such as the ones found at http://www.w3schools.com/.
Your class identifier should be in the <a /> tag
You have
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
but you want
<div class="something" id="topMenuBlock"><a class = "nav-home" href="" id="home"><p>Home</p></a></div>
Modify your CSS class accordingly.
Related
I am trying to change the position of a side panel that comes up when an option is being hovered over. Here is the code from chrome developer tools:
<nav id= "side_nav" class= "sidebar-bg-color header-side-nav-scroll-show">
<ul data-template= "nav-template" class= "sidebar-bg-color ps-ready ps-container" data-blind= "source: nodes">
<li class= "nav_trigger nav_open">
<div class= "sub_panel" style= "left: 50px;"> == $0
</div>
</li>
</ul>
</nav>
I just need to change that style left : 50px to 76px. The developer tools just have this attribute saved under element.style which I can't really target in my CSS file. Any help is appreciated!
I have tried to target by being really specific and ended up targeting the main panel and not the sup panel. Here is the code that I tried:
nav #side_nav, ul.sidebar-bg-color ps-ready ps-container, li.nav_trigger nav_open, div.sub_panel{
left : 76px;
},
Your CSS selector should be as shown below (according to the HTML you posted). Look at every detail: I deleted all commas and a few spaces. If an element has more than one class, you address it like div.class1.class2 (no spaces, but with a dot between the class names). Commas are used to list separate selectors for the same rule, not to indicate child elements as you did. To select an element which has as ID, you directly attach the ID to the element (Not nav #side_nav, but nav#side_nav).
nav#side_nav ul.sidebar-bg-color.ps-ready.ps-container li.nav_trigger.nav_open, div.sub_panel {
left : 76px;
}
If necessary, add !important after 76px (but before the semicolon).
You can use the syntax !important so then it will override all other formating of the type that you use the !important on. Learn more here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#!important
You can also use the span element in the HTML to make it even more specific with the CSS.
Is it possible to wrap an <a> tag around <div>s like so:
<a href=etc etc>
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
</a>
Eclipse is telling me the div's are in the wrong place?
If this is not allowed. How can I make the entire 'layout' class become a link?
That structure would be valid in HTML5 since in HTML5 anchors can wrap almost any element except for other anchors and form controls. Most browsers nowadays have support for this and will parse the code in the question as valid HTML. The answer below was written in 2011, and may be useful if you're supporting legacy browsers (*cough* Internet Explorer *cough*).
Older browsers without HTML5 parsers (like, say, Firefox 3.6) will still get confused over that, and possibly mess up the DOM structure.
Three options for HTML4 - use all inline elements:
<a href=etc etc>
<span class="layout">
<span class="title">
Video Type
<span class="description">Video description</span>
</span>
</span>
</a>
Then style with display: block
Use JavaScript and :hover:
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
And (assuming jQuery)
$('.layout').click(function(){
// Do something
}):
And
.layout:hover {
// Hover effect
}
Or lastly use absolute positioning to place an a anchor with CSS to cover the whole of .layout
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
<a class="more_link" href="somewhere">More information</a>
</div>
And CSS:
.layout {
position: relative;
}
.layout .more_link {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-indent: -9999px;
z-index: 1000;
}
This won't work with older versions of IE, of course.
While the <a> tag is not allowed to contain <div> element, it is allowed to contain other inline elements such as <span>.
When I encountered the problem i swapped the div tag with a <span>. Since the span tag is an inline element, you need to apply a display:block to the css of your <span> element, in order to make it behave like the <div> block element.
This should be valid xhtml and does not require any javascript.
Here's an example:
<a href="#">
<span style="display:block">
Some content. Maybe some other span elements, or images.
</span>
</a>
Another simple solution - just add an onclick event handler to the div thusly:
<div class="layout" onclick="location.href='somewhere'">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
This works great for me but there is one small gotcha. I'm not sure how search engine friendly this is. I fear that google's web crawlers might not find this link so I also tend to include a traditional A HREF link somewhere in the block like this:
<div class="layout" onclick="location.href='destination_url'">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
This is a link
</div>
Timothy's solution is correct ... instead of wrapping an anchor around a div ... you simply give layout to the anchor element with display:block and add the size and width of the anchor ...
.div_class { width: 100px; height: 100px; }
.div_class a { width: 100px; height: 100px; display: block; }
<div class='div_class'></div>
HTML provides two general elements, where div is a natural block element, and span is a natural inline element. All other elements are similarly assigned to be a natural block or inline.
Now, while both can be made by css display to be any of inline, inline-block or block, they are still treated for enclosure purposes as their natural selves, hence the warning messages. Leopards and spots sort of thing.
However, css is only meant to be for making what an element looks like (presentation), but not actually be like (functionality), so it doesn't change an element's basic nature, though that gets very fuzzy in practice. A span made block becomes a bully that kicks everything else off the line, which is very un-inline sort of behaviour.
So, to mitigate against possible conflicts between their natural and css-induced behaviours, it is better to allow:
div or any natural block tag to only ever be block or inline-block.
span or any natural inline tag to only ever be inline or inline-block.
This will also mitigate against tending to build page structures that will likely end up churning out error and warning messages.
Basically, NEVER embed a natural block tag inside a natural inline tag, at any depth.
Why there is a really a distinction is perhaps due to a simplistic idea of what HTML was going to be used for when it was first dreamed up.
Certainly, framework makers got around a lot of these what-to-embed-where problems by just using myriads of divs everywhere, and 'divitis' was born, and still alive and well in every framework. Just have to press F12 in a browser on almost any commercial web page and drill down through a dozen divs. This very page has 15 unbroken levels of divs.
It is not hard to see why just settling on divs made sense. For example, a p tag may have a bunch of links to various sites, and that is ok because inline links are allowed in a block p. However, if not wanting to have query variables visible in those urls, then buttons are required. If only one, then the p can be put inside a form, as a p cannot contain a form.
The formaction attribute on a button can be used to target a url other than the form default, but it still does not allow independent forms, each with their own set of hidden inputs. A button can use the form attribute to use it with a form that isn't an ancestor, but it can get messy to keep track of.
For multiple links to different sites to appear as part of one paragraph though, the only way is to use a div instead of the p and then wrap each button in its own form set to inline. Most frameworks have to cope with so much more complex scenarios that nested divs are the only way to go.
It meant that they really only had to manage one tag per purpose and manage it as if it was an isolated environment. So what was meant to be an occasionally-used functional grouping tag became the web's Lego block. And none of them are going to risk breaking their frameworks by converting to HTML5 semantic tags in a hurry. In the end, semantic tags only really work for fairly static content rather than rich interactive sites.
I had tried to create custom solution using jQuery, which would imitate same behavior as a tag does, for parent DIV.
DEMO:
https://jsfiddle.net/kutec/m9vxhcke/
As per W3C standard, you cannot do this:
<div class="boxes">
<a href="http://link1.com" target="_blank">
<div class="box">
<h3>Link with _blank attr</h3>
</div>
</a>
</div>
You must follow this:
<div class="boxes">
<div class="box">
<h3>
Link with _blank attr
</h3>
</div>
</div>
But by following above code, you wouldn't get the whole DIV clickable :).
Correct structure should be something like this, which also allows you to click over the DIV to redirect on the given href value:
<div class="boxes" data-href="http://link1.com" data-target="_blank">
<div class="box">
<h3>
Link with _blank attr
</h3>
</div>
</div>
Simple Solution:
$(function() {
$('.boxes a').each(function(){
var aTag = $(this).attr('href');
$(this).parent().attr('data-href',aTag);
$("[data-href]").click(function() {
window.location.href = $(this).attr("data-href");
return false;
});
})
}(jQuery));
Dynamic Solution:
(function ( $ ) {
$.fn.dataURL = function() {
// variables
var el = $(this);
var aTag = el.find('a');
var aHref;
var aTarget;
// get & set attributes
aTag.each(function() {
var aHref = $(this).attr('href');
$(this).parent().attr('data-href',this);
aTarget = $(this).attr('target');
$(this).parent().attr('data-target',aTarget);
});
// imitation - default attributes' behavior on "data-" attributes
$(el).delegate('[data-href]','click', function() {
var loc = window.location.href;
loc = $(this).attr("data-href");
aTarget = $(this).attr('data-target');
if(aTarget == "_blank"){
window.open(loc);
} else {
window.location = loc;
}
return false;
});
//removing attributes from selector itself
el.removeAttr('data-href');
el.removeAttr('data-target');
// css
$('[data-href]').css('cursor','pointer');
};
}( jQuery ));
Final call:
<script>
$('.boxes').dataURL();
</script>
Hope this would be helpful :)
You would just want to style the "a" tag as display: block;
Eclipse is appropriately telling you that your HTML is not to spec (as a div tag is not allowed in an anchor tag).
But, since you seem to want to be visually making the anchor look like a big-ol-box, then simply style it as such :)
One easy way to make the div a link/clickable is by using html javascript onclick attribute:
<div class="clickable-div" onclick="location.href='#';"><div> ... </div></div>
I'm working in a content management system that allows me limited (no) access to the stylesheets, but does allow me to insert CSS into certain templates. So I have this:
<div class="inside_widget">
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
etc...
</div>
Where inside_widget, input, and form_label are all defined in a sheet I can't touch. I want to put some custom CSS on "form_label" without having to touch every single span.
I tried using the style attribute in the containing div, but that did not work.
<div class="inside_widget" style=".form_label {color:#FFFFFF;}" >
Note: I want to retain everything else in the inside_widget styling, and not have to define a whole new class.
I think what the OP is trying to achieve is not having to repeat the style="" attribute for every single <span> in his form.
This can be done by simply adding your own class name to the enclosing div's classes:
<div class="inside_widget myclass" ...>
<!-- ... -->
</div>
Then make your own secondary stylesheet and define myclass:
.myclass span
{
color: #ffffff;
}
You can put this secondary CSS either in a <style> tag in the HTML itself, or in its own CSS file linked in.
You could do it this below.
<span class="form_label" style="color:#FFFFFF;">Form Stuff</span>
Inline styles like this will overwrite any css rules in a stylesheet, unless in the stylesheet they have a rule with !important
you do not know css right? will look like
<div class="inside_widget" style="color:#FFFFFF;" >
but I suggest you create a new css file and add whatever you want in the same
If I have a menu that is displayed at the top and bottom of a long HTML page and the DIV is setup with <div id="menu"><ul><li>Home</li><li>About</li></ul></div>
Can I just repeat this code at the bottom of the page? Or should the ID be a Class in this case?
I've read that ID should only be used once on the page.
Yes, an ID should only be used once. If you need both menus to pick up the same CSS settings, you can use <div class="menu"/> If many of their setting are the same, but some (such as the position) differ, you can use something like: <div id="top-menu" class="menu" /> and <div id="bottom-menu" class="menu" /> - this is quite a common usage, where the id controls the external position of an object on the page, which can often be unique, while a class controls its inner layout, which may be shared with other similar components.
W3 Schools has a good primer on class and id selectors: http://www.w3schools.com/css/css_id_class.asp
From their description:
The id Selector
The id selector is used to specify a style for a single, unique
element.
The class Selector
The class selector is used to specify a style for a group of elements.
Unlike the id selector, the class selector is most often used on
several elements.
This allows you to set a particular style for many HTML elements with
the same class.
An ID has to be unique within an element. This is what classes are for, if you need to reuse the ID name for whatever reason, change it to a class.
http://www.w3schools.com/tags/att_global_id.asp
<div class="menu"><ul><li>Home</li><li>About</li></ul></div>
IDs are designed to be exactly that - identifiers. You should have only one ID per document. If you need the same style applying to multiple elements, as you have correctly indicated, use a classname instead.
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
We can not repeat Same ID in page... Better to use class for the same...:)
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
Do IDs always have to relate to one element in CSS?
One element per page
What if that element is repeated on the page?
Then the HTML is invalid and you are depending on error recovery instead of expected behaviour.
If I have a menu that is displayed at the top and bottom of a long HTML page… Can I just repeat this code at the bottom of the page?
Not in an HTML document.
Or should the ID be a Class in this case?
Yes. A class a group of things that have something in common. An id identifies a particular thing. You have two menus that have something in common, use a class.
I've read that ID should only be used once on the page.
Correct
You can certainly use the id="" attribute as many times as you need, but the contents of the attribute should be unique. Not having a unique value is a HTML error.
I have some classes that are used for Styling and all of them display using block mode.. I would like to convert them all to inline.. Is there a simple way to convert them all to inline, instead of manually going to each class to convert them individually to inline...
Section of your code:
<div class="contentbody">
<p>
Register here!
</p>
<a href="{% url 'parent_register_step1' %}"
class="bbutton textshadowclass boxshadow">
<div class="boxshadowinset green">
Register
</div>
</a>
<p>
Forgot your password?
</p>
<a href="{% url 'parent_forgot_password' %}"
class="bbutton textshadowclass boxshadow">
<div class="boxshadowinset green">
Reset Password
</div>
</a>
</div>
I would like to change the classes bbutton, textshadowclass, box shadow, boxshadowinset green into inline.. What is the simplest way?
Note: This classes are used in other sections of the page. I would like to change the certain section to be inline only. It shouldn't affect the whole page...
Let me explain more in detail what i am doing:
I would like to convert this into inline such that the register and reset password appear on the same line...
To only select the classes that are instead the contentbody class, you need a CSS element>element Selector:
div.contentbody>.bbutton, div.contentbody>.textshadowclass, ... {
display: inline;
}
(add more classes to the list if you want others included as well)
Additional note: If you permanently need these classes to be inline, then I would suggest to just (once) going to each class and add an inline class to each element, this keeps your code clearer in the long run.
Edit:
use the union selector (sorry I cannot find a more official link) to select elements that have multiple classes set:
div.contentbody>.boxshadowinset.green {
display: inline;
}
Note the . (and no space) between boxshadowinset and green
I do believe this is supported by modern browsers, but IE6 does seem to have some problems with it.
One way is just to apply an id to your wrapping element.
<div class="contentbody" id="contentbody">
Then in your css, add the styling
div#contentbody a, div#contentbody div{ display: inline; }
Due to CSS Element Hierarchy, they will all take the inline style rather than their own style.
Basic example here. http://jsfiddle.net/H97c5/2/