I created a div example, It uses /google/code-prettify library which is a color library.
It is basically a div inside another div with a textarea.
Whenever i try to add a new paragraph, header or another example in the next line, it messes up the page.
Something about the prettyprint lang class that is making it impossible to add more info down..
Can you see what i am missing?
HTML
<div class="examplebox">
<h3>Code Example:</h3>
<div class="exampleinsidebox">
<pre style="padding-left:20px;" class="prettyprint lang-python" >
<!-- !!!!! Start of showing Code !!!!!-->
# I am a comment
print("Free code wiki")
<!-- !!!!! End of showing Code !!!!!-->
</pre>
</div>
</div>
<button
onclick="window.location.href = '/TryYourselfCodes/pythonguide4.html'; "
style="left:30px;"
class="buttontest"
>
Try yourself >>
</button>
</div>
CSS
.examplebox {
background-color: #f3f4fa;
border-style: unset;
padding: 30px;
}
.examplebox h3 {
padding-bottom: 10px;
}
.examplebox button {
top: 20px;
}
.exampleinsidebox {
background-color: black;
border-style: unset;
}
.exampleinsidebox p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: white;
}
pre.prettyprint {
padding: unset;
border:none;
}
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint {
background: #343434;
font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco,
Consolas, monospace;
border: 0 !important;
}
As I can see you're closing <div class="examplebox"> that div at </pre></div></div>
in the second closing div tag, and there is no opening <div> for - at the very last closing </div> tag. maybe that's causing problem.
Related
I'm having problems changing the size of the text and the image in css. I'm just starting to use html and css. This is my code.
function myFunction() {
var xmlhttp = new XMLHttpRequest();
var url = "https://vnwcn9gt89.execute-api.us-east-2.amazonaws.com/book";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myJson = JSON.parse(this.responseText);
console.log(myJson);
document.getElementById("title").innerHTML = myJson.Items[3].valore;
document.getElementById("text1").innerHTML = myJson.Items[1].valore;
document.getElementById("img1").src="books_img/"+myJson.Items[0].valore;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.img1 {display: none}
img1 {vertical-align: middle;}
.title {
color: #333333;
font-size: 3em;
font-family: 40 px Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;
font-weight: bold;
padding: 8px 12px;
position: static;
bottom: 8px;
width: 100%;
}
.text1 {
color: #333333;
padding: 8px 12px;
font-family: 17 px Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;
}
.img1 {
display: block;
margin-left: auto;
margin-right: auto;
}
<div>
<h1 div class="title" id="title" button onclick="myFunction()"></div> <br>
<div class="text1" id="text1" button onclick="myFunction()"></div> <br>
<div class="img1"> <img id="img1" src onerror="this.onerror=null; this.src=myFunction();" style="width:50%"> </div>
</div>
<br>
In particular, I am unable to change the size of the text and I cannot center the image.
I definitely get confused with divs.
Can you kindly help me?
<div class="text1" id="text1" button onclick="myFunction()"></div> <br>
For good practice, try using <p> for text.
What happens is that you are trying to add font-size style to a <div>.
You don't need to use <br> after a <div>.
You can't use a button inside a div
The proposal solution is this:
CSS
.text {
color: #333333;
font-size: 17px;
font-family: Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;
}
.text-container {
padding: 8px 12px;
}
HTML
<div class="text-container">
<button type="button" onclick="myFunction()">
<p class="text" id="text1"></p>
</button>
</div>
Now for the image, add text-align:center to img1:
.img1 {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Welcome to Programming :)
1.) font-family: 17 px Olney, is not a valid definititon for font-size. Use font-size instead, and make sure to not put a space between the number and "px".
2.) To center your image, apply text-align: center to your img1 class (which is the parent element of the image - the image itself is an inline element by default which can be centered that way)
You are using the font-family property to set both the size and font-family of the text1 class. font-family property is used to set the font family only. So, use this
{font:17px Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;}
instead of font-family
Or you can specify the font-size and font-family separately like
{
font-size:17px;
font-family:"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera
Sans","DejaVu Sans",Sans-serif;
}
And if you want to set the width of the image to be 50% then you have to provide some width to the parent div of the image.
very new to this and have tried several fixes without success.
Inside h1, my fonts are all correct and reacting as expected:
h1 {
position:relative;
left: -10px;
top: -16px;
padding: 2em;
height: 3em;
width: 100%;
background: #545454;
font-family: "Avenir Light", sans-serif;
font-size: .7em;
text-align: center;
color: darkgray}
h1 p {
font-weight: 30;
word-spacing: 30px;}
But the text isn't responding anywhere else on my page, even when inserted under body, body p, into each individual element... It's driving me nuts!
body {
margin: 0, 0;
padding: 0, 0;
overflow-x: hidden;
background: #765264;
color: white;
font-family: "Avenir Light", sans-serif;
font-size: 16px;
line-height: 1.5;
}
body p {
font-size: 1em;
font-family: "Century Gothic";
font-weight: 30;
letter-spacing: 1px;
}
Weirdly, inserting letter-spacing above seemed to make the spacing larger.
Here's my HTML, for reference:
<head>
<div class="header" id="myHeader">
<h1>
<link rel="stylesheet" href="peytonsite.css">
<p>
<img src="https://static.wixstatic.com/media/058e45_e590acfd22c440f4b5c89450738f321d~mv2.png/v1/fill/w_100,h_100,al_c,q_85,usm_0.66_1.00_0.01/058e45_e590acfd22c440f4b5c89450738f321d~mv2.webp">
<a>HOME</a>
<a>SKILLS</a>
<a>PORTFOLIO</a>
<a>EXPERIANCE</a>
<a>CONTACT</a>
</p>
</h1>
</div>
</head>
<article>
<section id="LANDING">
<img id="LongLogo" src="https://static.wixstatic.com/media/058e45_0291502c1e424532bbd24f9cfd50fd1e~mv2.png/v1/fill/w_1466,h_348,al_c,q_90,usm_0.66_1.00_0.01/Long%20Logo.webp">
<p>PASSIONATE DESIGN</p>```
Please help!
Update:
30 isn't a valid font-weight, and, your font may not necessarily have a boldness available to it.
Try: font-weight: bold;
or: font-weight: 300; (300 is usually non-bold)
A few other ideas:
You probably want a comma between h1 p { in your second CSS block.
Secondly- Is your target text within a <p> block?
For debugging purposes, what happens if you append !important to your styles? Does that show what you want?
What happens if you delete the h1 p { ... block, and add this in at the bottom of your CSS?
p {
font-weight: 300!important;
word-spacing: 30px!important;}
If nothing changes, I suspect you don't have the right CSS selectors.
Here is a CodePen of your CSS correctly applying
I learned to change the font family of text in the body by doing <p style="font-family:;></p>, but how would I do it for the title? Also, is there a way to fixing a font family for the entire document?
You want to use (html{}) in your style.css Therefore, it will apply to any element inside your (HTML). unless you explicitly specify otherwise.
Further on the matter, on the example, I gave you if you are to remove the child1 or child2 font-family it will default to whatever is in the body section if you are to remove the font-family from the body it will default to the HTML.
[
/*Change the font style on the Entire Document */
html{
font-family: "Montserrat", sans-serif;
font-size: 1rem;
color: Gray;
}
/*Change on the Body*/
body{
font-family: "Montserrat", sans-serif;
font-size: 2rem;
color: white;
background-color: #333;
text-align:center;
}
/*Change on a specific elements*/
#container .child1{
font-family: cursive;
font-size: 2rem;
color: white;
text-align:center;
background-color: blue;
}
#container .child2{
font-family: cursive;
font-size: 2rem;
color: white;
background-color: green;
text-align:center;
}
footer{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<header>
<p>I am the Header</p>
</header>
<div id="container">
<div class="child1">
<p>I am a Body Child</p>
</div>
<div class="child2">
<p>I am another body Child</p>
</div>
</div>
<footer> I am the Footer</footer>
]1
If you REALLY wanted to set the entire document you could use the below noting that more specific selectors will over-ride it unless you specify !important (though I strongly recommend against using !important on a selector this vast):
body {
font: normal 10px Verdana, Arial, sans-serif;
}
You can code a style element within the head element your HTML file to apply styles globally throughout your document:
<style>
title {
font-family:; /* usually the name of your font goes here */
}
</style>
What I am trying to do is create a <pre> tag that will look like a bash terminal - black background and white letter, mono spaced font.
pre.bash {
background-color: black;
color: white;
font-size: medium ;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
display: inline;
}
<pre class="bash">
-bash-3.2$ groups
unixuser feegroup figroup fogroup fumgroup
</pre>
Use display: inline-block; to make the background a rectangle, instead of just going behind the text.
And if you want it to fill the full width of the page, instead of just the longest line, use width: 100%;
pre.bash {
background-color: black;
color: white;
font-size: medium ;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
width: 100%;
display: inline-block;
}
<pre class="bash">
-bash-3.2$ groups
unixuser feegroup figroup fogroup fumgroup
</pre>
You can remove the display-inline:
pre.bash {
background-color: black;
color: white;
font-size: medium ;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}
<pre class="bash">
-bash-3.2$ groups
unixuser feegroup figroup fogroup fumgroup
</pre>
All you need to do is change your display from display: inline to display: inline-block :)
This is because when you set the background color to black, it is going to paint the background of the element. An element specified as inline will only be as large as the content of that line. By changing it to inline-block the element will take up the full space of that line as given by the characteristics of a block-level element. If you would like to know more, here is a link to w3's explanation of the display property.
Try changing display: inline; to display: block;
in above image you can see text "acceptable".
i want to change this font as text "contact us" font which is present below.
we are using
font-family: 'Roboto Condensed', sans-serif;
but it didt worked for us.
Well according to your code, you just have to change the font-size of p tag and you are done. To check the changes try to add Contact us next to acceptable and then you will see both are same. Happy to help :)
Use <span class="red">text</span> and some basic CSS like .red { color: red; }
lOOK AT THIS EXAMPLE
HTML
<span class="red">acceptable</span>
</p>
CSS
p {color: black;
font-size: 13px;
line-height: 26px;
text-align: justify;
}
.red { color: red;
font-family: 'Roboto Condensed', sans-serif; }