Demande d'aide pour premiers pas CSS

RADZONE? ;)

J'ai mis ça pour essayer de faire la 1ère ligne du carré de 4 cellules

HTML

<div class="blublublu1"> blablablablabla <class="blublublu2"> blablablablabla</div>

et en CSS

.blublublu1 {
margin-left: 250px;
}

.blublublu2 {
margin-left: 750px;
}

Mais le PROBLEME c'est que je me retrouve avec

blublublu1 blublublu2

sur la même ligne et seulement séparé par un espace :(

Ok merci à tous pour votre participation, ça commence à prendre forme ;)

passé le header ça commence à devenir moins hardu :)

j'ai encore un petit souci css (décidement celui-là) ;)

j'ai donc réussi grâce à vous à mettre mon logo en haut avec un menu (issu d'un générateur de menu css) et maintenant sur ma page je souhaite faire un bloc en carré avec 4 cellules pour mettre des trucs dedans...

avant avec un tableau c'était facile, mais là avec le CSS et malgré les conseils du site du zéro je suis un peu perdu...

il faut faire des div c'est ça? mais comment pour avoir le résultat que je souhaite obtenir?

Merci pour votre temps les CCMiens c'est gentil de m'accompagner.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"http-equiv="content-type">
<style>
body
{
background: url("images/logos.png");
background-repeat:no-repeat;
background-position:left top;
}
</style>
<title>Mon titre</title>
</head>
<body>
</body>
</html>

je viens de trouver ce qui n'allait pas

dans le code de lien vers la feuille de style, il fallait supprimer les deux petits point et le slash ../ avant css

moi j'avais mis:
href="../css/design.css" />

alors qu'il fallait mettre:
href="css/design.css" />

je crois que c'est de là que viens l'erreur ;)

NICKEL !!!

Ca fonctionne !!!

Je garde ce sujet ouvert car je sors là mais j'ai une ou deux petite questions à te poser encore si ça ne te dérange pas... car j'aimerai comprendre plutôt que copier coller bêtement, si tu vois ce que je veux dire ;)

encore merci c cool

Merci

j'ai réussi à avoir la page noire grâce à toi mais aucune trace de mon logo toujours...

que dois-je inscrire dans le body de l'html s'il te plait ?

Ben bizarrement en recopiant tes codes j'ai la page qui devient noire

bon je vais pas chercher midi à quatorze heure, je ne vois pas où était le problème dans mon code précédent mais je vais simplement réutilisé tes codes (avec ta permission ;)

Presque 3h pour mettre ma page en noire avec un logo en haut à gauche... ça promet lol

maintenant j'ai un autre soucis, j'ai utilisé un générateur de menu CSS et il ma fourni un dossier qui contient:
- un dossier "images"
- et un fichier css nommée menu_style.css

comment dois-je faire pour mettre ce menu sur ma page?

dois-je faire un changement sur la ligne de mon html suivante ou en rajouter une deuxième? sur cette ligne je veux dire:
<link rel="stylesheet" media="all" type="text/css" title="Design" href="css/design.css">

Merci pour ta patience avec moi... vivement que cette discussion soit un vieux souvenir :)

CSS

body{   
  background: #000;   
}   

img{   
  border: none;   
}   

#logos{   
  height: 50px;   
  margin-left: 50px;   
  margin-top: 20px;   
  width: 150px;   
  background: url(../images/logos.png) /*le lien vers l image est par rapport a la CSS et pas a la page html , d ou le "../" !*/  
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   
"http://www.w3.org/TR/html4/strict.dtd">   
<html>   
  <head>   
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">   
    <link rel="stylesheet" media="all" type="text/css" title="Design" href="css/design.css">  <!-- la le lien est par rapport a la page html, donc PAS de "../ "-->  
    <title>   
      Mon titre   
    </title>   
  </head>   
  <body>   
    <div id="logos"></div>   
  </body>   
</html>

exemple de ce que ca donne

? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?

CSS

body
{
background-color: black; /* BACKGROUND PAGE */
}

#logo /* LOGO */
{
background: url(../images/logo.png);
background-color: black;
height: 75px;
width: 455px;
margin-top: 20px;
margin-left: 20px;
}

J'ai un dossier qui contient 2 dossiers:
- css (qui comprend design.css)
- images (qui comprend logo.png)
et mon fichier index.htm

pourquoi par exemple le fait d'insérer

