Can an experienced MS Visual Web Developer please give some guidance(links welcome as well) on how best to set out content sections in masterpages.
The microsoft documentation shows (here)creating masterpages using tables. However it is my understanding that the use of tables is not really good practise, somewhat frowned upon.
I have got a masterpage but on my subsequent derived pages I am struggling to get content on to the content area without using a table in the code.
I know this is very basic but it isn't defined very well and I am more used to the direct drag and drop of windows forms.
You might want to check this tutorial out:
http://www.asp.net/web-forms/tutorials/master-pages/creating-a-site-wide-layout-using-master-pages-cs.
They don't use a table element, but div elements & some css.
I think this has more to do with web design skills than being expert in Visual Studio master page. MasterPage only allows you define regions to put stuffs, the design is up to you, tables or div.
You can even get well designed templates from the web, paste the markup in your MasterPage file and fill in the ContentPlaceHolder tags where you want stuffs to be e.g. SideBar, Navigation Menu, MainContent, Footer, etc.
<div id="header">
some header content here
</div>
<div id="layout">
<div id="leftsidebar"></div>
<div id="maincontent">
<!-- Content Pages will go here -->
<asp:ContentPlaceHolder runat="server" ID="MainContent">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="footer">
some footer content here
</div>
That's just a sample. It can be more beautiful, complex, slick etc. than that. It depends on your skill as a web designer
Related
I'm trying to add (Download on The App Store) buttons (for both the app store and google play) in my nopcommerce website footer.
Any idea on how I can get it done?
Like This One
I'm not sure if any plugin is available for your requirement. But I can give you a reference to modify your code.
Go to: Presentation > Nop.Web > Views > Shared > Components > Footer > Default.cshtml
After the div <div class="footer-block follow-us"> add your code:
<div class="footer-block information">
<div class="social">
<div class="title">
<strong>Download it from</strong>
</div>
<img src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png" width="140" height="auto" />
</div>
</div>
It will display as below, also you can add for app store.
Perhaps, you can create a separate partial view and use here; that'd be the best practice instead displayed here.
Also, I'm not good in css, so didn't make much effort.
I have a menu bar that links to local webpages that is working fine except that when I click on the link on the menubar it goes to the webpage in question leaving the webpage with the menubar, but I wish to load the page below the menubar so the user can this use the menubar to navigate. Should I be using iframes? sorry haven't used HMTL5 in quite some time any help is much appreciated.
Neil.
<div class="menu">
Home
Index of Services
Schedule
Examples
</div>
<div class="content">
This page is to help you organise
</div>
Yes, you need frames. Or, the most common, to have the same menu code on all htmls, because with frames your url won't change unless you do some tricks.
If you don't want to duplicate code you could use PHP. Then you could create an index.php with the menus and with includes to the page content.
Edit:
You can also do it with some JavaScript but it also has the same problems with the url. The site will also not work if JavaScript is disabled.
Edit2:
The tricks for frames and javascript I said before can be achieved without url rewrites and with plain HTML+CSS+JS is with anchors.
Basically you change your urls to anchors with the page name, and when the page is first loaded you check this hash so the correct frame opens when someone enters your url like http://mypage.com/#examples. You can access and set the hash with window.location.hash.
So your code would look like:
<div class="menu">
Home
Index of Services
Schedule
Examples
</div>
<div class="content">
This page is to help you organise
</div>
For both with or without frames you need a JavaScript event attached to each menu item.
With frames the JS basically changes the frame url when the user clicks on the menu.
Without frames you use xhr to download the html, and then, if you successfully downloaded the html, you delete everything inside div.content and replace with what you downloaded with innerHtml.
For both solutions you need to add a JS that checks the hash when you first load the page to update the displayed page accordingly.
As for PHP or other server-sided "script" any beginners tutorial will explain how to do it.
I'm using watir-webdriver to do multi-browser front-end automation test. Here I got a question. When the driver go into the first iframe of the page, it can get out, to find elements outside iframe, but if driver go into the iframe inside one iframe of the page, it can not go out and find the element of the outside page. the structure may look like this:
the main page:
<div>
<iframe src='a.html'></iframe>
</div>
a.html:
<div>
<iframe src='b.html'></iframe>
</div>
when web driver go into the b.html, and find elements in it, it can not get back to the main page.
Is anyone familiar with watir-webdriver can figure this out??
Thanks so much!
To change focus back to main page from an iframe:
#browser.frame(:index, 0).locate
I have a page "work" with 2 div:
<div id="intro"></div>
<div id="images"></div>
Now I have lot of introductions and images and I would like to store these in different pages and when on the menu I click on specific link it load in the same page the contents of the relative page, Introduction into id#intro and images into id#images.
I don't know how to do that...
Thanks!
You can use jQuery load method to load content dynamically into your divs.
Is it possible to link to ONLY a div on a web page? For example,
<html>
<body>
Here is some content I don't care about
<div class="stuff">
Here is some content I want. Blah blah. It may change from time to time
</div>
Here is more content I don't care about and do not want to see when this link is clicked
</body>
</html>
Is there a hyperlink that will display only the contents of "stuff" with nothing else?
For further clarification, if someone were to make an of this link, nothing else from that page would appear in the iframe.
You could use a jQuery .load() call to get that fragment of your page and load it on your single page:
$('#result').load('your-page.html .stuff');
The short answer is: No
The longer answer involves a bunch of JavaScript on the page where the content is to be hidden (i.e. you couldn't do it to a third party site, and if it is your own site you would almost certainly be better off just creating a separate URI you could call)