ZuoTi.Pro
Question

In my HTML and CSS pages I want to make this aside output in 2 even...

In my HTML and CSS pages I want to make this aside output in 2 even columns rather than the way it is (do I need a column layout?), below is my code for the html AND the CSS:

HTML:

<aside>
       <h3>Surfer Slang</h3>
    <dl>
       <dt>barney</dt>
       <dd>A new and inexperienced surfer</dd>

       <dt>boost</dt>
       <dd>To take off from a wave into an aerial</dd>

       <dt>cutback</dt>
       <dd>To change direction when streaking ahead of the curl</dd>

       <dt>gandalf</dt>
       <dd>An experienced wise older surfer</dd>

       <dt>green room</dt>
       <dd>The inside of a tube</dd>

       <dt>grommet</dt>
       <dd>A very young surfer, a child</dd>

       <dt>gurfer</dt>
       <dd>A girl surfer</dd>

       <dt>hobble-bobble</dt>
       <dd>An aerial launch while flapping your arms like a bird</dd>

       <dt>quiver</dt>
       <dd>A collection of surfboards</dd>
    </dl>
</aside>

CSS:

aside {
    background-color: aliceblue;
    flex: 1 1 200px;
    font-family: "Trebuchet MS", sans-serif;
    border: 1px solid darkblue;
    margin-top: 1%;
}

aside h3{
    width: 100%;
    font-size: large;
    font-family: "Trebuchet MS", sans-serif;
    color: aliceblue;
    padding-top: .5em;
    padding-bottom: .5em;
    margin-bottom: .5em;
    background-color: seagreen;
    padding-right: 1em;
    padding-left: 1em;
}


aside dl dt {
    font-weight: bold;
    color: seagreen;
    padding-bottom: .2em;
    padding-left: 1em;
}

aside dl dd{
    padding-left: .5em;
    padding-bottom: 1%;
    font-style: italic;
    color: darkslateblue;
}

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Dear Student ,

As per requirement submitted above kindly find below solution.

Here new web page with name "Slang.html" is created which contains below code.

Slang.html :

<!DOCTYPE html>

<html lang="en">

<head>

    <!-- title for web page -->

    <title>Aside</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        /* style rule for aside */

        aside {

            background-color: aliceblue;

            flex: 1 1 200px;

            font-family: "Trebuchet MS", sans-serif;

            border: 1px solid darkblue;

            margin-top: 1%;

        }

        /* style rule for h3 */

        aside h3 {

            width: 100%;

            font-size: large;

            font-family: "Trebuchet MS", sans-serif;

            color: aliceblue;

            padding-top: .5em;

            padding-bottom: .5em;

            margin-bottom: .5em;

            background-color: seagreen;

            padding-right: 1em;

            padding-left: 1em;

        }

        /* style for dl in aside */

        aside dl {

            column-count: 2;

        }

        /* style rule for dt */

        aside dl dt {

            font-weight: bold;

            color: seagreen;

            padding-bottom: .2em;

            padding-left: 1em;

        }

        /* style rule for dd */

        aside dl dd {

            padding-left: .5em;

            padding-bottom: 1%;

            font-style: italic;

            color: darkslateblue;

        }

    </style>

</head>

<body>

    <aside>

        <h3>Surfer Slang</h3>

        <dl>

            <dt>barney</dt>

            <dd>A new and inexperienced surfer</dd>

            <dt>boost</dt>

            <dd>To take off from a wave into an aerial</dd>

            <dt>cutback</dt>

            <dd>To change direction when streaking ahead of the curl</dd>

            <dt>gandalf</dt>

            <dd>An experienced wise older surfer</dd>

            <dt>green room</dt>

            <dd>The inside of a tube</dd>

            <dt>grommet</dt>

            <dd>A very young surfer, a child</dd>

            <dt>gurfer</dt>

            <dd>A girl surfer</dd>

            <dt>hobble-bobble</dt>

            <dd>An aerial launch while flapping your arms like a bird</dd>

            <dt>quiver</dt>

            <dd>A collection of surfboards</dd>

        </dl>

    </aside>

</body>

</html>

==================================

Output :Open web page Slang.html in the browser and will get the screen as shown below.

Screen 1:Slang.html

NOTE :PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Add a comment
Know the answer?
Add Answer to:
In my HTML and CSS pages I want to make this aside output in 2 even...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE...

    How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>nitro site</title>     <link href="css/main.css" rel="stylesheet"/> </head> <body>     <header class="header">     <section class="navlist">         <img class="logo" src="assets/logobeans.png"/>         <h2 class="headertitle">nitro</h2>     <nav>         <ul>             <li><a href="index.html" target="_parent">About</a></li>             <li><a href="/html/menu.html" target="_blank">Menu</a></li>             <li><a href="/html/menu.html">Shop Now</a></li>         </ul>     </nav>     </section>     <section class="headerContainer">         <h1 class="heading">Nitro Coffee</h1>         <p class="productDesc">Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</p>...

  • Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /*...

    Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /* Date:           Today's Date --> September 22, 2019 /* Description:   Lab Number --> Lab04 /*doctype css*/ @import url(fonts/chuckfive.css); @import url(fonts/merriweather.css); body    { background-color: rgb(199,201,191);        } div { border: 1px solid black;        padding: 100px 100px 100px 100px;        background-color: gray; } nav { text-align: center;    color: rgb( 7,20,138); } header, footer   { background-color: rgb(199,201,199);        color:...

  • Apply the following styles: Set the width of the body element to 1000 pixels. Set the...

    Apply the following styles: Set the width of the body element to 1000 pixels. Set the width of the navigation element to 100%. Adjust the css and html to have your navigation list display horizontally (think floats and widths). Center the navigation element by setting the margin to auto. Clear the float for the section element. Set the width of all articles to 75%. Add a class to the articles that contains your favorite websites. Set the width of that...

  • HTML css When i refresh the page, the picture doesnt move at all for #i1 i...

    HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...

  • Modify an application that lets users add tasks to a list so the tasks can also...

    Modify an application that lets users add tasks to a list so the tasks can also be deleted when they’re completed. 1. In the HTML file, enclose the text for each of the three existing list items in a <p> element. Then, Add buttons like the ones shown above preceding the <p> elements. No ids or names are required for these buttons, but they should be assigned to the class named “delete”. 2. In the JavaScript file, modify the event...

  • In my HTML and CSS project I want to apply a picture to the bottom right...

    In my HTML and CSS project I want to apply a picture to the bottom right corner... can I get help on how to do this (ie code and a good example)? Here is a sample of my css code: CSS: html {     background: url(jb_back2.png) center center / cover no-repeat fixed; } body {     max-width: 960px;     margin-left: auto;     margin-right: auto;     /*display: -webkit-box;     display: -moz-box;     display: -ms-flexbox;     display: -webkit-flex;*/     display: flex;    ...

  • Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to...

    Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to have my text in the body, white. All text and the picture centered but how do I have margins on the left and right side?. I have a figcaption and I dont know have to place it under the picture but I am having a hard time. Can you help me? Thank you! HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

  • given below are the project description and their Html and css files i need javascript according...

    given below are the project description and their Html and css files i need javascript according to the project and other files! WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...

  • Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum...

    Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum number of quarters, dimes, nickels, and pennies that make up the number of cents specified by the user. Without the use of a JavaScript Library (for coins). 1.      Open the HTML and JavaScript files below: 2.      In the JavaScript file, note that three functions are supplied. The $ function. The start of a calculateChange function. And an onload event handler that attaches the calculateChange...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT