CSS
.body {
background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff);
background-size: 400% 400%;
background-repeat:no-repeat;
animation: gradient 35s ease infinite;
height: 100vh;
}
HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="./listener.js" type="text/javascript"></script>
<body class="body">
<div id="container">
<title>Police 10 Codes</title>
<h1>LSPD Ten Codes</h1>
<img src="https://i.ibb.co/2vNZgd9/lspd-removebg-preview.png" alt="LSPD Image"style="width:150px;height:150px;">
<div class="dropdown">
<button class="dropbtn">Non-Serious</button>
<div class="dropdown-content">
10-1 Unable to Copy / Weak Signal
10-3 Stop Transmitting
10-4 Affirmative / Understood
10-7 Out of Service
10-8 In Service
10-12 Stand by
10-17 En-route to Scene
10-19 Return to Station/Location
10-20 Location
10-22 Disregard
10-23 Arrived at Scene
10-24 Assignment Complete
10-30 Traffic Stop
10-36 Correct Time
10-37 Suspicious Vehicle
10-40 Run Silent No Lights/Siren
10-53 Road Blocked
10-56 Intoxicated Pedestrian
10-58 Direct Traffic
10-59 Convoy / Escort
10-60 In the Area
10-61 Clear for Radio Traffic
10-74 Negative
10-77 ETA
10-68 Dispatch Information
10-92 Improper parking
</div>
</div>
<div class="dropdown2">
<button class="dropbtn2">Medium</button>
<div class="dropdown2-content">
10-0 Use Caution
10-10 Fight in Progress
10-25 Report in person
10-26 Detaining/Arresting Subject
10-29 Warrant Check
10-31 Crime in progress
10-50 Traffic Crash
10-55 DUI
10-57 Hit & Run
10-78 Requesting backup
10-80 Fire Alarm
10-94 Street Racing
10-96 Mental Patient
</div>
</div>
<div class="dropdown3">
<button class="dropbtn3">Serious</button>
<div class="dropdown3-content">
10-18 Urgent
10-32 Person with Gun
10-39 Run with Lights/Siren
10-67 Report of Death
10-80 Pursuit in Progress
10-82 Fire in Progress
10-89 Bomb Threat
10-90 Bank Alarm
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When I view this, the size of the .body class crops and adjusts. I have a #container id class added where I'm trying to have the full UI open/close. Currently the UI does it's job, only issue I'm having is the size of the .body class keeps adjusting. Would like the size to stay at what its currently set at, 400% 400% or just fit for full screen view. Any help is appreciated, thank you.
<div> cannot be outside of <body>. Body tag needs to come first, then the Div, All HTML elements should be inside <body>. Try setting body height like -
HTML,
body {
height: 100%;
}
OR -
html {
height: 100%;
}
body {
min-height: 100%;
}
Orignal answer at stackoverflow - Make body have 100% of the browser height
It's because your html is invalid. All HTML elements must be children of the body but you have <div id="container"> as the body's parent. Kindly move it inside the body.
Try this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LSPD Ten Codes</title>
<link rel="stylesheet" href="style.css">
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="./listener.js" type="text/javascript"></script>
<style type="text/css">
.body {
background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff);
background-size: 400% 400%;
background-repeat:no-repeat;
animation: gradient 35s ease infinite;
height: 100vh;
}
</style>
</head>
<body class="body">
<div id="container">
<title>Police 10 Codes</title>
<h1>LSPD Ten Codes</h1>
<img src="https://i.ibb.co/2vNZgd9/lspd-removebg-preview.png" alt="LSPD Image"style="width:150px;height:150px;">
<div class="dropdown">
<button class="dropbtn">Non-Serious</button>
<div class="dropdown-content">
10-1 Unable to Copy / Weak Signal
10-3 Stop Transmitting
10-4 Affirmative / Understood
10-7 Out of Service
10-8 In Service
10-12 Stand by
10-17 En-route to Scene
10-19 Return to Station/Location
10-20 Location
10-22 Disregard
10-23 Arrived at Scene
10-24 Assignment Complete
10-30 Traffic Stop
10-36 Correct Time
10-37 Suspicious Vehicle
10-40 Run Silent No Lights/Siren
10-53 Road Blocked
10-56 Intoxicated Pedestrian
10-58 Direct Traffic
10-59 Convoy / Escort
10-60 In the Area
10-61 Clear for Radio Traffic
10-74 Negative
10-77 ETA
10-68 Dispatch Information
10-92 Improper parking
</div>
</div>
<div class="dropdown2">
<button class="dropbtn2">Medium</button>
<div class="dropdown2-content">
10-0 Use Caution
10-10 Fight in Progress
10-25 Report in person
10-26 Detaining/Arresting Subject
10-29 Warrant Check
10-31 Crime in progress
10-50 Traffic Crash
10-55 DUI
10-57 Hit & Run
10-78 Requesting backup
10-80 Fire Alarm
10-94 Street Racing
10-96 Mental Patient
</div>
</div>
<div class="dropdown3">
<button class="dropbtn3">Serious</button>
<div class="dropdown3-content">
10-18 Urgent
10-32 Person with Gun
10-39 Run with Lights/Siren
10-67 Report of Death
10-80 Pursuit in Progress
10-82 Fire in Progress
10-89 Bomb Threat
10-90 Bank Alarm
</div>
</div>
</div>
</body>
</html>
Related
I have checked the file order and closed off tags. It seems whatever I put at the top of the CSS file will not be read, however, everything below the very top segment of cod ,in this case, #tribute-info will not be applied to the HTML. If I moved #title to the top and refreshed the browser #title will not have its CSS anymore. Same situation for #img-caption.
<style>
#tribute-info{ /* <-- anything I put at the top of the file is not getting read. If I moved #img-caption here, and #tribute-info below it, #img-caption will not work. */
color: blue;
}
#img-caption{
color: red;
}
#title{
text-align: center;
color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/design.css" />
<meta charset="utf-8">
</head>
<body>
<div id="main">
<h1 id="title">History´s First Programmer</h1>
<div id="img-div">
<div class="row">
<div class="column">
<img src="images/ada_lovelace_house_emblem.jpg" alt="Ada Lovelace depicted in an emblem" id="image">
</div>
</div>
<p id="img-caption">The Mother of computer programming</p>
<div id="tribute-info">
<p>“The more I study, the more insatiable do I feel my genius for it to be.”</p>
<p>“Your best and wisest refuge from all troubles is in your science.”</p>
<p>“Mathematical science shows what is. It is the language of unseen relations between things.
But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious.”</p> <!-- this segment of code is not changing -->
</div>
<a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank" id="tribute-link">Click here to learn
more about Ada Ada_Lovelace</a>
</div>
</div>
</body>
</html>
The code works fine if you remove the <style> tag from your css file
Good day to all. I am new and novice and its my first question to this forum. I would try my level best to maintain dignity of this community and forum.
I just started to learn web development with html, css and java script. I was trying to make a slide show of images with "div" and backgroup-images. after lots of effort it worked but not smooth.
Images not appears one by one serial but skip randomly. Speed of slides are not uniform and after few seconds it goes very fast.
I was using "setInterval" in my codes.
<!-- scroll.html -->
<!DOCTYPE html>
<html>
<<head>
<meta charset="UTF-8">
<meta name= "index.html" content="html self made web site ">
<meta name= "keywords" content="web design, affordable and professional">
<meta name="description" content="Affordable and smart web desing without any builders rather via self made codes">
<meta name="Author" content="Binod Binani">
<meta name="viewport" content="width=device-width,initial-scale=0">
<!--Css link -->
<!--<link rel="stylesheet" type="text/css" href="../HTML-WEB/sc-css/sc_style1.css">
<script type="text/javascript" src="../html-web/java-js/slides.js" ></script> -->
<title>#Sharp Compusoft scroll#</title>
<style>
#Myimg{
}
#divBox{
min-height: 425px;
border: 2px black solid;
float: right ;width: 48%;
background-image: url("../html-web/sharp-slides/05.bmp");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: auto;
}
#divSlides{
background-image: url("../HTML-WEB/img/it-slide01.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
min-height: 425px;
border: 2px blue solid;float:
left; width: 50%;
}
</style>
</head>
<body onload="showImages()">
<section id='Middle' style="max-height: 430px;margin-top: 100px; border: 8px yellow solid; position: relative;">
<div id="divMiddle" style="min-height:425px; border: 5px red solid; margin: auto;">
<div id="divSlides" >
<!--50% left for fix image"> -->
</div>
<div id='divBox'>
<!--50% right for sliding image. Images are from 1 to 12 slides"> -->
<h4 id='head4'>1/12</h4>
</div>
</div>
</section>
<script>
var imageNo=1;
var extension='.bmp")';
var filepath='url("../HTML-WEB/sharp-slides/'
showImages();
function showImages(){
var ImageSource=""
if (imageNo > 12) {
imageNo=1 ;
}
if (imageNo< 10){
ImageSource= filepath +"0" +imageNo + extension ;
} else{
ImageSource= filepath +imageNo + extension
}
head4.innerHTML = imageNo+'/12'
document.getElementById('divBox').style.backgroundImage = ImageSource;
imageNo++; //increment by 1 step
setTimeout(showImages,5000);
} // showImages
</script> -->
</body>
</html>
There a couple of things causing the issue you are describing
First, you are calling showImages() three times, all they are all running at the same time, causing the timeouts to overlap and the image to jump out of order.
You should remove this function call <body onload="showImages()">
And this one too setTimeout(showImages,5000);
Then use setInterval, instead of setTimeout, the difference is that the interval keeps running every given time, instead of running just once like the timeout.
Here change showImages(); to var slidesInteval = setInterval(showImages,5000);
var imageNo=1;
var extension='.bmp")';
var filepath='url("../HTML-WEB/sharp-slides/'
var slidesInteval = setInterval(showImages,5000);
That way you function will be running only once every 5 seconds, you need to store the interval in a variable in case you want to clear it later.
You can check the full fiddle here https://jsfiddle.net/zgranda/5gnfr7hv/8/ . I used lorem picsum for the images, so don't copy the images urls
I am trying to learn html 5, I am trying to reproduce the rules to my current favourite game Camel Up (or Camel Cup) and am trying to be a good person and not just use a table, this is what i am trying to achieve
this is what i am getting
here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CamelCup Rules</title>
<style>
body {background-color:#f3d7a0; font-family:cursive}
#wrapper {width:1000px}
.float-left { float:left;width:40%;padding-right:5px;padding-left:5px;}
.float-right {float:right;width:40%;padding-right:5px;padding-left:5px;}
#banner-text{ font-size: smaller;}
.red-label {font-size:medium; color:red;vertical-align:top}
h1 {color:red; text-align: center; font-size:40px}
.full-width {width="100%";}
</style>
</head>
<body>
<div id="wrapper">
<header>
<div class="full-width">
<div id="logo" class="float-left">
<img src="logo.PNG">
</div>
<div id="banner-text" class="float-right">
<p>
Witness the craziest camel race of all time, as things really go topsy-turvy when
camels stack up and entire pyramids turn upside down.
As members of Egyptian high society, you gather in the desert with one simple
goal: to gain the most money by backing the right camel to win a leg or even the
entire race. However, in this race, it’s not just the lucky ones who can beat the
odds. Reading the dynamics of the race and having a good sense of timing is just as
important when it comes to backing the right camels and taking the victory.
</p>
</div>
</div>
</header>
<section id="contents" class="full-width">
<h1>Components</h1>
<div id="pyramid" class="float-left">
<label class="red-label">1 Pyramid</label>
<img src="pyramid.png">
</div>
</section>
</div>
</body>
</html>
if I make it variable width and enlarge my browser it looks like this (this is in response to an answer telling me to make it variable width but i can't see where to add pictures to comments)
This rule has an error in it:
.full-width {width="100%";}
should be
.full-width {width: 100%;}
Make these Changes:
Remove "" from .full-width
.full-width {width: 100%;}
Add this styling
#contents{clear:both;}
Also change width of #wrappper from 1000px to 100%
wrapper {width:100%;}
I am trying to set my background image to opaque keeping the content clearly visible. So far what I have tried do not seem to work. Here is my code. Any suggestions would be of great help
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 0.9;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
Here's a hacky way to do it...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 20%;
}
</style>
</head>
<body class="my-container" style="background-image: url('https://jaymartmedia.com/example/kitten.png');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
</html>
Not optimal, but it's quick and easy, all I did was add opacity using an image editor.
Please download the image here.
https://jaymartmedia.com/example/kitten.png
Hope this helps.
You forgot a semi-colon after opacity, as well as it's measured in percentage. Fixed code is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 90%;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
Convert to PNG and make the original image 0.2 opacity
because if u give opacity for body...it will effect to all contents inside the body including bg image.
CSS: set background image with opacity?
Opacity applies to entire container and thus resulting the effect in either the background and the content.
A good solution is to use a PNG with your desired level of opacity and apply it to a child container. In your case, you can apply to your .container.
With using this method, you can easily switch the background image anytime you need without worrying about its opacity level:
.container{
background-image: url('transparent.png');
}
The transparent.png image will be place on top of your background image.
Another way to do this:
<head>
<title></title>
<style type="text/css">
.my-container {
z-index: -1;
opacity: 0.2;
position: absolute;
}
</style>
</head>
<body>
<div class="my-container">
<img src='http://placekitten.com/1500/1000'>
</div>
<div class="container">
<article>
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
try use alpha filter in your section or background div, doest work if u link img on div and set opacity on body,
try this
.youclass {
background-image:url(../img/welovecats.jpg);
opacity:0.60;
-moz-opacity: 0.60;
filter: alpha(opacity=0.6);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;}
html
<html>
<body>
for section
<section class="youclass">
content
</section>
</body>
</html>
use body for only main items like data-target, scroll scripts, normalizes and other stuffs
problem 1.Fonts wont change
problem 2.Height on the "id's" wont change
problem one, is there something out of place with the font codes?
<head>
<title>Jubilee Austin Developer</title>
<link rel="stylesheet" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
</head>
problem two, Ex. this is 1 of the 3 "id's" i have. its not responding to the CSS or at least its not physically showing height change
<section id="about">
<div class="full-width">
<h2>A little bit about me</h2>
<div class="half-width">
<p> i've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism.As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now i've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
My entire css
/****Base syles***/
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
}
Entire code in case you need it for anything
http://i.stack.imgur.com/Q73h1.png
If i left anything out that you need please feel free to ask
About the height part: You won't see the height if the content is less high than the parent element and if there is no background or border. Add something like border: 1px solid red; to see the full height of your element.
#about, #work, #contact {
height: 600px;
border: 1px solid red;
}
Simply invert the order you call your styles:
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" type='text/css'>