$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>
Related
I am currently working on a web page and I have encountered an issue with my list items. The dots and numbers that usually appear next to each list item are not showing up. Additionally, when i remove the overflow-x: hidden; property in my CSS the list items numbers and dots show immediately, the texts are showing all the time though.
**THIS IS THE HTML**
<body>
<main>
<section>
<div>
<h2 id="getting-started" class="heading-color mt-5">
GETTING STARTED
</h2>
<p>
There are 2 ways to join Fyre Skin Brand Partnership Program.
</p>
<ol>
<li>
Join directly from the Fyre Skin website by clicking the
link.
<a href="https://brandpartner.fyreskin.com.ng/register"
>Register</a
>
</li>
<li>
Join using the link of a brand partner that recommended you
and they automatically become you Up-line partner and you
their Down-line partner.
</li>
</ol>
<p>
If you decide to join, the startup registration is 25,000
Naira with a monthly renewal of 10,000 Naira.
</p>
<p>Your monthly subscription gives you access to</p>
<ul>
<li>
Your own back office dashboard were you can see your
commission, payments, pending payments, bonuses, sales made
using your link, clients who bought using your link, team
members profile, team members sales and profit and marketing
tools .
</li>
<li>
Your own personalise Fyre Skin website that your potential
clients can shop with.
</li>
<li>
Your personalised brand partnership link for potential
clients .
</li>
<li>
Your personalised Networking link for building your own
team.
</li>
<li>Growth and development training for personal growth.</li>
<li>A community of entrepreneurs that you can learn from.</li>
</ul>
<p>
<span class="fw-bold">How to get started - </span>For us at
Fyre Skin convenience is everything that why we built a
website that’s swift and easy to access by both brand partners
and clients.
</p>
<ol>
<li>
After signing up and creating an account, login into your
back office the click copy
<span class="fw-bold">‘default brand partners link’</span>.
Share your link on
<span class="fw-bold">social platforms</span> that can be
visible potential clients.
</li>
<img src="" />
<div>
<ol>
<li>Create a target audience</li>
<li>
Set a daily goal target that includes number of people and
how much he want to make.
</li>
<li>Set the amount of times he want to work a week.</li>
<li>Products and services he want to market (optional)</li>
</ol>
</div>
<p>Target: 40% male, 60% female</p>
<p>Goals: 4 people a day, ₦50,000 a day</p>
<p>Work: 4 times a week</p>
<p>
<span>
*lets assume Ade already did his homework by attending our
webinars, where he learnt how to market like a pro and he
already posted his business links on every social platform
and uses his online messaging apps.
</span>
</p>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 1</h5>
</div>
<p>
Ade’s target for the day is 4 people and he got 2 men and 2
women.
</p>
<p><span>MEN</span></p>
<p>1st man did deep tissue massage and jelly pedicure</p>
<p>
2nd man never left his house, he just order online 1 ultra
shade Creamy gel and 1 Lightening glow milk
</p>
<p><span>WOMEN</span></p>
<p>
1st woman did a brightening facials and braided her hair
</p>
<p>
2nd woman did a botanical pedicure and botanical manicure
</p>
<div>
<table
class="table table-responsive table-bordered border-dark"
>
<tr class="th">
<th>MEN</th>
<th>PRICE</th>
<th>WOMEN</th>
<th>PRICE</th>
</tr>
<tr>
<td>Deep Tissues massage</td>
<td>12,000</td>
<td>Brightening facials</td>
<td>9,000</td>
</tr>
<tr>
<td>Jelly Pedicure</td>
<td>5,000</td>
<td>Corn row</td>
<td>5,000</td>
</tr>
<tr>
<td>Ultra shade creamy gel</td>
<td>5,000</td>
<td>Botanical pedicure</td>
<td>5,000</td>
</tr>
<tr>
<td>Lightening glow milk</td>
<td>10,000</td>
<td>Botanical manicure</td>
<td>3,000</td>
</tr>
<tr>
<td>TOTAL</td>
<td>32,000</td>
<td>TOTAL</td>
<td>22,000</td>
</tr>
</table>
<div class="heading-color "><h5 class="total">OVERALL TOTAL =54,000</h5></div>
</div>
</div>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 2</h5>
</div>
<p>Ade repeated same target as day 1.</p>
<p>
4 people but this time his message only attracted 4 women
who just wanted to do the best friends package and relax
themselves.
</p>
<p><span>WOMEN</span></p>
<p>2 best-friends package comprises of 3 services each -</p>
<p>
deep cleansing facials, Swedish massage and botanical
pedicure
</p>
<div>
<table
class="table table-responsive table-bordered border-dark"
>
<tr class="th">
<th>WOMEN</th>
<th>PRICE</th>
</tr>
<tr>
<td>Best friend package</td>
<td>42,000</td>
</tr>
<tr>
<td>Best friend package</td>
<td>42,000</td>
</tr>
</table>
<div class="heading-color">
<h5 class="total" >OVERALL TOTAL =84,000</h5>
</div>
</div>
</div>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 3</h5>
</div>
<p>
Same target, same goal. 4 people. Repeated strategy brings
repeated results
</p>
</body>
</html>
MY CSS
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* Custom color variables */
*{
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
:root {
--primary: #e67e22;
--secondary: #16a085;
--success: #2ecc71;
--danger: #e74c3c;
--warning: #F0FF42;
--info: #3498db;
--light: #f5f5f5;
--dark: #2c3e50;
}
.container
{
font-weight: 400;
}
img{
width: auto;
border-radius: 1rem;
}
a{
font-family: 'Roboto', sans-serif;
}
p{
text-align: left;
}
button {
height: 50px;
}
.header{
margin-left: 50px;
}
.sidebar{
background-color: #F0FF42;
}
.heading-color{
background-color: #F0FF42;
}
span{
font-weight: bold;
}
.th{
background-color: #F0FF42;
}
li{
font-weight: 600;
}
td{
font-weight: 600;}
.total{
text-align: center;
}
#media (max-width : 450px){
.container{
width: 375px;
margin: 2rem auto;
}
}
I have tried several solutions such as using different CSS selectors to target the list items, and also tried to override the overflow-x property with overflow-x: visible; but it gives me an overflow on my webpage. I have also checked for any other conflicting CSS styles that may be causing the issue, but I have not found any.
The list items' numbers and dots are showing in my snippet.
Try this:
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* Custom color variables */
*{
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
:root {
--primary: #e67e22;
--secondary: #16a085;
--success: #2ecc71;
--danger: #e74c3c;
--warning: #F0FF42;
--info: #3498db;
--light: #f5f5f5;
--dark: #2c3e50;
}
.container
{
font-weight: 400;
}
img{
width: auto;
border-radius: 1rem;
}
a{
font-family: 'Roboto', sans-serif;
}
p{
text-align: left;
}
button {
height: 50px;
}
.header{
margin-left: 50px;
}
.sidebar{
background-color: #F0FF42;
}
.heading-color{
background-color: #F0FF42;
}
span{
font-weight: bold;
}
.th{
background-color: #F0FF42;
}
li{
font-weight: 600;
}
td{
font-weight: 600;
}
.total{
text-align: center;
}
#media (max-width : 450px){
.container{
width: 375px;
margin: 2rem auto;
}
}
<html>
<body>
<main>
<section>
<div>
<h2 id="getting-started" class="heading-color mt-5">GETTING STARTED</h2>
<p>There are 2 ways to join Fyre Skin Brand Partnership Program.</p>
<ol>
<li>Join directly from the Fyre Skin website by clicking the link.
Register
</li>
<li>Join using the link of a brand partner that recommended you and they automatically become you Up-line partner and you their Down-line partner.
</li>
</ol>
<p>If you decide to join, the startup registration is 25,000 Naira with a monthly renewal of 10,000 Naira.</p>
<p>Your monthly subscription gives you access to</p>
<ul>
<li>Your own back office dashboard were you can see your commission, payments, pending payments, bonuses, sales made using your link, clients who bought using your link, team members profile, team members sales and profit and marketing tools.</li>
<li>Your own personalise Fyre Skin website that your potential clients can shop with.</li>
<li>Your personalised brand partnership link for potential clients.</li>
<li>Your personalised Networking link for building your own team.</li>
<li>Growth and development training for personal growth.</li>
<li>A community of entrepreneurs that you can learn from.</li>
</ul>
<p><span class="fw-bold">How to get started - </span>For us at Fyre Skin convenience is everything that why we built a website that’s swift and easy to access by both brand partners and clients.</p>
<ol>
<li>After signing up and creating an account, login into your back office the click copy <span class="fw-bold">‘default brand partners link’</span>. Share your link on <span class="fw-bold">social platforms</span> that can be visible potential clients.</li>
<img src="" />
<div>
<ol>
<li>Create a target audience</li>
<li>Set a daily goal target that includes number of people and how much he want to make.</li>
<li>Set the amount of times he want to work a week.</li>
<li>Products and services he want to market (optional)</li>
</ol>
</div>
<p>Target: 40% male, 60% female</p>
<p>Goals: 4 people a day, ₦50,000 a day</p>
<p>Work: 4 times a week</p>
<p>
<span>*lets assume Ade already did his homework by attending our webinars, where he learnt how to market like a pro and he already posted his business links on every social platform and uses his online messaging apps.
</span>
</p>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 1</h5>
</div>
<p>Ade’s target for the day is 4 people and he got 2 men and 2 women.</p>
<p><span>MEN</span></p>
<p>1st man did deep tissue massage and jelly pedicure</p>
<p>2nd man never left his house, he just order online 1 ultra shade Creamy gel and 1 Lightening glow milk</p>
<p><span>WOMEN</span></p>
<p>1st woman did a brightening facials and braided her hair</p>
<p>2nd woman did a botanical pedicure and botanical manicure</p>
<div>
<table class="table table-responsive table-bordered border-dark">
<tr class="th">
<th>MEN</th>
<th>PRICE</th>
<th>WOMEN</th>
<th>PRICE</th>
</tr>
<tr>
<td>Deep Tissues massage</td>
<td>12,000</td>
<td>Brightening facials</td>
<td>9,000</td>
</tr>
<tr>
<td>Jelly Pedicure</td>
<td>5,000</td>
<td>Corn row</td>
<td>5,000</td>
</tr>
<tr>
<td>Ultra shade creamy gel</td>
<td>5,000</td>
<td>Botanical pedicure</td>
<td>5,000</td>
</tr>
<tr>
<td>Lightening glow milk</td>
<td>10,000</td>
<td>Botanical manicure</td>
<td>3,000</td>
</tr>
<tr>
<td>TOTAL</td>
<td>32,000</td>
<td>TOTAL</td>
<td>22,000</td>
</tr>
</table>
<div class="heading-color ">
<h5 class="total">OVERALL TOTAL =54,000</h5>
</div>
</div>
</div>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 2</h5>
</div>
<p>Ade repeated same target as day 1.</p>
<p>4 people but this time his message only attracted 4 women who just wanted to do the best friends package and relax themselves.</p>
<p><span>WOMEN</span></p>
<p>2 best-friends package comprises of 3 services each -</p>
<p>deep cleansing facials, Swedish massage and botanical pedicure</p>
<div>
<table class="table table-responsive table-bordered border-dark">
<tr class="th">
<th>WOMEN</th>
<th>PRICE</th>
</tr>
<tr>
<td>Best friend package</td>
<td>42,000</td>
</tr>
<tr>
<td>Best friend package</td>
<td>42,000</td>
</tr>
</table>
<div class="heading-color">
<h5 class="total" >OVERALL TOTAL =84,000</h5>
</div>
</div>
</div>
<div>
<div class="heading-color mt-5">
<h5 style="margin-left: 10px">DAY 3</h5>
</div>
<p>
Same target, same goal. 4 people. Repeated strategy brings
repeated results
</p>
</body>
</html>
Good morning, afternoon or evening dear collogues.
I just finished learning the CSS box model and I decided to make a webpage to test my newly acquired CSS skills.
After testing my webpage, I noticed that some elements on the page overlap when the browser's area becomes lessen to one forth of its total area.
I tried to figure out what is wrong with my code, but unfortunately I can't find any reasons for the problem.
I would really appreciate it if someone could help me understand what is happening.
Here are two images that show what is happening in the browser.
The first image shows how the page behaves when it is half the size of the screen:
This is what happens when the browser is at 1/4 of its total area:
If you need some additional information you can check out the code I have written here:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: large;
}
table,
tr,
td,
th {
border: 1px solid darkorange;
}
.zero {
width: 100%;
min-height: 10vh;
border: 1px solid blue;
background-color: red;
position: fixed;
top: 0;
padding: 20px;
}
.zero h1 {
text-align: center;
font-size: 32px;
}
.main {
margin-top: 10vh;
}
.box {
border: 1px solid blue;
padding: 15px;
}
.one {
width: 20%;
height: 80vh;
background-color: rebeccapurple;
position: fixed;
float: left;
overflow: scroll;
}
.two {
background-color: burlywood;
float: left;
margin-left: 20%;
margin-bottom: 92px;
}
.two>* {
border: 1px solid green;
}
.two .solar-syst {
width: 30%;
min-width: 320px;
background-color: aqua;
float: right;
border: 1px solid green;
margin: 0 0 0 16px;
}
.two .solar-syst table {
word-break: break-all;
}
.two .article p {
margin: 0 0 16px 0;
}
.two .solar-main img {
width: 60%;
display: block;
margin: 0 auto 16px auto;
}
.two .solar-main::after {
clear: both;
content: '';
display: block;
}
.two .structure {
margin: 16px 0 0 0;
background-color: brown;
}
.three {
width: 30%;
background-color: fuchsia;
float: left;
}
.footer {
width: 100%;
height: 10vh;
border: 1px solid green;
background-color: brown;
position: fixed;
bottom: 0;
text-align: center;
}
<div class="main">
<div class="box one">
<ul>
<li>1 Structure and composition</li>
<li>
</li>
<li>1.2 Composition</li>
<li>1.3 Distances and scales</li>
<li>2 Formation and evolution</li>
<li>3 Sun</li>
<li>4 Interplanetary medium</li>
<li>5 Inner Solar System</li>
<li>5.1 Inner planets</li>
<li>5.1.1 Mercury</li>
<li>5.1.2 Venus</li>
<li>5.1.3 Earth</li>
<li>5.1.4 Mars</li>
<li>5.2 Asteroid belt</li>
<li>5.2.1 Ceres</li>
<li>5.2.2 Pallas and Vesta</li>
<li>5.2.3 Asteroid groups</li>
<li>6 Outer Solar System</li>
<li>6.1 Outer planets</li>
<li>6.1.1 Jupiter</li>
<li>6.1.2 Saturn</li>
<li>6.1.3 Uranus</li>
<li>6.1.4 Neptune</li>
<li>6.2 Centaurs</li>
<li>7 Comets</li>
<li>8 Trans-Neptunian region</li>
<li>8.1 Kuiper belt</li>
<li>8.1.1 Pluto and Charon</li>
<li>8.1.2 Others</li>
<li>8.2 Scattered disc</li>
<li>8.2.1 Eris and Gonggong</li>
<li> 9 Farthest regions</li>
<li>9.1 Heliosphere</li>
<li>9.2 Detached objects</li>
<li>9.3 Oort cloud</li>
<li>9.4 Boundaries</li>
<li>10 Galactic context</li>
<li>10.1 Celestial neighbourhood</li>
<li>10.2 Comparison with extrasolar systems</li>
<li>11 Humanity's perspective</li>
<li>12 See also</li>
<li>13 Notes</li>
<li>14 References</li>
<li>15 External links</li>
</ul>
</div>
<div class="box two">
<div class="article solar-main">
<div class="solar-syst">
<table>
<tr>
<td>Age</td>
<td>4.568 billion years</td>
</tr>
<tr>
<td>
Location
</td>
<td>
Local Interstellar Cloud, Local Bubble, Orion–Cygnus Arm, Milky Way
</td>
</tr>
<tr>
<td>System mass</td>
<td>1.0014 solar masses</td>
</tr>
<tr>
<td>
Nearest star
</td>
<td>
Proxima Centauri (4.2441 ly) Alpha Centauri (4.37 ly)
</td>
</tr>
<tr>
<td>
Nearest known planetary system
</td>
<td>
Proxima Centauri system (4.2441 ly)
</td>
</tr>
<tr>
<th colspan="2">Planetary system</th>
</tr>
<tr>
<td>
Semi-major axis of outer known planet (Neptune)
</td>
<td>
30.11 AU (4.5 bill. km; 2.8 bill. mi)
</td>
</tr>
<tr>
<td>
Distance to Kuiper cliff
</td>
<td>
~50 AU
</td>
</tr>
<tr>
<th colspan="2">Populations</th>
</tr>
<tr>
<td>
Stars
</td>
<td>
1 (Sun)
</td>
</tr>
<tr>
<td>
Known planets
</td>
<td>
8 declared by IAU: MercuryVenusEarthMarsJupiterSaturnUranusNeptune
</td>
</tr>
<tr>
<td>
Known dwarf planets
</td>
<td>
9 by general consensus: CeresOrcusPlutoHaumeaQuaoarMakemakeGonggongErisSedna
</td>
</tr>
<tr>
<td>
Known natural satellites
</td>
<td>
657 (206 planetary451 minor planetary)[1]
</td>
</tr>
<tr>
<td>
Known minor planets
</td>
<td>
1,199,224
</td>
</tr>
<tr>
<td>
Known comets
</td>
<td>
4,402
</td>
</tr>
<tr>
<td>
Identified rounded satellites
</td>
<td>
19
</td>
</tr>
<tr>
<th colspan="2">Orbit about Galactic Center</th>
</tr>
<tr>
<td>
Invariable-to-galactic plane inclination
</td>
<td>
60.19° (ecliptic)
</td>
</tr>
<tr>
<td>
Distance to Galactic Center
</td>
<td>
27,000 ± 1,000 ly
</td>
</tr>
<tr>
<td>
Orbital speed
</td>
<td>
220 km/s; 136 mi/s
</td>
</tr>
<tr>
<td>
Orbital period
</td>
<td>
225–250 myr
</td>
</tr>
<tr>
<th colspan="2">Star-related properties</th>
</tr>
<tr>
<td>
Spectral type
</td>
<td>
G2V
</td>
</tr>
<tr>
<td>
Frost line
</td>
<td>
≈5 AU[3]
</td>
</tr>
<tr>
<td>
Distance to heliopause
</td>
<td>
≈120 AU
</td>
</tr>
<tr>
<td>
Hill sphere radius
</td>
<td>
≈1–3 ly
</td>
</tr>
</table>
</div>
<p>
The Solar System[c] is the gravitationally bound system of the Sun and the objects that orbit it. It formed 4.6 billion years ago from the gravitational collapse of a giant interstellar molecular cloud. The vast majority (99.86%) of the system's mass
is in the Sun, with most of the remaining mass contained in the planet Jupiter. The four inner system planets—Mercury, Venus, Earth and Mars—are terrestrial planets, being composed primarily of rock and metal. The four giant planets of the outer
system are substantially larger and more massive than the terrestrials. The two largest, Jupiter and Saturn, are gas giants, being composed mainly of hydrogen and helium; the next two, Uranus and Neptune, are ice giants, being composed mostly
of volatile substances with relatively high melting points compared with hydrogen and helium, such as water, ammonia, and methane. All eight planets have nearly circular orbits that lie near the plane of Earth's orbit, called the ecliptic.
</p>
<p>There are an unknown number of smaller dwarf planets and innumerable small Solar System bodies orbiting the Sun.[d] Six of the major planets, the six largest possible dwarf planets, and many of the smaller bodies are orbited by natural satellites,
commonly called "moons" after the Moon. Two natural satellites, Jupiter's moon Ganymede and Saturn's moon Titan, are larger but not more massive than Mercury, the smallest terrestrial planet, and Jupiter's moon Callisto is nearly as large. Each
of the giant planets and some smaller bodies are encircled by planetary rings of ice, dust and moonlets. The asteroid belt, which lies between the orbits of Mars and Jupiter, contains objects composed of rock, metal and ice. Beyond Neptune's orbit
lie the Kuiper belt and scattered disc, which are populations of objects composed mostly of ice and rock.
</p>
<p>There are an unknown number of smaller dwarf planets and innumerable small Solar System bodies orbiting the Sun.[d] Six of the major planets, the six largest possible dwarf planets, and many of the smaller bodies are orbited by natural satellites,
commonly called "moons" after the Moon. Two natural satellites, Jupiter's moon Ganymede and Saturn's moon Titan, are larger but not more massive than Mercury, the smallest terrestrial planet, and Jupiter's moon Callisto is nearly as large. Each
of the giant planets and some smaller bodies are encircled by planetary rings of ice, dust and moonlets. The asteroid belt, which lies between the orbits of Mars and Jupiter, contains objects composed of rock, metal and ice. Beyond Neptune's orbit
lie the Kuiper belt and scattered disc, which are populations of objects composed mostly of ice and rock.
</p>
<p>
In the outer reaches of the Solar System lies a class of minor planets called detached objects. There is considerable debate as to how many such objects there will prove to be.[9] Some of these objects are large enough to have rounded under their own
gravity and thus to be categorized as dwarf planets. Astronomers generally accept about nine objects as dwarf planets: the asteroid Ceres, the Kuiper-belt objects Pluto, Orcus, Haumea, Quaoar and Makemake, the scattered-disk objects Gonggong and
Eris, and Sedna.[d] Various small-body populations, including comets, centaurs and interplanetary dust clouds, freely travel between the regions of the Solar System.
</p>
<p>
The solar wind, a stream of charged particles flowing outwards from the Sun, creates a bubble-like region of interplanetary medium in the interstellar medium known as the heliosphere. The heliopause is the point at which pressure from the solar wind is
equal to the opposing pressure of the interstellar medium; it extends out to the edge of the scattered disc. The Oort cloud, which is thought to be the source for long-period comets, may also exist at a distance roughly a thousand times further
than the heliosphere. The Solar System is located 26,000 light-years from the center of the Milky Way galaxy in the Orion Arm, which contains most of the visible stars in the night sky. The nearest stars are within the so-called Local Bubble,
with the closest, Proxima Centauri, at 4.2441 light-years.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Solar_System_true_color.jpg" alt="solar-system">
</div>
<div class="article structure">
<h3>Structure and composition</h3>
<p>
The word solar means "pertaining to the Sun", which is derived from the Latin word sol, meaning Sun.[10] The Sun is the dominant gravitational member of the Solar System, and its planetary system is maintained in a relatively stable, slowly evolving state
by following isolated, gravitationally bound orbits around the Sun.
</p>
</div>
</div>
<div class="footer">
<p>box 4</p>
</div>
</div>
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>
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.