Hey i'am in a big problem with this program please pls help me

HTML & CSS
1 
<html>
<style>
body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: maroon;
     position: fixed;
     top: 0;
  width:100%;
}

li {
    float: right;
}

li a {
    display: block;
    color: whitesmoke;
    text-align: center;
    padding: 15px 16px;
    text-decoration: none;
	font-family:georgia;
	font-size:17px;
	letter-spacing:0px;
}

li a:hover:not(.active) {
    background-color:#3d1010;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
    <li><a href="contact.html">I</a></li>
 <li><a href="crop.html">ME</a></li>
<li><a href="#Home"> MYSELF</a></li>



<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="good morning..." />
  </div>	
  </ul>
<style>
  .box{
  margin-top:17px;
  margin-left: 333px;
    border-radius:22px
  width: 444px;
  height:0px;
   color: red;
  outline:yellow;
  position: scroll;
  color: green;
   -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  
}
 </style>
 </ul>


<div style="padding:20px;margin-top:25px;background-color:whitesmoke;height:2000px;">


<p><a href="ROCK#" style="text-decoration:none"> ROCK </a></p>
<style>

p{
  display: block;
  border: 1px solid black;
   text-align: center;
   font-size:18px;
  padding: 37px;
  width: 67px;
  color: black;
  font-family:arialblack;
  background-color:green;
  position:auto;
  right:0px;
  margin-top:22px;
}
a{
  color:black;
}
a:hover {
    color:ghostwhite;
}
</style>



<p2><a href="#varun" style="text-decoration:none"> VARUN </a></p2>
<style>

p2{
  display: block;
  border: 1px solid black;
   text-align: center;
   font-size:18px;
  padding: 40px;
  width: 70px;
  color: black;
  font-family:arialblack;
  background-color:green;
  position:absolute;
  left:0px;
  margin-top:92px;
}
a{
  color:black;
}
a:hover {
    color:ghostwhite;
}
</style>

{{{RUN THIS PROGRAM IN YOUR EDITOR OR NOTEPAD++ AND SEE IT, MY PROBLEM IS THAT CAN YOU SEE TWO BOX rock and rohal I WANT THAT BOX TO STICK TO THE LEFT OF MY MARGIN LIKE varun box is STICK

4

Your HTML is a mess. For a start you have a closing </head> tag but no start head tag. All your styles should be in the head section, not in the body

Pleas don’t post repeated requests. We cannot provide immediate responses.

1 Like
5

but you slove and give na

6

I have no idea what this means.

Where did you get this code from?

7

i made by myself.
but you just slove please.
just make that rock box to the margin-left:0px;
like varun box.

8

The top box is not right on the edge because of the padding of the parent div.
The second box is on the edge because it has position:absolute set, meaning that 'left:0` places it there.
So the first box needs those two setting too.
But as gandalf458 mentions, the code is very poorly structured and needs to be re-arranged.

9

Before anyone can help you to get your page to do what you want it to do you need to make sure your HTML is written properly - which it is not!

  1. Put an opening <head> tag

  2. Put all your styles in the head section

  3. There is no such tag as <p2>

1 Like
10

there is a tag like p2 or p3 etc if my p class matches then i need to change their name in such a way that they can’t be matched.

11

If you want to use classes, you need <p class=“p2”>

1 Like
12

No there is not. You may be confusing them with h1, h2, h3, etc, tags, those are Heading tags. p is a paragraph tag, there is no p2 tag.

2 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.