1. 首頁
  2. 問答
  3. 邊框問題

邊框問題

2017-07-14 298 views
0 
$https://jsbin.com/huqukopixe/edit?html,output

大家好，這是一個edX的練習功課。在代碼中，您會在橫幅上看到一個邊框。這個邊界不應該在那裏。我試圖用邊界來強調社交媒體帳戶png的。但不幸的是，我無法讓它變得更小。安迪的建議？邊框問題

謝謝alredy。

來源

2017-07-14 Berkay Makas

回答

0

我發現，你的#media有border-style: solid，如果你刪除它的白色的邊框消失了，如果你刪除padding-left: 1000px你也將看到社交媒體的圖標。

See this.

來源

2017-07-14 08:06:30 Zabusy

0

它正在對#media選擇造成border-style。調整你的CSS。

變化

#media { 
    padding-left: 1000px; 
    border-style: solid; 
    border-color: white; 
    position: relative; 
}

到

#media { 
    padding-left: 1000px; 
    border-color: white; 
    position: relative; 
}

https://jsbin.com/haxaluweme/1/edit?html,output

如果你想保持白色邊框，但只在社交媒體圖標：

<!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>

來源

2017-07-14 08:10:04 Companjo

相關問題

 相關問題