I'm not to sure whether I've asked this question in the right place. If not could you direct me to the correct outlet. Thanks. Anyway down to the question. I spent some time last night installing the new shiny Dreamweaver CC (Creative Cloud version) and all seemed to be going swimmingly, until; I found myself having trouble getting DW to recognize HTML5 Css Selectors.
I have a basic page as of current and I'm using the and tags. However when I try to apply styles to these elements, I get no response or change at all. both in DW design view and the browser (Firefox/Chrome).
I'm working from an external style sheet at present, and have built most of the document via hand code. I can see (div) elements in the selector pane to the right of my design view, and divs are receiving their styles. But the 'header' selectors, although hand coded into the Css document are not showing and are not being recognized by DW.
I have;
Hand coded the elements.
Checked doctype.
Checked for spelling errors.
Tried converting the HTML 5 tags to <div id="header"> & Css from header {} to #header {} (Even this draws no change in the selector pane or the browser window.)
<!--/ header /-->
<header>
<!--/ logo / heading /-->
<div id="site-header">
<section id="logo"><h1>title / logo</h1></section>
<section id="heading"><h3>heading</h3></section>
</div>
<!--/ navigation /-->
<div id="site-nav">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Achievements</li>
<li>Contact</li>
</ul>
</div>
</header><!--/ << end header /-->
<!--/ (css) heading /-->
header {
position: relative;
width: 100%;
height: 150px;
margin:0;
padding:0;
}
So after staring for hours at the code on here and in the document, it turns out I was using html comments in the css code. - << I'm such a moron. Thanks for the help guys.
<!--> does not work in css. changed the comments from, <!--> to /*--*/.
Related
I'm trying to create a fixed Navbar using Project Clarity
I'm using it in my Angular project, they are using FlexBox, I have tried putting in position: fixed but it doesn't seem to work, anyone have any ideas ?
<clr-header class="header-6">
In order to fix the header so that content scrolls underneath it, your application needs to have the correct Application Layout. Our components work within this structure because A properly structured layout enforces an optimal, consistent experience across applications.
The general structure for A Clarity Application layout takes this form:
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
...
</header>
<nav class="subnav">
...
</nav>
<div class="content-container">
<div class="content-area">
...
</div>
<nav class="sidenav">
...
</nav>
</div>
</div>
Obviously, you can get rid of the parts that may not be relevant to your app like: alert-app-level, subnav etc ...
You can see this working in a quick demo I made with inspiration from Bob Ross. As you can see the content scroll underneath the application header.
if someone has also either very this problem, or another problem where some css does not work within Angular:
Since we mostly structure our UI code in multiple components in Angular, and since each component puts its own host-tag in the generated DOM between the actual html tags, the clarity library has some problems with it.
So as a workaround, if you still want to be able to keep your current htmls as they are, you can define this css in each your component's css file:
:host { display: contents; }
This causes the component's box not to render; means the host tags are still visible in DOM, but they will not have any effect regarding CSS. And any clarity CSS will work again.
I am coding up a landing page with the classical setup :
A fixed header
Several sections (product description, testimonials, google map, etc.)
A footer
My semantics look like this :
<header>
<!-- Responsive navigation bar -->
</header>
<section class="section-first">
<!-- First section -->
</section>
<section>
</section>
...
<footer>
</footer>
As the header is fixed, I need a specific CSS treatment on the first section, as such :
.section-first {
margin-top: 200px;
}
so that the header and the first section do not overlap. So eventually my first section needs to be treated differently than others. My current approach seems like a tweak to me, there should be either a semantical way to approach this or a clean CSS market practice in such common situation. Any ideas ?
You could use the :first-of-type pseudo element!
section:first-of-type{
margin-top:200px;
}
This finds the first section tag in your HTML without having to add an extra class to it and only applies the written styles to that one.
I know questions about broken links get asked all the time, however my issue seems a bit different, and none of the solutions have worked.
Right now none of the links to other websites in my nav section worked when clicked. It registers that they are there, and if you right click it and select "open in new tab" it works, but otherwise, nada. A few relative links (if thats the term for the href="#xxx" link to content on the page) to modal popups work fine though.
My HTML Code is listed below, as well as a Pastebin link to the CSS (so that I don't clutter up the box).
Removing the class="navigation" from the list tag seems to fix the link issue. Leaving the class on the tag but removing all the relevant CSS from the stylesheet, however, does not eliminate the issue and just removes the styling. I can't figure out why this would be the case.
I've tried setting the z-indices of my background, menu and nav to 1,2,3 (and 3,2,1 just for the hell of it) respectively so that they don't interfere, as recommended in other questions here, but to no avail. Anyone have any ideas?
CSS: http://pastebin.com/1KVTdBvF
Site: http://www.magratheamedia.com/npo
<div class="menu">
<div class="container clearfix">
<div id="logo" class="fleft">
<img src="images/logo.png" />
</div>
<div id="nav" class="fright">
<ul class="navigation">
<li data-slide="1">Home</li>
<li>Forum</li>
<li>Wiki</li>
<li>Government</li>
<li>Charter</li>
<li>In-Game</li>
<li>Applicants</li>
<li>IRC</li>
<div class="clear"></div>
</ul>
</div>
</div>
Your problem isn't CSS, it's your jQuery. This, in particular:
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
When you find your links, like this:
var links = $('.navigation').find('li');
You have to somehow exclude the ones that go to external sites. Maybe by giving the modal links their own class name or something.
I read about semantic HTML online...
Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.
If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.
So, below is semantic,
<h1>My Website Name</h1>
<h2>My Website Tagline </h2>
What about this below?
<div id="header">
<h1><span class="hide">My Website Name</span></h1>
<h2><span class="hide">My Website Tagline</span></h2>
</div>
I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?
The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?
Then, if I don't use div, what can I use to make a box around the h1 and h2?
As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??
Thanks.
I would do something like the following if I was going to use HTML5:
<header>
<hgroup>
<h1>My Website Name</h1>
<h2>My Website Tagline</h2>
</hgroup>
</header>
Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.
If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.
You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.
If you want to display a logo instead of text, use an image. Google say so (even if they don't know the difference between a tag and an attribute). Taglines, BTW, are not subheadings (and the site name (and thus logo) is usually only a heading on the homepage).
<div id="header">
<h1><img src="foo.png" alt="My Website Name"></h1>
<p><img src="foo.png" alt="My Website Tagline"></p>
</div>
Unfortunately, Internet Explorer 8 does not recognize many HTML5 tags, and when I've tested it, I was unable to set CSS values for the <header> tag, for example. So for now I would recommend that you continue to use div tags to group your semantic meaning.
As a sidenote, Google does not like hidden text, and if you have a lot of it, it will consider it deceptive coding. One is probably fine, but you'd be better off using the alt attribute on the image tag.
Nobody suggested that you should not use DIVs at all... semantic HTML does not mean there cannot be div or span tags in your code. It just only means that whenever possible (there is a specific tag available for a specific semantic meaning) you should try to give semantic meaning.
h2 is not to be used for taglines, as somebody else already suggested.
Also, in my interpretation (some will argue), h1 is not for the name of your website. It is the title for the content on a specific page.
I agree with #David Dorward, the tag line should be in a p tag.
Your example (wrapping the header elements with a div) is perfectly acceptable, though I would like to raise a small caution: Be careful that you do not get in the habit of wrapping everything in div tags. For example:
<div class="content">
<div class="list">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
Since a ul tag is already a block element, the above markup would be better off like this:
<div class="content">
<ul class="list">
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
And then just style the ul to look like the div.
On the matter of displaying the logo as an image:
If your logo is text-based, or has text in it, you would be better off doing the following:
HTML
<div id="header">
<h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>
CSS
.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
/* Also add height and width based on your logo height and width */
This is a weird CSS issue I was experiencing while trying to fix a footer that rendered properly in IE 6 but failed to render properly in IE 7. Here's what the issue was.
There is this css class, clearer, shown below:
.clearer {
clear: left;
line-height: 0;
height: 0;
}
In the JSP/HTML output, there were either:
<div class="clearer"></div>
or
<div class="clearer" />
in various places.
This is inside a JSP page that gets wrapped with external HTML. The gist of it is (the technology is called Sitemesh for those who are interested or know of Sitemesh):
<header>
<body with specific page content>
<footer>
Now, each piece of these have specific div elements, so it could be represented as such:
<div class="header"> <!-- header stuff -->
</div>
<div class="pageContent"> <!-- page content goes here -->
</div>
<div class="footer"> <!-- footer stuff -->
<div class="firstFooterDiv"></div> <!-- some footer stuff -->
<div class="secondFooterDiv"></div> <!-- some other footer stuff -->
</div>
When the pages rendered in IE 6, everything was fine. But with IE 7, the footer floated to the top for some reason. Investigating using Opera Dragonfly (which also had the issue), I found something similar to this in the DOM:
<div class="pageContent"> <!-- page content goes here -->
<div class="clearer">
<!-- actual page content?!!!! -->
</div>
<div class="footer"> <!-- footer stuff -->
<div class="firstFooterDiv"></div>
</div>
</div>
<div class="secondFooterDiv"></div> <!-- some other footer stuff -->
</div>
Somehow, that clearer div, although it was closed, behaved as an open div?! This forced the footer stuff partially into the holder for the main page content. On IE 6, the effect of this does not happen.
Any idea why this occurred?
Note that the page was valid according to XHTML-1.0 transitional, so it was not a page validation error - the divs do match up - although they match up incorrectly in the DOM!
EDIT: when clearer was removed, the pages look fine and this issue does not occur - it's only when those useless divs are in that this happens.
I'd definitely point the finger of suspicion at the self-closed divs. Although the validator may have said it's OK, and I the specs say it's OK if you're sending the document as XML, it causes all kinds of problems related to browsers' display engines and interpretation of the specs and you're much safer not to do it.
There's a good discussion of it here in question id 348736.
Empty elements with the closing "/>" is appropriate for XHTML/XML but not HTML and is treated as "tag soup", perhaps confusing the inspector. Also, empty divs are handled differently, collapsing into nothingness if they're not given a size.