Partage

Mise en page Site Web

13 avril 2017 à 19:11:19

Bonjour, 

j'ai un problème avec mon site j'aimerais que les liens de navigation soit en paysage et il s'affiche en portrait.

Code html

<!DOCTYPE html>
<html lang= "fr">
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<title>Boîte aux lettres intelligente - BALI</title>
	</head>
	
<body>
	<div id="bloc_page">
	<header>
		<div id="titre_principal">
			<a class="navbar-brand" href="Site BALI.html"/>
				<div id="logo">
					<img src="images/logo_bali_sans.png" alt="logo" />
					<h1>Bali</h1> 
				</div>
				<h2>Boite aux lettres intelligente</h2>
		</div>
		<div id="navigation">
		<nav>
			<u1>
				<li><a href="Site BALI.html">Accueil</a></li>
				<li><a href="#">A propos</a></li>
                <li><a href="#">Contactez-nous</a></li>
				<li><a href="#">BALI</a></li>
			</u1>
		</nav>
		</div>
	</header>
	<h4>BaLiOs</h4> 
	<p><a href="BALIOS.html">BaLiOs</a></p>
	<p>
		
		</br>

	</p>

	<h4>BaLinside</h4> 
	<p><a href="BALINSIDE.html">BaLinside</a></p>
		</br>
	<p>
	
	</p>
	<footer>
		<a href="Site BALI.html">Accueil</a> Contact FAQ
	</footer>


	</div>
</body>

</html>


code CSS

#bloc_page
{
    width: 600px;
    margin: auto;
}
header
{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
#titre_principal
{
    display: flex;
    flex-direction: column;
}
#navigation
{
align-content : space-between;	
}
#logo
{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
#logo img
{
    width: 80px;
    height: 80px;
}

header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 10px;
}

header h2
{
    font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}
nav ul
{
    list-style-type: none;
    display: flex;
}
nav li
{
    margin-right: 15px;
}
nav a
{
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
	text-transform: uppercase;
}

body
{
	    background: url('images/fond_jaune.png');
		font-family: 'Trebuchet MS', Arial, sans-serif;
		color: #181818;
		width: 600px;
		margin: auto;
}

h1
{
		color: black;
		font-size: 32px;
		font-family: Arial;

}
h2
{
		color: black;
		font-size: 25px;
		font-family: Arial;

}
h4
{
		color: blue;
		font-size: medium;
		font-family: Times New Roman;
		text-align: center;
	
}
p 
{
		color: blue;
		font-size: medium;
		font-family: Times New Roman;
		text-align: center;
}
footer
{
		color:blue;
		font-size:16px;
		font-family: Times New Roman;
		float:bottom;
		padding-top: 5px;
		padding-bottom: 5px;
		//background-image: url("images/foot.jpg");
		background-attachment: fixed;
		text-align: center;
}
a:hover 
{
		color:green;
}

a
{
		border-radius: 15px;
}

 J'ai appris le html il y a très peut de temps soyer indulgent ?

14 avril 2017 à 11:10:48

a oui c'est vrai merci mais j'ai essayer avec inline et toujours pas je vois vraiment pas comment faire.

il faut que je separe les deux block du header donc j'ai mis nav u1(logo) et nav u2(lien de navigation) mais si je met pas de display: flex directement dans header il sont mal positionner  (je sais pas si je me suis fait comprendre)

#bloc_page
{
    width: 600px;
    margin: auto;
}
header
{
    display: inline;
    justify-content: space-between;
    align-items: flex-end;
}
#titre_principal
{
    display: flex;
    flex-direction: column;
}
#navigation
{
align-content : space-between;	
}
#logo
{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
#logo img
{
    width: 80px;
    height: 80px;
}

header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 10px;
}

header h2
{
    font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}
nav ul
{
    display: flex;
}
nav u2
{
    display: inline-block;
	position: absolute;
	right:5px;
}
nav li
{
    margin-right: 15px;
}
nav a
{
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
	text-transform: uppercase;
}

body
{
	    background: url('images/fond_jaune.png');
		font-family: 'Trebuchet MS', Arial, sans-serif;
		color: #181818;
		width: 600px;
		margin: auto;
}

h1
{
		color: black;
		font-size: 32px;
		font-family: Arial;

}
h2
{
		color: black;
		font-size: 25px;
		font-family: Arial;

}
h4
{
		color: blue;
		font-size: medium;
		font-family: Times New Roman;
		text-align: center;
	
}
p 
{
		color: blue;
		font-size: medium;
		font-family: Times New Roman;
		text-align: center;
}
footer
{
		color:blue;
		font-size:16px;
		font-family: Times New Roman;
		float:bottom;
		padding-top: 5px;
		padding-bottom: 5px;
		//background-image: url("images/foot.jpg");
		background-attachment: fixed;
		text-align: center;
}
a:hover 
{
		color:green;
}

a
{
		border-radius: 15px;
}



16 avril 2017 à 0:32:54

un peut d'aide s'il vous plait !!
Staff 18 avril 2017 à 1:54:50

Bonjour, les balises u1 et u2 n'existe pas, c'est <ul> pour les listes non numérotée. Pas d'espace dans les nom de fichiers et répertoire.

</br> n'existe pas c'est soit <br> soit <br />.

Ligne 13 tu ouvres un lien que tu ne fermes pas, la balise de lien n'est pas auto fermante.

tu ne respectes pas la hiérarchie des titres, tu ne peux avoir un h4 qui suis un h1. C'est comme si tu passais un chapitre d'un livre ou d'une table des matières voir https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document

Passe également ton code au validateur html et css https://validator.w3.org/ https://jigsaw.w3.org/css-validator/ pour voir tes erreurs.

Coter CSS

un commentaire s'écrit comme ceci

/* commentaire */ 

float:bottom; n'existe pas, voici les valeurs pour la propriété float

pour font-family: si le nom de police est composé de plusieurs mots ceux ci sont entre quot ou guillemet et on termine par indiquer une famille de police.

une fois toutes ces erreurs corrigée, on y verra plus clairement si il y a encore un problème.

21 avril 2017 à 12:38:15

merci beaucoup je vais faire tout les changement

Mise en page Site Web

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown