My daughter is in the process of learning HTML/CSS and have been going through the examples in: Head First HTML and CSS One of the first examples instructs the reader to insert the following:
<html>
<head>
<title> Starbuzz Coffee </title>
<style type='text/css'>
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1> Starbuzz Coffee Beverages </h1>
<h2> House Blend, $1.49 </h2>
<p> A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>
<h2> Mocha Cafe Latte, $2.35 </h2>
<p> Espresso, steamed milk and chocolate syrup. </p>
<h2> Cappuccino, $1.89 </h2>
<p> A mixture of espresso, steamed milk and foam.</p>
<h2> Chai Tea, $1.85 </h2>
<p> A spicy drink made with black tea, spices, milk and honey. </p>
</body>
</html>
The HTML renders just fine, but the CSS appears to have been ignored and does not appear when one asks to see the code underlying the page. Ideas about what is missing? It is difficult to make it through a book if stumbling at the gate.
Related
I'm trying to make a little indie game site, and I'd like to make the section of each entry that contains the title and tags of the game a lighter green than the portion holding the description and picture.
body {
margin: 0;
padding-top: 150;
padding-bottom: 0;
}
.fixed-header {
width: 100%;
position: fixed;
background: #75b478;
color: black;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
top: 0;
z-index: 1;
margin: 0;
}
.container {
width: 100%;
background-color: #589c5b;
overflow: auto;
margin: 0;
}
nav a {
color: rgb(255, 255, 255);
text-decoration: none;
padding: 5px 35px 10px;
display: inline-block;
width: 20%;
height: 25px;
line-height: 25px;
margin: 0;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
color: rgb(255, 255, 255);
}
article {
background-color: #67aa69;
text-align: center;
width: 30%;
padding: 2;
position: relative;
border-radius: 10%;
}
.section {
text-align: center;
margin-top: 50px;
font-family: 'Andika', sans-serif;
}
.tags {
font-style: italic;
font-family: 'Source Sans Pro', sans-serif;
}
.games {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 50px;
margin-bottom: 50px;
}
img {
width: 100%;
height: 250px;
border-radius: 15%;
}
p {
font-family: 'Lato', sans-serif;
}
h2 {
padding-left: 2px;
padding-right: 2px;
}
<DOCTYPE! html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en-US">
<head>
<link rel="stylesheet" href="page.css">
<title>Indie Games List</title>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital#1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Andika:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="fixed-header">
<h1>Indie Games</h1>
<div class="container">
<nav>
To Play
Reviews
Indie-x
Favorites
</nav>
</div>
</div>
<h1 class="section" id="platformers">Platformers</h1>
<div class="games">
<article>
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
<hr>
<p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
<img src="hollow-knight.png">
</article>
<article>
<h2>Celeste</h2>
<p class="tags">Difficult, Amazing Soundtrack</p>
<hr>
<p>"Help Madeline survive her inner demons on her journey to the top of Celeste Mountain, in this super-tight platformer from the creators of TowerFall. Brave hundreds of hand-crafted challenges, uncover devious secrets, and piece together the mystery of the mountain."</p>
<img src="celeste.png">
</article>
<article>
<h2>Ori and the Blind Forest/Will of the Wisps</h2>
<p class="tags">Amazing Soundtrack, Metroidvania</p>
<hr>
<p>"Ori and the Blind Forest tells the tale of a young orphan destined for heroics, through a visually stunning action-platformer crafted by Moon Studios for PC."</p>
<img src="ori.png">
</article>
</div>
<div class="games">
<article>
<h2>Cuphead</h2>
<p class="tags">Difficult, Hand-Drawn</p>
<hr>
<p>"Cuphead is a classic run and gun action game heavily focused on boss battles. Inspired by cartoons of the 1930s, the visuals and audio are painstakingly created with the same techniques of the era, i.e. traditional hand drawn cel animation, watercolor backgrounds, and original jazz recordings."</p>
<img src="cuphead.png">
</article>
</div>
<hr>
<h1 class="section" id="horror">Horror</h1>
<div class="games">
<article>
<h2>Omori</h2>
<p class="tags">Psychological Horror, RPG, Amazing Soundtrack</p>
<hr>
<p>"Explore a strange world full of colorful friends and foes. When the time comes, the path you’ve chosen will determine your fate... and perhaps the fate of others as well."</p>
<img src="omori.png">
</article>
<article>
<h2>Needy Streamer Overload</h2>
<p class="tags">Psychological Horror, Visual Novel, Streaming</p>
<hr>
<p>"NEEDY STREAMER OVERLOAD is a “multi-ending ADV” depicting daily life with “OMGkawaiiAngel”, a young girl with a rather extreme need for approval attempting to become the #1 “Internet Angel” (streamer)."</p>
<img src="nso.png">
</article>
<article>
<h2>Little Nightmares 1 & 2</h2>
<p class="tags">Psychological Horror, Platformer, Puzzle</p>
<hr>
<p>"Immerse yourself in Little Nightmares, a dark whimsical tale that will confront you with your childhood fears! Help Six escape The Maw – a vast, mysterious vessel inhabited by corrupted souls looking for their next meal."</p>
<img src="ln.png">
</article>
</div>
<div class="games">
<article>
<h2>Sally Face</h2>
<p class="tags">Psychological Horror, Hand-Drawn, Mystery</p>
<hr>
<p>"Delve into a dark adventure following the boy with a prosthetic face and a tragic past. Unravel the sinister mysteries of Sally's world to find the truth that lies hidden beneath the shadows."</p>
<img src="sallyface.png">
</article>
<article>
<h2>FAITH: The Unholy Trinity</h2>
<p class="tags">Psychological Horror, Retro, Supernatural</p>
<hr>
<p>"What you are about to do has not been approved by the Vatican. As a young priest, struggle against demons, insane cultists, and your own weakening faith in this pixel horror game inspired by the era of classic 8-bit gaming and the "Satanic Scare" of the 1980s."</p>
<img src="faith.png">
</article>
<article>
<h2>Carrion</h2>
<p class="tags">Psychological Horror, Villain Protagonist, Lovecraftian</p>
<hr>
<p>"CARRION is a reverse horror game in which you assume the role of an amorphous creature of unknown origins, stalking and consuming those that imprisoned you."</p>
<img src="carrion.png">
</article>
</div>
<div class="games">
<article>
<h2>Milk inside a bag of milk inside a bag of milk</h2>
<p class="tags">Psychological Horror, Psychedelic, Visual Novel</p>
<hr>
<p>"A short story about what sort of challenges everyday little things can be. Help the girl buy milk, be the first not to disappoint her."</p>
<img src="milk.png">
</article>
<article>
<h2>Iron Lung</h2>
<p class="tags">Psychological Horror, Underwater, Walking Simulator</p>
<hr>
<p>"A short horror game where you pilot a tiny submarine through an ocean of blood on an alien moon."</p>
<img src="ironlung.png">
</article>
<article>
<h2>Madison</h2>
<p class="tags">Psychological Horror, Supernatural, Exploration</p>
<hr>
<p>"MADiSON is a first person psychological horror game that delivers an immersive and terrifying experience. With the help of an instant camera, connect the human world with the beyond, take pictures and develop them by yourself. Solve puzzles, explore your surroundings and most importantly, survive."</p>
<img src="madison.png">
</article>
</div>
<div class="games">
<article>
<h2>Bendy and the Ink Machine/Dark Revival</h2>
<p class="tags">Survival Horror, Unique Art Style, Adventure</p>
<hr>
<p>"Bendy and the Ink Machine is the first person puzzle action horror game that will forever ruin your childhood love of cartoons."</p>
<img src="bendy.png">
</article>
<article>
<h2>Choo-Choo Charles</h2>
<p class="tags">Survival Horror, Open-World, FPS</p>
<hr>
<p>"Navigate an open-world island in an old train, upgrade it over time, and use it to fight an evil spider train named Charles."</p>
<img src="choo.png">
</article>
<article>
<h2>Don't Starve</h2>
<p class="tags">Survival Horror, Open-World, Unique Art Style</p>
<hr>
<p>"Don't Starve is an uncompromising wilderness survival game full of science and magic. Enter a strange and unexplored world full of strange creatures, dangers, and surprises. Gather resources to craft items and structures that match your survival style."</p>
<img src="ds.png">
</article>
</div>
<div class="games">
<article>
<h2>The Mortuary Assistant</h2>
<p class="tags">Survival Horror, Supernatural, Mystery</p>
<hr>
<p>"Alone with the dead... Embalm corpses, banish demons, save your soul."</p>
<img src="tma.png">
</article>
<article>
<h2>Endoparasitic</h2>
<p class="tags">Survival Horror, Third-Person Shooter, Space</p>
<hr>
<p>"Three limbs ripped off, infected with a deadly parasite, you must save your research. Drag yourself through the corridors of a secret research lab on a remote asteroid, fight off horribly mutated monsters, inject countless syringes of vaccines, and survive at all costs."</p>
<img src="endo.png">
</article>
</div>
</body>
I've tried changing the background color of my h2 and .tags elements, but that just sends a light green line across the entire screen. Ideally, I'd like to keep the shape of my boxes and simply change the color above the < br>. All suggestions appreciated!
Put the h2 and p tag in a div and change the background color of that, rather than the individual tags.
So change this
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p></div>
To this
<div class="upper-section">
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
</div>
Set the upper section CSS to
.upper-section {
background-color: #39cb34;
}
You should get something like this.
.upper-section {
background-color: #39cb34;
}
p {
font-family: 'Lato', sans-serif;
}
h2 {
padding-left: 2px;
padding-right: 2px;
}
.tags {
font-style: italic;
font-family: 'Source Sans Pro', sans-serif;
}
article {
background-color: #67aa69;
text-align: center;
width: 30%;
padding: 2;
position: relative;
border-radius: 10%;
}
<article>
<div class="upper-section">
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
<hr>
</div>
<p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
<img src="hollow-knight.png">
</article>
I am having a problem with my code an would be highly grateful for some advise. I want the yellow square to stay at the left side, having it´s own column just as it is now but I want the square to be fixed on the screen while scrolling down. Every time I write position:fixed or write both position:left:fixed;" in my code it takes over and melts everything together into one column.
Here comes the code!
html {
background-color: blue;
color: pink;
}
a {
color: yellow;
}
a:hover {
color: red;
}
.uppe {
position: static;
width: 20%;
}
#bild {
float: left;
}
#rubrik {
float: left;
}
main {
float: left;
width: 100%;
}
.kolumn {
float: left;
width: 25%;
color: orange;
border: solid;
border-color: yellow;
margin: 10px;
}
.kolumn1 {
float: left;
width: 40%;
color: purple;
background-color: orange
}
.nere {
float: left;
}
#media screen and (max-width:700px) {
html {
/*column-count:1;*/
width: 100%;
}
.uppe {
position: static;
width: 100%;
}
.kolumn {
position: static;
width: 100%;
}
.kolumn1 {
position: static;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Embla Olsson+startsida </title>
</head>
<body>
<header class="uppe">
<figure>
<img id="bild" src="OlssonEmbla/Bild01.png" title="cirkelmedmåneochsol" alt="enbildpåencirkelmedhalvasoligochhalvamolnig" height="100" width="100" />
</figure>
<h1 id="rubrik"> Startsida </h1>
</header>
<main>
<nav class="kolumn">
<p>
Dikten <br/>
Första texten <br/>
Andra texten <br/>
</p>
</nav>
<div class="kolumn1">
<section>
<h2> Länkar till hemsidor </h2>
</section>
<nav>
<a id="Enigma" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+startsida.html">Eligma</a>
<p> Denna länk länkar till en dikt av Edgar Allan Poe. Dikten heter "Enigma" och är som de flesta dikter väldigt kort. På <i> Read Vine </i> beskriver man dikten såhär "Edgar Allan Poe wrote several poems that contained a secret. An Enigma is one
of those poems. Enigma means puzzle or mystery. There is a woman's name hidden in the text. To find her name, use the first letter of the first line, the second letter of the second line, the third letter of the third line, and so on. </p> <br/>
<a id="Shadow" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+shadow.html">Shadaow</a>
<p> Denna länk länkar till texten "Shadow" skriven av Edgar Allan Poe. Och som den latmask man är så kommer jag citera <i> Wikipedias </i> sammanfattning av texten "The Poe Shadow is a novel by Matthew Pearl, first published by Random House in 2006.
It tells the story of one young lawyer's quest to solve the mystery of Edgar Allan Poe's death in 1849." Och eftersom <i> Oldstyle Tales Press </i> gjort en så bra beskrivning slänger jag in den också här! Citeringen lyder "In “Shadow – A Parable”
these ideas are consolidated into a nearly Homeric meditation on death's invincibility. The story of a mere moment, “Shadow” peeks into the room where seven men are nervously peering into their own reflections while a gruesome plague ravishes
the streets beyond their fastened brass door." </p> <br/>
<a id="APredicament" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+A%20Predicament.html">A Predicament</a>
<p> Denna länk länkar till texten "A Predicament" av Edgar Allan Poe. Även här citerar jag vår kära vän <i> Wikipedia </i> ""A Predicament" is a humorous short story by Edgar Allan Poe, usually combined with its companion piece "How to Write a Blackwood
Article". It was originally titled "The Scythe of Time". The paired stories parody the Gothic sensation tale, popular in England and America since the early 19th century.". Såhär skulle även <i> Wikipedia </i> summera texten "The bizarre story
follows a female narrator, Signora Psyche Zenobia. While walking through "the goodly city of Edina" with her 5-inch-tall (130 mm) poodle and her 3-foot-tall (0.91 m) black servant, Pompey, she is drawn to a large Gothic cathedral. At the steeple,
Zenobia sees a small opening she wishes to look through. Standing on Pompey's shoulders, she pushes her head through the opening, realizing she is in the face of a giant clock. As she gazes out at the city beyond, she soon finds that the sharp
minute hand has begun to dig into her neck. Slowly, the minute hand decapitates her. At one point, pressure against her neck causes her eye to fall and roll down into the gutter and then to the street below. Her other eye follows thereafter.
Finally, the clock has fully severed her head from her body. She does not express despair and is, in fact, glad to be rid of it. For a moment, she wonders which is the real Zenobia: her headless body or her severed head. The head then gives
a heroic speech which Zenobia's body cannot hear because it has no ears. Her narration continues without her head, as she is now able to step down from her predicament. In fear Pompey runs off, and Zenobia sees that a rat has eaten her poodle."
</p> <br/>
</nav>
</div>
</main>
<footer class="nere">
Embla Cecilia :) <br/>
</footer>
</body>
</html>
The problem is that when you use position: fixed;, the element is no longer relative to the container but relative to the page or in other words positioned absolute. That makes it appear on top of the 2nd div. The solution is that you can use position: sticky; instead.. The appearance is a bit different though...
html {
background-color: blue;
color: pink;
}
a {
color: yellow;
}
a:hover {
color: red;
}
.uppe {
position: static;
width: 20%;
}
#bild {
float: left;
}
#rubrik {
float: left;
}
main {
float: left;
width: 100%;
}
.kolumn {
float: left;
width: 25%;
color: orange;
border: solid;
border-color: yellow;
margin: 10px;
position: -webkit-sticky;
position: sticky;
top: 0px !important;
/*Needs to be there to work position: sticky;*/
}
.kolumn1 {
float: left;
width: 40%;
color: purple;
background-color: orange
}
.nere {
float: left;
}
#media screen and (max-width:700px) {
html {
/*column-count:1;*/
width: 100%;
}
.uppe {
position: static;
width: 100%;
}
.kolumn {
position: static;
width: 100%;
}
.kolumn1 {
position: static;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Embla Olsson+startsida </title>
</head>
<body>
<header class="uppe">
<figure>
<img id="bild" src="OlssonEmbla/Bild01.png" title="cirkelmedmåneochsol" alt="enbildpåencirkelmedhalvasoligochhalvamolnig" height="100" width="100" />
</figure>
<h1 id="rubrik"> Startsida </h1>
</header>
<main>
<nav class="kolumn">
<p>
Dikten <br/>
Första texten <br/>
Andra texten <br/>
</p>
</nav>
<div class="kolumn1">
<section>
<h2> Länkar till hemsidor </h2>
</section>
<nav>
<a id="Enigma" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+startsida.html">Eligma</a>
<p> Denna länk länkar till en dikt av Edgar Allan Poe. Dikten heter "Enigma" och är som de flesta dikter väldigt kort. På <i> Read Vine </i> beskriver man dikten såhär "Edgar Allan Poe wrote several poems that contained a secret. An Enigma is one
of those poems. Enigma means puzzle or mystery. There is a woman's name hidden in the text. To find her name, use the first letter of the first line, the second letter of the second line, the third letter of the third line, and so on. </p> <br/>
<a id="Shadow" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+shadow.html">Shadaow</a>
<p> Denna länk länkar till texten "Shadow" skriven av Edgar Allan Poe. Och som den latmask man är så kommer jag citera <i> Wikipedias </i> sammanfattning av texten "The Poe Shadow is a novel by Matthew Pearl, first published by Random House in 2006.
It tells the story of one young lawyer's quest to solve the mystery of Edgar Allan Poe's death in 1849." Och eftersom <i> Oldstyle Tales Press </i> gjort en så bra beskrivning slänger jag in den också här! Citeringen lyder "In “Shadow – A Parable”
these ideas are consolidated into a nearly Homeric meditation on death's invincibility. The story of a mere moment, “Shadow” peeks into the room where seven men are nervously peering into their own reflections while a gruesome plague ravishes
the streets beyond their fastened brass door." </p> <br/>
<a id="APredicament" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+A%20Predicament.html">A Predicament</a>
<p> Denna länk länkar till texten "A Predicament" av Edgar Allan Poe. Även här citerar jag vår kära vän <i> Wikipedia </i> ""A Predicament" is a humorous short story by Edgar Allan Poe, usually combined with its companion piece "How to Write a Blackwood
Article". It was originally titled "The Scythe of Time". The paired stories parody the Gothic sensation tale, popular in England and America since the early 19th century.". Såhär skulle även <i> Wikipedia </i> summera texten "The bizarre story
follows a female narrator, Signora Psyche Zenobia. While walking through "the goodly city of Edina" with her 5-inch-tall (130 mm) poodle and her 3-foot-tall (0.91 m) black servant, Pompey, she is drawn to a large Gothic cathedral. At the steeple,
Zenobia sees a small opening she wishes to look through. Standing on Pompey's shoulders, she pushes her head through the opening, realizing she is in the face of a giant clock. As she gazes out at the city beyond, she soon finds that the sharp
minute hand has begun to dig into her neck. Slowly, the minute hand decapitates her. At one point, pressure against her neck causes her eye to fall and roll down into the gutter and then to the street below. Her other eye follows thereafter.
Finally, the clock has fully severed her head from her body. She does not express despair and is, in fact, glad to be rid of it. For a moment, she wonders which is the real Zenobia: her headless body or her severed head. The head then gives
a heroic speech which Zenobia's body cannot hear because it has no ears. Her narration continues without her head, as she is now able to step down from her predicament. In fear Pompey runs off, and Zenobia sees that a rat has eaten her poodle."
</p> <br/>
</nav>
</div>
</main>
<footer class="nere">
Embla Cecilia :) <br/>
</footer>
</body>
</html>
P.S. this snippet would not show it as position: sticky; because you have added a media query which makes the element change its styling.
I am trying to get the div with div class bioDiv to line up under the image but have tried so many things that I am just getting more and more confused can anyone look at the code for me and give me a clue? Looking to keep the same look just move the div to a more central location.
here is the code:
body {
width: 100%;
height: auto;
background-image: url("../img/marble-background.gif");
background-size: 100% 100vh;
}
img {
border: 10px solid #E3C640;
}
.menuDiv {
background-color: white;
height: 850px;
width: 300px;
margin-top: 70px;
border: 15px solid #E3C640;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
}
.bioDiv {
background-color: white;
height: 850px;
width: 1200px;
border: 15px solid #E3C640;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cary McClures' Portfolio</title>
<style type="text/css">
#import url("bootstrap-5.1.3-dist/css/bootstrap.css");
</style>
</head>
<head>
<body>
<img style="position: absolute; right: 600px; top: 68px
" src="../img/images/me.jpg" width="400" height="600" alt="picture of cary" />
<div class="menuDiv">
<h2 style="color: goldenrod">Home</h2>
<br>
<h2 style="color: goldenrod">Biography</h2>
<br>
<h2 style="color: goldenrod">Education</h2>
<br>
<h2 style="color: goldenrod">Graphic Design</h2>
<br>
<h2 style="color: goldenrod">Freelance</h2>
<br>
<h2 style="color: goldenrod">Baking</h2>
<br>
<h2 style="color: goldenrod">Photo Gallery</h2>
<br>
<h2 style="color: goldenrod">Resume</h2>
<br>
<h2 style="color: goldenrod">Contacts</h2>
<br>
<h2 style="color: goldenrod">Sitemap</h2>
</div>
<div class="bioDiv">
<br>
<h2 style="color: goldenrod">Biography</h2>
<p>Cary L. McClure is an enthusiastic Geneva-based Educator, Culinary Artist, Graphic Designer, and Overachiever with a decade-long background in leadership and customer service.
</p>
<br>
<p>Hailing from Indianapolis originally, Cary’s avid interest in the graphic arts started while he was in high school back in 1983. Unable to attend college, he wound up in the food industry.
</p>
<br>
<p>After working as a Pastry Chef for several years, Cary ultimately has had to alter his career path, due a disability he endured during his time in the military.
</p>
<br>
<p>Currently Cary has been working as a Substitute teacher (K-12) for Adams Central and South Adams Schools.
</p>
<br>
<p>Cary served as an Adjunct Instructor at Ivy Tech Community College, where he taught students about Cakes, Filling and Icings, Wedding Cake Production, and Classical Pastries.
</p>
<br>
<p>In 2019 Cary obtained his bachelor’s degree in Visual Communication (Graphic Design) from Indiana University. Furthermore, he holds an Associates of Applied Science degree (with honors) in Hospitality & Culinary Pastry Arts from Ivy Tech.
</p>
<br>
<p>Outside of his career, Cary L. McClure enjoys reading fantastical books, PS4 and Xbox One gaming, and crafting gum-paste flowers. An avid traveler, he also loves exploring new places and is seeking a position that will allow him to travel across
the country. Above all, he cherishes spending quality time with his family. He is the proud father of one married son.
</p>
<br>
</div>
</body>
</head>
</html>
I would suggest making two containers (an aside and a main) and put the navigation list in the aside and the image and bio in the main. Something like this:
.container {
display: flex;
}
<div class="container">
<aside>
<h1>Put your nav here</h1>
</aside>
<main>
<img src="" height="200" width="300" />
<div>
<h1>Put Bio here</h1>
</div>
</main>
</div>
PS: In case you didn't know, aside and main are semantic HTML5 tags used to markup a page. You can use divs instead of them, but it's not best practice
In Bootstrap you do not have to dictate the widths etc, it can all be done using standard Bootstrap CSS which you dictate as a class= in your HTML. So, for the image you could have that fluid inside a column.
<div class="col-sm-12 col-md-10 mx-auto">
<img src="../img/images/me.jpg" class="img-fluid" alt="picture of cary"/>
</div>
That's full width (12 wide) on small screens and not quite full width (10 wide) on anything larger but mx-auto should center the entire Div. Setting the image to class img-fluid makes it the full width of the Div no matter the screen.
Hopefully after that you can use exactly the same column set up for .bioDiv.
<div class="col-sm-12 col-md-10 mx-auto">
<h2 style="color: goldenrod">Biography</h2>
continued content here....
</div>
Ultimately you are just wrapping the image in a Div and setting both it and bioDiv to the same column parameters. It should not hurt in any way to set up menuDiv a similar way.
I can not get the tables to center in the browser. Please look at my code and let me know what needs to be changed. thanks so much. I have looked over all the internal style sheets as well as the inline that I have placed on the table tags. I have another webpage that is coded the same and is similar and I can't see any differences, it is also not centering.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Pie Crust Recipe | Pies by Grandma Reeves</title>
<meta name="author" content="Jaeden Kimball Harris"/>
<meta name="keywords" content="'Applie pie',Filling, Delicious,'Grandma Reeves', Recipe"/>
<meta name="description" content="Come enjoy a hot applie pie, perfect for the fall season or any season really. Straight out of Grandma Reeves kitchen!"/>
<style type="text/css" media="all">
body{
background-color: #FEFACB;
background-image: url("images/lemonbackground.jpg");
text-align:center;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
text-align:center;
}
h2 {
font: 'Comic Sans', times, serif;
color: #FDC62D;
font-size:20px;
}
table{
background-color:#ffffff;
text-align:center;
width:850px;
height:800px;
}
td{
vertical-align:top; padding:15px;
}
table.center (
margin-left:auto;
margin-right:auto;
)
ul {
list-style-type:square
}
</style>
</head>
<body>
<table class="center">
<tr>
<td>
<table class="center" style="width:85%;" />
<tr>
<td>
<img src="images/filling_smnav.gif" width="154" height="143" alt="Click here for the lemon meringue pie and filling recipes"></img>
</td>
<td>
<img src="images/crust_smnav.gif" width="154" height="143" alt="Click here for the flaky crust recipe"></img>
</td>
<td>
<img src="images/sm_logo.gif" width="312" height="183" alt="Lemon Meringue Pie recipe from Grandma Reeves"></img>
</td>
</tr>
<tr>
<td colspan="3">
<p style="text-alight:center;"><img src="images/yellowbar.gif" width="636" height="8" alt="red bar"></img></p>
<h1> Pie Crust Recipe </h1>
<h2> Ingredients</h2>
<ul>
<li>2 Cups flour</li>
<li>1 Cup Butter Flavor Crisco brand shortening</li>
<li>1 tsp salt</li>
<li>1 tsp sugar</li>
<li>1/4 tsp baking powder</li>
<li>1/3 Cup milk</li>
</ul>
<blockquote>
<p> Stir until lumps are dissolved (can use a hand mixer) </p>
</blockquote>
<h2>Bring to a Boil</h2>
<ul>
<li>4 cups water</li>
<li>2 cups sugar</li>
</ul>
<h2> Directions </h2>
<p> Add all dry ingredients together.</p>
<p>Use two knives and criss cross them to cut the Butter Flavor Crisco® into the flour mixture. Cut it into the flour until the mixture is tiny crumbs.</p>
<p>Sprinkle milk over top of the mixture and gently fold the milk into the mixture, not handling it.</p>
<p>Spread some flour on the counter and place 1/2 of the mixture on the flour. Lightly flour the rolling pin. Roll out thin. The secret avoid handling and try to only roll it out once.</p>
<p>Carefully place the dough in the pie pan (folding it in 1/2 first sometimes helps)</p>
<p>Flute the edges (pinching the edges with your thumb and index finger).</p>
<p>Bake 400° for 10-12 minutes (until lightly brown)</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Add this to your table css:
table
{
margin: 0 auto;
}
fiddle, if need be: http://jsfiddle.net/vvov1y8q/
The correct answer is to not set the margin to 0 if you want to display the table in middle of the browser.
Specifically, try the following this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Pie Crust Recipe | Pies by Grandma Reeves</title>
<meta name="author" content="Jaeden Kimball Harris"/>
<meta name="keywords" content="'Applie pie',Filling, Delicious,'Grandma Reeves', Recipe"/>
<meta name="description" content="Come enjoy a hot applie pie, perfect for the fall season or any season really. Straight out of Grandma Reeves kitchen!"/>
<style type="text/css" media="all">
body{
background-color: #FEFACB;
background-image: url("images/lemonbackground.jpg");
text-align:center;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
text-align:center;
}
h2 {
font: 'Comic Sans', times, serif;
color: #FDC62D;
font-size:20px;
}
table{
background-color:#ffffff;
text-align:center;
width:100%;
height:800px;
}
td{
vertical-align:top; padding:15px;
}
table.center (
margin-left:auto;
margin-right:auto;
)
ul {
list-style-type:square
}
</style>
</head>
<body>
<table class="center">
<tr>
<td colspan="2">
<table class="center" style="width:50%;margin:0 auto" />
<tr>
<td>
<img src="images/filling_smnav.gif" width="154" height="143" alt="Click here for the lemon meringue pie and filling recipes"> </img>
</td>
<td>
<img src="images/crust_smnav.gif" width="154" height="143" alt="Click here for the flaky crust recipe"></img>
</td>
<td>
<img src="images/sm_logo.gif" width="312" height="183" alt="Lemon Meringue Pie recipe from Grandma Reeves"></img>
</td>
</tr>
<tr>
<td colspan="3">
<p style="text-alight:center;"><img src="images/yellowbar.gif" width="636" height="8" alt="red bar"></img></p>
<h1> Pie Crust Recipe </h1>
<h2> Ingredients</h2>
<ul>
<li>2 Cups flour</li>
<li>1 Cup Butter Flavor Crisco brand shortening</li>
<li>1 tsp salt</li>
<li>1 tsp sugar</li>
<li>1/4 tsp baking powder</li>
<li>1/3 Cup milk</li>
</ul>
<blockquote>
<p> Stir until lumps are dissolved (can use a hand mixer) </p>
</blockquote>
<h2>Bring to a Boil</h2>
<ul>
<li>4 cups water</li>
<li>2 cups sugar</li>
</ul>
<h2> Directions </h2>
<p> Add all dry ingredients together.</p>
<p>Use two knives and criss cross them to cut the Butter Flavor Crisco® into the flour mixture. Cut it into the flour until the mixture is tiny crumbs.</p>
<p>Sprinkle milk over top of the mixture and gently fold the milk into the mixture, not handling it.</p>
<p>Spread some flour on the counter and place 1/2 of the mixture on the flour. Lightly flour the rolling pin. Roll out thin. The secret avoid handling and try to only roll it out once.</p>
<p>Carefully place the dough in the pie pan (folding it in 1/2 first sometimes helps)</p>
<p>Flute the edges (pinching the edges with your thumb and index finger). </p>
<p>Bake 400° for 10-12 minutes (until lightly brown)</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I hope this works for you.
I need help. I'm just starting CSS/HTML and I was able to change the color of a pages header1 content in a website with css before. Now i've tried the exact same lines of code and it stays flat black.
Here is the HTML:
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Pacific Trails Resort</title>
<link rel ="stylesheet" href="pacific.css">
<meta charset="utf-8">
</head>
<body>
<h1>Pacific Trails Resort</h1>
<div id="nav"><b>
Home
Yurts
Activities
Reservations
</b></div>
<div id ="content">
<h2>Enjoy Nature In Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast.Relax
in sereninty with panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean
<li>Activities lodge with fireplace and gift shop
<li>Nightly fine dining at the Overlook Cafe
<li>Heated outdoor pool and whirlpool
<li>Guided hiking tours of the redwoods
</ul>
<div id="contact">
<span class="resort">Pacific Trails Resort</span>
<br>12010 Pacific Trails Road
<br>Zephyr, CA 95555
<br>
<br>888-555-5555
</div>
<div id="contact"><small><i>
Copyright © 2011 Pacific Trails Resort
<br> nathan#griffin.com
</i></small></div>
</div>
</body>
</html>
And here is the CSS file.(validated on w3 website)
body{
color: #666666;
background-color: #ffffff;}
h1{
color: #000033;
background-color: #ffffff;
margin-bottom: 0;}
nav{
background-color: #90c7e3;}
h2{
color: #3399cc;}
dt{
color: #000033;}
.resort{
color: #000033;}
Can someone please point me to where I'm going wrong
Change:
nav { ... }
To:
#nav { ... }
Seems fine to me.
Note that you're setting it to #000033, which is a very dark blue (which is applied correctly, but might be missed because it's similar to black).
When I arbitrarily changed it to a different color (namely, #BADA55), it still works fine and is more visible.