18041 sujets

Questions générales et questions de débutants

Problème tuto webdesign en langue anglaise

Bonsoir,

Je me forme aux techniques de création web (HTML,CSS...) de manière autodidacte et ponctuelle, car je suis étudiant dans un autre domaine et je n'ai pas beaucoup de temps.

Je suis entrain de réaliser ce tutorial sur un site de Web Design en anglais, je viens tous juste de commencer et je suis déjà bloqué. Voila le site : http://sixrevisions.com/tutorials/web-development-tutorials/minimal-and-modern-layout-psd-to-xhtmlcss-conversion/.

Avant de vous expliquer mon problème voila la partie qui me pose problème, attention il faut absolument visualiser le lien pour comprendre, enfin je pense qu'il faille le faire.

Partie HTML :

<!--HEADER/NAVIGATION STARTS-->
<div id="top">
  <!--WEBSITE TITLE STARTS-->
  <div id="title">
    <h1><a href="#" title="Your Website Name">Your Website Name</a></h1>
  </div>
  <!--WEBSITE TITLE ENDS-->
</div>
<!--HEADER/NAVIGATION ENDS-->


Partie CSS : 

#top {
  float: left;
  width: 850px;
  height: 119px;
}
#title {
  float: left;
  width: 278px;
  height: 74px;
  padding-top: 45px;
}
#title h1 {
  display: block;
  float: left;
  width: 278px;
  height: 74px;
  text-indent: -9999px;
}
#title h1 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(images/title.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}


Dans cette partie je pense qu'il s'agit de mettre en place le logo du site, c'est un logo qui a été au préalable crée sur Photoshop puis découpé au format PNG.

Je ne parviens tout ce code d'intégration alors que pour moi il serait plus simple d'insérer l'image sur HTML via le code suivant 
<img src="/"/>
. APrès cela utiliser 
margin
afin de positionner le logo.

Cependant lui il créer d'abord un 
<div id="top">...</div>
qui pour moi correspond à un 
<header>...</header>
puis à l'intérieur il crée un autre div, il s'agit du 
<div id="title">...</div>
sans que je puisse voir l'intérêt de cela.

Dans la partie css, ce qui me pose problème c'est la "multitude" de 
float: left
qu'il a mit dans 
<div id="top">...</div>
et 
<div id="title">...</div>


Enfin dans cette partie du code 

 #title h1 {
  display: block;
  float: left;
  width: 278px;
  height: 74px;
  text-indent: -9999px;
}
#title h1 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(images/title.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}


Je ne parviens pas à comprendre pourquoi tous ce code. Selon moi en utilisant simplement un code css appliqué à la balise header aurait été suffisant. IL doit y avoir un intérêt que je ne saisis pas.

Moi j'aurai fait 
header{
background-image: url(logo.png);
}


Merci à celui qui prendre le temps de m'éclairer. Merci beaucoup. Je précise que je suis néophyte. Encore merci.
Bonjour,

Vous vous êtes lancé sur un exemple qui à mon sens ne vous apportera pas les connaissances nécessaires pour bien commencer dans l'apprentissage des bases de la création de site.

Ce tutoriel brouille quelque peu les pistes pour un débutant et je vous avoue que je ne crois pas encore avoir vu de méthode comme celle-ci plébiscitée sur ce forum.

Fort heureusement il y a de quoi répondre à vos attentes:
Sur le site du Zéro qui s'adresse bien aux débutants puis Alsacréations et développez.com

Dans votre exemple (datant de 2009), concernant le titre H1, l'auteur propose de remplacer le texte par une image. Les techniques dans le domaine de la typographie permettent aujourd'hui d'obtenir un résultat similaire uniquement avec du code.

Vous pouvez aussi grâce à l'inspection du code disponible sur votre navigateur (Firefox est simple d'utilisation) observer et disséquer les exemples qui vous intéressent. Cela constituera un bon complément pour évoluer.

Je vous souhaite bon courage.
Merci de votre réponse. Mais est ce que vous auriez une réponse concernant le float: left. Il l'a utilisé à deux reprises mais je vois pas l'intérêt. Aussi pourquoi dans le cas du H1 et de la balise a il a mit un display: block ? J'ai une toute dernière question : Est ce que il aurait été possible de faire simplement cela :

header{
background-image: url(logo.png):
height: 38px;
width: 350 px;
}


Puis utiliser margin pour positionner le logo dans la page.

Je connais bien le site du zéro, mais il existe très peu de tutoriel d'intégration de design sur internet, sauf sur des sites anglais.
Pour le positionnement: je vous ai fait un exemple afin de comprendre que ces 2 éléments en float left se placent au même niveau : exemple
Essayez d'enlever le float de la balise H1 en plaçant // devant la propriété vous verrez.

Concernant le background vous positionnerez votre logo lorsqu'il est placé en background-image avec background-position:10px 20px; 10px vers la gauche et 20px vers le bas par rapport au coin supérieur droit. (les valeurs sont données à titre d'exemple).

Je vous conseille de lire le livre de raphaël Goetter sur les Css : il faut en passer par là pour établir une bonne base.
Merci j'ai compris, c'est pour "faire de la place" et par exemple permettre à un élément qui sans float serait disposé en bas du header, de lui permettre d'être situé dans le header. Mais un seul float aurait faire l'affaire, il me semble.

Je vais consulter l'ouvrage que vous me conseillez.

Merci.
Sujet clos
Aller à