Bonjour,
Je dois pour la premiere découper un design fait par moi même en partant d'une feuille blanche.
Un seul problème me turlupine et j'en viens a vous.
Image ci-dessous:
J'aimerai connaitre la base du html et du css pour découper ce header plus menu.
Dois je decouper le rond a part du menu et de sparta gym ou dois je découper le tout et me débrouiller ensuite en HTML et CSS.
Je vous remercie amis passionné du web.
16 réponses
En vue de ton code, je dirais qu'il est tout à fait normal que ton background reste sur place et que ton site bouge en fonction de la résolution de l'écran car dans ton code tu fais en sorte que ton site soit toujours au centre de l'écran et donc tu peux tester avec un de tes navigateur et changer réduire ta fenêtre et tu constateras que ton site se positionnera toujours au centre (sauf quand tu arrive à une résolution inférieur à la taille de ton site, dans ton cas c'est 960px d'après ton code).
Maintenant si tu souhaites que ton backrgound reste également au milieu, tu dois ajouter un background-position: center top;
Mais dès lors il faut tenir compte que pour les personnes ayant une résolution d'écran supérieur à la largeur et hauteur de ton background il vont avoir un fond noir à gauche, droite et en bas, donc pour éviter une coupure net, tu peux faire en sortes que tu ton image de background tu réalise un dégradé vers un noir pure (vu que ta couleur du background est en noir #000 ).
Voilà :)
hachbé
Salut,
Il faut que tu sépares le tout, le "rond", sparta gym, et menu, même les drapeaux.
A+
Hello,
Comme dit extrarox , le logo rond doit être découpé à part et je pense que le mettre en 'absolute' serait le mieux dans ton header.
Tu le positionne par dessus ta zone du menu dont ce dernier tu peux le faire en code et non en image via le CSS.
Tu dois également découper tes images pour les langues, bien entendu, mais je te conseil de voir pour la meilleur combinaison en CSS en utilisant des 'floats' ou des positionnements relatives et 'absolutes'.
Dans un 'header' l'utilisation des positionnements 'absolutes' peuvent être facilement utilisé mais dès que tu rentre dans des éléments qui sont plus flexibles tel que la zone de contenu qui a une hauteur adaptable à son contenant, il est préférable d'éviter surtout quand tu débutes car si la structure n'est pas assez souple tu risques d'avoir des bugs d'affichages lors de certaines mises à jour du contenu.
Évites également d'utiliser des tableaux (table) pour ta mise en page sauf si c'est pour afficher un vrai tableau (comme est présenté les fichiers Excell).
Il y a pleins de conseils à donner mais tout dépend des objectifs, du projets et le tout est de se lancer, et tu constatera par toi même les erreurs et ce à quoi tu devras faire attention par la suite.
Bonne continuation dans ton projet :)
hachbé
Bonjour,
Le design a très bien avancé mais un problème persiste je n'arrive a trouver l’algorithme pour faire les bord arrons dis rouge par dessus mes div de contenu.
Voilà le design: http://www.plixup.com/pics\_core2/13274105887081bug.png
Et je voudrais donc ses bord arrondis comme sur le design sous toshop plus haut.
Merci.
Bonjour Creatux ,
Tu as deux solutions, la première est de passer via du CSS3 avec la propriété border-radius, la deuxième et de réaliser ça avec des images et de les mettre ne background pour tes titres de colonne par exemple.
Cordialement,
hachbé
J'aimerai le réaliser avec border radius en CSS3 mais le problème et que les tuto sont sur un contenu et une bordure relié hors moi comme vous le voyez sur le screen le contenu sera détaché du "haut" qui contiendra la bordure arrondit et le titre du contenu.
Voici l'exemple que je disais de faire en CSS3 (je me suis basé sur ton template de base) -> http://www.hachbe.be/sandbox/css3/
Et voici le code source de cette page très basique pour l'exemple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CC3 test</title>
<style>
<!--
body {
font-family: Arial, Verdana, sans-serif;
}
.centerContent {
width: 600px;
position: relative;
margin: 50px auto;
}
.boxe, .boxetwo {
border: 1px solid #B41603;
width: 550px;
-moz-border-radius:5px 5px 0px 0px;
-webkit-border-radius:5px 5px 0px 0px;
border-radius:5px 5px 0px 0px;
}
.boxe h1, .boxetwo h1 {
color: #FFF;
font-size: 14px;
font-weight: normal;
text-align: center;
background-color:#B41603;
margin: 0;
height: 20px;
line-height: 20px;
}
.boxe p {
margin: 10px;
color: #CCC;
}
.boxetwo p {
margin: 0;
color: #CCC;
}
-->
</style>
</head>
<body>
<div class="centerContent">
<div class="boxe">
<h1>PUBLICIDAD</h1>
<p>Contenu de la boxe avec un margin de 10px</p>
</div>
</div>
<div class="centerContent">
<div class="boxetwo">
<h1>PUBLICIDAD</h1>
<p>Sans margin (à bords perdus)</p>
</div>
</div>
</body>
</html>Notes bien que cette propriété de CSS3 est pris en compte seulement à partir de la version 9 d'Internet Explorer!
Tout dépend de tes objectifs et de ta cible, ce pourquoi la méthode avec les images en background est une alternative pour que ça soit visible de la même manière sur les différents navigateurs et également les versions plus anciennes.
hachbé
Désolé mais un nouveau problème se pose.
Voila le site dans ma résolution: C'est parfait
Dans une autre résolution: C'est la débandade...
Voila mon code html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Sparta Gym | Initio</title>
<link rel="stylesheet" media="screen" href="style.css">
</head>
<body>
<div id="conteneur">
<span id="logo-gauche"><a href="http://www.sparta-gym.eu/site.html"><img src="images/logo.png"></a></span>
<div id="menu">
<div id="menu-texte">
</div>
</div>
</div>Mon code css:
body {
background-color:#000000;
background-image:url(images/background.png);
background-repeat:no-repeat;
}
#conteneur {
width: 960px;
margin:auto;
}
#logo-gauche {
position: absolute;
top:115px;
left:300px;
width:201px;
height:200px;
}
#menu {
margin-top:185px;
width:960px;
height:50px;
border-style:solid;
border-width:3px;
border-color:#000000;
background-color:#FFFFFF;
}Merci d'avance, désolé si mon code est pas beau mais je débute.
Mets ta div conteneur en position relative et ensuite tu devras réajuster la valeur left de ton logo en absolute.
Ainsi ton élément en absolute se positionnera sur base du zéro absolut de ta div et non celui de ton écran.
Utilises plutôt une div qu'un span pour ton logo.
hachbé
Eh bien je te remercie ! Merci beaucoup je vais m'endormir un peu moins idiot ce soir.
Je t'en prie et je suis content d'avoir pu aider quelqu'un avec mes connaissances :)
Même après plus de 7 ans dans le métier du Web, je continue à demander aussi l'aide d'autres et d'apprendre encore tout les jours.
C'est ce que j'aime avec le web c'est que ça évolue, et il y a toujours des choses à apprendre :)
Bonne continuation dans ton projet musclé :p
hachbé
Oki, j'ai travaillé également pour des projets dans ce genre, c'était des e-commerces pour des protéines alimentaires, donc j'ai l'habitude de voir ce genre d'image avec les clients que j'ai eu :)
N'hésites pas à vérifier ton code via le validateur W3C car ça aide à avoir un code 'propre' et qu'il soit conforme sur les différents navigateurs. Par contre si tu utilises du CSS3, W3C risque de te dire soit que ce n'est pas valide soit que ton code est à titre expérimentale car HTML5 et CSS3 ne sont pas encore considérés comme finalisé.
Cordialement,
hachbé