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.
Related
I am trying to ge rid of the white space as seen on the picture. I am using bootstrap for my project and I'm fairly new to it. My teacher told me (without looking at any line of code) that it probably is some container that is making this issue but I beg to differ, since the html container is the one NOT taking up the entire screen, it feels to me that theres something going on with that element but I have no css for the HTML element, therefore it must be something with bootstrap? Can anyone help me figure out what the issue is? screenshot where the html is marked and you can see the white box on the right side
.page-break {
background-color: rgb(211, 211, 211);
}
.hero-image {
background-image: url("images/welcome-img.jpg");
background-size: cover;
}
.hero-text {
text-align: center;
color: black;
}
<!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.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
<script
src="https://kit.fontawesome.com/4db53af2d4.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header>
<section class="top-bar">
<div class="row sticky-top">
<img src="images/tux.png" alt="" class="col-2" />
<h2 class="col-5">About Linux</h2>
<div class="col-5 hamburger-menu">MENU</div>
</div>
</section>
</header>
<main>
<div class="hero-image row">
<div class="hero-text">
<h1>FOSS</h1>
<p>And why it's good for you</p>
</div>
</div>
<!-- <section class="hero-section">
<div class="hero-container">
<img src="images/welcome-img.jpg" alt="" />
<h1>FOSS</h1>
<h3>And why it's good for you</h3>
</div>
</section>-->
<section class="articles container">
<article class="manjaro-article">
<div class="container gx-4 mt-4">
<div class="row">
<img src="images/manjaro_scrn.png" alt="" />
</div>
<div class="row py-3">
<img src="logos/manjaro.svg" alt="" class="col-3 pe-4" />
<h2 class="col-9"><b>Manjaro</b></h2>
</div>
<div class="row">
<p>
Is an accessible, friendly, open-source operating system.
Providing all the benefits of cutting-edge software combined
with a focus on getting started quickly, automated tools to
require less manual intervention, and help readily available
when needed. Manjaro is suitable for both newcomers and
experienced computer users.
</p>
<br />
<br />
<p>
Unlike proprietary operating systems you have full control over
your hardware without restrictions. This makes Manjaro a
powerful Operating System ideal in home, work, and development
environments.
</p>
<br />
<br />
<p>
It is easily possible to run many popular Windows applications,
using compatibility software such as Wine, PlayonLinux or Proton
via Steam. The examples given here are far from comprehensive!
</p>
<br />
<br />
<p>
Representing a perfect middle-ground for those who want good
performance, full control, and cutting-edge software but also a
degree of software stability.
</p>
</div>
</div>
</article>
<div class="row page-break">
<div>
<p></p>
</div>
</div>
</section>
</main>
<footer>
<p></p>
</footer>
</body>
</html>
You need to use a div with the class container to wrap everything.
Add <div class="container"> before <header> and close it after </footer> with </div>.
Please read this to understand the Bootstrap layout.
I've been trying to change my fonts with Google Fonts in my HTML / CSS, but it keeps on remaining at its default font. I've googled everywhere and still the same. Could there be something wrong with my code?
My html code:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<script src="myscripts.js">
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script type="script/script.js">
</script>
<title>The Story Maker</title>
</head>
<body>
<h1>The Story Maker</h1>
<p>Fabricate a comical, romantic, jovial, or even petrifying story with this story maker! Let your imagination and creativity loose!</p>
<div class="navigation">
<nav>
<ul>
<li>Home</li>
<li>Create A Story</li>
<li>About Us</li>
<li>Donate</li>
</ul>
</nav>
</div>
<div id="showContainer">
<div class="imageContainer" id="img_1">
<img src="https://s3-ap-northeast-1.amazonaws.com/pro-ww-wordpress/libre/uploads/sites/2/2018/03/08091927/Disney-Meet-80cr.jpg">
<div class="caption">
The Tale of the Snow White
</div>
</div>
<div class="imageContainer" id="img_2">
<img src="https://66.media.tumblr.com/51c436b44f5ec312055a7ed22cc6dd2b/tumblr_osyb8fvLA81thrhjso1_400.jpg">
<div class="caption">
The Horror Tale of the Dolls
</div>
</div>
<div class="imageContainer" id="img_3">
<img src="https://66.media.tumblr.com/4dca7a847bd3fe0dae5bcfefddf850fb/tumblr_phrz8lNkHI1qcpptho1_640.jpg">
<div class="caption">
The Romantic Tale of Sara and John
</div>
<div class="imageContainer" id="img_3">
<img src="https://i.pinimg.com/originals/1c/f5/a0/1cf5a0e20fdd174956031fff77376f17.jpg">
<div class="caption">
The Adventures of Felicity
</div>
</div>
<div class="navButton" id="previous">❮</div>
<div class="navButton" id="next">❯</div>
</body>
</html>
My css code:
h1 {
font-family: 'Oswald', sans-serif;
}
I even tried using a font like Arial and nothing happens. No change in the output.
Try it internally, maybe?
<style>
h1 {
font-family: 'Oswald', sans-serif;
}
</style>
Or check if you named your css file styles.css?
Your code is fine, this must be a problem with your browser. These are the browsers that support Google Fonts API:
Google Chrome - version 4.249.4+
Mozilla Firefox - version: 3.5+
Apple Safari - version 3.1+
Opera - version 10.5+
Microsoft Internet Explorer - version 6+
I downloaded the exercise files for a tutorial on responsive animated websites and in my code editor (Brackets) at the end of the page the body and html tags are showing in red as if there is an error and I have no idea why. Can anyone tell me?
Also, what's the best way to find out myself? I clicked on "Debug" in the Brackets toolbar but it just gave me the lines where the errors were - 167 and 168 on the page, nothing more. Not much help. Thank you.
<!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>The Gym - Personal Training</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/waypoints.css">
<script src="js/query.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
</head>
<body>
<header>
<div id="header-inner">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Facility</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!--- Start Slider -->
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
<div class="slide-wrap">
<section class="slider">
<ul class="slider1">
<li><img src="https://www.w3newbie.com/wp-content/uploads/chest-fly.png"></li>
<li><img src="https://www.w3newbie.com/wp-content/uploads/push-ups.png"></li>
<li><img src="https://www.w3newbie.com/wp-content/uploads/inside-gym.png"></li>
<li><img src="https://www.w3newbie.com/wp-content/uploads/training.png"></li>
</ul>
</section>
</div>
<script type="text/javascript">
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
});
$('.slider2').bxSlider({
pager:false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
controls:false,
});
</script>
<!--- End Slider -->
<div class="clearfix"></div>
<div id="inner-wrapper">
<!---Start Waypoints Delayd Animation --->
<section class="staggered-animation-container">
<section class="os-animation" data-os-animation="fadeInLeftBig" data-os-animation-delay=".3s">
<section class="one-third">
<div class="circle">
<td><i class="fa fa-users"></i></td>
</div>
<h3>Grade A Staff</h3>
<p>Here at The Gym we have the best trainsing staff in the tri-state area as we seek out and recruit talented trainers with all the right cetifications. Come in today and have a sit down with one of our trainers so we can help you meet your golas in the fastest way possible!</p>
</section>
</section>
<section class="one-third">
<div class="circle">
<td><i class="fa fa-map-marker"></i></td>
</div>
<h3>A Convenient Location</h3>
<p>Here at The Gym we have the best trainsing staff in the tri-state area as we seek out and recruit talented trainers with all the right cetifications. Come in today and have a sit down with one of our trainers so we can help you meet your golas in the fastest way possible!</p>
</section>
<section class="one-third">
<div class="circle">
<td><i class="fa fa-check-square-o"></i></td>
</div>
<h3>Check us out - free!</h3>
<p>Here at The Gym we have the best trainsing staff in the tri-state area as we seek out and recruit talented trainers with all the right cetifications. Come in today and have a sit down with one of our trainers so we can help you meet your golas in the fastest way possible!</p>
</section>
<div class="clearfix"></div>
<article>
<img src="https://www.w3newbie.com/wp-content/uploads/gym-classes.png" class="circle-image">
</article>
<aside>
<h3>Our Facility</h3>
<br>
<ul class="gym">
<li><h4>Unlimited wifi Connection</h4></li>
<li><h4>member music requests & voting</h4></li>
<li><h4>open 24 hours / 7 days a week</h4></li>
<li><h4>cardio machine movie theater</h4></li>
</ul>
</aside>
<div class="clearfix"></div>
<section class="one-third">
<h3>Ladies Section</h3>
<img src="https://www.w3newbie.com/wp-content/uploads/ladies-gym.jpg">
<p>Included in our facility is a "ladies only" section of the gym where women can work out by themselves.</p>
</section>
<section class="one-third">
<h3>the gym floor</h3>
<img src="https://www.w3newbie.com/wp-content/uploads/gym-floor.jpg">
<p>Our gym is as spacious as they come. Enjoy scenic views from the cardio equipment on the third floor.</p>
</section>
<section class="one-third">
<h3>free weights</h3>
<img src="https://www.w3newbie.com/wp-content/uploads/free-weights.jpg">
<p>Our free weights section has an extensive collection of dumbbels and Olympic plates for body building.</p>
</section>
<!---End Inner Wrapper--->
<div class="clearfix"></div>
<footer>
<div id="footer-inner">
<section class="one-third" id="footer-third">
<h3>Contact</h3>
<p class="footer-contact">The Gym<br>
<b class="phone">555-555-5555</b><br><br>500 Washington Road<br>Seattle, WA 98101</p></section>
<section class="one-third" id="footer-third">
<h3>Social</h3>
<br>
<ul class="social">
<li><i class="fa fa-facebook"></i></li><li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
</ul>
</section>
<section class="one-third" id="footer-third-last">
<h3>Pages</h3>
<br>
<h5>
home about facility pricing
contact
</h5>
</section>
</div>
</footer>
<footer class="second">
<p>© The Gym, 2017</p></footer>
<!---End Waypoints Delayed Animation --->
</section>
</body>
</html>
Try collapsing all the nested tags and see if you're left with any that are not properly closed.
You have all the comments wrong, its: <!-- COMMENT -->, not <!--- --->
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>
I am using the Bootstrap 4 grid system, and want to float an aside down the right hand side of the screen.
Currently my MAIN content is wrapped in col-xl-3, I want the ASIDE to also use col-xl-3, but I want it to run the height of the page, not just the height of the row it is in, as it is currently pushing the height of the row out...
As you can see from the image, my aside is pushing the top row higher than the bottom...
All I have done code wise is this;
section.body article, section.body aside { float: left; clear: both; }
Any help would be greatly appreciated.
I used "col-sm" but the principle is still the same. It's all about the nesting.
View in full page to see columns.
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container" role="main">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">5</div>
<div class="col-sm-4">6</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
</div>
</div>
</div>
</body>
</html>