Partage

width qui ne fonctionne pas html

14 mars 2018 à 16:26:09

Bonjour a tous je suis nouveau sur ce forum et j'aurai une question a vous poser, alors voila j'essaye de faire en sorte que mon image prenne toute la largeur de la page web quand je met height dans mon code html sa modifie effectivement sa hauteur mais lorsque je fais la même chose avec width cela ne marche pas et je ne comprend pas pourquoi j'aurais besoin de votre aide ? voici mon code :

HTML :

<!DOCTYPE html>

<html>

<head>

<title> B4nkaii </title>

</head>

<body>

<h1> B4nkaii </h1>

<table>

anime

</th>

<th>

news

</th>

<th>

ost

</th>

<th>

top

</th>

<th>

quiz

</th>

<th>

forum

</th>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</div>

<img src="tumblr_nb0tkgreGa1ryq2ago1_500.gif" width="50%" alt="image de bienvenue"

</div>

</body>

</html>

CSS :

body

{

background-image:url("205913.jpg") ; /* image de fond de page */

}

.epee

{

}

.logo

{

}

.top

{

padding: 0px 0px 0px 0px;

margin: -7.2px -7px 0px -7px ;

background-color: #DD0F3D; /* couleur de fond */

}

@font-face

{

font-family: "MisterVampire"; /* ajoute une police atypique */

src: url("MISTV___.TTF"); /* l'emplacement + le nom de ma police */

}

{

color: black;

float: right; /* placer l'élement html a droite de l'autre élement */

text-indent: -700px; /* coller le titre a gauche de l'image */

font-family: MisterVampire; /* police d'écriture */

position: relative; /* positionner le text par rapport a sa place de base */

top: 40px; /* descendre le texte de 10 px */

}

img

{

width: 100px; /* reduire l'image en largeur */

}

.img2

{

-webkit- width:;

}

audio

{

position: relative;

top: 2px;

left: 1235px;

}

{

text-decoration: underline; /* surligne */

text-decoration-color: black; /* couleur de la ligne */

text-decoration-style: double; /* style ligne double */

background-color: #0089DB; /* couleur en hexa */

text-transform: uppercase; /* mettre les cellules en maj */

position: relative;

left: 580px;

top: 37px;

border: 1px solid black; /* cree une bordure */

font-size: 20px; /* modifie la taille de police */

}

Lamecarlate

14 mars 2018 à 16:34:18

Bonjour,

première chose : édite ton premier message pour mettre le code en forme avec le bouton </>, sinon c'est illisible.

Ensuite : j'ai rapidement repéré des erreurs dans ton HTML, tu gagneras beaucoup à le passer au validateur (https://validator.w3.org ). Le tableau, c'est pour faire un menu ? Si oui, ce n'est pas la bonne méthode Recherche "menu css" tu trouveras des tas de ressources.

Évite les valeurs gigantesques de left/top etc : si tu en as, c'est qu'il y a un souci de conception. Enlève-les, réfléchis à ton besoin, et retravaille.

Pour ton image : tu veux qu'elle prenne toute la largeur parce que c'est une image de décoration ou bien d'illustration ?

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

cédricforgeront

14 mars 2018 à 17:01:31

Bonjour, merci d'avoir répondu si rapidement, pour le menu je voulais faire quelque chose qui ressemble a sa : http://www.neko-san.fr/même si je sais que le plus logique serait d'utilisait les liste a puces , pour l'image c'est pareil sa ressemble un peu a l'illustration sur ce site sauf que moi elle me servirai a souhaiter la bienvenue au visiteur ;), je vais également faire un tour sur le validateur merci du conseil..

Lamecarlate

14 mars 2018 à 17:48:48

Si tu n'as qu'un niveau de menu, une série de liens suffit amplement, pas besoin de liste à puces

(et du coup, ma première demande ?)

-
Edité par Lamecarlate 14 mars 2018 à 17:49:32

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

me_moi

14 mars 2018 à 17:54:04

Bonjour,

je ne suis pas vraiment sûr à 100%, mais il me semble que les règles css présentes dans les balises html ont la priorité par rapport aux règles css définies dans un fichier css externe. Pour ton image, tu définis une largeur de 50% dans la balise img et une largeur de 100px dans ta feuille de style externe. À ton avis, quelle règle va marcher ? essayes en enlevant la règle "width:50%" présente dans ta balise img pour voir ce qui se passe.

-
Edité par me_moi 14 mars 2018 à 17:54:57

cédricforgeront

15 mars 2018 à 10:55:37

