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
Related
I'm making an implementation of Conway's Game of Life.
For the GUI I'm creating a web, and I'd like to show a table with responsive square cells, no matter the number of cells. Any help?
Here I show what I've done:
HTML
function createBoard(heigh, width){
console.log("Executing function");
var table,row,options,cell;
table=document.getElementById("board");
for (var i=0; i<heigh;i++){
row=document.createElement("tr");
for (var j=0;j<width;j++){
cell=document.createElement("td")
cell.id= "cell-"+i+"-"+j;
cell.classList.add("cell","death")
//cell.addEventListener("click",changeCellClass(cell.id,"death"))
cell.onclick=function(){changeCellClass(this,"death")};
//cell.onmousedown=function(){changeCellClass(this,"death")};
cell.onmouseover=function(){this.style.backgroundColor="yellowgreen"};
cell.onmouseleave=function(){this.style.backgroundColor="darkcyan"};
//cell.addEventListener("click",console.log(cell.id))
row.appendChild(cell);
}
table.appendChild(row)
}
}
function changeCellClass(cell,currentClass){
console.log(cell.id)
console.log(currentClass)
cell.classList.remove(currentClass)
if(currentClass=="death"){
cell.classList.add("live")
currentClass="live"
cell.style.backgroundColor="yellowgreen";
cell.onmouseover=function(){this.style.backgroundColor="darkcyan"};
cell.onmouseleave=function(){this.style.backgroundColor="yellowgreen"};
console.log(cell.id+" 've changed to live")
}else{
cell.classList.add("death")
currentClass="death"
cell.style.backgroundColor="darkcyan";
cell.onmouseover=function(){this.style.backgroundColor="yellowgreen"};
cell.onmouseleave=function(){this.style.backgroundColor="darkcyan"};
console.log(cell.id+" 've changed to death")
}
cell.onclick=function(){changeCellClass(this,currentClass)};
}
createBoard(50,50);
table{
height: 70%;
width: 70%;
margin-right: auto;
margin-left: auto;
border: 1px black;
border-collapse:collapse
}
td {
border: 1px solid black;
}
.death{
background-color:darkcyan;
}
.live{
background-color: yellowgreen;
}
p{
text-align: justify;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Conway's Game of Life</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.10/brython.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.10/brython_stdlib.min.js"></script>
<script src="index.js" defer></script>
<!-- -->
<!--<script src="http://localhost:8000/Game/Web/index.py" type="text/python" defer></script>-->
<link rel="stylesheet" href="index.css">
</head>
<body onload="brython(1)">
<h1 id=test>Conway's Game of Life</h1>
<p>The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970.
It is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input.
One interacts with the Game of Life by creating an initial configuration and observing how it evolves.
It is Turing complete and can simulate a universal constructor or any other Turing machine.
</p>
<table id="board">
</table>
<h2>Rules</h2>
<p>
<ul>
<li>Any live cell with two or three live neighbours survives.</li>
<li>Any dead cell with three live neighbours becomes a live cell.</li>
<li>All other live cells die in the next generation. Similarly, all other dead cells stay dead.</li>
</ul>
</p>
<h2>Patterns</h2>
<h3>Still life</h3>
<h3>Oscillators</h3>
<h3>Spaceships</h3>
</body>
</html>
I've look for a lot of sites and haven't found nothing suitable for this problem (the solution I've found are for a particular height or width in cells, not something that adapats)
Have you looked at using GRID e.g.
.gameboard{
display:grid;
grid-template-rows:repeat(50, 1fr);
grid-template-columns: repeat(50,1fr)
grid-gap:3px;
height:70%;
}
.death{
background-color:darkcyan;
}
.live{
background-color: yellowgreen;
}
HTML
<div class = "gameboard">
<div class="live"><div>
....
<div class="death"><div>
<div class="live"><div>
...
<div class="live"><div>
</div>
Well, after doing some look into, I've a solution suitable for my problem: using jquery.
function windowReszie(){
var size =$("td").width();
$("td").height(size);
}
Then add this fuction on window's resize event and it is done
$(window).on('resize', function(){windowReszie()});
I added runat="server" to one of the div in my .ascx file.
<div id="logo" runat="server">
This changes the final HTML to below. Notice how the mainheader1 was inserted
<div id="mainheader1_logo">
I read this question https://stackoverflow.com/a/897790/886569 and made this change to the html
<div id="logo" class="logo" runat="server">
This causes the final HTML to be
<div id="mainheader1_logo" class="logo">
In my CSS the logo class is defined like this:
#logo
{
position:absolute;
left:0px;
top:78px;
width:396px;
height:50px;
}
How can i fix this issue in a safe way? I don't want to add the component name in my CSS file as that seems dirty. Also would not want to change the # to a . because that might break lots of other things.
Update your css as below. CSS Selector [id$="logo"] will select every element whose id ends with "logo".
[id$="logo"]
{
position:absolute;
left:0px;
top:78px;
width:396px;
height:50px;
}
I am using single CSS file for all my pages, but I come across with this problem. I have an almost identical (with minor differences) element on two different pages ( let's say home page and about page; This is my CSS codes for a specific element in the Home page, I want to use this for another page with minor differences. How do I name those two classes,
Do I need to use completely separate class names like .home.topcontainer { and .about.topcontainer { etc, or is there any robust way handling this issue?
What is the best way of naming CSS blocks for different pages, if I am using a single CSS file for my whole website to avoid me get confused over class names?
Thanks
CSS
.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;
The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:
<body class="home">
<div class="top_container">
<!-- Do something -->
</div>
</body>
--or--
<body class="about">
<div class="top_container">
<!-- Do something -->
</div>
</body>
now you can use css like:
.home .top_container{}
.about .top_container{}
Let's assume this is your Home page
<div id="home">
<div class="top_container">
//stuff
</div>
</div>
And this is your about page:
<div id="about">
<div class="top_container top_container_about">
//stuff
</div>
</div>
Now, in your CSS file, add the style for the 'top_container' class like so:
.top_container {
//css styles common to the top_container element
}
And then write the style that's unique to the top_container in the about section:
.top_container_about {
//css style unique to the about section
}
This is one way which takes advantage of the 'Cascading' property of a 'Cascading Style Sheet'.
Commonly used practice here is to use a base class and a variation to that base class. That way we use the base css-class for both elements and change it a little by overwriting some values with the variant-class. You didn't specify how you want the top containter to change but here is an example:
.top_container {
background: #000;
color: #fff;
width: 200px;
height: 50px;
padding: 10px;
}
.top_container.top_container--narrow {
width: 100px;
}
<div class="top_container">
Default
</div>
<div class="top_container top_container--narrow">
Narrow
</div>
I add the page name to the body class, and make changes like that using CSS like
.style {
margin: 0;
}
.home .style {
margin: 10px;
}
From what I learned in coding scss, it is better to make your class name a general one. In css only you can make it like this:
CSS
.top-container{
width: 100%;
}
.top-container.about{
width:60%
}
.top-container.contact{
width:30%
}
HTML
home.html
<div class="top-container"></div>
about.html
<div class="top-container about"></div>
contact.html
<div class="top-container contact"></div>
The about class will override whatever style you have in top-container. So its easy to use, short and quite simple. You can use this in making your class name a more general one.
If there are same elements on both pages such as Header then you can use the same class name for them on both pages so that they will look exactly identical on both pages. And for making some changes to those elements you can use different CSS selectors. In the below given code, I have used class and id as selectors.
I HOPE THIS ANSWER MEETS YOUR REQUIRMENTS.
Homepage: header background color is blue.
<header class="top_container" id="home_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
About page: header background color is red
<header class="top_container" id="about_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
CSS file:
.top_container{
background-color: blue;
color: white;
}
#about_header{
background-color: red;
}
I would do like so. Cause you might have a .top-container on every page you need to set like a "default" style for .top-container. So CSS Cascading Style Sheet. Cascade from top and if an element needs to be a little different just set the differences in a more specific defined class. Something like so:
.top-container {
/* apply all styles for .top-container */
}
.home.top-container {
/* this .top-container will have all styles from .top-container defined above */
/* so only define all DIFFERENT things for .home.top-container here */
}
.about.top-container {
/* define all DIFFERENT things for .about.top-container here */
/* like before it will always have the .top-container styles */
}
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>
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