I have below for my code. It is posting it on my entire webpage instead of just on that image and I can't quite figure out why.
dt {
font: Arial, Helvectica, sans-serif;
size: .9em;
weight: bold;
color: (dark red (#6b1101);
line-height: 2em;
}
dd {
font: Arial, Helvectica, sans-serif;
size: .9em;
weight: bold;
color: (dark red (#6b1101);
line-height: 2em;
}
#Wrapper {
width: 700px;
text-align: left;
margin: auto;
background-color: #F7EED7;
}
#imgtop {
width: 700px;
}
#leftnav {
background-color: #F7EED7;
padding: 10px;
float: left;
width: 150px;
}
#leftnav a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #000033;
text-decoration: none;
text-indent: 0px;
display: block;
}
#leftnav a:visited {
font-family: Arial, Helvetica, sans=serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #660066;
text-decoration: none;
text-indent: 0px;
display: block;
}
#leftnav a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #000033;
text-decoration: none;
text-indent: 0px;
display: block;
background-color: #CCCCCC;
}
body {
background-color: #FFFFFF;
}
#maintext {
background-color: #F7EED7;
float: right;
width: 500px;
padding: 10px;
}
h1 {
color: red
}
<!doctype html>
<head>
<title>Cafe Townsend: Wine Tasting Terms </title>
<link type="text/css" rel="stylesheet" href="cafe.css">
<meta charset="utf-8">
</head>
<div id="leftnav">
<p>Home</p>
<p>Menu</p>
<p>Location</p>
<p>Restaurant Infomation</p>
<p>Restaurant Review</p>
<p>Special Events</p>
<p>DVD</p>
<p>
<a href="wine-list.html">
<img src="../images/wine_header.jpg" alt="Wine Ad" width="150" height="100" border="0" /></a>
</p>
</div>
<p>Greeting: "Hello, World!"</p>
<h1>Knowing your wines</h1>
<dl>
<dt>Acid, acidity</dt>
<dd>The tart (or in excess, sour) quality that wine's natural acidity imparts and that gives the wine a sense of body and structure. Required for proper balance; too much or too little constitutes a flaw.</dd>
<dt>Almond</dt>
<dd>A light bitter, nutlike quality sometimes noted in Italian white wines.</dd>
<dt>Anise</dt>
<dd>Faint licorice, a pleasant element in some Spanish reds; may indicate, however, that the wine has been artificially acidified, a practice that may improve short-term enjoyment but tends to make wines that cellar poorly.</dd>
<dt>Attack</dt>
<dd>A technical term for the first impression the wine makes as it reaches your palate, distinguished (in time sequence) from "middle" or ""mid-palate"" and "finish" or "aftertaste."</dd>
<dt>Bouquet, bottle bouquet</dt>
<dd>As a technical term, the smells that develop with age in the wine bottle, as opposed to "aroma," the smells associated with the fruit. I have little use for distinctions this narrow and try to avoid using them in my wine notes.</dd>
<dt>Earthy</dt>
</dd>Generic term for a range of aromas and flavors associated with organic qualities like "barnyard," "forest floor," "merde," and "tree bark." May be associated with brettanomyces (see above) but can also result
from oak aging or the nature of specific grapes. Mourvedre, for instance, imparts a characteristic earthy aroma. Again, not necessarily a fault, but "earthy" wines tend to be controversial, and a little bit is usually enough.</dd>
</dl>
</body>
</html>
So for some reason my html is not getting the dt and dd and changing the colors from normal to red. I dont get it, it goes to file (it should) but is doing nothing. have tried checking file names, making sure the paths are correct (they are). They are in the same exact folder.
Take out the weight: bold; This is breaking the CSS below. It should be font-weight:bold.
font-dd {font: Arial, Helvectica, sans-serif;
size: .9em;
font-weight: bold;
color:red;
line-height: 2em; }
It is because you are trying to use a value that is not a valid color (dark red (#6b1101) is not correct. Find the available value types here https://www.w3schools.com/cssref/pr_text_color.asp
Related
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 am trying to create my first website from scratch using HTML/CSS. The problem I am having is that text I have on a page exceeds the bounds of the background image and when I scroll downwards, the container (.violence) seems to stop displaying the linear-gradient and moves on to a white background. Is there any way I can extend and fit the gradient to match the amount of text I put in?
Thanks in advance.
I have tried searching the web for solutions but my lack of knowledge and understanding of HTML/CSS have prevented me from resolving the issue.
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(background.jpg);
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: underline;
padding: 5px 10px;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.welcome {
position: absolute;
width: 1200px;
margin-left: 375px;
margin-top: 425px;
}
h1 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 50px;
text-align: center;
margin-top: 0px;
}
h2 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 22px;
text-align: center;
margin-top: 0px;
}
.violence {
position: absolute;
width: 1200px;
margin-left: 375px;
margin-top: 75px;
}
h3 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h4 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 25px;
}
h5 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h6 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 0px;
}
h7 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h8 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 0px;
}
h9 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
<html>
<head>
<title>The Quest for Arrakis: The Second Imperial Renaissance</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li> HOME </li>
<li class="active"> GAME SETTING </li>
<li> CHARACTERS AND ENTITIES </li>
<li> WRITING SAMPLES </li>
<li> GAME FEATURES </li>
<li> JOIN </li>
<li> CONTACT US </li>
</ul>
</div>
<div class="violence">
<h3>
<p>"There is no escape—we pay for the violence of our ancestors." <br>- Frank Herbert, Dune</p>
</h3>
<h4>
<p>Quest for Arrakis II continues the decade long history and political machinations of the original Quest for Arrakis. It is an intense setting that stays true to the canon as set forth by Frank Herbert and focuses primarily on power politics and
grand story telling. Much like the in the novels most anything is possible…if the player is willing to pay the right price.</p><br>
<p>The setting is an alternative universe to the world as designed by Frank Herbert and taking place some twelve centuries before the time of Paul Atreides. The Corrino Empire has suffered through a devastating war which has taken the life of the
previous Emperor and plunged the human race into a period of economic collapse and massive social unrest. Old houses have fallen or been reduced in power leaving a vacuum for the ambitious to make a name for themselves. Under the watchful eye
of a new soverign the Empire begins the long road back to prosperity. New houses seek to establish themselves as old ones try to return to glory.</p><br>
<p>We offer an intense gaming atmosphere with motivated players, helpful staff and well detailed game environment. Everything is story driven and the opportunities are endless for writers willing to be active. Will you raise your banner in this brave
new age? The perils are daunting and the road will be hard but do you have what it takes to rise to power in the Quest for Arrakis II?</p>
<h5><br>
<p>"Beginnings are such delicate times." <br>-Princess Irulan</p>
</h5>
<h6><br>
<p>In the Year 8760 A.G., The Imperium has emerged from a devestating conflict known as The Second Muadru Incursion. Houses have fallen, and widespread economic collapse have devastated the fortunes of the Houses of the Imperium. As the Empire
returns to glory beneath the Rule of Padishah-Emperor Ezhar the Seventh, Houses New and Old seek to stablise themselves in a turbulent epoch of Imperial History with plenty of opportunity to do so.</p>
</h6>
<h7><br>
<p>"Control the coinage and the courts - let the rabble have the rest." Thus the Padishah Emperor advises you. And he tells you; "If you want profits, you must rule." There is truth in these words, but I ask myself: "Who are the rabble and who
are the ruled?"<br>-Princess Irulan</p>
</h7>
<h8>
<p><br>The Quest for Arrakis II offers many paths to power.</p>
<p><br>The Landsraad acts as the Political Hub of the Imperium with the Houses and Players generating most of our Game's Laws and Rule Sets.</p>
<p><br>If economics piques your interest, then CHOAM serves as the legislature that defines the economic fortunes of the Empire with its Board of Directors governing In Character Policy.</p>
<p><br>If it is the Favour of the Corrino that drives your ambitions, then the Court of the Emperor will provide you with the opportunity to make a name and reputation for yourself beneath the watchful eye of the Emperor.
<p><br>Regardless of the path you choose, all roads leads to Arrakis and the fortunes that lie hidden beneath its sands, guarded by Fremen and Worm alike. The journey will not be easy but with enough patience, perseverance and determination,
you may one day rule the Desert Planet and harness the riches and power for yourself!</p>
</h8>
<h9>
<p><br>"One must always keep the tools of statecraft sharp and ready. Power and fear –sharp and ready." <br>- Baron Vladimir Harkonnen</p>
</h9>
</div>
</header>
</body>
</html>
I expect the text to continue being visible.
Your question was too vague but I still tried so here is my answer for you.You should apply the background-image property to the violence class itself instead of the header class.
I understand you are new to HTML/CSS but you should check on the web for quality resources to learn the languages as well as best practises.Your code has very basic errors which should not be there.
HTML has heading tags <h1> to <h6> but you have used headings tags beyond that which HTML does not recognise or support.
From what I can see you have used headings tags for styling purposes which is wrong.In this case you should remove all the heading tags except <h3> which is actually used as a heading.
I can also see your knowledge about semantic tags is shallow so it would be better if you spend a little time reading about them.
I've watched some videos and copied what they did but it's not working. I have my file in the same folder as my documents. Ugh, the site wants me to add more "details" or it won't let me post. I had my html and my css pages separated but it put them together. If you know how feel free to break them apart.
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
}
.potato {
margin-left: 250px;
margin-top: 40px;
margin-right: 20px;
line-height: 38px;
font-family: 'lazyspringday';
}
.p1 {
font-family: 'lazyspringday';
}
body {
margin: 0;
padding: 0;
font-family: 'lazyspringday', serif;
}
#font-face {
font-family: "lazyspringday";
src: url('lazyspringday.ttf') format:('truetypefont');
}
.nav {
background-color: #ffb6c1;
color: #ffffff list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav>li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav>li>a {
text-decoration: none;
color: #ffffff
}
.nav>li>a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner>.bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav {
margin: 0;
}
div.left {
width: 50%;
padding: 0 0 0 5%;
margin-right: 5px;
margin-top: 10px;
float: left
}
div.right {
width: 50%;
padding: 0 5% 0 0;
float: right
}
p {
padding-top: 25px;
text-align: left;
}
.potato {
color: #00b8e6;
font-size: 15px;
font-family: 'lazyspringday';
font-weight: 100;
}
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<img src="british-shorthair-3055340_1920.jpg" width: "400" height="400" class="float-img">
<p class="potato">
Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute cat themed foods and drinks in a relaxing environment. Spend some quality time playing with some feline friends. Enjoy watching the cats have fun in an environment made just for them.
All cats will be adoptable and provided by the local shelter. Cat Corner Cafe will also have fun events like cat yoga, art with cats and game days. Come by yourself, with your meetup group or have your next birthday party here! We look forward to seeing
you. To be alerted when we open please sign up with your email on our homepage.
</p>
first of all define #font face on the top and remove ":" from format and rename turetypefont to truetype
#font-face {
font-family: "lazyspringday";
src: url('lazyspringday.ttf') format('truetype');
}
Hope this will help
first and foremost, put your fonts in fonts folder seperately and css stylesheet in css folder, then include/import fonts in your css at top like this.
#font-face {
font-family: 'lazyspringday';
src: url('../fonts/lazyspringday.eot');
src: url('../fonts/lazyspringday.eot?#iefix') format('embedded-opentype'),
url('../fonts/lazyspringday.woff2') format('woff2'),
url('../fonts/lazyspringday.woff') format('woff'),
url('../fonts/lazyspringday.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
we use woff and woff2 for using fonts in web.
you can also use web fonts generator to generate webfonts just uploading your .ttf file there.
In the head tag of your html file (index?) place something like this:
<link href="(your file location)" rel="stylesheet">
After importing the font you can do it in several different ways. I'd recommend you to use a body tag that would contain everything on that html file.
If you chose to use the body tag, simply add this line to your css file:
body {
font-family: 'Montserrat', serif;
}
Example:
Use Google Fonts. https://fonts.google.com
Then copy this code into the <head> of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Then use the following CSS rules to specify these families:
font-family: 'Roboto', sans-serif;
I am doing this assignment for school and I need to side the background behind the slogans and little images so that it perfectly encloses the words. However, I can't get the width tag to work. Please help me find the source of this issue. Sorry for poor formatting. I am in a bit of a time crunch.
<!DOCTYPE html>
<html>
<head>
<title>MNSportsInc</title>
</head>
<center><p><font size="8">Minnesota Sports Inc.</font></p></center>
<style>
h1 {color: white; background: black; font-family: times; font-size:
120%; width: 300}
h2 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
h3 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
h4 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
h5 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
h6 {color: white; background: black; font-family: times; font-size:
120%; width: 500}
</style>
<body>
<center>
<h1><img src="Twins.gif">Twins
get wins!<img src="Twins.gif"></h1>
<!--Twins-->
<h2><img src="Wild.png">Crack a
smile for the Wild.<a href="https://www.nhl.com/wild"><img src="Wild.png">
</a></h2><!--Wild-->
<h3><img src="Vikings.png">Buy
things for the Vikings.<a href="http://www.vikings.com/"><img
src="Vikings.png"></a></h3><!--Vikings-->
<h4><a href="http://www.nba.com/timberwolves/"><img src="Wolves.jpg">
</a>Fans pull the Wolves!<a href="http://www.nba.com/timberwolves/"><img
src="Wolves.jpg"></a></h4><!--Timberwolves-->
<h5><img src="UofM.png">Beat
the Gophers? No sir!<a href="http://www.gophersports.com/"><img
src="UofM.png"></a></h5><!--UofM-->
<h6><a href="http://crimson-activities.com/"><img src="Crimson.jpg">
</a>The Crimson have Risen.<a href="http://crimson-activities.com/"><img
src="Crimson.jpg"></a></h6><!--Crimson-->
</center>
</body>
</html>
All your settings for the width property (not tag) lack a unit, so those settings are ignored according to CSS specs. They work if you append e.g. the px unit (for CSS pixel) to them: width: 500px. Pixels are what you probably meant to use. It’s a completely different question how to set the background so that it “perfectly encloses the words”; you probably need a different approach, like using inline elements (which take just as much width as needed).
<!DOCTYPE html>
<html>
<head>
<title>MNSportsInc</title>
</head>
<center><p><font size="8">Minnesota Sports Inc.</font></p></center>
<style>
h1 {color: white; background: black; font-family: times; font-size:
120%; width: 300px}
h2 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
h3 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
h4 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
h5 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
h6 {color: white; background: black; font-family: times; font-size:
120%; width: 500px}
</style>
<body>
<center>
<h1><img src="Twins.gif">Twins
get wins!<img src="Twins.gif"></h1>
<!--Twins-->
<h2><img src="Wild.png">Crack a
smile for the Wild.<a href="https://www.nhl.com/wild"><img src="Wild.png">
</a></h2><!--Wild-->
<h3><img src="Vikings.png">Buy
things for the Vikings.<a href="http://www.vikings.com/"><img
src="Vikings.png"></a></h3><!--Vikings-->
<h4><a href="http://www.nba.com/timberwolves/"><img src="Wolves.jpg">
</a>Fans pull the Wolves!<a href="http://www.nba.com/timberwolves/"><img
src="Wolves.jpg"></a></h4><!--Timberwolves-->
<h5><img src="UofM.png">Beat
the Gophers? No sir!<a href="http://www.gophersports.com/"><img
src="UofM.png"></a></h5><!--UofM-->
<h6><a href="http://crimson-activities.com/"><img src="Crimson.jpg">
</a>The Crimson have Risen.<a href="http://crimson-activities.com/"><img
src="Crimson.jpg"></a></h6><!--Crimson-->
</center>
</body>
</html>
htmlcssimagewidth
Header tags, like h1 are block level elements, so the "try" to stretch over the width of parent or window.
You can change its display style to block to change this:
h1 {color: white; background: black; font-family: times; font-size:
120%; width: 300px;display:inline-block}
See the fiddle I"ve made here: https://jsfiddle.net/v3f13vtb/
You should put your CSS stylings in a different file and then link to it, I think the reason your styling isn't working inline is because of the fact that you aren't telling it what to do. 500(of what) 500px? 500%? Try writing it more semantically and see what happens.
I want to use in my css different titles/headers, with the same font but with different font size, etc. I have this:
#titulo1{
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-height:50px;
color: #ffffff;
}
#titulo2{
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-height: 40px;
color: #73bd34;
}
#titulo3{
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-height: 30px;
color: #5f9b16;
}
#titulo4{
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-height: 15px;
font-weight: bold;
color: #000000;
}
Now I want to use some titles to some divs and others to anothers.
Like this:
.slogan #titulo1{
...
}
.pesquisa #titulo3{
...
}
But it doesn't work, I can only make it work by using it in my html file like this:
<div class="slogan" id="titulo1">
Yeah, I had already visited this page:http://www.w3schools.com/cssref/css_selectors.asp and still nothing
You can use selector that select all elements that id starts with "titulo"
[id^="titulo"] {
font-family: 'Roboto', sans-serif;
}
#titulo1{
font-size: 40px;
font-height:50px;
color: #ffffff;
}
#titulo2{
font-size: 30px;
font-height: 40px;
color: #73bd34;
}
#titulo3{
font-size: 20px;
font-height: 30px;
color: #5f9b16;
}
#titulo4{
font-size: 13px;
font-height: 15px;
font-weight: bold;
color: #000000;
}
Definition .slogan #titulo1 has no sense, because id is unique identifier, so #titulo1 means the same.
anyway selector of particular element with several classes, e.g. <div class="class1 class2"> will look .class1.class2 (without space between class names) or div.class1.class2
Its the space in the css, that makes it difficult . Lets see :
Notice this:
.slogan #titulo1{
color:red;
}
This will work for follwoing html structure
<div class="slogan">
<div id="titulo1">
</div>
</div>
Now Notice this:
.slogan#titulo1{
color:red;
}
This will work for follwoing html structure
<div class="slogan" id="titulo1">
</div>
Did you notice the space in the css, if you put an space that mean they are in different element
Use The following. Hope your problem will be solved :)
<div class="slogan">
<div id="titulo1">
--------
--------
</div>
</div>