<!DOCTYPE html>
	<html>
		<head>
			<meta charset='utf-8' /> <!-- language pour le pc -->
			<link rel="stylesheet" href="test.css" /> <!-- lien vers fichier css -->
			<title>  B4nkaii </title> <!-- nom du site -->
		</head>
		<body>
				<div class="top"> <!-- regroupe le logo + le titre -->
				<span class="epee">
				<img src="t-shirt-gris-logo-epee (1).png" alt="le logo du site">
				</span>
					<h1> B4nkaii </h1> <!-- titre principal du site -->
				<table>
					<tr> <!-- première ligne du tableau -->
						<th> <!-- première cellule du tableau -->
							anime
						</th>
						<th>
							news
						</th>
						<th>
							ost
						</th>
						<th>
							top
						</th>
						<th>	
							quiz
						</th>
						<th>
							forum
						</th>
					</tr>
					<tr>
						<td>

						</td>
						<td>
							
						</td>
					</tr>
				</table>
				<audio controls="controls">
					<source src="One Piece Opening 14 -  Fight Together  (HD 720p).mp3">
				</div>
				<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 /><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 />
				</body>
	</html>

body
{
	background-image:url("205913.jpg"); /*  image de fond de page     */
}

.epee
{

}
.logo
{
	
}

.top
 {
 	
 	
 	padding: 0px 0px 0px 0px;
 	margin: -7.2px -7px 0px -7px ;
 	background-color: #DD0F3D; /* couleur de fond  */
 }

@font-face
{
	font-family: "MisterVampire"; /* ajoute une police atypique */
	src: url("MISTV___.TTF"); /* l'emplacement + le nom de ma police */
}

h1
{
	
	color: black;
	float: right; /*  placer l'élement html a droite de l'autre élement */
	text-indent: -700px; /* coller le titre a gauche de l'image */
	font-family: MisterVampire; /* police d'écriture  */
	position: relative; /* positionner le text par rapport a sa place de base */
	top: 40px; /* descendre le texte de 10 px */
}
img
{
	width: 100px; /* reduire l'image en largeur */
	
}

.img2
{
	display: block-inline;
	position: relative;
	top: 500px;
	background-color: white;
}

audio
{
	position: relative;
	top: 2px;
	left: 1220px;

}

th
{
	text-decoration: underline; /* surligne  */
	text-decoration-color: black; /* couleur de la ligne */
	text-decoration-style: double; /* style ligne double */
	background-color: #0089DB;  /*  couleur en hexa    */
	text-transform: uppercase; /* mettre les cellules en maj */
	position: relative; 
	left: 580px;
	top: 37px;
	border: 1px solid black; /* cree une bordure  */
	font-size: 20px; /* modifie la taille de police   */
}

Voici mon code reorganisé :

<!DOCTYPE html>

<html>

<head>

<title> B4nkaii </title>

</head>

<body>

<h1> B4nkaii </h1>

<table>

anime

</th>

<th>

news

</th>

<th>

ost

</th>

<th>

top

</th>

<th>

quiz

</th>

<th>

forum

</th>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</div>

</body>

</html>

ET CSS :

body

{

background-image:url("205913.jpg"); /* image de fond de page */

}

.epee

{

}

.logo

{

}

.top

{

padding: 0px 0px 0px 0px;

margin: -7.2px -7px 0px -7px ;

background-color: #DD0F3D; /* couleur de fond */

}

@font-face

{

font-family: "MisterVampire"; /* ajoute une police atypique */

src: url("MISTV___.TTF"); /* l'emplacement + le nom de ma police */

}

{

color: black;

float: right; /* placer l'élement html a droite de l'autre élement */

text-indent: -700px; /* coller le titre a gauche de l'image */

font-family: MisterVampire; /* police d'écriture */

position: relative; /* positionner le text par rapport a sa place de base */

top: 40px; /* descendre le texte de 10 px */

}

img

{

width: 100px; /* reduire l'image en largeur */

}

.img2

{

display: block-inline;

position: relative;

top: 500px;

background-color: white;

}

audio

{

position: relative;

top: 2px;

left: 1220px;

}

{

text-decoration: underline; /* surligne */

text-decoration-color: black; /* couleur de la ligne */

text-decoration-style: double; /* style ligne double */

background-color: #0089DB; /* couleur en hexa */

text-transform: uppercase; /* mettre les cellules en maj */

position: relative;

left: 580px;

top: 37px;

border: 1px solid black; /* cree une bordure */

font-size: 20px; /* modifie la taille de police */

}

-
Edité par cédricforgeront 15 mars 2018 à 10:58:16

me_moi

15 mars 2018 à 11:39:59

L'éditeur de code est spécialement prévu pour qu'on n'ait pas à écrire son code comme du simple texte.

Pourquoi mettre autant de ?

-
Edité par me_moi 15 mars 2018 à 11:40:22

cédricforgeront

15 mars 2018 à 11:40:54

pour pouvoir voir mon fond d'ecrand

.......................

C'est bon pour les br mais je n'arrive toujours pas a modifier la largeur de mon image pourquoi ?

-
Edité par cédricforgeront 15 mars 2018 à 11:43:41

me_moi

15 mars 2018 à 11:45:55

Ton code marche parfaitement.

-
Edité par me_moi 15 mars 2018 à 11:50:54