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.
Related
So for an assignment of mine I have to use CSS Media Queries to display two webpages depending on the size of the window. I have that done, but for the mobile phone version, I have to replace the tables on the menu page with text, which describes the menu. How do I do this in CSS?
#media screen and (min-width: 37.5em) and (max-width: 64em){
header{
padding-top: 1em;
}
main{
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-left: 1em;
padding-right: 1em;
font-size: 90%;
}
h1{
font-size: 1.5em;
}
nav li{
display: block;
margin: 0;
border-bottom: 1px solid #FFE4C4;
}
nav li::first-line{
border-top: 1px solid #FFE4C4
}
nav a{
display: block;
}
#wrapper img{
background-image: none;
height: 0;
}
table{
display: none;
}
#address{
color: #191970;
font-size: 92%;
font-family: Calibri;
background-image: none;
border-color: #FFE4C4;
border-radius: 2px;
border-style: none;
width: 200px;
margin-top: 50px;
}
table.Coffees:after{
content: "Our Coffees";
content: "Our coffees are well-known throughout the region as bold and flavorful. We offer many different types of coffees, one of which is sure to satisfy your taste. Prices start at $2.00 per cup."
}
table.Tea:after{
content: "Our Teas";
content: "Our teas are hand-selected from around the world to bring you a wide variety of possibilities. We specialize in flavorful afternoon teas as well as a wide assortmentof exotic teas. Stop in and try a cup! Prices start $2.00 per cup."
}
table.Snacks:after{
content: "Our Snacks";
content: "We offer a wide variety of foods ranging from simple snacks to complete inners. Our specialties are organic salads and fresh seafood. Try our fried clam strips and fish strips. The locals swear these are the bestq you'll find anywhere. Prices are seasonal, but always a real deal."
}
}
This is what I have for that part of my CSS file. I heard the content property was a way to do it, but I don't see anything.
Thank you in advance!
Upon request, here are the html files for the index page and the menu page respectively:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Lighthouse Bistro</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="bistro.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>The Lighthouse Bistro</h1>
</header>
<nav>
<ul>
<li class="navlist">
Home
</li>
<li class="navlist">
Our Menu
</li>
<li class="navlist">
Entertainment Schedule
</li>
<li class="navlist">
Reservations
</li>
</ul>
<div id="address">
The Lighthouse Bistro
<br>
#27 Lighthouse Road
<br>
Mackinac City, Michigan 49701
<br>
<br>
888-555-5555
<br>
</div>
</nav>
<div role="main">
<img src="images/oldmackinaclight.jpg" alt="Old Mackinac Light" height="350" width="250">
<h3>Enjoy Fine Dining and Entertainment at Lighthouse Point</h3>
<p>The Lighthouse Bistro offers fine dining and entertainment a stones throw from the Old Mackinac Point Lighthouse on the
Straits of Mackinac. The lighthouse was built in 1892 as a sentinel for vessels entering the Straits of Mackinac. Open year
round. Yes, even in the winter! Stop in for a mug of one of our specialty coffees after your hike.</p>
<ul>
<li>Speciality coffees and teas</li>
<li>Bagels, Muffins, and Organic Snack</li>
<li>Clam Strips, Oysters, and Fresh Fish served daily</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night Every Friday starting at 8:00pm</li>
</ul>
</div>
<footer>
<br>
<em>Copyright © 2018 The Lighthouse Bistro</em>
<br>
<em>ourfirstname#yourlastname.com</em>
</footer>
</div>
</body>
</html>
Here is the menu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Lighthouse Bistro</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="bistro.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>The Lighthouse Bistro</h1>
</header>
<nav>
<ul>
<li class="navlist">
Home
</li>
<li class="navlist">
Our Menu
</li>
<li class="navlist">
Entertainment Schedule
</li>
<li class="navlist">
Reservations
</li>
</ul>
<div id="address">
The Lighthouse Bistro
<br>
#27 Lighthouse Road
<br>
Mackinac City, Michigan 49701
<br>
<br>
888-555-5555
<br>
</div>
</nav>
<div role="main">
<table class="Coffees">
<caption>Some of Our Coffees</caption>
<tr>
<th id="Coffee">Coffee</th>
<th id="Desc1">Description</th>
<th id="Price1">Price</th>
<th id="Image1">Image</th>
</tr>
<tr>
<td headers="Coffee" class="center">Just Java</td>
<td headers="Desc1">The regular house blend, decaffinated coffee, or the flavor of the day</td>
<td headers="Price1" class="center">Endless cup $2.00</td>
<td headers="Image1" class="center"><img src="images/coffee1.jpg" alt="coffee1" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Coffee" class="center">Cafe au Lait</td>
<td headers="Desc1">House blended coffee infused into a smooth steamed milk.</td>
<td headers="Price1" class="center">Single $2.00, Double $3.00</td>
<td headers="Image1" class="center"><img src="images/coffee2.jpg" alt="coffee2" width="100" height="75"></td>
</tr>
<tr>
<td headers="Coffee" class="center">Iced Cappucino</td>
<td headers="Desc1">Sweetened espresso blended with icy-cold milk and served in a chilled glass</td>
<td headers="Price1" class="center">Single $4.75, Double $5.75, Wow! $7.75</td>
<td headers="Image1" class="center"><img src="images/coffee3.jpg" alt="coffee3" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Coffee" class="center">Espresso</td>
<td headers="Desc1">Our house blend espresso - the best!</td>
<td headers="Price1" class="center">Single $5.00, Double $7.50</td>
<td headers="Image1" class="center"><img src="images/espresso1.png" alt="espresso" width="100" height="75"></td>
</tr>
</table class="Teas">
<br>
<table>
<caption>Some of Our Teas</caption>
<tr>
<th id="Tea" scope="col">Tea</th>
<th id="Desc2" scope="col">Description</th>
<th id="Price2" scope="col">Price</th>
<th id="Image2" scope="col">Image</th>
</tr>
<tr>
<td headers="Tea" class="center">Breakfast Teas</td>
<td headers="Desc2">Darjeeling, English Breakfast, Queen Anne, Green tea with lemon</td>
<td headers="Price2" class="center">Endless cup $2.00</td>
<td headers="Image2" class="center"><img src="images/tea1.jpg" alt="tea1" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Tea" class="center">Afternoon Teas</td>
<td headers="Desc2">Lemon, Pure Peppermint, Earl Grey, China Oolong</td>
<td headers="Price2" class="center">Endless cup $3.00</td>
<td headers="Image2" class="center"><img src="images/tea2.jpg" alt="tea2" width="100" height="75"></td>
</tr>
<tr>
<td headers="Tea" class="center">Exotic Teas</td>
<td headers="Desc2">Orange & Cinnammon Spice, Camomile, Honey & Vanilla, Pomegranate & Raspberry</td>
<td headers="Price2" class="center">Single cup $3.50</td>
<td headers="Image2" class="center"><img src="images/tea3.jpg" alt="tea3" width="100" height="75"></td>
</tr>
</table>
<br>
<table class="Snacks">
<caption>Snacks</caption>
<tr>
<th id="Snack">Snack</th>
<th id="Desc3">Description</th>
<th id="Price3">Price</th>
<th id="Image3">Image</th>
</tr>
<tr>
<td headers="Snack" class="center">Bagels and Muffins</td>
<td headers="Desc3">Bagels, Plain muffins, Blueberry muffins, Chocolate muffins, and much more</td>
<td headers="Price3" class="center">Small $2.00, Large $3.00</td>
<td headers="Image3" class="center"><img src="images/muffin1.jpg" alt="muffin1" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Snack" class="center">Organic Snacks</td>
<td headers="Desc3">Organic chips with sea salt, Organic salads</td>
<td headers="Price3" class="center">Prices vary</td>
<td headers="Image3" class="center"><img src="images/salad1.jpg" alt="muffin2" width="100" height="75"></td>
</tr>
<tr>
<td headers="Snack" class="center">Fresh Fish</td>
<td headers="Desc3">Clam strips, Fried Fish Strips, Fried Oysters, and many other seasonal selections</td>
<td headers="Price3" class="center">Prices vary by season $5.75-$15.75</td>
<td headers="Image3" class="center"><img src="images/clamstrips.png" alt="muffin3" width="100" height="75"></td>
</tr>
</table>
</div>
<br>
<footer>
<em>Copyright © 2018 The Lighthouse Bistro</em>
<br>
<em>yourfirstname#yourlastname.com</em>
</footer>
</div>
</body>
</html>
I am trying to get all pages to look the same and the DIVs connected.
Here is my code
footer{
height:auto;
padding:10px;
background-color:lightgray;
margin-right:auto;
margin-left:auto;
text-align:center;
}
article{
height:auto;
background-color:darkgray;
margin-right:auto;
margin-left:auto;
text-align:center;
}
h1,h2,h3,h4,h5,h6{
margin:0;
}
#wrapper{
width:80%;
margin-left:10%;
margin-right:10%;
border:2px solid black;
background-color:lightgray;
box-shadow: 10px 10px 5px #888888;
border-top-left-radius:18px;
border-top-right-radius:18px;
border-bottom-left-radius:18px;
border-bottom-right-radius:18px;
}
header{
height:140px;
background-color:lightgray;
background-image:url(logo1.png);
background-repeat:no-repeat;
background-position:20px center;
text-align:center;
border-bottom-left-radius:18px;
border-bottom-right-radius:18px;
}
nav{
height:40px;
background-color:lightgray;
margin-left:auto;
margin-right:auto;
text-align:center;
width:auto;
}
I expect all the corners to be rounded and all margins to be the same.
The result I receive is a top corner rounded but bottom not, the margins on one page are great, but there are none on another, border not showing up on certain. I am positive the page is linked. The background colors are not following.
Here's the link to my assignment:
https://iceconescafe.000webhostapp.com/index.html
I just want to let you know I fixed a majority of the issues, but the nav table is aligning different on most pages. Some pages don't have the div styling done yet so please focus on Kids Menu and Menu, as well as Index.
The issues are the margins on kids menu, and the nav table alignments, as well as the article not changing on testimonials (background).
Here is the html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="icon" href="logo.png" type=" image/png">
<title> IceCones</title>
</head>
<body>
<div id="wrapper">
<header>
<h1 id="t" class="l"> Ice Cones Cafe </h1>
</header>
<nav>
<table id=navtable class="tr">
<tr>
<td class="td">Home</td>
<td class="td">Menu</td>
<td class="td">Kids Menu</td>
<td class="td">Nutrition</td>
<td class="td">Testimonials</td>
<td class="td">Order Online</h5></td>
</tr>
</table>
</nav>
<article class="setmin">
<br>
<img src="IceConesLog.jpg" border="3">
<br>
<blockquote>
<p >
Ice Cones Cafe, established in 1880, is the best ice cream joint in town! With desserts ranging from waffles to ice cream, Ice Cones only uses the purest ice from Antarctica. With our wide selection of foods, and our expertise chefs,
you will never leave unhappy. Only when you walk through our doors will you taste the best ice cream the world has to offer! </p>
</blockquote>
</article>
<footer>
<h4><b> Contact Information </h4>
<ul>
<li> Abdu Hijazi </li>
<li>contact_support#icecones.com</li>
<li>(313)962-7906</li> </b>
<audio autoplay loop>
<source src="ice.mp3" type="audio/mpeg">
</footer>
</div>
</body>
</html>
Ignore this (Next page Menu)
<html>
<head>
<link rel="icon" href="IceConesfavicon.ico" type=" image/png">
<link rel="stylesheet" type="text/css" href="index.css">
<title> Menu</title>
</head>
<body>
<div id="wrapper">
<header>
<h1 id="t"> Ice Cones Cafe </h1>
</header>
<nav>
<table class="tr">
<tr>
<td class="td">Home</td>
<td class="td">Menu</td>
<td class="td">Kids Menu</td>
<td class="td">Nutrition</td>
<td class="td">Testimonials</td>
<td class="td">Order Online</h5></td>
</tr>
</table>
</nav>
</tr>
<article>
<h2> Menu</h2>
<table>
<th colspan="3"> Menu </th>
<tr>
<th>Picture</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><img src="SnowConeMenu1.jpg"></td>
<td>The classic ice in a cup. Our Ice Cones come in flavors of lemon lime, blue berry, and cotton candy. This product is our cafe's specialty.</td>
<td>Small/$0.99 Large/$1.99</td>
</tr>
<tr>
<td><img src="IceCream.jpg"></td>
<td>Another famous classic using ice imported directly from the freshest and purest ice.
With our different flavors of chocolate, vanilla, buttermilk, and pistachio, there are various flavors to try. We also come up with new flavors weekly. </td>
<td>1 scoop/$1.50 2 scoop/$2</td>
</tr>
<tr>
<td><img src="BananaSplit.jpg"></td>
<td> The banana split features a combination of banana, whipped cream, sprinkles, and even a cherry on top. The best part however, is that
warm, melting chocolate syrup.</td>
<td>$2.99</td>
<tr>
<td><img src="OreoShake.jpg"></td>
<td> The classic American favorite of Oreo cookies mixed with milk. A tasty, chunky, cold recipe that your taste buds won't soon forget.</td>
<td>$2.50</td>
</tr>
</table>
</article>
<footer>
<h4> Contact Information </h4>
<ul>
<li> Abdu Hijazi </li>
<li>contact_support#icecones.com</li>
<li>(313)962-7906</li> </b>
</footer>
</div>
</body>
</html>
Kids Menu
<html>
<head>
<title> KidsMenu</title>
<link rel="icon" href="IceConesfavicon.ico" type=" image/png">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<h1 id="t"> Ice Cones Cafe </h1>
</header>
<nav>
<table class="tr">
<tr>
<td class="td">Home</td>
<td class="td">Menu</td>
<td class="td">Kids Menu</td>
<td class="td">Nutrition</td>
<td class="td">Testimonials</td>
<td class="td">Order Online</h5></td>
</tr>
</table>
</nav>
<article>
<h2>Kids Menu</h2>
<table>
<th colspan="3"> Kid's Menu </th>
<tr >
<th>Picture</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><img src="MiniWaffle.png"></td>
<td> Our chef specially makes these in sizes of 1/3 regular waffles. A great meal for you kid in the morning, or anytime.</td>
<td>$4.59</td>
</tr>
<tr>
<td><img src="SmoresKids.jpg"></td>
<td> These smores are a small, but tasty item for your kids. Includes chocolate syrup, marshmallows, graham crackers, and whipped cream. </td>
<td>$3.99 <br> with whip/$4.50</td>
</tr>
<tr>
<td><img src="FrozenHotChoco.jpg"></td>
<td> Although you're probably thinking warm at a ice cream place is crazy, we have added a frozen aspect to hot chocolate for your kids. They will love
the whipped cream and added syrup.</td>
<td>$3.50</td>
<tr>
<td><img src="KidsCrepe.jpg"></td>
<td> A small, warm crepe filled with whatever your child desires. Banana, Nutella, and strawberry are all viable options, along with
syrups and creams on top.</td>
<td>$4.99</td>
</tr>
<br>
</table>
<h1>Kiddie Activity</h1>
<br>
<img src="Danykmem84.png">
</article>
<footer>
<br>
<br>
<h4> Contact Information </h4>
<ul>
<li> Abdu Hijazi </li>
<li>contact_support#icecones.com</li>
<li>(313)962-7906</li> </b>
</ul>
</footer>
</div>
</body>
</html>
lastly, testimonials
<html>
<head>
<link rel="icon" href="IceConesfavicon.ico" type=" image/png">
<link rel="stylesheet" type="text/css" href="index.css">
<title> IceCones</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 id="t"> Ice Cones Cafe </h1>
</div>
<div id="nav">
<table class="tr">
<tr>
<td class="td">Home</td>
<td class="td">Menu</td>
<td class="td">Kids Menu</td>
<td class="td">Nutrition</td>
<td class="td">Testimonials</td>
<td class="td">Order Online</h5></td>
</tr>
</table>
</div>
<div id="article">
<h2>Testimonials</h2>
<p> Below are some testimonials from our CEO and a trusted customer:</p>
<p> Testimonial~CEO Abdu Hijazi</p>
<video controls>
<source src="Test1.mp4" type="video/mp4">
</video>
<p> Testimonial~Satisfied Customer Sara Hijazi</p>
<video controls>
<source src="Test2.mp4" type="video/mp4">
</video>
</div>
<div id="footer">
<h4>Contact Information </h4>
<ul>
<li> Abdu Hijazi </li>
<li>contact_support#icecones.com</li>
<li>(313)962-7906</li>
</div>
</div>
</body>
</html>
1) Make sure the HTML you are applying your CSS to does not have any inline styling (style="...") or any embedded CSS already that is overriding your linked style sheet.
Or if their are other linked style sheets, consider removing them or making the main style sheet above the last link so it overrides any conflicting rules in the others.
2) If you still have issues, try using Chrome devtools (F12) or right-click on the page where it doesn't look right and select "inspect element". The right-hand side of the window that pops up shows how the browser is interpreting the CSS. So you can use that to debug why it's not showing up right.
3) And/or try adding the !important rule (What does !important in CSS mean?) to any rule in your style sheet that seems to be getting ignored. But it's generally better form to remove the overriding style rules in the HTML and/or fix any issues in your stylesheets
Hope that helps!
Clear your Internet Browser history and Cache from beginning of time, then test your web pages. If it doesn't work, check the 'class' and 'id' of CSS is given in proper way. Here you are not using class. To use class:
Example:
In CSS:
.nav{ }
In html:
<div class="nav"></div>
$https://jsbin.com/huqukopixe/edit?html,output
Hello guys , this is a edX homework for practice. In the code you will see a border on the banner. This border should not be there. I was trying to make a border to use it emphasizing on the social media account png's. But unfortunately I could not make to make it's length smaller. Andy advice?
Thank you alredy.
I found that your #media has a border-style: solid, if you remove it the white border is gone, and if you remove padding-left: 1000px you will also see the social media icons.
See this.
It's being caused by border-style on the #media selector. Adjust your CSS.
Change
#media {
padding-left: 1000px;
border-style: solid;
border-color: white;
position: relative;
}
to
#media {
padding-left: 1000px;
border-color: white;
position: relative;
}
https://jsbin.com/haxaluweme/1/edit?html,output
And if you want to keep the white border but only at the social media icons:
<!DOCTYPE html>
<html>
<head>
<!-- meta parts-->
<meta charset="utf-8">
<meta lang="en">
<meta name="keywords" content="recipe, content, webdesign, edx">
<meta name="viewport" content="width=device-width" , initial-scale=1.0p>
<meta name="author" content="Berkay MAKAS">
<title>Recipe Project Module-2 by Berkay Makas</title>
<style>
/* Css Parts. "Double Background color failure with text combination */
.textAll {
font-style: italic;
}
#headerone {
font-size: 70px;
background-color: cornflowerblue;
text-align: center;
color: white;
border: 3px solid black;
}
#copy {
background-image: url(https://www.freewebheaders.com/wordpress/wp-content/gallery/music/colorful-fantasy-piano-keyboard-keys-web-header.jpg);
color: white;
background-repeat: no-repeat;
border: 2px solid black;
}
h3 {
color: crimson;
font-style: oblique;
}
h4 {
color: crimson;
}
#media {
float: right;
margin-right: 20px;
text-align: center;
border-style: solid;
width: 200px;
border-color: white;
position: relative;
}
#header #copy {
height: 119px;
}
</style>
</head>
<!-- End of CSS-->
<body class="textAll">
<header role="banner">
</header>
<!-- Header Part-->
<div id="header">
<div id="copy">
<p><b>Designed by Berkay Makas®</b></p>
<!-- Social Media -->
<div id="media">
<img src="http://pngimg.com/uploads/instagram/instagram_PNG10.png" alt="Instagram Logo" width="50" height="50">
<img src="http://www.imagespng.com/Data/Logo/Linkedin-Picture-180x180.png" width="55" height="55">
</div>
</div>
<h1 id="headerone"><i>Recipes for lunch!</i></h1>
<nav>
<ul style="display: inline;">Chicken with Sourdough-Mushroom Stuffing</ul>
<ul style="display: inline">Blueberry-Sour Cream Dessert</ul>
<ul style="display: inline">Main Page</ul>
</nav>
<hr>
<details>
<summary>READ ME!!! </summary>
<p>A brand new recipe paper per day to help you in order to overcome your thoughts on <b>"What the hell I am going to fo this day !</b>"</p>
</details>
<hr>
</div>
<!-- End of the header part-->
<!--Recipes Part -->
<article>
<header id="firstone">
<!-- First Recipe-->
<h3>Chicken with Sourdough-Mushroom Stuffing</h3>
<h4>Ingridients</h4>
<table>
<tr>
<td>Lemon Peel</td>
<td>2 tablespoons</td>
</tr>
<tr>
<td>Sage</td>
<td>1 Tablespoon</td>
</tr>
<tr>
<td>Salt</td>
<td>1 tablespoon</td>
</tr>
<tr>
<td>Grounded black pepper</td>
<td>1 1/2 teaspoons</td>
</tr>
<tr>
<td>Small chicken</td>
<td>8(5 pounds)</td>
</tr>
<tr>
<td>Butter</td>
<td>1/4 cups</td>
</tr>
<tr>
<td>Mushrooms</td>
<td>4 cups</td>
</tr>
<tr>
<td>Garlic</td>
<td>2 cloves</td>
</tr>
<tr>
<td>Baguette</td>
<td>10oz</td>
</tr>
<tr>
<td>Shredded carrot</td>
<td>1 cup</td>
</tr>
<tr>
<td>Chicken broth</td>
<td>1 cup</td>
<tr>
<td>Chopped wallnuts</td>
<td>1/4 cup</td>
</tr>
<tr>
<td>Italian parsley</td>
<td>3 tablespoons</td>
</tr>
</table>
</header>
<section>
<figure>
<img src="http://images.meredith.com/bhg/images/recipe/ss_R064439.jpg" height="250px" weight="250px" alt="Original photo of the food" style="border-style: solid;">
<figcaption>Fig 1. The image of the food.</figcaption>
</figure>
<footer>
<h4>Directions</h4>
<p> 1. Line a 5-1/2- to 6-quart slow cooker with a disposable cooker liner. Lightly coat liner with cooking spray; set aside. Reserve 1 teaspoon of the lemon peel. In a small bowl combine remaining lemon peel, sage, seasoned salt and pepper. Remove
3/4 of the mixture and rub onto chicken legs. Place chicken in slow cooker.<br> 2. Meanwhile, melt butter in a skillet; add mushrooms and garlic. Cook and stir 3 to 5 minutes or until just tender. Stir in remaining sage mixture. Transfer mushroom
mixture to a large bowl. Add bread cubes, and shredded carrot. Drizzle with chicken broth, tossing gently.<br> 3. Lightly pack stuffing on top of chicken. Cover and cook on high-heat setting for 4 to 5 hours.<br> 4. Transfer stuffing and chicken
to a platter.<br> 5. In a bowl combine reserved lemon peel, walnuts, and parsley; sprinkle over chicken. Makes 8 servings.</p>
</footer>
</section>
</article>
<!-- End of first recipe <article> -->
<hr>
<!-- HR lining to design.-->
<article>
<!-- Header Part-->
<header id="secondone">
<h3>Blueberry-Sour Cream Dessert</h3>
<h4>Ingredients</h4>
<table>
<tr>
<td>Dessert Crust</td>
<td>1 recipe</td>
</tr>
<tr>
<td>Fresh or frozen blueberries</td>
<td>3 cups</td>
</tr>
<tr>
<td>Sugar</td>
<td>1/3 cup</td>
</tr>
<tr>
<td>Tapioka</td>
<td>3 tablespoons</td>
</tr>
<tr>
<td>Water</td>
<td>1/4 cup</td>
</tr>
<tr>
<td>Ground Cinnamon</td>
<td>1 teaspoon</td>
</tr>
<tr>
<td>Lemon Peel</td>
<td>1 teaspoon</td>
</tr>
<tr>
<td>Ground Nutmeg</td>
<td>1/4</td>
</tr>
<tr>
<td>Egg yolks</td>
<td>3 units</td>
</tr>
<tr>
<td>Sugar</td>
<td>1/2 cup</td>
</tr>
<tr>
<td>Vanilla</td>
<td>1 teaspoon</td>
</tr>
</table>
</header>
<!-- Section part-->
<section>
<figure>
<img src="http://images.meredith.com/content/dam/bhg/Images/recipe/33/R090601.jpg.rendition.largest.jpg" alt="Blueberry cheesecake" height="250px" weight="250px" style="border-style: solid;">
<figcaption>Fig 1. The image of the food.</figcaption>
</figure>
<footer>
<h4>Directions</h4>
<p>
1. Prepare and bake Dessert Crust. Reduce oven temperature to 350 degrees F. In a medium saucepan, combine 3 cups blueberries, the 1/3 cup sugar, the tapioca, water, cinnamon, lemon peel, and nutmeg. Let stand for 15 minutes. Cook and stir mixture over
medium heat until blueberries become juicy and mixture is bubbly. Turn into partially baked Dessert Crust.<br> 2. In a medium mixing bowl, combine sour cream, egg yolks, the 1/2 cup sugar, and the vanilla. Pour evenly over blueberry
mixture.<br> 3. Bake about 50 minutes or until sour cream layer is set when gently shaken. Cool in pan on a wire rack for 1 hour. With a sharp knife, loosen crust from side of pan; remove side. Cover and chill overnight before serving.<br> 4.
To serve, if desired, garnish with additional blueberries. Makes 12 to 16 slices.</p>
</footer>
</section>
</article>
<hr>
<footer>
<nav>
<ul style="display: inline;">Chicken with Sourdough-Mushroom Stuffing</ul>
<ul style="display: inline">Blueberry-Sour Cream Dessert</ul>
<ul style="display: inline">Main Page</ul>
</nav>
</footer>
</body>
</html>
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.
I'm trying to figure out how to format the code below so that the first two blocks of info display side by side, then display the third one centered underneath it. I tried using a listing style with css to format it so but doesn't seem to really work for me.
Help/Suggestions?
<div class="inauguration-content">
<h3>Inauguration</h3>
Friday, April 17, 2009<br />
3:00 p.m.<br />
Sarkus-Busch Theater<br />
Robert McLaughlin College Center</p>
<h3>Inaugural Gala</h3>
7-11 p.m.<br />
Robert McLaughlin College Center<br />
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br />
Entertainment by Frankie Michaels<br />
Cocktail Attire Recommended<br />
Tickets are $100 per person<br />
Proceeds benefit the Herkimer County College Foundation</p>
<h3>Important Information for Delegates</h3>
Direction to HCCC<br />
Campus Map<br />
Lodging Information<br />
Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.<br />
Delegates are expected to furnish their own academic regalia.</p>
</div>
You can create three div's.
The first div (top-left) would have a width set at, say, 50% of the container (e.g. viewport) and float left.
The second div (top-right) would have a width set at, say, 50% of the container (e.g. viewport) and float right.
The third div (bottom-center) would have a witdh set at, say, 100% of the container (e.g. viewport) use the CSS 'clear:both' to position itself immediately below the tallest of the two floats. To center, use a smaller width (e.g. 50% or 20em) and set the CSS margin-left and margin-right to auto (see example below.)
The above will dynamically pack the three divs to accommodate any wrapping and vertical growing (including because of the increase of font size by the user for accessibility purposes) inside any of the three div's.
<html><body>
<div style="width:50%; float:left">
Inauguration<br/>
Friday, April 17, 2009<br/>
3:00 p.m.<br/>
Sarkus-Busch Theater<br/>
Robert McLaughlin College Center
</div>
<div style="width:50%; float:right">
Inaugural Gala<br/>
7-11 p.m.<br/>
Robert McLaughlin College Center<br/>
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br/>
Entertainment by Frankie Michaels<br/>
Cocktail Attire Recommended<br/>
Tickets are $100 per person<br/>
Proceeds benefit the Herkimer County College Foundation
</div>
<div style="width:50%; margin-left:auto; margin-right:auto; clear:both">
Important Information for Delegates<br/>
Direction to HCCC<br/>
Campus Map<br/>
Lodging Information<br/>
Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the
Library Complex at 2:00 p.m. for robing and assembly.<br/>
Delegates are expected to furnish their own academic regalia.
</div>
</body></html>
Just for fun, here is the layout you wanted using lists.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>container Title</title>
<style type="text/css" media="screen">
body {
font-family:Georgia;
}
#container {
width:700px;
margin:0 auto;
}
ul {
display:block;
margin:0;
padding:0px;
width:50%;
float:left;
}
ul.full {
margin:0 auto;
float:none;
clear:both;
padding-top:5px;
}
ul li {
list-style-type:none;
margin:0;
padding:0;
padding-left:10px;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><h4>Inauguration</h4></li>
<li>Friday, April 17, 2009</li>
<li>3:00 p.m.</li>
<li>Sarkus-Busch Theater</li>
<li>Robert McLaughlin College Center</li
></ul>
<ul>
<li><h4>Inaugural Gala</h4></li>
<li>7-11 p.m.</li>
<li>Robert McLaughlin College Center</li>
<li>Featuring hors d'oeuvres, open bar and dinner and dessert stations</li>
<li>Entertainment by Frankie Michaels</li>
<li>Cocktail Attire Recommended</li>
<li>Tickets are $100 per person</li>
<li>Proceeds benefit the Herkimer County College Foundation</li>
</ul>
<ul class="full">
<li><h4>Important Information for Delegates</h4></li>
<li>Direction to HCCC</li>
<li>Campus Map</li>
<li>Lodging Information</li>
<li>Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.</li>
<li>Delegates are expected to furnish their own academic regalia. </li>
</ul>
</div>
</body>
</html>
I wouldn't style this with a list, just use divs.
<style type="text/css">
.left { float:left; }
.right { float:right; }
.half { width:50%; }
.centered { text-align:center; }
// from http://www.webtoolkit.info/css-clearfix.html
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
<div class="clearfix">
<div style="left half">
<strong>Inauguration</strong><br />
Friday, April 17, 2009<br />
3:00 p.m.<br />
Sarkus-Busch Theater<br />
Robert McLaughlin College Center<br />
</div>
<div style="right half">
<strong>Inaugural Gala</strong><br />
7-11 p.m.<br />
Robert McLaughlin College Center<br />
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br />
Entertainment by Frankie Michaels<br />
Cocktail Attire Recommended<br />
Tickets are $100 per person<br />
Proceeds benefit the Herkimer County College Foundation<br />
</div>
</div>
<div class="centered">
<strong>Important Information for Delegates</strong><br />
Direction to HCCC<br />
Campus Map<br />
Lodging Information<br />
Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.<br />
Delegates are expected to furnish their own academic regalia.<br />
</div>
<div style="width:49%; float:left"><p>
Inauguration<br/>
Friday, April 17, 2009<br/>
3:00 p.m.<br/>
Sarkus-Busch Theater<br/>
Robert McLaughlin College Center</p>
</div>
<div style="width:49%; float:left"><p>
Inaugural Gala<br/>
7-11 p.m.<br/>
Robert McLaughlin College Center<br/>
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br/>
Entertainment by Frankie Michaels<br/>
Cocktail Attire Recommended<br/>
Tickets are $100 per person<br/>
Proceeds benefit the Herkimer County College Foundation</p>
</div>
<div style="width:50%;margin:auto "><p>
Important Information for Delegates<br/>
Direction to HCCC<br/>
Campus Map<br/>
Lodging Information<br/>
Delegates marching in the Inaugural Procession should
report to the Open Student Area, first floor of the
Library Complex at 2:00 p.m. for robing and assembly.<br/>
Delegates are expected to furnish their own academic regalia.</p>
</div>