$https://jsbin.com/huqukopixe/edit?html,output
こんにちは、これは練習のためのedX宿題です。コードでは、バナーに罫線が表示されます。この国境はそこにあるべきではありません。私はソーシャルメディアのアカウントpngで強調するために境界線を作ろうとしていました。しかし、残念ながら私はそれをもっと小さくすることはできませんでした。アンディアドバイス？ボーダーの問題
alredyありがとうございます。
私はあなたが白い境界線がなくなっている、とあなたはpadding-left: 1000pxを削除する場合は、また、ソーシャルメディアのアイコンが表示されます、それを削除した場合、あなたの#mediaは、border-style: solidを持っていることがわかりました。
それは#mediaセレクタにborder-styleによって引き起こされています。あなたのCSSを調整してください。
変更
#media {
padding-left: 1000px;
border-color: white;
position: relative;
}
https://jsbin.com/haxaluweme/1/edit?html,output
そして、あなたは白い境界線を維持したいだけのソーシャルメディアのアイコンである場合に
#media {
padding-left: 1000px;
border-style: solid;
border-color: white;
position: relative;
}
：
<!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">
<a href="https://www.instagram.com/brkymakas/" rel="author"><img src="http://pngimg.com/uploads/instagram/instagram_PNG10.png" alt="Instagram Logo" width="50" height="50"></a>
<a href="https://www.linkedin.com/in/berkay-makas-55014b126/?ppe=1" rel="author"><img src="http://www.imagespng.com/Data/Logo/Linkedin-Picture-180x180.png" width="55" height="55"></a>
</div>
</div>
<h1 id="headerone"><i>Recipes for lunch!</i></h1>
<nav>
<ul style="display: inline;"><a href="#firstone" style="text-decoration: none; padding: .2em 1em;">Chicken with Sourdough-Mushroom Stuffing</a></ul>
<ul style="display: inline"><a href="#secondone" style="text-decoration: none; padding: .2em 1em;">Blueberry-Sour Cream Dessert</a></ul>
<ul style="display: inline"><a href="#" style="text-decoration: none; padding: .2em 1em;">Main Page</a></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;"><a href="#firstone" style="text-decoration: none; padding: .2em 1em;">Chicken with Sourdough-Mushroom Stuffing</a></ul>
<ul style="display: inline"><a href="#secondone" style="text-decoration: none; padding: .2em 1em;">Blueberry-Sour Cream Dessert</a></ul>
<ul style="display: inline"><a href="#" style="text-decoration: none; padding: .2em 1em;">Main Page</a></ul>
</nav>
</footer>
</body>
</html>