28172 sujets

CSS et mise en forme, CSS3

Trop de DIV tue les DIV

Bonjour,

Mon problème est assez simple pour quelqu'un qui maitrise les CSS.
En effet, j'ai un problème pour placer mon bord de design sur la droite alors je me suis débrouillé comme je peux avec un positionnement absolu.
Ensuite j'ai un autre problème c'est pour écrire et mettre des liens sur mes images...
Comme vous pouvez le voir sur le screenShoot cela ne marche pas...
C'est assez triste et j'ai du mal avec les DIV

Je suis donc ce soir devant vous pour que vous puissiez m'apporter du soutien.

Et encore une question, est ce que je peux faire pour que mon DIV corps s'agrandisse au milieu....Car quand je met un grand texte cela dépasse le footer...

J'ai toujours programmer en tableau avant donc je suis pas trop habitué au DIV.

SCreenSHOT

C'est mieux avec le footer:
Screeshot footer

Ma page HTML:
<!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" >





   <head>



       <title>AkrogAmes Boutique en ligne de produits Hight Tech</title>

       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <link rel="stylesheet" media="screen" type="text/css" title="style" href="design.css" />



   </head>





   <body>


<div id="container">
	<div id="header">
		<img src="images/index_01.gif" border="0">
		<img src="images/index_02.gif" border="0">
		<img src="images/index_03.gif" border="0">
		<img src="images/index_04.gif" border="0">
	</div>

	<div id="menu">
		<a href="#"><img src="images/index_05.gif" border="0"></a>
		<img src="images/index_06.gif" border="0">
		<img src="images/index_07.gif" border="0">
		<img src="images/index_08.gif" border="0">
		<img src="images/index_09.gif" border="0">
		<img src="images/index_10.gif" border="0">
		<img src="images/index_11.gif" border="0">
		<img src="images/index_12.gif" border="0">
		<img src="images/index_13.gif" border="0">
		<img src="images/index_14.gif" border="0">
		<img src="images/index_16.gif" border="0">

		<img src="images/index_20.gif" border="0">
	</div>

	<div id="menu1">
		TEST
	</div>

	<div id="bordDroit">
	<!-- La il y a un probleme je crois... -->
		<img src="images/index_15.gif" border="0">
	</div>

	<!--La div corps pour mettre du grand texte-->

	<div id="footer">
		<img src="images/index_22.gif" border="0">
	</div>
</div>

</body>
</html>


Mon code CSS:

div#container
{
	margin: auto;
	width: 1003px;
}

div#header img
{
	float:left;
}

div#menu img
{
	float:left;
}

div#bordDroit
{
	position: absolute;
	margin-top: 93px;
	margin-left: 996px;
}

div#menu1
{
	position: absolute;
	margin-top: 110px;
	margin-left: 25px;
}


Merci de votre aide si vous me comprenez..
Modifié par Florent V. (03 Mar 2008 - 20:15)
Bonjour,

thibaud25 a écrit :
Merci de votre aide si vous me comprenez..

Hmm... ça va être dur alors, car je ne suis pas sûr de comprendre. Tu dis «Comme vous pouvez le voir sur le screenShoot cela ne marche pas...», mais je ne vois pas de problème particulier sur tes captures d'écran (toutes considérations de design mises à part).

Ensuite, je constate que:

1. Tu as des lacunes en HTML qu'il faudrait rattraper (des images à la queue-leu-leu et sans texte alternatif pour faire un menu???).
2. Tu n'as pas utilisé correctement le positionnement absolu (ni les marges d'ailleurs) pour le positionnement de div#bordDroit et div#menu1.

Pour le premier point, eh bien il existe une spécification HTML qui décrit un certain nombre d'éléments et d'attributs que tu sembles ignorer. Plus abordable peut-être, on pourra lire dans l'ordre:
http://openweb.eu.org/articles/xhtml_une_heure/ (attention cependant: les exemples utilisent le prologue XML, qu'il vaut mieux laisser de côté...)
http://openweb.eu.org/articles/respecter_semantique/

Pour le deuxième point, on retourne chez Openweb:
http://openweb.eu.org/articles/initiation_absolue/

Avec ça, ça devrait s'améliorer un peu. Smiley smile


PS: screenshot, pas screenshoot. Smiley cligne
Sujet clos
Aller à