At: http://www.fmancoding.com their is a section under "featured game of the week" that displays all the games, then the title and description of it. It looks exactly what I would like it to, except on a mobile device. On a mobile device the images are being tabbed in and touching each other.
Does anyone know why this is happening? I have breaks inbetween each div and I believe div's automatically are created on a new line, like a paragraph. Also, I added padding and margin to see if this would fix the problem, but it did not.
HTML:
<html>
<head>
<link href="Styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Fman Coding</title>
</head>
<body>
<center id="headerBox">
<h1 id="header">Welcome To Fman Coding</h1>
<h2 id="header">Most Games Are Mobile Friendly, And Can Be Used Offline!</h2>
</center>
<div id="MG">
<div id="FG">
<p id="ft">This Week's Featured Game!</p>
<img src="Games/Murderer.jpeg" width="100%" height="30%" alt="Miji">
<!-- Game Name & Description -->
<p id="FGD">Miji! Input Your Number Of Players And It Will Automatically Generate Everyone's Job!</p>
</div>
<div id="gLibrary">
<!-- Games -->
<div id="gameFrame"><img id="float" src="Games/Murderer.jpeg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Miji</h4>
<span id="desc">This game auto selects your positions based on the number of people playing!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="Games/RPS.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Rock, Paper, Scissors</h4>
<span id="desc">You can play Rock, Paper, Scissors, Shoot against a computer!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="MC/Click.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Minecraft Player Finder</h4>
<span id="desc">Create groups for certain games and find players to play, or help you build stuff!</span>
</div>
</div>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
color: aqua;
}
#headerBox{
border: 1px black solid;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url('matrixCode.jpeg');
}
#gLibrary{
color: #989898;
margin: 15px;
display: inline;
}
#gLibrary p a{
text-decoration: none;
color: aqua;
display: inline;
}
#FG{
border: 3px gold solid;
}
#FGD{
color: red;
text-align: center;
}
#MG{
border: 1px purple solid;
background-color: #333;
}
#ft{
text-align: center;
font-size: 16px;
background-color: #333;
color: red;
}
#gameTitle{
color: aqua;
}
#float{
float: left;
}
#desc{
color: crimson;
}
#gameFrame{
margin-top: 1%;
margin-bottom: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
Just found out this solution in wordpress by Tobiasbg.
The cause for this basically is that your theme is hiding all HTML tags (using display: none;) in it’s CSS file.
You can either correct it in the theme's CSS file or give ,
br{
display:block !important;
}
if you want only specific div's br to be shown give the div's class name prior to br in thre above code.
#gLibrary should be displayed as block, not inline :
#gLibrary{
color: #989898;
margin: 15px;
display: block;
}
Related
I have two drop-down buttons where the Difficulty button will make the Duration button move to the bottom when you click on it; likewise if you click on the Duration button it will move the Difficulty button to the bottom.
What's interesting is when the Difficulty button is clicked first, then the Duration button, both will be the proper height; but if you click the Duration button first, then the Difficulty button, only the Duration button will close its contents and move to the bottom again. This is what my code looks like:
HTML Code:
<!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">
<title>Document</title>
<link rel="stylesheet" href="style_MP.css"/>
</head>
<body>
<div class="main_page">
<h1>Welcome to My Typing Test!</h1>
<h2>Select Your Difficulty and Duration</h2>
<div>
<!--Below, the word "diff" is short for "difficulty" -->
<!--So "diff-settings" means "difficulty settings" -->
<!--"diff-options" means "difficulty options" and so on -->
<div class="difficulty">
<button onclick="myfunction01()" class="diff-settings">Difficulty</button>
<div class="diff-options" id="diff-select">
Beginner
Intermediate
Advanced
Expert
</div>
</div>
<div class="duration">
<button onclick="myfunction02()" class="duration-settings">Duration</button>
<div class="duration-options" id="duration-select">
30 Seconds
60 Seconds
120 Seconds
Custom
</div>
</div>
<script src="script_MP.js"></script>
</body>
</html>
CSS Code:
body{background-color:grey}
.main_page{text-align: center;}
h1{font-size: 50px;}
h2{font-size: 30px; padding-bottom: 40px;}
.difficulty , .duration{
display: inline-block;
margin: 5px;
}
/* This section is for the Difficulty Button only */
.diff-settings{
padding: 20px;
position: relative;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}
.diff-settings:hover, .diff-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}
.diff-options{
display: none;
font-size: 20px;
width: 130px;
}
.diff-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}
.diff-options a:hover {background-color: darkgreen;}
.show {display: block;}
/* This section is for the Duration Button only */
.duration-settings{
padding: 20px;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}
.duration-settings:hover, .duration-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}
.duration-options{
display: none;
font-size: 20px;
width: 130px;
}
.duration-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}
.duration-options a:hover {background-color: darkgreen;}
.show {display: block;}
What should I change in order to stop both buttons from moving to the bottom when they're clicked?
Just add this ;) :
.diff-options, .duration-options {
position: absolute;
}
When you change the display of a block it was taken into account and moved the following elements. By adding an absolute position, it is no longer taken into account for the calculation of the next element.
Making the parent div of the buttons use flex fixes the problem.
.flex{
display: flex;
justify-content: center;
}
<div class="flex">
<!--Below, the word "diff" is short for "difficulty" -->
<!--So "diff-settings" means "difficulty settings" -->
<!--"diff-options" means "difficulty options" and so on -->
<div class="difficulty">
<button onclick="myfunction01()" class="diff-settings">Difficulty</button>
<div class="diff-options" id="diff-select">
Beginner
Intermediate
Advanced
Expert
</div>
</div>
<div class="duration">
<button onclick="myfunction02()" class="duration-settings">Duration</button>
<div class="duration-options" id="duration-select">
30 Seconds
60 Seconds
120 Seconds
Custom
</div>
</div>
</div>
This will be an easy question for you to answer. I'm making a Google Clone Homepage, and I'm trying to connect my CSS and HTML. For some reason it isn't working.
My HTML and CSS are in the same folder so that's not the problem. In my HTML sheet, I've already linked to the external CSS stylesheet as well. The HTML code is below.
<style>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</style>
I'm expecting to see my HTML change because of my CSS, but I don't see that.
You can find my full HTML code: https://codeshare.io/ay3yrw
And full CSS here: https://codeshare.io/GABLnN
link tag is used directly inside the head tag
It must be like this:
<head>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</head>
I check your code and I found three main reasons why your CSS doesn't work properly.
1. link tag
As many others mentioned, you need to remove the <style> ... </style> tag from the <head> tag and use the <link> tag directly inside of it.
2. Not id but class
Your HTML and CSS have many errors. For example, you are styling in the CSS file:
.top left links {
...
}
Here .top is defined as a class but in your HTML code you defined it as an id, check this line:
<!-- Containing Top Left Links on Nav Bar -->
<div id="top left links">
...
</div>
<!--Containing Top Right Links on Nav Bar-->
<div id="top right links">
...
</div>
Remember that an id should be unique therefore you should change id attributes with class attributes.
3. No white spaces
In your CSS file all your definitions are incorrect:
.top left links {
...
}
From this definition, we know that .top is a class, but left and links are representing tags. And we all know that where is no <left> nor <links> tags they should be represented as classes. Also, remember that you concatenate them when you want to refer to a single element with multiple classes and you separate classes by a white space when you want to refer to a descendant element.
So the correct definition will be without white spaces:
.top.left.links {
...
}
Finally, I did some modification on the CSS file for the .search1 class. Check this code:
/* Google Duplicate CSS */
.top.left.links {
float: left;
color: #718090;
text-align: left;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.left.links a:hover {
text-decoration: none;
}
.top.right.links {
float: right;
color: #718090;
text-align: right;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.right.links a:hover {
text-decoration: none;
}
#ham_menu {
height: 24px;
width: 24px;
float: right;
}
.search1 {
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
-webkit-border-radius: 2px;
-webkit-user-select: none;
color: #5F6368;
height: 36px;
line-height: 27px;
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 4px;
cursor: pointer;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
min-width: 54px;
padding: 0 16px;
text-align: center;
}
.bottom.left.links,
.bottom.right.links {
list-style-type: none;
color: #718090;
padding: 30px;
margin: auto;
font-size: 13px;
}
.bottom.left.links {
float: left;
}
.bottom.right.links {
float: right
}
.footer {
position: fixed;
min-width: 980px;
z-index: 103px;
height: 64px;
background-color: lightgray;
}
<!--Header Menu of Page -->
<header>
<!-- Containing Top Left Links on Nav Bar -->
<div class="top left links">
About
Store
</div>
<!--Containing Top Right Links on Nav Bar-->
<div class="top right links">
<li>Gmail</li>
<li>Images</li>
<li>Sign In</li>
</div>
</header>
<!--Top Right Ham Menu-->
<img id="ham_menu" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" class="right">
<!--Actual Google Image, Search Form, and Buttons-->
<center>
<img src="http://www.google.com/logos/doodles/2019/us-teacher-appreciation-week-2019-begins-4994791740801024-2x.jpg" alt="Happy US Teacher Appreciation Week 2019!" class="center">
<form class="search" input type="text"> </form>
<button class="search1" type="submit" value="Google Search" style="visibility">
Google Search
</button>
<button class="search1">
I'm Feeling Lucky
</button>
<p>We're supporting teachers inspiring the next generation.</p>
</center>
<!--Footer Links-->
<footer>
<div class="bottom left links">
Advertising
Business
</div>
<div class="bottom right links">
<li>Privacy</li>
<li>Terms</li>
</div>
</footer>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
and in this condition make sure your HTML file and CSS file need to be in same folder.
Please, remove the <script> tag so that you can reference this CSS file.
I'm currently working on freecodecamp's first test, so my question is probably dumb. I would like to change the line-height of #titles to a smaller one, while keeping it's background color. It's probably the display element, but I can't figure out what to do. Also, I'd like to get rid of the white line surrounding my image, right before the border...
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is
there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
https://jsfiddle.net/deffciu/hrna0Lfs/
any help is appreciated
Adding the below two rules to #titles makes it work:
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
You get this:
Snippet
html, body {
font-family: 'Oswald', sans-serif;
text-align: center;
background: white;
}
#title2 {
color: #052449;
margin-bottom: 0px;
}
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
#image {
border: 8px solid #052449;
border-radius: 50%;
width: 500px;
height: 375px;
margin-top: 15px;
}
hr {
border-color: #486282;
margin-top:0px;
}
#img-caption {
margin-top: 20px;
font-style: italic;
font-size: 25px;;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
For the white border issue, it's your body's margins. The below code will fix it.
body {margin: 0;}
I have two buttons, one on the left, and one on the right. For some reason when I zoom in, I see my main button, and a bigger one behind it. They both change color when I hover, and are both clickable, but only the main one at the front links me where I want to go. I want the mysterious appearing button behind the main one to disappear. I think it may have something to do with the width, but it is set at 180px, and the height is auto.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="setupstylesheet.css">
<title>Setting up Your Website Folders</title>
</head>
<body>
<div id="body">
<img src="Images/web-development-banner.jpg" width="100%" height="400">
<h1 class="webheading">Website Developement</h1>
<div class="margin">
<div class="shading">
<h1>2. Setting Up Your Website Folders</h1>
<p>In order to have a website, you need to have it set our in a specific way, but make it easy to navigate. This is how you set up your website folders and files:</p>
<ol>
<li> Create a folder on your hard drive or a USB called "Website".</li>
<li>Open a blank Notepad++ document.</li>
<li>Save the blank document in your "Website" folder with the name "Index", and a file extension of ".html".</li>
<li>Open another blank Notepad++ document and call it "StyleSheet" with the file extension of ".css". Save it in your "Website: folder as well.</li>
<li>Inside your "Website" folder, create another folder called "Images".</li>
<li>If you wish to include music on your website, create another folder in your "Website" folder called "Audio".</li>
</ol>
<p>Your website folder should now look something like this:</p>
<img src="Images/webfolderdemo.jpg" width="80%" height="80%">
<p>Remember whenever you add pictures, put them in the "Images" folder, and music or other audio, put in the "Audio" folder."
<div class="needs">
<a href="index.html">
<button type="button" class="needs">1. Things you need</button>
</a>
</div>
<div class="extrainfo">
<a href="extrainfo.html">
<button type="button" class="extrainfo">3. Extra Information</button>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
#body {
background: url(Images/bigimage.jpg);
background-color:#000000;
background-size: 100% 100%;
width: auto;
height: auto;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0px;
margin-top: 0px;
color: #FFFFFF;
}
.webheading {
size: 300px;
text-align: center;
color: #FFFF00;
font-family: "Arial Black", Gadget, sans-serif;
}
.needs {
display: inline-block;
font-weight: bold;
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #FFFF00;
background-color: #00FF00;
border-radius: 10px;
height: auto;
width: 180px;
}
.needs:hover {
background-color: #4CAF50;
color: white;
}
.extrainfo {
float: right;
display: inline-block;
font-weight: bold;
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #FFFF00;
background-color: #00FF00;
border-radius: 10px;
height: auto;
width: 180px;
}
.extrainfo:hover {
background-color: #4CAF50;
color: white;
}
.margin {
margin-left: 20px;
margin-right: 20px;
}
.shading {
border-radius: 15px;
width: auto;
height: auto;
padding: 10px 25px;
text-align: left;
background-color:rgba(0, 0, 0, 0.6)
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="setupstylesheet.css">
<title>Setting up Your Website Folders</title>
</head>
<body>
<div id="body">
<img src="Images/web-development-banner.jpg" width="100%" height="400">
<h1 class="webheading">Website Developement</h1>
<div class="margin">
<div class="shading">
<h1>2. Setting Up Your Website Folders</h1>
<p>In order to have a website, you need to have it set our in a specific way, but make it easy to navigate. This is how you set up your website folders and files:</p>
<ol>
<li> Create a folder on your hard drive or a USB called "Website".</li>
<li>Open a blank Notepad++ document.</li>
<li>Save the blank document in your "Website" folder with the name "Index", and a file extension of ".html".</li>
<li>Open another blank Notepad++ document and call it "StyleSheet" with the file extension of ".css". Save it in your "Website: folder as well.</li>
<li>Inside your "Website" folder, create another folder called "Images".</li>
<li>If you wish to include music on your website, create another folder in your "Website" folder called "Audio".</li>
</ol>
<p>Your website folder should now look something like this:</p>
<img src="Images/webfolderdemo.jpg" width="80%" height="80%">
<p>Remember whenever you add pictures, put them in the "Images" folder, and music or other audio, put in the "Audio" folder."
<div class="button-wrap">
<a href="index.html">
<button type="button" class="needs">1. Things you need</button>
</a>
</div>
<div class="button-wrap">
<a href="extrainfo.html">
<button type="button" class="extrainfo">3. Extra Information</button>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
css -->
.button-wrap {
display: inline-block;
width: 171px;
}
remove float:right from .extrainfo
removed width for both buttons.
You can simplify your markup like that :
<div class="container">
<a href="index.html" class="button needs">
1. Things you need
</a>
<a href="extrainfo.html" class="button extrainfo">
3. Extra Information
</a>
</div>
And CSS could be something like that :
.container {
text-align: center;
}
.button_test {
display: inline-block;
font-weight: bold;
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #FFFF00;
background-color: #00FF00;
border-radius: 10px;
height: auto;
width: 180px;
}
.button_test.extrainfo {
// CSS for .extrainfo
}`
It is because your buttons are 'floating'. you should not have the same class on the button and container as mentioned above in the comments.
Once you have your button/div class situation fixed, you can use clear: both; on the containers and/or display: block; or display: block-inline; and that should stop the buttons from overlapping.
As long as you change the "float" attribute in the class that binds onto the buttons, the buttons would not be overlapping anymore.
If i am not mistaken, you can keep your "float" if you add "padding " attribute to your buttons
OK. I fixed it.
I stupidly had the same class name for my divs and my buttons, so thats why it was doubling up. I also found a much easier solution for aligning my buttons on the same row as eachother. Rather than having a div around each button, I did this instead:
HTML:
<div>
<a href="index.html">
<button type="button" class="needs">1. Things you need</button>
</a>
<a href="extrainfo.html">
<button type="button" class="extrainfo">3. Extra Information</button>
</a>
</div>
As for the CSS, nothing needed to be changed:
.needs {
display: inline-block;
font-weight: bold;
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #FFFF00;
background-color: #00FF00;
border-radius: 10px;
height: auto;
width: 180px;
}
.needs:hover {
background-color: #4CAF50;
color: white;
}
.extrainfo {
float: right;
display: inline-block;
font-weight: bold;
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #FFFF00;
background-color: #00FF00;
border-radius: 10px;
height: auto;
width: 180px;
}
.extrainfo:hover {
background-color: #4CAF50;
color: white;
}
Actual webpage
I'm trying to display code snippets on my webpage. I'm a CSS novice and having trouble creating a dark background on which to display my code snippets.
When I create a class called "test" (which should override all other background specifications, right?) and assign it a color property of blue and a background property of black, the color blue shows up within pre tags but the background remains the default color.
When I switch to span tags and assign the class there instead, both properties work as I command. But I don't want to use span because my instructors say non-semantic tags are bad practice. Something tells me that there's some inherent property of pre tags that I need to override somehow.
Any ideas? I can post the code here if that's proper/necessary.
Edit: I posted an abbreviated version of the code here. I tested it, and got the same issue here. Hopefully with less code it will be easier to pinpoint the problem.
Here's the HTMl:
<!DOCTYPE html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="stylesheets/test.css">
</head>
<body>
<p>
<pre class="test">test</pre>
</p>
</body>
</html>
Now the CSS:
.test {
color: blue;
font-weight: bold;
background: black;
}
pre {
font-family: monospace;
font-size: 1.25em;
text-align: left;
line-height: 0px;
background: black;
}
The more specific the rule, the more likely it will be to override a parent class or id. Give this one a shot...
.snippets div{
background-color: #F00;
}
.snippets div.no_code{
background-color: #000;
}
<div class="snippets">
<div> </div>
<div> </div>
<div> </div>
<div class="no_code"> </div>
<div> </div>
<div> </div>
</div>
have you tried with background-color property of pre tag?
Please check my codepen link. http://codepen.io/anon/pen/gaydao
HTML:
<body>
<p>
<pre>test</pre>
</p>
</body>
CSS:
.test {
color: red;
font-weight: bold;
background: black;
}
pre {
font-family: monospace;
font-size: 1.25em;
text-align: left;
line-height: 0px;
border: 1px solid #000;
height: 50px;
background-color:#DDFFDD;
padding: 10px 0 0 10px;
}
you have to use !important on your class because it's already defined the color property in another class...
.code{
background-color: #000 !important;
}
.box{
width: 250px;
height: 20xp;
background-color: red;
display: inline-block;
margin: 5px;
}
.code{
background-color: #000 !important;
}
<div class="box code"> </div>
<div class="box code"> </div>
<div class="box code"> </div>
<div class="box no_code"> </div>
<div class="box code"> </div>
<div class="box no_code"> </div>
<div class="box no_code"> </div>