I have a simple webpage which i am trying to get text to speech so once a word is highlighted it will be spoken to the user using TTS. As i understand you only need one line of code which is the script can someone help me to possible issues as to why it isn't working.
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?
family=Open+Sans" />
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
</head>
<body>
<div class="nav-arrow" onClick="location.href='sam.html';"></div>
<div class="nav-arrow" > </div>
<h2>Can you help Sam to draw a ship and sail across the ocean?</h2>
<div class='contain-boat'>
<div class='bottom'>
<div class='window'></div>
<div class='window window-2'></div>
<div class='window window-3'></div>
<div class='window window-4'></div>
</div>
<div class='pole'></div>
<div class='flag'></div>
<div class='sail'></div>
<div class='sail sail-2'></div>
</div>
</body>
</html>
Related
The HTML of the website
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-3"><div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
The output leaves a space as such on the left:
I have tried to replace the padding and tried various float options, but none of them seem to work. Any solutions?
You are using .container class, this is to create a centered container.
If you don't want this use .container-fluid class as detailed in the documentation:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
If you don't want to use a container, then don't use a container at all.
.navbar-pink {
background-color: pink
}
.title-yellow {
background-color: yellow
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<header class="navbar navbar-expand navbar-pink">
<h1> NAVBAR </h1>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h2 class="title-yellow">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
If i got correctly, you are trying to remove spacing from this portion
see the arrow in the image
If this is the case, you can simply use bootstrap's css class "container-fluid" instead of "container".
The "container" class leaves paddings/spaces to left and right whereas,
the "container-fluid" class utilizes full width of the screen.
Here is the full code--
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
Please note, i have used bootstrap cdn.
It is written in document that "The grid is by default center aligned.".
However, the following code does not center the cell:
<html>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<div class="mdc-card my-card">
<div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-image: url('image.png');">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The grid is by default center aligned
Yes, it is. The grid itself is centered (the red border), check below example. I think it is what a grid suppose to be. It define tiles and let you put component on it, so it is called grid.
<html>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-layout-grid" style="width: 512px; border:2px solid red;">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
<div class="mdc-card my-card">
<div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-color: green">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you really want a cell center aligned inside a grid layout, let the cell span across all columns.
We are not sure what is going to be put on the grid, or how you want to organize the content, otherwise we may suggest other component that might fit your needs.
Does anyone know, why when I try previewing my site, it doesn't show anything? Something wrong with my code?
When I check the source code, it won't tell me accurately enough what the problem is?
<head>
<title>My Coursera Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" />
</head>
<body>
Home
About
Contact
<hr>
<div class="container">
<h1 id="title" onclick="alert('Hello');">This is a heading or title</h1>
<div="row">
<div class="col-md-6 thin_border">
some content for panel 1
</div>
<div class="col-md-6 thin_border">
some content for panel 2
</div>
</div>
</div>
</body>
Try to close explicitly the script tag
<script src="script.js" />
Should be
<script src="script.js" ></script>
If you need more explanations you can check this question.
You are missing the <HTML> and the <!DOCTYPE> tags. Your code code should be like this:
<!DOCTYPE html>
<html>
<head>
<title>My Coursera Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" />
</head>
<body>
Home
About
Contact
<hr>
<div class="container">
<h1 id="title" onclick="alert('Hello');">This is a heading or title</h1>
<div class="row">
<div class="col-md-6 thin_border">
some content for panel 1
</div>
<div class="col-md-6 thin_border">
some content for panel 2
</div>
</div>
</div>
</body>
</html>
Note that you also have a wrong div tag <div="row">, which I'm assuming might be the div class property that's why I set it as class attribute on the above example.
It is also recommended to add the type attribute and explicit closing tag on the JavacScript import, like this:
<script type="text/javascript" src="script.js"></script>
On the bottom of my website, BJBGaming1.com, there is a weird white bar, please help me get rid of it. and my coding is
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li>Home</li>
<li>Minecraft</li>
<li>CS:GO</li>
<li>Smite</li>
</ul>
</div>
</div>
<div class="callout large primary">
<div class="row column text-center">
<h1 style="color:green">BJBGaming1</h1>
<h2 class="subheader">Happy Thanksgiving!</h2>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Minecraft <small>11/25/2015</small></h3>
<img class="thumbnail" src="Minecraft.png">
<p style="color:white">Minecraft is a very popular game, on PC, Xbox, and Smart Phones, played by millions of people every day. For more information go to www.bjbgaming1.com/minecraft</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>CS:GO <small>11/25/2015</small></h3>
<img class="thumbnail" src="CS.GO.png">
<p style="color:white">CS:GO stand for, Counter-Strike: Global Offensive, and is a FPS game that is assosiated with E-Sports, and played by millions of people everyday. For more information go to www.bjbgaming1.com/cs_go</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Smite <small>11/25/2015</small></h3>
<img class="thumbnail" src="Smite.png">
<p style="color:white">Smite is a game just like LoL (League of Legends). In Smite you can pick from over 50 gods that ou unlock with Favor, favor is basically the currency to buy gods, but in Smite there are tons of different game modes, and every day they feature a community made gamemode. Also, Smite is always coming out with new gamemodes to try. For more information go to www.bjbgaming1.com/smite</p>
</ul>
</div>
</div>
</div>
<!-- begin wwww.htmlcommentbox.com -->
<div style="color:white" id="HCB_comment_box">Comment Form is loading comments... </div>
<link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
<script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user) {hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttri bute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24nHgonDoa 62nAhjUsN9BAt%2F"+"&opts=16862&num=10&ts=1448559904895");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end www.htmlcommentbox.com -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script>
<script>
$(document).foundation();
</script>
</body>
</html>
Im probably missing some code so its probably best that you look at it from bjbgaming1.com
Add background color to the "body" tag of this website by using CSS:
body {
background-color: #000;
}
The bottom of your background image is black so add black background to 'extend' the background image.
I have the following html code, I am not able to place the divs in a single row. Not sure what I am doing wrong here.
<!DOCTYPE html>
<html>
<head>
<title>Hey there!</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class=".col-md-4">Hello</div>
<div class=".col-md-8"><h1>How are you?</h1></div>
</div>
</div>
</body>
</html>
Try
<div class="row">
<div class="col-md-4">Hello</div>
<div class="col-md-8"><h1>How are you?</h1>
</div>
The "." is used for a selector, not when writing the class name