5546 sujets

Sémantique web et HTML

Probleme de barre de navigation

Bonjour , comme dit dans le titre , j'ai des problèmes avec ma barre de navigations , elle est trop grande et un élément est décentrer ... J'ai commencer le code web cette semaine et je me doute très fortement que mon code soit blinder d'erreur donc si vous en voyer n’hésiter pas a me le dire Smiley smile
Je vous donne tous mon code:
HTML : 
 <!DOCTYPE html>
<html>
<head>
	<title>Transmath</title>
	<link rel="stylesheet" type="text/css" href="css_transmath.css">
	<link rel="stylesheet" type="text/css" href="Animation.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
</head>

<body>
	<div class="flex">
		<header>
		<p class="fb_logo"><a href="https://www.facebook.com/"><img src="fb_logo.png" alt="Facebook"></a></p>
		<div class="banner">
			<ul>
			 <li class="inv"></li> 
			 <li class="contact" class="bgslide"><a href="#"> Contact </a></li> 
			 <li class="title">Titres</li>
			 <li class="service">Service</li>
			</ul>
		</div>
		</header>
	    <div class="div_1"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test</div>
	</div>
</body>
</html>


Et mon code CSS: 
html    {

    font-family: 'Open Sans', sans-serif;
}
body    {
  background-image: linear-gradient(to right, #a2cff7, #9ebbfd, #b3a1f8, #d380e0, #f056b5); 
}


.banner	{
    display: flex;
    color: white;
    border: 1px solid black;
    padding: 0px;
    border-radius: 0px 0px 100px 100px;
    border-bottom-style: solid;
    border-top-style: none;
    border-right-style: none;    
    border-left-style: none;
    text-align: center;
    font-size: 35px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: auto;
	cursor: default;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    box-sizing: border-box;
    width: 100%;
    background-image: linear-gradient(to right , #c6def4, #c3d1f3, #c8c2ed, #d4b1df, #e19fc8);
    font-weight: bold;
    justify-content: center;

}


.title  {
    color: white;
    font-size: 25px;
    padding: 10px;
    margin: 0px;
    border: 3px solid black;
    border-right-style: none;
    border-top-style: solid;
    border-left-style: none;
    border-bottom-style: none;
    border-top-width: 0px;
    border-radius: 10px 10px 10px 10px;
    background-color: black;
}

.title:hover   {
    cursor: pointer;

}


.contact{
	font-size: 25px;
	padding: 10px;
    margin: 10px;
	border: 2px solid black ;
	border-right-style: solid;
	border-top-style: none;
    border-left-style: none;
    border-bottom-style: none;
    border-radius: 10px 0px 0px 10px;    
    background-image: linear-gradient(to left, black 50% , rgba(0, 0, 255, 0.0) 50%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: bottom left;
    -webkit-transition: all 0.25s ease-in;
    -moz-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
}

.contact:hover  {
    -webkit-transition: all 0.25s ease-in;
    -moz-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
    background-position: bottom right;
    cursor: pointer;

}

ul{
    list-style-type: none;
    display: flex;
    text-align: center;
}


.service{
    font-size: 25px;
	padding: 10px;
    margin: 10px;
    border: 2px solid black ;
	border-right-style: none;
	border-top-style: none;
    border-left-style: solid ;
    border-bottom-style: none;
    border-radius: 0px 10px 10px 0px;   
    cursor: default;
    background-image: linear-gradient(to right, black 50%, rgba(0, 0, 255, 0.0) 50%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: bottom right;
    -webkit-transition: all 0.25s ease-in;
    -moz-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
}

.service:hover	{
	-webkit-transition: all 0.25s ease-in;
    -moz-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
    background-position: bottom left;
    cursor: pointer;

}



.fb_logo {
	position: absolute;
	top: -9999px;
	left: -9999px;
}



.animation_test     {
    animation-name: test;
    animation-duration: 3s;
}

@keyframes test {
    from {background-color: red;}
    to {background-color: yellow;}
}


a ,a:visited {
    color: white;
    text-decoration: none;
    }

.div_1  {
    text-align: center;
}


Merci de votre aide et de votre patience a lire du mauvais code ^^
Modifié par CrossBowBoy (17 Jul 2018 - 13:41)
Salut,

déjà pour commencer à épurer un peu le code, tu peux remplacer tous ces 
<br />
par 
<div style="margin:100px ;"></div>
et tu modifie bien sûr le nombre de pixels suivant la hauteur désirée.

C'est toujours pas top mais ce sera déjà un peu plus propre Smiley smile
Sujet clos
Aller à