CSS menu de navigation en ligne et le titre du site Web

Question

Donc c'est la première fois que j'utilise CSS (été à travers une documentation) et j'ai ce problème.

J'ai créé un menu de navigation, un horizontal sur le côté droit, et je veux avoir le titre du site sur le côté gauche, en ligne avec elle. J'ai essayé quelques trucs, mais soit il se lève et déplace le menu plus bas, soit le place sous le menu.

La dernière chose que j'ai essayé a fonctionné mais il semble que je ne puisse plus utiliser la propriété padding-top (cependant, je peux utiliser padding-left). Je serais reconnaissant si l'un de vous pourrait m'aider avec cette dernière chose. Je vous remercie!

Le code CSS: (il est en désordre, je sais, comme je l'ai dit, mon premier :))

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    position: relative; 
    padding-top: 10px; 
    padding-right: 50px; 
} 

li { 
    float: right; 
    font-family: 'Raleway'; 
    font-size: 20px; 
} 

a { 
    display: block; 
    padding: 20px; 
    background-color: transparent; 
    color: black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

a:hover { 
    color: orangered; 
} 


/* Logo */ 

#logo { 
    float: left; 
    display: inline-block; 
    position: relative; 
    padding-left: 200px; 
    padding-top: -250px; 
    font-family: 'Raleway'; 
    font-size: 30px; 
} 


/* Fonts */ 


@font-face { 
    font-family: Raleway; 
    src: url(/css/fonts/raleway.ttf); 
} 

Answer 1

D'abord, vous ne pouvez pas mettre un <p> dans un <ul>.

Vous pouvez obtenir ce que vous voulez en plaçant le logo à l'intérieur d'un <li> et utiliser float:left;.

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    position: relative; 
 
    padding-top: 10px; 
 
    padding-right: 50px; 
 
} 
 

 
li { 
 
    float: right; 
 
    font-family: 'Raleway'; 
 
    font-size: 20px; 
 
} 
 

 
a { 
 
    display: block; 
 
    padding: 20px; 
 
    background-color: transparent; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    color: orangered; 
 
} 
 

 

 
/* Logo */ 
 

 
#logo { 
 
    float: left; 
 
    font-size: 30px; 
 
} 
 

 

 
/* Fonts */ 
 

 

 
@font-face { 
 
    font-family: Raleway; 
 
    src: url(/css/fonts/raleway.ttf); 
 
}

   <ul> 
 
        <li id="logo">Cluj</li> 
 
        
 
        <li><a href="contact.html">CONTACT</a></li> 
 
        <li><a href="imagini.html">IMAGINI</a></li> 
 
        <li><a href="stiri.html">STIRI</a></li> 
 
        <li><a href="evenimente.html">EVENIMENTE</a></li> 
 
        <li><a href="index.html">ACASA</a></li> 
 
       </ul>