28220 sujets

CSS et mise en forme, CSS3

Positionnement Header

Bonjours.
Je suis nouveau, est surtout débutant dans la programmation.
Je viens tout juste de commencer le CSS mais j'ai quelques problèmes.
J'ai un header : head.jpg
J'aimerai qu'il soit tout en haut de la page, centré avec une bordure noire autour.
Pourriez vous me montrez juste un exemple ?
Merci de votre aide
bonjour Froltar et bienvenue sur ce forum

Tout ce donc tu as besoin pour bien débuter se trouve dans les tutos d'alsacréations.

Pour commencer ton travail, regarde cette page

Ensuite, parcours les différentes pages de tutoriels.

Amicalement,
Je vous remercie de votre aide.
Je vous tiens au courant Smiley smile
(Je ne m'attendais pas à une réponse aussi rapide de votre part Smiley cligne )
Désolé pour le double post.
Merci beaucoup j'ai réussit à le faire.
Le seul problème est que je ne sais pas si le code est propre ou si il pourrait être raccourcie.
Pouvais vous me dire ?

Css :

#head {
     margin-left: auto;
     margin-right: auto;
     width: 900;
     border: 1px solid #000;	 
     }


HTML :

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" title="Softiz" />
</head>
<body>
<div id="head"><img src="head.jpg" alt="Softiz - La gratuitée sous windows"></div>
</body>
</html>
tu peux inserer ton image directement dans le CSS

CSS 
#head {
margin-left: auto;
margin-right: auto;
background-image: url('head.jpg');
width: 900;
border: 1px solid #000;
}


donc ton html sera:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" title="Softiz" />
</head>
<body>
<div id="head"></div>
</body>
</html>
Je préfère une image dans le code source qu'un div vide Smiley cligne

Si tu veux mettre l'image en background pour bien séparer le style du contenu, il faudra mettre un réel contenu dans ton head.
Et un <h1> serait plus adapter. Restera ensuite à masquer le texte pour ne laisser aparaitre que l'image.
Froltar a écrit :
Désolé pour le double post.
Merci beaucoup j'ai réussit à le faire.
Le seul problème est que je ne sais pas si le code est propre ou si il pourrait être raccourcie.
Pouvais vous me dire ?



Salut Froltar,

heu tu peux déjà raccourcir gratuitée en enlevant le "e" à la fin Smiley biggrin

Sinon il faut indiquer l'unité de la valeur du width (px, em, ...)

Et pour finir tu peux aller faire un tour dans la rubrique recherche avec comme mot clé "doctype". Celà devrait t'être utile.

+++
Merci beaucoup.
Je pense que je vais laissez comme cela pour le moment vu qu'il n'y a pas de contenue dans le header.
J'ai corrigé la faute d'orthographe, rajouté l'unité de mesure.
Pour le Doctype je le metterais plus tard. Pour le moment c'est juste des essaies
Merci bien Smiley cligne
Modifié par Froltar (08 May 2005 - 16:14)
Froltar a écrit :

Pour le Doctype je le metterais plus tard. Pour le moment c'est juste des essaies


Le doctype c'est pas le bidule qu'on met au dernier moment pour faire joli ou pour faire plaisir au validateur, c'est ce qui indique au navigateur dans quel langage (quelle version d'HTML/xHTML) est faite la page qui suit, en fonction du doctype, le résultat peut être différent selon les navigateurs.

C'est la 1ere chose à indiquer sur un document HTML.
Olivier a écrit :


Le doctype c'est pas le bidule qu'on met au dernier moment pour faire joli ou pour faire plaisir au validateur, c'est ce qui indique au navigateur dans quel langage (quelle version d'HTML/xHTML) est faite la page qui suit, en fonction du doctype, le résultat peut être différent selon les navigateurs.

C'est la 1ere chose à indiquer sur un document HTML.


Merci des informations, mais je suis déjà au courant de cela.
Pour le moment je fais juste quelques test comme ça.
Quand je ferais le projet sérieusement je le metterai
Smiley cligne
Bonjour,

Le doctype il faut le mettre même pour des tests. Smiley cligne
Tes pages n'auront pas la même apparence dans différents navigateurs si tu ne le précises pas: http://del.icio.us/Igor/dtd

De plus si tu rencontres des problèmes et que tu viens poser une question avec par exemple une page sans doctype, je crains que nous te redisions tous qu'il faut en choisir un avant de tenter une réponse Smiley biggrin .
Modifié par Igor (08 May 2005 - 16:57)
Bon j'ai donc mit un doctype.
J'ai redenouveau un petit problèmes
Après le header, j'aimerai un conteneur en dessous contenant 2 autres conteneurs (un pour un menu et l'autre pour le contenue)
Mais cela m'écris le texte en dessous du conteneur :

CSS

body {
margin: 0;
}

#head {
     margin-left: auto;
     margin-right: auto;
     width: 900px;
     border: 1px solid #000;	 
     }
	 
#menu1 {
     margin-top: 10px;
     margin-left: auto;
     margin-right: auto;
     width: 900px;
     border: 1px solid #000;
     text-align: center ; 	
     font: bold 16px Times ; 	 
     }
	 
#conteneur {
position: absolute;
margin-top: 10px;
width: 900px;
left: 50%;
margin-left: -450px;
background-color:#CCCCFF;
border: 1px solid #000;
}
	 
#centre {
background-color:#9999CC;
margin-left: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}


HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" title="Softiz" />
</head>
<body>
<div id="head"><img src="head.jpg" alt="Softiz - La gratuité sous windows"></div>
<div id="menu1">
<a href="" class="menu1">Accueil</a> - 
<a href="" class="menu1">Equipe</a> - 
<a href="" class="menu1">Forum</a> - 
<a href="" class="menu1">Chat</a> - 
<a href="" class="menu1">Liens</a> - 
<a href="" class="menu1">Contact</a>
</div>
<div id="conteneur">
<div id="gauche">frfr</div>
</div>
</body>
</html>
à Froltar,

Il y a vraiment quelque chose qui ne colle pas dans ta méthode de travail.

On ne peut pas comme ça se lancer dans les css sans prendre le temps d'élaborer avant des documents html conséquents.

ie :

des en tête de sections (hn) en se demandant ce qu'elles structurent et comment

un balisage adéquat des menus (ce que tu fais n'est pas faux mais la question d'utiliser ou non des listes doit se poser en terme de qualité de la structuration)

l'utilisation de l'attribut "title" pour permettre de petits commentaires explicatifs sur les liens principaux.

des éléments indispensables concernant l'accessibilité (liens d'accès direct,
mis en place des accesskeys, lien vers un aide mémoire de ceux ci)

Le tout accompagné d'une réflexion sur l'organisation générale du document (les menus avant le contenu ou bien le contraire ?) hors toute anticipation d'un éventuel rendu à l'écran !

Voilà me semble t'il des élément qui doivent obligatoirement être en place avant de commencer quelque travail que ce soit sur les css. Et c'est un minimum.


Désolé si ça a l'air méchant
Modifié par clb56 (08 May 2005 - 18:03)
Non cela ne m'a pas l'air méchant du tout.
Mais il faut juste savoir qu'il y a quelques heures je ne connaissais rien en programmation web Smiley cligne
Comme dit précedemment c'est juste quelques test comme ça pour apprendre un peu le CSS.
Je tiens en compte tes remarques, merci beaucoup pour ton aide
Smiley cligne
Tes class="menu1" pour les liens qui se trouvent dans la division "menu1" sont superflus, tu peux t'en passer.
Modifié par Bebop (08 May 2005 - 18:38)
Je compte mettre un style de lien différent après donc je pense pas qu'il faille les enlever. (enfin dit moi si je me trompe)
Sinon personne pourais me dire pour l'histoire du conteneur ?
Merci encore de votre aide Smiley cligne
Le CSS/HTML quand on à jamais fait de programmation c'est dur Smiley decu

EDIT : J'ai résolut le problème c'est donc bon.
Modifié par Froltar (08 May 2005 - 18:44)
Si c'est juste un style de lien différent pour tout le menu, en effet tu te trompes. Smiley cligne

Tu peux très bien définir des styles pour les lien n'appartenant qu'au menu1

Par exemple :

#menu1 a {
text-decoration:none;
}
Philippe a écrit :
tu peux inserer ton image directement dans le CSS

Mais, dans ce cas, on perd le ALT et le TITLE !!!!

Y a-t-il un moyen de les définir en CSS ?
Sujet clos
Aller à