First of all i would like to know whether i can use asp.net masterpagefile in MVC razor site, since everything already developed in asp.net and now migrating in to MVC razor?
Do we have mechanism to see design at design time in MVC?
Next is i created a _layout.cshtml master page in mvc and i am using everywhere .This contains two images including gif file and a section to render body #RenderBody(),but unfortunately render body contents and two images are coming in same line.I really don't know what causes issue? Following is the code
.header {
font-size: 8pt;
color: #333333;
font-weight: bold;
}
.footer {
font-size: 8pt;
color: #666666;
font-family: Verdana, helvetica, tahoma;
}
<body>
<div class="header">
<div style="float:right"><img src="~/Images/imagesnew/Images/master/IWHeader-v2-Right.bmp" /></div>
<div style="float:right"> <img src="~/Images/imagesnew/Images/master/sampleLogo.gif" /></div>
</div>
<div style="margin-top:100px">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<div class="footer">
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
can I use asp.net masterpagefile in MVC razor site
It's not recommended, but I recall that you can mix+match aspx+mvc in the same project, but not in the same page/view. Razor view needs _layout. Migrate the masterpage to _layout and use #RenderSection as you already are.
see razor view at design time
Not in the way you're expecting. You can get addins/browser extensions to auto-reload a page on save (the one I use is no longer provided, so no links, sorry).
render body contents and two images are coming in same line
After a float: you need a clear:. Easiest is to simply do both (then you can change right/left as needed)
<div style="margin-top:100px;clear:both">
#RenderSection("featured", required: false)
Alternatively, you can force the <header> tag to do this rather than rely on the next element. In this case, add an :after to the header, eg in .css:
div.header:after {
content:"";
display:table;
clear:both;
}
it looks like your main-content section already has this with class clear-fix, so you could just add that:
<div style='margin-top:100px' class='clear-fix'>
similarly for the footer, make sure there's a clear:both:
div.footer {
clear:both;
}
For best-practice, put these in a .css
Related
I am converting a docx to html format (using apache poi) and sending it as email.
A snippet of generated html looks something like this
<html>
<head>
....
<style>
span.Normal{
font-family: 'Arial';font-size: 9.0pt;
}
span.Title{
font-family: 'Cambria';font-size: 28.0pt;color: #000000;
}
span.MySubtitle{
font-family: 'Arial';font-size: 18.0pt;color: #000000;
}
span.MyTitle{
font-family: 'Arial';font-size: 22.0pt;font-weight: bold;color: #000000;
}
...
</style>
</head>
<body>
....
<p class="Normal Title MyTitle">
<span id="_GoBack">
<span class="Normal Title MyTitle">Welcome Message</span>
<span class="Normal Title MyTitle"> </span>
<span class="Normal Title MyTitle">Username</span>
</p>
<p class="Normal Title MySubtitle">
<span class="Normal Title MySubtitle">Issues and Solutions</span>
</p>
...
</body>
</html>
The multiple css classes are not recognized by Outlook client. It is only rendering the first css class "Normal" and ignoring the rest. But my original formatting (in docx) is present in "MyTitle" & "MySubTitle" classes.
Does Outlook support multiple css? Is there a way I can control multiple css generation.
I've just discovered this problem myself.
It seems that Outlook is only taking the first class listed in the class attribute, ignoring everything else.
Stylesheet:
<!--[if gte mso 9]>
<style type="text/css">
.red {
color: red;
}
.large {
font-size: 72px;
}
</style>
<![endif]-->
Markup:
<div class="red">
THIS SHOULD BE RED IN OUTLOOK
</div>
<div class="large">
THIS SHOULD BE LARGE IN OUTLOOK
</div>
<div class="red large">
THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
<div class="large red">
THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
Result:
As far as I see, all versions of Outlook are affected. Including the newer ones.
I've filed a bug report to hteumeuleu/email-bugs documenting this quirk:
https://github.com/hteumeuleu/email-bugs/issues/117
As said previously you should first check your html to make it cleaner. Emails are tough to get right and perfect in every single mail client/server out there. So if you want to get things right, have a look at all the free and responsive templates available anywhere on the web.
The classic yet efficient solution for mail is rely in the table tag.
You can find a good example here
Also, when it comes to display on different mail clients, Outlook is one of the most difficult. There are tools like Litmus that allows you to preview the result of your email but it's quite expensive. Fortunatly they also propose free responsive templates that you can use for inspiration.
Don't hesitate to post an improved version of your email so we can look at it and help you more efficiently.
Okay, there's a lot going wrong here. First and foremost, the html isn't really correct at all. You have paragraphs nested in paragraphs, and you're using spans to define headings, and splitting each word into it's own span.
I don't know what those three dots at the beginning and end are for, but they shouldn't be in the style tags.
Your class names aren't really descriptive, they're repeating rules, you have every class applied to every element, and they're out of order in the style sheet, making it confusing to understand what's going on.
My suggestions are to:
Use semantic markup
Discard classes and use semantic selectors
Use the DRY principle (don't repeat yourself)
list rules with a logical order, such as starting from the largest and ending at the smallest.
Here's some refactored code using your styling rules and demonstrating how to use each element.
<html>
<head>
<style>
body {
color: #000000;
}
h1,
h2,
p {
font-family: 'Arial';
}
h3 {
font-family: 'Cambria';
}
h1 {
font-size: 28pt;
}
h2 {
font-size: 22pt;
}
h3 {
font-size: 18pt;
}
p {
font-size: 9pt;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<p>
This is paragraph text.
</p>
</body>
</html>
I have my profile image and below it I want to place my name and a few things about me. I don't know what to use for the image div or if I even need a div for it. Are the h1 and p elements used properly?
Snippet
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Full Body HTML
<body>
<div class="page">
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
<div class="sites">
<ul>
<li><img src=""> <img src=""></li>
</ul>
</div>
</div>
</body>
The rest of the site are just app icons taking to my social media sites. There's no other content. My site also doesn't have a header or footer. Not sure if my profile class should be considered the header at this point for good SEO.
You do not need to put the div around the image. Just style it to display: block (img defaults to display: inline)
<div class="profile">
<img style="display: block" src="profile_image.jpg">
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Otherwise, the rest of the code is perfectly fine.
It does depend of what exactly you want to do with it but if I understand your question.
You don't need divs for your image just set up different image classes in your CSS.
.image1
{
width:100px;
height:100px;
}
Then your HTML would look like
<img src="profile_image.jpg" class="image1">
Check out http://www.w3schools.com/css/css_align.asp for more information about how to actually set up alignments in your CSS
It might be worth using a div to style your text into a block or format it to look nice, etc. But you don't need to do it
http://www.w3schools.com/tags/tag_div.asp for div styling .
And finally abit of personal experience, spend an hour or 2 looking through W3Schools CSS section and learning the basics of styling it's a great way to learn the basic tools you need to work with CSS and make your pages look good !
Edit styling text
<h1>first last</h1>
<p>Coffee snob.</p>
so first you could style them in your css as the elements they are
h1
{
text-align:left;
padding-left: 10px;
text-decoration: underline;
}
p
{
text-align: right;
}
Doing thing your HTML would look exactly as it is you wouldn't have to change anything. Obviously this is something you can only do once for all <p> and <h1> content and every time you use those tags without specifying a class for them it'll look exactly like whatever the above CSS is.
The other option is to do what I suggested with the image and give them a unique class.
p.body
{
text-align: right;
}
Here you'll need to add class to <p> jsut like you did for image which will look like
<p class="body">Coffee snob.</p>
Hope that helps !
I am using Bootstrap 3 (and Angular) for a webapp. I have sidebars which can be toggled, they are not using bootstrap (but table-cell layout)
I created a demo here: http://plnkr.co/edit/0pGjRqfqF21lGvhuNb9k?p=preview
Is it possible to make bootstrap columns break relative to the actual with of the container they are in?
Example:
A col-sm-* should break if its container (aside-main) is <768px, not the screen ?
<div class="row" ng-controller="demoCtrl">
<div class="aside-container">
<div class="aside-main">
<div class="col-sm-12">
<h2>Main Content Area</h2>
<div class="row">
<div class="col-sm-6">
<strong>column 1</strong>
</div>
<div class="col-sm-6">
<strong>column 2</strong>
</div>
</div>
</div>
</div>
<div class="aside" ng-if="asideIn">
<div class="col-sm-12">
<h2>Aside Area</h2>
here is the aside content
</div>
</div>
</div>
In 2018 seems there are such possibilities.
According to the documentation of project https://github.com/marcj/css-element-queries all you have to do is following.
Let's say you have following html element.
<div class="parent">
<h2>Test</h2>
</div>
And you define following css
.parent h2 {
font-size: 12px;
}
.parent[min-width~="400px"] h2 {
font-size: 18px;
}
.parent[min-width~="600px"] h2 {
padding: 55px;
text-align: center;
font-size: 24px;
}
.parent[min-width~="700px"] h2 {
font-size: 34px;
color: red;
}
And include scripts
<script src="src/ResizeSensor.js"></script>
<script src="src/ElementQueries.js"></script>
Functionality of the project will find html elements that css is referring to and will only listen to changes of those elements.
"no performance issues since it listens only on size changes of
elements that have element query rules defined through css. "
e.g. when an element that is "watched" exceeds width of 400 on watched element will be added css attribute min-width 400px and defined css will be applied to it.
Also for this to work you need to trigger the event listening or initialization yourself:
var ElementQueries = require('css-element-queries/src/ElementQueries');
//attaches to DOMLoadContent
ElementQueries.listen();
//or if you want to trigger it yourself.
// Parse all available CSS and attach ResizeSensor to those elements which have rules attached
// (make sure this is called after 'load' event, because CSS files are not ready when domReady is fired.
ElementQueries.init();
It's not exactly breaking bootstrap columns, but you can control css based on the width of the container. Should suffice.
Right now I have two HTML classes and a CSS file. One HTML file is used for writing HTML code and another one is for putting large text/paragraph. Now I want to reference that HTML file (which includes a big paragraph) into my main html file.
How could it be done?
Is it a good practice?
Or is there any alternative way to do that?
The code I wrote:
main.html:
<!--
All the html code will go in this file. This is the main core file of any website.
-->
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<!--<img src="bricks.JPG" alt="blue bricks" width="300" height="1000">-->
<style type="text/css">
</style>
</head>
<body>
<h1 id="style_header">Welcome to my green world!</h1></div>
<div id="menu_area" >
<div id="home">HOME</div><br /><br /><br />
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />
</div>
<p id="paragraph_home">paragraph.</p>
<!-- I want to call the home.html class here so that the paragraph is shown in my homepage under the home menu.-->
<div id="footer">Developed by Jabir Al Fatah</div>
</body>
</html>
main_design.css:
/*
All the css properties will go in this file. CSS properties design the site to look it prettier.
*/
#style_header {
background-color:blue;
text-align:center;
padding:20px;
margin:-8px;
border:4px solid red;
}
#paragraph_home{
text-align:center;
display:inline-block;
width:300px;
vertical-align:top;
}
#menu_area {
border:4px solid red;
margin:-8px;
background-color:#FFD700;
padding-top:30px;
margin-top:4px;
height:600px;
width:150px;
display:inline-block;
vertical-align:top;
}
body {
background-image:url(green.JPG);
background-repeat:no-repeat;
}
#footer {
background-color:blue;
margin:-8px;
border:2px solid red;
text-align:center;
}
#home {
font:bold 20px Tahoma;
text-align:left;
}
#about_me {
font:bold 20px Tahoma;
text-align:left;
}
#gallery {
font:bold 20px Tahoma;
text-align:left;
}
#contact_me {
font:bold 20px Tahoma;
text-align:left;
}
#my_diary {
font:bold 20px Tahoma;
text-align:left;
}
#blog {
font:bold 20px Tahoma;
text-align:left;
}
home.html
<!--
The text I want to add in the home link will go here. As soon as an user
loads the page will be able to see the paragraph. This paragraph should also be shown when the user clicks on Home menu.
-->
<!--
Now, basically I want to call this class in my "main.html" class. how to do that?
The reason I want to do that because I really don't like this giant paragraph in my "main.html" class.
-->
<p id="paragraph_home">I was born in a beautiful small village <!--Just an example paragraph-->
of.......
The villagers were relatively peaceful, almost free from crime
and sadness, besides they were very merciful and happy. The
reason I was born there is long long time ago my father’s
pre-generations were settled in the region. To live for his
own, my father had to move in a new village. Our new home was
just a kilometer away from my grandfather’s place. I came to
hear many legendary tales about that piece of land where our
current home is located. People use to say that there was
jungle and some evil’s residence long time ago. From our
village, some seniors of mine saw some shocking scenery with
monster shape in that bush. By the time my father cut the
jungle to settle residence. My father was a school teacher.
And my mom is a homemaker. I am the fourth child of my parents.
Among five siblings, my only and one sister is the second child.</p>
[NOTE: I want that all of my paragraph or text should appear next to the menu area and below the heading.]
HTML out of the box doesn't support this. You would need to use a dynamic language like PHP or ASP.NET. You would need to store your text in a variable, and call that on your main page. Here is a PHP example of how I accomplished this a while back:
First you would store your paragraph in another PHP file, lets call it paragaph.php.
//paragraph.php
var myParagraph = '<p>your paragraph text here</p>';
Lets call the main file index.php
//index.php
//Put your include statement in your <head> tag
<?php include('paragraph.php'); ?>
//And this would be your paragraph
<p id="paragraph_home">paragraph.</p>
<?php echo myParagraph; ?>
<div id="footer">Developed by Jabir Al Fatah</div>
The only catch is you will need something like WAMP installed on your computer to test this because browsers dont support PHP. They needs server side processor to create the HTML for them.
Good luck!
The iframe option works well, but there is a new method (requires a bit of work)
Using web components it would look like this:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
You are going to want to include backwords support via jquery so I'd recommend taking a look at this guys tutorial:
Web Components Tutorial
Good Luck!
Assuming I understood your problem correctly, I see two possible approaches:
client-side: load your "home.html" via an ajax call (downside of this approach is the dependence upon javascript, which the user may have decided to disable)
server-side: different server-side technologies (php, asp.net, etc.) have some sort of include mechanism
I tend to go with the 2nd approach because it doesn't rely on the presence of javascript, but it's your call.
Here's some resources:
jquery ajax | jquery load | php include
I am using the twitter bootstrap css toolkit for building master page for an application in asp.net webforms 2.0( also .NET 2.0). Nothing of a programming question though it is about design i got page with
Header
Breadcrumb
Maincontent
-leftsidebar
-pageContent
-rightsidebar
Footer
yeah this is one of those sidebar questions, i got the HTML like below
<div class="row">
<div class="span4">
<!--Place holder for left sidebar-->
<asp:ContentPlaceHolder runat="server" id="phLeftSidebar">
</asp:ContentPlaceHolder>
</div>
<div class="content">
<!--Place holder for main content-->
<asp:ContentPlaceHolder runat="server" id="phPageContent">
</asp:ContentPlaceHolder>
</div>
<div class="span4">
<!--Place holder for right sidebar-->
<asp:ContentPlaceHolder runat="server" id="phRightSidebar">
</asp:ContentPlaceHolder>
</div>
</div>
Question
In one of the content(child) pages i got no content for the left sidebar & i was expecting the middle content to take that space too since the right sidebar was spanning only 4 grids. So how do i make the content section take up the available space on absence of either right or left sidebar.
I answered a question much similar to this, you can take a look at the result here.
What it basically came down to was creating a new set of classes that you can add to your .content area in your child page so it can conform to your sidebars.
Just add this to your main CSS and add a class to your .content area according to your sidebar needs:
.fixed-fluid {
margin-left: 240px;
}
.fluid-fixed {
margin-right: 240px;
margin-left:auto !important;
}
.fixed-fixed {
margin: 0 240px;
}
Here is a demo of how it looks:
Without left sidebar: http://jsfiddle.net/6vPqA/4/show/
Without right sidebar: http://jsfiddle.net/6vPqA/5/show/