2016-09-21 2 views
0

Je suis nouveau en HTML et CSS.Je veux ajouter du texte/image du côté gauche de la barre de menu.Comment faire? Trouvé beaucoup d'autres façons, mais ne pouvait pas correspondre avec le code que j'ai. c'est le code jeComment ajouter du texte à partir du côté gauche de la barre de menu en HTML

<html> 
 
<title>TEST</title> 
 
<link rel="icon" type="image/png" href="logo1.png"/> 
 
<h1 ><font color="white">TEST</font></h1> 
 
<head> 
 
<style> 
 
    ul { 
 
    list-style-type: none; 
 
    width:75%;  
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #339cff; 
 
    } 
 
    li { 
 
     float: left; 
 
    } 
 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover:not(.active) { 
 
     background-color: #345cff; 
 
    } 
 
    .active { 
 
    background-color: #ff9333; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
<ul> 
 
<li><a class="active" href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">ontact</a></li> 
 
</ul> 
 
</body> 
 

 

 
<body background="background.jpg"> 
 
<br> 
 

 
    <h5 style="position: fixed; bottom: 0; width:100%;text-align: center"><font color="yellow"><strong> Copyright © TEST 2016 All Rights Reserved.</strong></font></h5> 
 
<img src="banner.jpg" style="width:100%;"> 
 
</body> 
 
</html>

WHERE I WANT TO SHOW THE TEXT

Répondre

0

p { 
 
    \t display: inline-block; 
 
    \t float: left; 
 
} 
 
    ul { 
 
    list-style-type: none; 
 
    width:75%;  
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #339cff; 
 
    display: inline-block; 
 
    float: left; 
 
    } 
 
    li { 
 
     float: left; 
 
    } 
 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover:not(.active) { 
 
     background-color: #345cff; 
 
    } 
 
    .active { 
 
    background-color: #ff9333; 
 
    }
<p>Hello World!</p> 
 
<ul> 
 
<li><a class="active" href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">ontact</a></li> 
 
</ul> 
 
</body> 
 

 

 
<body background="background.jpg"> 
 
<br> 
 

 
    <h5 style="position: fixed; bottom: 0; width:100%;text-align: center"><font color="yellow"><strong> Copyright © TEST 2016 All Rights Reserved.</strong></font></h5> 
 
<img src="banner.jpg" style="width:100%;">

+0

cette méthode fonctionne, mais comment combiner avec le reste du code? – Manjula

+0

Je ne comprends pas! Ce que vous voulez dire? –

+0

votre code fonctionne parfaitement en snippet et vous avez ce que je veux faire.quand il s'applique à d'autres codes il fait mess.what devrais-je ajouter le formulaire ci-dessus et en bas à votre code pour fonctionner normalement comme il fonctionne sur l'extrait – Manjula

0

ul { 
 
    list-style-type: none; 
 
    width:75%;  
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #339cff; 
 
    display: inline-block; 
 
    float: left; 
 
    } 
 
    li { 
 
     float: left; 
 
    } 
 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover:not(.active) { 
 
     background-color: #345cff; 
 
    } 
 
    .active { 
 
    background-color: #ff9333; 
 
    }
<body> 
 
<ul> 
 
<li><a class="active" href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">ontact</a></li> 
 
</ul> 
 
</body> 
 

 

 
<body background="background.jpg"> 
 
<br> 
 

 
    <h5 style="position: fixed; bottom: 0; width:100%;text-align: center"><font color="yellow"><strong> Copyright © TEST 2016 All Rights Reserved.</strong></font></h5> 
 
<img src="banner.jpg" style="width:100%;"> 
 
</body>