I want to create contents in the image, and stop the draggable window to appear below. Z-index dosen't work. It destroys the font (probably) and breaks the title. Any other methods that don't cause problems? I will appreciate the help if you solve this.
If you wanna know the project is, It's a windows-98/95 like thing. I will change the project's name soon.
And please note: The font only works on the website. (https://oli.neocities.org/windows97/)
Code: https://jsfiddle.net/9p28gLvb/
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://oli.neocities.org/style.css" rel="stylesheet" type="text/css" media="all">
<script>
$( function() {
$('#window').draggable({containment:"#Image"});
} );
</script>
<style>
img {
contain: content;
}
#window {
background-color: #B9BABD;
height: 162px;
width: 404px;
font-family: 'Normal';
}
.windowtitle {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
width: 404px;
height: 20px;
font-size: 16px;
color: white;
font-family: 'Normal';
}
.windowbody {
}
button {
display: block;
background-color: #B9BABD;
border-color: black;
font-family: 'Normal';
}
#font-face {
font-family: 'Normal';
src: url('https://oli.neocities.org/windows97/fonts/normal.ttf') format('truetype');
}
</style>
</head>
<body>
<img src="https://oli.neocities.org/windows97/images/background.png" id="Image" style="background-size: cover; width:100%;height:100%;">
<div id="window">
<div class="windowtitle">
<b>System</b>
</div>
<div class="windowbody">
<center>
<div style="clear: left;">
<p style="float: left;"><img src="/windows97/images/bubble_i.png" height="48" width="48"></p>
<p>Zoom to 67% for the best experience.</p>
</div>
</center>
<center>
<button>OK</button>
</center>
</div>
</div>
</img>
</body>
</html>```
fixed it
i made an container..
(edit: i'm currently working on the project, will get code later.)
Related
Im trying to create my first web project using Brackets and cannot get the background image to show up.
My css code is
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
.header {
background-image: url(../img/hero.jpg);
background-size: cover;
height: 100vh;
}
h1 {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
I'm hungry!
Show me more
</div>
</header>
</body>
</html>
I've been following a course online and have typed all the code in identically. I don't know why my background image wont appear. I dont think its a problem with the file tree as when I click on the url(../img/hero.jpg) Brackets shows me that it recognizes the image. Any help would by greatly appreciated. Thank you.
You are targeting the class .header instead of the tag header.
header { /* Change from .header to header */
background-image: url("../img/hero.jpg"); /* Add Quotes */
background-size: cover;
height: 100vh;
}
I think there are two things going on here that will get it working again:
Your css declaration for header is referencing a class but I think you want it to reference a tag header.
Will want to make sure the url path is relative and surrounded by quotes. The example below references one that is hosted online. The snippet you supplied didn't have the path inside quotes: '../url/destination'
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
header {
background-image: url('https://global-uploads.webflow.com/5ef5480befd392489dacf544/5f9f5e5943de7e69a1339242_5f44a7398c0cdf460857e744_img-image-p-1080.jpeg');
background-size: cover;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
I'm hungry!
Show me more
</div>
</header>
</body>
</html>
Apparently CSS is not recognizing the file path. I suggest you describe it more extensively to resolve this error: "C:\Users\Name\img\hero.jpg"
I want to make a dynamically scaling title that grows/shrinks depending on the width of the screen. I also want to make it so that it doesn't apply a word wrap and split the title into 2 or more lines. I am using an SVG trick to make this work.
Consider the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>StackOverflowExample</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
</head>
<style>
text {
font-family: 'Muli';
font-weight: 600;
fill: white;
}
svg {
width: 100%;
}
a {
color: white;
}
body {
background-image: linear-gradient(180deg, rgba(35, 50, 64, 0.91) 61.95%, rgba(0, 0, 0, 0.51) 94.56%),
/* height: 100vh; */
width: 100vw;
background-color: black;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Muli';
color: #ffffff;
min-height: 100vh;
display: flex;
align-items: center;
}
</style>
<body class="text-center">
<div class="container">
<div class="row">
<div class="col-12">
<svg viewBox="0 0 167 20">
<text x="0" y="15">This is a Test Of This T</text>
</svg>
</div>
</div>
</div>
</body>
</html>
I got this to work perfectly in Chrome, but then I was surprised that on ios, the last letter would be cut off. Please see screenshot:
IOS:
Chrome:
Any ideas on how to make this look correct on both OSes/Browsers? It is supposed to say "This is a test of This T". If you can't see, Chrome correctly resizes this no matter what screen resolution I put this on (smaller or bigger than ios). On ios, it always cuts it off.
I can get this on 1 browser or the other if I change the viewbox parameters, but I can't find any setting that would work for both.
Got it working... for future reference in case anyone else runs into this...
Adding textLength="167px" where 167 is the same as your viewbox size fixed the issue. Apparently, ios and MacOS was rendering spacing between the two systems differently causing the issue. Defining a textLength forced it to render more uniformly eliminating the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<title>StackOverflowExample</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
</head>
<style>
text {
font-family: 'Muli';
font-weight: 600;
fill: white;
}
svg {
width: 100%;
}
a {
color: white;
}
body {
background-image: linear-gradient(180deg, rgba(35, 50, 64, 0.91) 61.95%, rgba(0, 0, 0, 0.51) 94.56%),
/* height: 100vh; */
width: 100vw;
background-color: black;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Muli';
color: #ffffff;
min-height: 100vh;
display: flex;
align-items: center;
}
</style>
<body class="text-center">
<div class="container">
<div class="row">
<div class="col-12">
<svg viewBox="0 0 167 20">
<text x="0" y="15" textLength="167px">This is a Test Of This T</text>
</svg>
</div>
</div>
</div>
</body>
</html>
I am trying to make a site, using a background image:
(CSS)
body {
text-align: center;
background-image: url("../img/clouds.jpg");
background-size: 100% 760%;
}
and I also have on the top of the page this:
(HTML)
<div class="pageTitle">
<p>Title of Page basically</p>
</div>
(CSS)
.pageTitle {
font-size: 200%;
}
When I try to make the font-size bigger, the background image grows as well (looks like it's zoomed in, basically).
I suppose this has to do with the usage of percentages, but even when using em notation or px I still get the same result.
How can I make the pageTitle bigger without altering my background image's size?
What seems to make it work is altering the background-size: 100% 760%; to background-size: 100% 250%; (in my case), but still, whenever an element is altered it needs fixing as a whole.
Code Snippet:
var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];
function setRandomQuote() {
currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];
$('#quote').html(currentQuote);
$('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}
$(function () {
$('#randomQuote').click(function () {
setRandomQuote();
});
});
.w3-tangerine {
font-family: 'Tangerine', serif;
font-size: 200%;
margin-top: 10%;
margin-bottom: 5%;
}
body {
text-align: center;
background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
background-size: 100% 250%;
}
p {
font-size: 100%;
}
#randomQuote, #tweetQuote {
margin: 3% 1% 3% 1%;
}
#quote {
margin: 2% 2% 2% 2%;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Random Quote Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<div class="w3-tangerine">
<p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
Click on the button to generate a quote!
</div>
<div>
<input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
<a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
without set the height of a body the precent of height of the background is as a height of a contant. so 760% background-height is text-height*7.6. it is why when you change the size of the image the size of the image grow too.. what you can do is set
html, body{
height:100%;
}
and then it wil calculate precent of the whole page size (so in your case you will see only 1/7.6 of the height of the image).
There's an article, which describes the exact problem, that you have.
One of the solutions is to provide the following attribute to body. This will ensure everywhere is covered:
body {
...
background-size: cover;
}
var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];
function setRandomQuote() {
currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];
$('#quote').html(currentQuote);
$('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}
$(function () {
$('#randomQuote').click(function () {
setRandomQuote();
});
});
.w3-tangerine {
font-family: 'Tangerine', serif;
font-size: 200%;
margin-top: 10%;
margin-bottom: 5%;
}
html, body {
height: 100%;
}
body {
text-align: center;
background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
background-size: cover;
}
p {
font-size: 100%;
}
#randomQuote, #tweetQuote {
margin: 3% 1% 3% 1%;
}
#quote {
margin: 2% 2% 2% 2%;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Random Quote Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<div class="w3-tangerine">
<p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
Click on the button to generate a quote!
</div>
<div>
<input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
<a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
My page should have the twitter icon be on the same level as the logo and the blue background yet it is below it.
I have check the padding and any source of the issue!
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<!-- set character encoding for the document -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="A description of the page">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="screen" href="superfish.css">
<script src="https://use.fontawesome.com/7a86a996d7.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
</head>
<body>
<div id="header">
<p id="headerleft">
<img src="wdwfantasy.png" alt="Disney Information" height="100px" width="105px">
</p>
<p id="headerright">
<img src="twitter.png" alt="twitter" height="100px" width="105px"
</p>
</div>
<div id="nav">
</div>
</body>
</html>
And here is my CSS
div{
display:block;
}
#header_container {
background: #FFF url(https://images.wdwinfo.com/design/header-bg.jpg);
height: 75px;
zoom: 1;
}
#header{
background: white;
margin: 0 auto;
width: 950px;
height: 110px;
background: #ebf1f6;
background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%);
background: -webkit-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
background: linear-gradient(to bottom, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 );
}
#headerright{
float: right;
width: 100px;
height: 50px;
border: 0;
margin: 0;
display: inline;
}
}
#headerleft {
float:left;
width:850px;
background-color: grey;
height:50px;
width: 850px;
}
What could be the source of the issue?
Anything helps.
You have an extra } after #headerright on your styles which is breaking the code. Removing it should make your float more inline with your logo.
---> Check external Fiddle <---
I am trying to add a custom font in CSS but it does not work.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shout!</title>
<meta name="author" content="Jordan Baron">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div>
<img src=images/logo.png alt="logo" height="54" wdth="133" class="logo">
<hr class="divider">
<h1 id="wis">Shout!</h1>
</div>
<script src="scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</body>
</html>
My CSS:
#font-face {
font-family: SanFran;
src: url(SF-UI-Display-Thin.otf);
}
div {
text-align: center;
}
.divider {
margin: 0;
padding: 5px;
}
.logo {
margin: 0;
padding: 5px;
}
.wis {
font-family: SanFran;
}
I am using Bootstrap 3 on Mac OS X. I am using Chrome.
The font changes when I don't use Bootstrap but when I do use Bootstrap the font doesn't change
It won't change because you're using an ID on your <h1> but you're trying to target a class of .wis instead of an ID of #wis.
Try changing
.wis {
font-family: SanFran;
}
to
#wis {
font-family: SanFran;
}