body
{
background-color: black; /* BACKGROUND PAGE */
}

dans ma partie css ne rends pas ma page noir ?

c d'abord ça qui m'intrigue...?

ben le problème c'est que je m'entraîne en local, donc je n'ai pas d'hébergement

mon code ci-dessus te paraît bon?

j'ai une page blanche quand je regarde sur firefox :(

c est certainement un probleme de lien ou de doublon dans la CSS

si il est en ligne met un lien que je vois !

up!

apparemment RADZONE est parti donc si il y a qqun d'autre pour me help :(

Ben je crois en fait que tu as mis le CSS dans la même pas dans ton exemple or moi j'utilise une page externe.

je suis totalement embrouillé j'ai plus rien sur mon écran maintenant, quand je prévisualise.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"http-equiv="content-type">
<link rel="stylesheet" media="all" type="text/css" title="Design" href="../css/design.css" />
<title>Bienvenue sur Enfindesbonsplans.com - Enfin un site qui propose de vrais bons plans!</title>
</head>
<body>
<div id="logo"></div>
</body>
</html>

CSS

body
{
background-color: black; /* BACKGROUND PAGE */
}

#logo /* LOGO */
{
background: url(../images/logo.png);
background-color: black;
height: 75px;
width: 455px;
margin-top: 20px;
margin-left: 20px;
}

C'est où que je fais une erreur, je me torture l'esprit depuis ta l'heure sans trouver :(

le bg ce met aussi bien sur le body !

dans ce cas precis l utilisation de class ou id n a pas de reel importance , mais une id est peut etre plus approprier , etand donne que tu ne vas en principe n utiliser qu une seule fois cette balise !

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
    <link rel="stylesheet" media="all" type="text/css" title="Design" href="../css/design.css"> 
    <title> 
      Mon titre 
    </title> 
<style type="text/css"> 
<!-- 
body { 
  background-color: #000000;     /* COULEUR DU BG DE LA PAGE est donne au body */ 
} 

#logos {   /* mettre un"#" 
a la place du "." pour designer une id*/ 
  background: url(../images/logos.png); 
  background-color: #FF0033; 
  height: 50px; 
  width: 150px; 
  margin-top: 20px; 
  margin-left: 50px; 
} 
--> 
</style> 
  </head> 
  <body> 
    <div id="logos"></div>   <!-- donner une id a la place de la class --> 
  </body> 
</html>

Je ne vois pas le body (partie HTML) dans ton exemple et ça me trouble...

regarde mieux :-))

A+

? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?

Merci RADZONE

Je suis bien sur le tuto du zéro mais à force d'aller dans tous les sens avec toutes ces propriétés et attributs j'ai un peu le tournis lol

- si je comprends bien si je veux un fond tout noir, il faut que je le mette sur la partie HTML c'est bien ça ? Rien là dessus sur la partie CSS ? Ou peut-être dans les deux ?

- et si j'ai bien compris ce que tu m'as mis entre <!-- et --!> c'est ce qui va dans le CSS ?

Je voulais utiliser un ID pour le logo comme conseillé sur le site du zéro, mais je vois que tu me propose d'utiliser un CLASS c pas grave c'est pareil ?

Je ne vois pas le body (partie HTML) dans ton exemple et ça me trouble...

Reviens... Merci pour ton aide ;-)

Salut

la tu met l image sur la totalite de ta page , puisque tu le met sur le <body>

le mieux est de creer une <div> de lui attribuer une"class" et de mettre l image en background de cette div !
il faudra alors que tu donne IMPERATIVEMENT un "height" et un " width" a cette div

un exemple !

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <link rel="stylesheet" media="all" type="text/css" title="Design" href="../css/design.css">
    <title>
      Mon titre
    </title>
<style type="text/css">
<!--
body {
  background-color: #CCCC99;
}

.logos {
  background: url(../images/logos.png);
  background-color: #FF0033;
  height: 50px;
  width: 150px;
  margin-top: 20px;
  margin-left: 50px;
}
-->
</style>
  </head>
  <body>
    <div class="logos"></div>
  </body>
</html>

Un petit tuto s impose dans ton cas :-))
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

A+

Finalement j'ai fait comme ça

HTML

<body>
<img src="images/logo.png" alt="Logo du site" id="logo" />
</body>

CSS

#logo
{
no-repeat top left scroll;
}

Mon logo s'affiche bien, j'ai pas fait d'erreur ?