Bordure d'un background-color

5 octobre 2015 à 21:19:08

Bonjour, j'aimerai enlever les bordures gauch-droite-haut de ma "navbar" pour qu'elle "colle" au bord du navigateur:

on peut y voir un petit contour blanc :/

Et aussi pour séparer un peu plus mes "bouttons" accueil connection inscription, comment faire ?

mon code:

html:

<!DOCTYPE html>
	<html>
		<header>
			<meta charset="utf-8" />
			<link rel="stylesheet" href="css/style.css" />
			<title>Minechat</title>
		</header>
		
		<body>
			
			<nav class="head">
				<a class="lihaut" href="#"><p class="navhead accueil">Accueil</p></a>
				<a class="lihaut" href="#"><p class="navhead connection">Connection</p></a>
				<a class="lihaut" href="#"><p class="navhead inscription">Inscription</p></a>
				
			
			</nav>
		
		
		</body>
	</html>

et css:

.head
{
	background-color: yellow;
	text-align: right;
}
.lihaut
{
	display: inline-block;
	text-decoration: none;
}
.accueil
{
}
.navhead
{
}

merci

-
Edité par Thomasschmitt 5 octobre 2015 à 21:20:29

philiga

5 octobre 2015 à 21:38:40

Bonsoir,

Ta navbar n'a pas de bordure ; c'est le margin par défaut de body que tu vois ; donc:

body{margin:0;}

et pour espacer tes menus:

.lihaut
{margin:5px 25px;

par exemple...

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Arthuchaut

5 octobre 2015 à 21:48:29

Salut ! Je débute en HTML, donc d'autres personnes pourront sans doutes te donner des soluces plus efficaces. Mais voilà ce que j'aurais fais :

Pour ta navbar, tu pourrais dans ton CSS utiliser le margin-top pour repositionner ta bar.

.head
{
    margin-top: -10px;
}

Pour séparer tes puces, tu peux utiliser le padding (la marge intérieur).

.lihaut
{
    padding-left: 20px;     /* Pas exemple */
}

Ici tu sépare les puces par leur marge intérieur gauche. Ca marche aussi avec la droite, mais ta liste va se décaler aussi de la droite.

J'espère que ça t'aura aidé ! Bon courage.

EDIT : Ah bah y a déjà eu meilleurs solution j'ai posté trop tard.

-
Edité par Arthuchaut 5 octobre 2015 à 21:50:58

Je pratique l'informatique.

Frogweb

6 octobre 2015 à 9:03:24

Salut,

ce n'est pas <header> mais <head>.

Un menu se fait généralement avec <ul> et <li>, d'ailleurs c'est amusant que tu es mis lihaut comme classe sur les <a>.

Un <p> dans un <a> c'est bof bof...

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Thomasschmitt

6 octobre 2015 à 19:39:24

Merci beaucoup vous m'avez beaucoup aider !

Sinon pour fixé la barre en haut comment faire ? Sa demande beaucoup de code en plus?

En gros quand je scroll avec ma souris vers le bas, la barre reste en haut de ma fenêtre.

merci

Frogweb

6 octobre 2015 à 20:01:28

Thomasschmitt a écrit:

Merci beaucoup vous m'avez beaucoup aider !

Sinon pour fixé la barre en haut comment faire ? Sa demande beaucoup de code en plus?

En gros quand je scroll avec ma souris vers le bas, la barre reste en haut de ma fenêtre.

merci

Oui, c'est beaucoup de code... Mets lui position: fixed.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Thomasschmitt

6 octobre 2015 à 20:08:05

Frogweb a écrit:

Thomasschmitt a écrit:

Merci beaucoup vous m'avez beaucoup aider !

Sinon pour fixé la barre en haut comment faire ? Sa demande beaucoup de code en plus?

En gros quand je scroll avec ma souris vers le bas, la barre reste en haut de ma fenêtre.

merci

Oui, c'est beaucoup de code... Mets lui position: fixed.

Le problème c'est qu'il me réduit la taille de la barre en la mettant à gauche :/

-
Edité par Thomasschmitt 6 octobre 2015 à 20:40:17

Lamecarlate

6 octobre 2015 à 21:41:38

Il faut aussi la positionner mets-lui left: 0; right: 0 (les deux, comme ça elle se cale bien des deux côtés et prend donc toute la largeur).

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Frogweb

7 octobre 2015 à 5:51:42

Lamecarlate a écrit:

Il faut aussi la positionner mets-lui left: 0; right: 0 (les deux, comme ça elle se cale bien des deux côtés et prend donc toute la largeur).

Ah oui, précision importante, j'ai oublié de l'indiquer...
ça nous évitera un vilain width: 100%.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !