border

how can i make the "menu"have hese own border and background codes:

<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>order</title>
<link rel="stylesheet" href="hi.css">
</head>
<body>

<div class="menu">
<h1>menu</h1>
<h2>chiken burger</h2>
<h2>fried chiken</h2>
<h2>fried potato</h2>
<h2>ice cream</h2>
<h2>coffe</h2>
</div>
<div class="order">

</div>
        

<script src="hi.js"></script>
</body>
</html>

<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>order</title>
<link rel="stylesheet" href="hi.css">
</head>
<body>

<div class="menu">
<h1>menu</h1>
<h2>chiken burger</h2>
<h2>fried chiken</h2>
<h2>fried potato</h2>
<h2>ice cream</h2>
<h2>coffe</h2>
</div>
<div class="order">

</div>
        

<script src="hi.js"></script>
</body>
</html>

body{
    background-color: black;
}
.menu {
    color: white;
    position: absolute;
    left: 500px;
    top: 100px;
    border: solid green 2px;
    text-align: center;
    margin: auto;
}.menu1{
    color: white;
    position: absolute;
    left: 530px;
    top: 46px;
    border:green solid 2px;

    text-align: center;
    margin: auto;
    
}

body{
    background-color: black;
}
.menu {
    color: white;
    position: absolute;
    left: 500px;
    top: 100px;
    border: solid green 2px;
    text-align: center;
    margin: auto;
}.menu1{
    color: white;
    position: absolute;
    left: 530px;
    top: 46px;
    border:green solid 2px;

    text-align: center;
    margin: auto;
    
}

10 Replies

StefanH•10mo ago

What exactly is the problem? Just looking at the code i dont see why that css wouldn't work

StefanH•10mo ago

If you could make a codepen at https://pen.new that'd help a lot

CodePen

...

laith•10mo ago

oh mb forgot to add the photo

laith•10mo ago

laith•10mo ago

i whant to make the word "manu " to have a green background

Mannix•10mo ago

.menu h1 {background-color: green;}

.menu h1 {background-color: green;}

laith•10mo ago

i tried that but it dont fill like how can i change the height of it

laith•10mo ago

Mannix•10mo ago

try

.menu h1 {
    background-color: green;
    margin-top: 0;
}

.menu h1 {
    background-color: green;
    margin-top: 0;
}

there is default margin applied on some elements it's good to open dev tools and poke around and see what is going on 🙂

laith•10mo ago

ok thx

Gaming

Programming

border