Hello I have created a website for my school work and I am trying to implement a navigation bar for all the pages of the site. I got it working on all my other pages but there is one page in particular where it the entire navigation bar disappears when the page is loaded. The header section should display the navigation bar while the body loads the prime number table.The page should have a navbar like this.
However the prime number table page will not load the home and back icons.
I cant get the stackoverflow formatter to accept my html code so I have to put a link to it, sorry!.
This is the source code
Headers should not be in the <head> element; instead, they should be at the top of the <body> element. So move this code:
<div class="header">
<div class="container">
<div class="navbar">
<a class="logo" href="http://w3.cnm.edu/~tteichelmann"></a>
<a class="back" href="http://w3.cnm.edu/~tteichelmann/cis1210" onclick="history.back();" value="Back"></a>
</div>
</div>
</div>
Into the body. Also, HTML 5 introduced the <header> element (more here), which is a more syntactical way of defining a header... Consider that an alternative, not a requirement.
Move your div with the class of header outside of the head section of the document. It should be within the body tags.
Related
I am trying to create a div with a fixed left section & scrollable right section and other divs below them. I went through many blog posts and I am not able to figure out, how to create this particular page in react JS using Tailwind CSS.
I am using react JS & Tailwind CSS.
I have added the structure of my page and also added a similar page for reference.
Structure of my page :
<div className="mainDiv">
<div className="rowDiv">
<div className="staticDiv">
<ProductImages
images={productData.mediaUrls}
/>
</div>
<div className="scrollableDiv">
<ProductInfo
productData={productData}
/>
</div>
</div>
<div className="relatedProductsDiv">
<RelatedProducts
sectionHeading="Related products"
/>
</div>
<div className="recentlyViewedProductsDiv">
<RecentlyViewedProducts
sectionHeading="Recently viewed products"
/>
</div>
</div>
Similar page: Click here to view a similar page
div with className staticDiv should scroll only after scrollableDiv
completes its full scroll.
once scrollableDiv finishes its full scroll, both the divs (staticDiv and scrollableDiv) should scroll normally to show relatedProductsDiv and recentlyViewedProductsDiv.
Please click here to view a similar page to get my question in more detail.
I am trying to create a page similar to the one in the link.
hi i am working on code to print the page in my vue web application . so in that i need to print static header in every page , either using css or js.i have created a header div component and made its position as fixed , its getting printed in all page but the content of body is cutted off half.
i need to print a logo , current time stamp in the header section
i adding code structure
<div class="header">
<div class="logo"> </div>
<div class="time stamp"> </div>
</div>
Try to use the table > thead as your template.
If page is overflow to the new one, chrome will repeat the thead section.
I need help creating a pure JavaScript event listener that captures all clicks on a page, gets the link text/URL, find the logical parent DIV of that link and concatenate the values together. Take this example code:
<body>
<div class="heading grid-12">
<!-- Header and navigation links -->
Summer Promotion
</div>
<div class="responsiveGrid">
<!-- page body -->
<img alt="Navy Sweater" src="nsweater.jpg"/>
</div>
<div class="footer grid-12">
<!-- Footer and bottom nav links -->
About Us
</div>
</body>
In the above example, I want to capture where the link logically sits on the page, either header|body|footer based on whether the link is a child of these three top level DIVs. Next, I want to capture the link text from anchor/JavaScript links or the Alt Text from image links. Finally I want to get the path of the link – excluding the protocol, domain and query strings if an anchor link or converted to a static string “Overlay” if the href is ‘# ‘or ‘javascript:void(0);’. Using the code above, I’d want the final concatenated string sent to console.log when any link is clicked:
'header|Summer Promotion|index.html'
'body|Navy Sweater|/cart/sweaters/navy.html'
'footer|About Us|Overlay'
Thanks in advance for your assistance.
I have a mdl-layout__tab-bar with a few links in the navigation bar. I want these links to trigger a page scroll to sections of the page.
I have tried the following solutions:
# the targeted section starts with the <a name="myTargetedSection" id="myTargetedSection"></a> tag
<div class="mdl-layout__tab-bar">
My link
...
</div>
This does not work and neither does
<div class="mdl-layout__tab-bar">
My link
...
</div>
It seems that mdl-layout__tab links work only with mdl-layout__tab-panel elements. The (unsatisfying) solution I found was to use regular mdl-navigation__link links, but these have no bottom-border, and cannot be horizontaly browsed on small screens.
Any idea? Thank you!
Resolved: the following code works
<div class="mdl-layout__tab-bar">
My link
</div>
I have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.
First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});