Im beginner, could you help me find mistake in HTML and css

HTML & CSS
1

I have written some html and css code but i cant find mistake. I would like place menue ( list) inline with website name. What i am asking you is help to improve me initial code ( if its possible) . I insist on that because i want see what i have to change in my thinking approach of writting html and css.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Website name.com</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
<div class="wrap">
<h1><a href="index.html">Website name<em><b>.com</b></em></a></h1>


<ul class="a">
<li><a href="#">Log in</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Help</a></li>
</ul>

</div>


<footer> footer <footer/>

</body>
</html>

.wrap {
	width: 100%;
    margin: auto;
	background: white ;
	    }
a { 
color: #666;
text-decoration: none;
font-family: sans-serif;
text-shadow: 1 1px 0 black;
font-size: 44px;

}
.wrap ul 
{
float: right; 
display: inline;
}

.wrap ul a { 
color: red;
font-size: 25px;
 
}

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

2

The h1 must be floated. I see you want to float the menu and that’s almost correct - had the menu been first in the HTML (apposed to the H1) it would work.

Two options - Put the menu before your H1. Or float the H1

3

Why my css (display : inline) doesnt work ?? List is still in column not row?

4

You flaoted it. Floating negates display. But that is aside from the fact that the FIRST element you want inline must have the float. Not the second. The second can have float but the first is what is needed.

5

you need to use .wrap h1 a {

}
a {
color: #666;
text-decoration: none;
font-family: sans-serif;
text-shadow: 1 1px 0 black;
font-size: 44px;

problem in thiss code

2…<link rel="stylesheet" type="text/css" href="style.css"/> please use here backslach i can be create problem

EDIT
This post has been reformatted by enclosing the inline code with backticks
`
before and after the code.

6

Hello 5t6z7u8i9o

Here is a basic solution:

<!-- Before your list/menu ... -->

<ul>
  <li><h1>Title</h1></li>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<!-- After your list ... -->

ul {
  list-style: none;
}
li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px
}

Be careful, never use a as name as your class.

7

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