I'm trying to do some basic html/css and it doesn't work in one directory of my computer but works on all other directory's. (I'm using a mac and tried on a user level root sites folder and the page does not show up properly.) If i move the folder with all of my files in it (exact same files as in the sites folder) to another directory it shows up properly and works fine..Is there an issue with permissions or something that would cause this?
Thanks!
Code as requested:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
<p>Donec sollicitudin mi et magna. Proin non est. Vestibulum diam. Quisque in enim. Sed id dui. Nunc nec sapien. Nulla lacus. Quisque in ante vel nunc semper pellentesque. Nam sit amet lacus sit amet ipsum auctor eleifend. Quisque vitae justo eu neque mattis pellentesque. Suspendisse tristique. Nulla facilisi. Pellentesque hendrerit tristique turpis. Pellentesque eget mi. Vestibulum a lacus.</p>
</div>
<div class="col-xs-6">
<p>Donec sollicitudin mi et magna. Proin non est. Vestibulum diam. Quisque in enim. Sed id dui. Nunc nec sapien. Nulla lacus. Quisque in ante vel nunc semper pellentesque. Nam sit amet lacus sit amet ipsum auctor eleifend. Quisque vitae justo eu neque mattis pellentesque. Suspendisse tristique. Nulla facilisi. Pellentesque hendrerit tristique turpis. Pellentesque eget mi. Vestibulum a lacus.</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Within the sites folder it comes up as 2 rows instead of 2 columns and outside of my sites folder it comes out properly as 2 columns instead of 2 rows.
Related
On my main page, I have an emoji and it works fine. But I have the exact same code on my seond one and it does not work
I have tried looking for an answer but no else seems to have this problem
This bit is my main page that the code works on:
<head>
<meta charset='utf-8'>
</head>
<link rel="icon"
href="https://drive.google.com/uc?id=1G624t-8tJG_l29sdQ4COazA_c69aBB3Q&authuser=0">
<title>Game 👠Reveiw</title>
<link rel="stylesheet" href="styles.css">
<div class="topnav">
<a class="active" href="#home">Home</a>
Portal 2
CS:GO
Minecraft
</div>
<h1>Game 👠Reveiw </h1>
<h4>Portal 2 |
CS:GO |
Minecraft</h4>
<br>
<br>
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium quam
libero. Etiam fringilla auctor accumsan. Aenean tellus ex,<br>
convallis non enim at, pharetra accumsan ligula.
mi vel est bibendum rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.<br>
Sed ullamcorper feugiat quam, ac mattis quam finibus eu. Fusce eget justo a odio
ultrices efficitur. Donec elementum purus sed iaculis rutrum.<br>
Praesent ornare laoreet faucibus. Suspendisse consequat, nisi eu convallis vestibulum,<br>
nibh est imperdiet nulla, ut suscipit dolor ex scelerisque neque. Morbi sed mi
cursus, mattis velit a, laoreet velit. Donec nulla felis, scelerisque at sem
</div>
<footer>Game 👠Reveiw</footer>
This is my other page(connected to it) and the footer code doesn't work:
<head>
<meta charset='utf-8'>
</head>
<title>Portal 2</title>
<link rel="stylesheet" href="styles_portal_2.css">
<link rel="icon"
href="https://drive.google.com/uc?id=1Pp9iytPYBcUg7fOIsH6QuiyM7JeL9SKK&authuser=0">
<div class="topnav">
<a class="active" href="#home">Home</a>
Portal 2
CS:GO
Minecraft
</div>
<h1>Portal 2:</h1>
<h4>Home</h4><br>
<div class="center">
Portal 2 is a game for those lonely friday nights where you need that comfort of
Wheatley<br>
and the engaging aspect of the game.
while being relaxing and funny at times. With my times playing Portal 2, I got
sucked into a<br>
world where there is no competition and the only skill you need is problem
solving. In this<br>
game you are a test subject with a ‘Portal Gun’ that creates portals to complete
challenges.<br>
The challenges get harder and harder as you progress.<br>
Overall this game is amazing and would highly recommend it.<br>
<img width="400"
src="https://drive.google.com/uc?id=13djQKInGDpkkmiUEj8PwM-h-dkWsOHDt"title="nice"><br>
</div>
<footer>Game 👠Reveiw</footer>
Expected output to be an emoji but got some weird code
According to this well written article (https://www.kirupa.com/html5/emoji.htm) , there are two ways you can insert an emoji, by copying and pasting the emoji itself into your code or by grabbing the codepoints (https://emojipedia.org) for it and pasting that in your html.
Try using the emoji codepoints. If you load the below files in your browser, you can see that the emoji appears consistently in the browser on both pages.
page1.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<link rel="icon"
href="https://drive.google.com/uc?id=1G624t-8tJG_l29sdQ4COazA_c69aBB3Q&authuser=0">
<title>Game 🍔 Reveiw</title>
<link rel="stylesheet" href="styles.css">
<div class="topnav">
<a class="active" href="#home">Home</a>
Portal 2
CS:GO
Minecraft
</div>
<h1>Game 🍔 Reveiw </h1>
<h4>Portal 2 |
CS:GO |
Minecraft</h4>
<br>
<br>
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium quam
libero. Etiam fringilla auctor accumsan. Aenean tellus ex,<br>
convallis non enim at, pharetra accumsan ligula.
mi vel est bibendum rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.<br>
Sed ullamcorper feugiat quam, ac mattis quam finibus eu. Fusce eget justo a odio
ultrices efficitur. Donec elementum purus sed iaculis rutrum.<br>
Praesent ornare laoreet faucibus. Suspendisse consequat, nisi eu convallis vestibulum,<br>
nibh est imperdiet nulla, ut suscipit dolor ex scelerisque neque. Morbi sed mi
cursus, mattis velit a, laoreet velit. Donec nulla felis, scelerisque at sem
</div>
</body>
<footer>Game 🍔 Reveiw</footer>
</html>
page2.html
<html>
<head>
<meta charset="utf-8">
</head>
<title>Portal 2</title>
<body>
<link rel="stylesheet" href="styles_portal_2.css">
<link rel="icon"
href="https://drive.google.com/uc?id=1Pp9iytPYBcUg7fOIsH6QuiyM7JeL9SKK&authuser=0">
<div class="topnav">
<a class="active" href="#home">Home</a>
Portal 2
CS:GO
Minecraft
</div>
<h1>Portal 2:</h1>
<h4>Home</h4><br>
<div class="center">
Portal 2 is a game for those lonely friday nights where you need that comfort of
Wheatley<br>
and the engaging aspect of the game.
while being relaxing and funny at times. With my times playing Portal 2, I got
sucked into a<br>
world where there is no competition and the only skill you need is problem
solving. In this<br>
game you are a test subject with a ‘Portal Gun’ that creates portals to complete
challenges.<br>
The challenges get harder and harder as you progress.<br>
Overall this game is amazing and would highly recommend it.<br>
<img width="400"
src="https://drive.google.com/uc?id=13djQKInGDpkkmiUEj8PwM-h-dkWsOHDt"title="nice"><br>
</div>
</body>
<footer>Game 🍔 Reveiw</footer>
</html>
My HTML file is working perfectly while I am using its path
file:///C:/xampp/htdocs/resume/dashboard/ads.html to run it, but while I'm running it via localhost
http://localhost/resume/dashboard/ads.html
from the same location, some of its features like:
(modal scrolling and js code) are not working.
Please help!
ads.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
<link rel="icon" type="image/png" sizes="96x96" href="../img/logo/kk.png">
<link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Ads</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Animation library for notifications -->
<link href="assets/css/animate.min.css" rel="stylesheet"/>
<!-- Paper Dashboard core CSS -->
<link href="assets/css/paper-dashboard.css" rel="stylesheet"/>
<!-- CSS for Demo Purpose, don't include it in your project -->
<link href="assets/css/demo.css" rel="stylesheet" />
<!-- Fonts and icons -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
<link href="assets/css/themify-icons.css" rel="stylesheet">
</head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-1">
Launch Modal 1
</button>
<div class="modal fade" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Modal 1</p>
Next >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- #modal 2 -->
<div class="modal fade" id="modal-2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
< Previous
<p>Modal .Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla..2</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script></script>
<!-- Core JS Files -->
<script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Checkbox, Radio & Switch Plugins -->
<script src="assets/js/bootstrap-checkbox-radio.js"></script>
<!-- Charts Plugin -->
<script src="assets/js/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="assets/js/bootstrap-notify.js"></script>
<!-- Google Maps Plugin -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Paper Dashboard Core javascript and methods for Demo purpose -->
<script src="assets/js/paper-dashboard.js"></script>
<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
<script src="assets/js/demo.js"></script>
</html>
bootstrap.min.css
#modal-2 {
overflow-y:scroll;
}
In this section of code, the second modal is not scrolling.
When web sites work in one form and not another, it is typically due to one of two things:
A path or paths to various resources are fixed and not relative. For example: maybe your HTML looks for a Java Script file in a path called C:/xampp/htdocs/resume/dashboard/javascript/myjs.js instead of a relative path like ./javascript/myjs.js or maybe, you are already using relative paths but the starting directory of the relative path is off.
Usually you would notice this by images not showing or Java Script files not loading.
When you run as localhost, you are in the localhost domain and if you're making requests to other domains maybe they are being stopped for security reasons. You will generally notice these types of errors if you open the developer console in your browser you'd see errors saying that a resource was not allowed to load for security reasons or a cross-domain request was blocked.
If it is ONLY some Java Script not working, then I'd look at what attributes those javascript share... if they share a path take extra care to validate those, or if they require jQuery then you might need to load JQuery from the web instead of loading it locally.
To start your diagnostics, I'd recommend, opening the developer console in your browser (Chrome: right-click on a page and pick "Inspect" and look in the console tab) Take a look at the errors it shows. (usually a yellow triangle or red stop sign followed by a semi-descriptive error) It should tell you what is not loading and why and work backward from there.
If your paths are accurate and you're still stuck, you might look at the DocumentRoot setting in C:\xampp\apache\conf\httpd.conf and make sure that is set to the right starting directory, but check your errors first before altering configs. Changing configs should be a last resort... and if you do change them keep a backup of the original!
The most likely problem is that you are using incorrect paths. When you move from file based to http based the root / folder is your webroot, when using the file:// approach the root folder is the root of the drive the files are hosted on.
Sometimes, just the CSS files get cached, it's a very common problem for new web developers. So, to get rid of it just clear your cache from your web browser or just press cmd+shift+R. If you think that you have written right CSS but it's not visible in your web browser.
I've just found out the pseudo-classes utilisation (:nth-child etc...).
I have a question in my mind about this : The use of those pseudo-classes, which permit the suppression of the classes in the HTML code, is a benefit ? In relation with SEO, performance, W3C etc...
Here is an example (just a test, so no responsive and the image aren't loading, but we don't care) : https://codepen.io/anon/pen/XNjQEM
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Exercice Facultatif">
<meta name="author" content="Nathan Cheval">
<title>Exercice facultatif</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- START HEADER -->
<header>
<div>
<img src="imgs/logo.png">
</div>
<nav>
<ul>
<li>Acceuil</li>
<li>Activités</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!-- END HEADER -->
<!-- START CONTENT -->
<div>
<section>
<article>
<div>
<figure>
<img src="imgs/mtp.png" alt="Lac de Montpellier">
<figcaption>
Lac de Montpellier
</figcaption>
</figure>
</div>
<div>
<h1>Les lacs d’Occitanie</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat ex a erat feugiat suscipit. Aenean mattis dolor eget metus tempor, et semper tortor viverra. Curabitur rutrum ornare dolor a molestie.<br><br>
Fusce ut arcu vulputate, bibendum urna sed, mollis odio. Integer dictum justo nulla, non rutrum odio lacinia eget. Sed faucibus metus vel lacus ultrices condimentum. Pellentesque molestie laoreet imperdiet. <br><br>
Morbi cursus blandit est. Sed id varius purus. Pellentesque id tempor felis. Praesent orci nunc, imperdiet et mi eget, luctus lacinia erat.<br><br>
</p>
Lire la suite...
</div>
</article>
<hr>
<article>
<div>
<figure>
<img src="imgs/mtp.png" alt="Lac de Montpellier">
<figcaption>
Lac de Gergovie
</figcaption>
</figure>
</div>
<div>
<h1>Les lacs d’Auvergne</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat ex a erat feugiat suscipit. Aenean mattis dolor eget metus tempor, et semper tortor viverra. Curabitur rutrum ornare dolor a molestie.<br><br>
Fusce ut arcu vulputate, bibendum urna sed, mollis odio. Integer dictum justo nulla, non rutrum odio lacinia eget. Sed faucibus metus vel lacus ultrices condimentum. Pellentesque molestie laoreet imperdiet. <br><br>
Morbi cursus blandit est. Sed id varius purus. Pellentesque id tempor felis. Praesent orci nunc, imperdiet et mi eget, luctus lacinia erat.<br><br>
</p>
Lire la suite...
</div>
</article>
<div class="clear"></div>
</section>
</div>
<!-- START CONTENT -->
</body>
</html>
Thanks for your help clarifying this subject
The key use for classes is to identify certain parts of your site which repeat here and there and should always be styled the same. Say, a date widget attached to each blog post in a list. Or a social media widget placed here and there.
<div class="posted-date">
<span class="month">Sep</span>
<span class="day">16</span>
</div>
You need something to uniquely identify these "objects" (yes, thinking of them as self-contained objects is a good idea). If you use custom HTML tags in one way or another, that's a good identifier:
<posted-date><month>Sep</month><day>16</day></posted-date>
In this case you do not need classes, since the tag name is sufficiently self-identifying. If you want to stick to a certain DTD though and cannot/won't define your own tags, classes serve this role instead.
Further, in moderately complex HTML, using only :nth-child selectors and such, to some degree you'll always end up identifying elements by their position within the page:
header > nav ul li:nth-child(2) span { /* the date widget /* }
Well, what happens when you move an element around? Now you need to adjust your CSS too. Or if the same element is in various positions on your page and should receive the same style every time? You'll need to specify a lot of selectors, and, again, adjust the CSS every single time you place the item someplace new.
If you don't need classes because you can identify an element well enough just by its or its parent's tag name or such, or your selectors are otherwise already well enough defined and won't easily break if you move things around a bit, absolutely, no need to add superfluous classes. However, in general, tying styles to the structure of your HTML produces tight coupling, which is pretty much always a bad idea.
Writing maintainable CSS is something of an art. You need to find the right balance for your project. The more complex, the more refined strategies you need to develop to keep your HTML and CSS sane. Going overboard with classes on simple projects may not be worth it. Avoiding classes at all costs on complex projects and you'll eventually paint yourself into an unmaintainable corner.
So, this is the weirdest thing ever. I was working on a project on codepen(of course in codepen is a lot easier).
How do you migrate from codepen? Well, you pretty much just add the basic html tags and links so you can communicate between the css and js.
But although I'm doing all of that correctly(also adding the required libraries), my code does not work correctly.
What my code should be doing:
- Allow the user to drag the windows
But it's not!
Even more, all of the Jquery and Jquery UI functions are not working correctly. When I looked at the console, I found the following error "ReferenceError: $ is not defined".
Alright, now the code I'm using is here: http://codepen.io/julian-a-avar/pen/xbaRJz
And as expected everything is the same but the HTML file:
<!doctype html>
<html>
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- JS -->
<script src="script.js"></script>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="taskbar">
<div id="start_menu"></div>
<div id="menu">
<div class="app app1">W1</div>
<div class="app app2">W2</div>
</div>
</div>
<div class="window w1">
<div class="head">
<div class="title">Window 1</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<div class="window w2">
<div class="head">
<div class="title">Window 2</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
</body>
</html>
Yes, the file name are correct, and I'm using C9.io
Please help out, maybe I'm missing something.
ReferenceError: $ is not defined
I figured that it happened in your script.js where you implement the drag and drop functions.
So fixing the order of the scripts might fix the issue.
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<!-- JS -->
<script src="script.js"></script>
</head>
You included your script before jQuery, so $ doesn't exist.
Order matters.
You should add your script after you have loaded the jquery libraries.
It is also good practice to load scripts at the end of your file, just before </body>.
<!doctype html>
<html>
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- JS -->
<script src="script.js"></script>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="taskbar">
<div id="start_menu"></div>
<div id="menu">
<div class="app app1">W1</div>
<div class="app app2">W2</div>
</div>
</div>
<div class="window w1">
<div class="head">
<div class="title">Window 1</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<div class="window w2">
<div class="head">
<div class="title">Window 2</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<!-- JS -->
<script src="script.js"></script>
</body>
</html>
I'm trying to create a html template for email and I've encountered several problems (outlook does not handle image resizing etc.). One problem which i'm so far unable to solve is text wrapping within element (table or div) with fixed width.
Here is a simple example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table width="300px">
<tr>
<td width="300px"">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed turpis nunc. Nulla nec sapien ut ligula sollicitudin vestibulum eleifend a augue. Integer felis nulla, venenatis non consectetur nec, vulputate at enim. Suspendisse potenti. Curabitur sed magna metus. Nullam ut lectus ac arcu malesuada convallis. Ut dictum facilisis augue et semper. Phasellus euismod maximus turpis, at finibus dolor placerat ut. Vestibulum ultrices imperdiet enim, ac pharetra nunc fermentum non.
</td>
</tr>
</table>
</body>
</html>
It renders to a neat little box in browsers and most email clients but outlook ignores the width entirely. Help would be much appreciated.
Wrapping does work, just take the px off of your width attributes. Outlook's really picky.
You have to set your line breaks explicitly with br tags for Outlook. It sucks but it is the only reliable solution.