Positionnement CSS

Kamel38 · 30 Décembre 2012

Bonjour,

Je maîtrise très bien l'HTML/CSS mais quelque chose me pose problème : le positionnement en CSS !

Pour ma formation de WebDesigner, je dois être capable de faire/découper/intégrer un WebDesign. Seul l'intégration me pose problème.

Je suis en train d'intégrer ce Design : http://evolutiongraph.fr/chevereto/iD

J'ai commencer, et voici mon résultat : http://evolutiongraph.fr/chevereto/image/oK

Or, j'ai quelques petits problèmes : Vous vous en apercevrez, en comparant mon essais au Design, on voit que le grand texte (qui est une image) est trop bas. Il faut le remonter un peu plus haut. Il faut remonter le bouton.

Je dois aussi placer le logo au milieu du menu, et je n'y arrive pas.

Voici mes codes :

HTML



<?xml version="1.0" encoding="UTF-8"?>


<!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" xml:lang="fr" lang="fr">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Intégration</title>

	<link href="style_css.css" rel="stylesheet" type="text/css" media="screen"

</head>

<body>

<div id="global">

	<div id="header-bg">

		<div id="header">

			<nav>

				<ul>

					<li>

						<a href="#">HOME</a>

					</li>

					<li>

						<a href="#">ABOUT</a>

					</li>

					<li>

						<a href="#">PORTFOLIO</a>

					</li>

					<li>

						<a href="#">SERVICES</a>

					</li>

					<li>

						<a href="#">BLOG</a>

					</li>

					<li>

						<a href="#">CONTACT</a>

					</li>

				</ul>

			</nav>

		</div>

	</div>

	<header>

	</header>

	<div id="boutton"><a href="#"></a>

	</div>


</div>

</body>

</html>

et CSS :



body{

	background:url(Images/fond.png) repeat-x;

	margin:0;

	padding:0;

	font-family:Verdana,Geneva, sans-serif;

	font-size:9px;

	}


#global {

	margin: 0 auto; width: 100%;

	}


#header-bg{

	height:60px;

	background:url(Images/bg_menu.jpg) no-repeat top;

	font-family:Arial, Verdana,Geneva, sans-serif;

	font-size:15px;

	line-height: 60px;

	}

#header {margin: 0 auto; width: 1000px;}	


nav ul {text-align: center; margin: 0; padding: 0;list-style:none;}


nav ul li {

	padding: 0 30px;

	display: inline;

	}


nav ul li a {

	text-decoration:none;

	color: #646464;

	}

nav ul li a:hover {color: #fff;}


header {

	background:url(Images/typo_header.png) no-repeat top;

	height:332px;

	}


#boutton {

	background:url(Images/bouton_header.png) no-repeat top;

	height:51px;

	}

Décidément, même après de nombreuses heures de lecture de Tuto (Site du Zéro, Alsacréation...), le positionnement en CSS me pose problème : je n'arrive pas à mettre ce que je veux, où je veux.

Je m'en remet alors à l'aide du forum : j'espère que quelqu'un pourra m'aider assez rapidement, c'est très urgent ^_^'

**Dadou** · 30 Décembre 2012

plutot que de capture et du code comme cela, il est preferable de nous proposer un lien vers la page de résultat, c'est bien plus pratique pour nous d'étudier ta page avec des outils comme firebug

Kamel38 · 30 Décembre 2012

Le résultat n'est pas une page, mais une image de modèle.

En revanche, j'ai avancer et la seule chose que je n'ai pas réussi à placer, c'est le logo : http://evolutiongraph.fr/chevereto/images/2012/12/30/9pD8R.jpg

J'ai ajouter :



<li id="logo"></li>



 dans le menu de mon html.


Et dans le css :



#logo {


display:inline-block;

background:url(Images/logo.png) no-repeat ;

height:194px;

width:114px;

position:absolute;

left:900px;

}

Mais voyez le par vous même, le résultat, n'est pas le bon

**Dadou** · 30 Décembre 2012

Tu es bien en train de faire du HTML et du CSS, donc le résultat est une page, et je répète ce que j'ai dis, c'est plus facile pour nous d'avoir directement accès à la page en question pour que l'on puisse l'analyser plus facilement

**captain_torche** · 30 Décembre 2012

Je suis parfaitement d'accord avec la proposition de Dadou : tu ne fais pas travailler un plombier avec la photo de ta plomberie, nous faire travailler sur une capture d'écran ne sera pas plus efficace.

Et sinon, corriger "Here me" en "Hire me" serait sans doute plus efficace et mettrait moins de doutes sur tes capacités en anglais.

**Ernestine** · 31 Décembre 2012

En tous cas, tu peux déjà commencer par virer la première ligne de ton code html (le "xml version"), et penser à refermer la balise link, ça ne fera pas de mal.

Licorne · 31 Décembre 2012

Son site est peut-être en local;)

Mais c'est vrai que sans url, plutôt difficile....

Kamel38 · 31 Décembre 2012

J'penses qu'on s'est mal compris : J'ai une image (modèle), un PSD (pour la découpe) et deux fichier : HTML/CSS dont je vous ai passer les codes. Quel page me demandez vous ?

**Ernestine** · 31 Décembre 2012

Avec ce que tu nous as donné, ça nous oblige à nous-mêmes créer deux fichiers (sans parler des images) pour reproduire ta page et effectuer des tests.

Alors que si tu nous donnais le lien de ta page en ligne (tu dois bien avoir un petit serveur quelque part pour héberger une page), on pourrait directement bidouiller dessus grâce à des outils comme Firebug. Ce serait dix fois plus rapide pour tout le monde.

Ce serait bien aussi de mieux cibler ton problème, parce que là tu nous dis juste "je n'arrive pas à mettre ce que je veux, où je veux." puis "Mais voyez le par vous même, le résultat, n'est pas le bon".

Bref : il faut nous aider à t'aider, surtout si, comme tu le dis, "c'est très urgent".

Kamel38 · 31 Décembre 2012

Ah, je comprend. Mais comme Licorne l'a dit, mon site est en locale et je n'ai pas de serveur où je pourrait heberger ma page.

Ernestine ----> Je n'arrive pas à placer le Logo au milieu de mon menu malgrès mes manipulation. Je voudrais savoir ce qui est faux dans mon code, pourquoi le Logo n'est pas placer comme je le veux (comme dans l'image d'exemple) et pour cela, j'ai donner ce que j'ai ajouter dans mon code un peu plus haut.

**Dan** · 31 Décembre 2012

Ah, je comprend. Mais comme Licorne l'a dit, mon site est en locale et je n'ai pas de serveur où je pourrait heberger ma page.

Ah... et tu comptes faire quoi de cette page ? La garder chez toi ?

Connexion

Positionnement CSS

Sujets conseillés

Kamel38

Lien vers le commentaire

Partager sur d’autres sites

Dadou

Lien vers le commentaire

Partager sur d’autres sites

Kamel38

Lien vers le commentaire

Partager sur d’autres sites

Dadou

Lien vers le commentaire

Partager sur d’autres sites

captain_torche

Lien vers le commentaire

Partager sur d’autres sites

Ernestine

Lien vers le commentaire

Partager sur d’autres sites

Licorne

Lien vers le commentaire

Partager sur d’autres sites

Kamel38

Lien vers le commentaire

Partager sur d’autres sites

Ernestine

Lien vers le commentaire

Partager sur d’autres sites

Kamel38

Lien vers le commentaire

Partager sur d’autres sites

Dan

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité