28221 sujets

CSS et mise en forme, CSS3

[RESOLU] Div qui se décalle

Bonjour,

il parait quele css est simple j'essaye de créer un petit désign avec quelque div et cela fais déjà quelque jour que je suis sur ma première page.

voilà mon problème en haut de ma page j'ai coté gauche le logo et l'entete, en dessous j'ai un flanc gauche et puis la page juste a coté.

j'essaye de faire une interface de connection et un moteur de recherche dans ma div gauche mais tout ce décale.



quelq'un peut il me donner un petit tuyau.




#logo {float :left; height:20%; width:20%; background-color: blue;border-style:solid;}
#entete {float:right; height:20%; width:78%;margin-left:3px; background-color:green;border-style:solid;float:right;}


#gauche {height:59%; width:20%;margin-top:3px; border-style:solid;float:left; background-image:url(images/fond2.jpeg);}
#menu {width:78%; margin-top:2px;margin-left:3px; background-color:orange;border-style:solid;float:right;}
#menu ul { margin-bottom:2%;width: 100%;}
#menu ul li {float: left;display: block;}
#menu ul li a {display: block; border-style: solid; border-width: 1px; padding: 0.5em; margin-right: 0.0em; background-color: yellow; text-decoration: none;}

#menu a {color: blue;}
#menu a:hover {background-image:url(images/fond.jpeg);}
#menu a:active {background-color: red;border-bottom:hidden;}

#log {position :relative; font size:0.3em; font-family:"comic sans ms";}

#M_Recherche {position:relative;}
#M_Recherche input {position:relative; border-style:solid; background-color:geen;border-color:green; margin-left:5%; margin-right:2%;}



#page { height:46%; width: 78%;margin-top:1px; background-color:red;border-style:solid;float:right;}
#pied {height:20%; width:100%; margin-top:1px; background-color:pink;border-style:solid;float:left;}[code]
Modifié par burinho (30 Jul 2006 - 21:38)
bon je sais pas pourquoi la prise code n'a pas fonctionner donc je rectifie le tir.

.


#logo {float :left; height:20%; width:20%; background-color: blue;border-style:solid;}
#entete {float:right; height:20%; width:78%;margin-left:3px; background-color:green;border-style:solid;float:right;}


#gauche {height:59%; width:20%;margin-top:3px; border-style:solid;float:left; background-image:url(images/fond2.jpeg);}
#menu {width:78%; margin-top:2px;margin-left:3px; background-color:orange;border-style:solid;float:right;}
#menu ul { margin-bottom:2%;width: 100%;}
#menu ul li {float: left;display: block;}
#menu ul li a {display: block; border-style: solid; border-width: 1px; padding: 0.5em; margin-right: 0.0em; background-color: yellow;  text-decoration: none;}

#menu a {color: blue;}
#menu a:hover  {background-image:url(images/fond.jpeg);}
#menu a:active {background-color: red;border-bottom:hidden;}

#log  {position :relative; font size:0.3em; font-family:"comic sans ms";}

#M_Recherche {position:relative;}
#M_Recherche input {position:relative; border-style:solid; background-color:geen;border-color:green;  margin-left:5%; margin-right:2%;}



#page { height:46%; width: 78%;margin-top:1px; background-color:red;border-style:solid;float:right;}
#pied {height:20%; width:100%; margin-top:1px; background-color:pink;border-style:solid;float:left;}
lol

Tu multiposts avec Pompeurs ? Smiley smile

Même si ce sont des modèles, il te faut t'en inspirer comme je t'ai dit car tu n'as pas les bonnes bases...
Modifié le 08 Feb 2005 - 23:45
en faite l'interface elle fonctionne c'est quand j'inserre une div dans une autre la première s'agrandit
Bonsoir burinho,

N'aurais-tu pas une page en ligne ou au moins le code html qui va avec le code css (comme cela était demandé déjà sur la liste des pompeurs, par Julio me semble t-il Smiley cligne ), car là ce n'est pas très simple de t'aider, c'est même impossible à reprendre ta feuille de style, j'applique les id à quels éléments? Smiley cligne

ps: pour le code pas besoin de créer un nouveau message, met [ code] avant ton code et [ /code] après ledit code (sans les espaces, ndm).
j'ai pas encore de page en ligne, mais je peux sans problème fournir le code html



<body>




		<div id="logo">
	 </div>
			<div id="entete">
		</div>
			<div id="gauche">
					<div id="log">Connectez vous?
						<form>
							<table>
								<tr><td>Utilisateur </td><td><input type="text" name="utilisateur" size="10">
								</tr></td>
								<tr><td>mot de passe</td><td> <input type="password" name="utilisateur" size="10">
								
								<tr> <td><input type="submit" value="Connection">
								</tr></td>
							</table>
						</form>
								
					
				</div>
					<div M_recherche>Moteur de Recherche
					<input type="text" size="10">
					<input type="submit" value="rechercher">
					</div>
			</div>
		
					
		
					<div id="menu">
						<ul>
							<li><a href="#" >accueil</a></li>
							<li><a href="#">Historique</a></li>
							<li><a href="#">acces membres</a></li>
							<li><a href="#">Commission</a></li>
							<li><a href="#">Le Journal</a></li>
							<li><a href="#">La Radio</a></li>
						</ul>
					</div>
					<div id ="page"></div>
						<div id="pied"> </div>
ce que tu voulais essayer de me faire comprendre c'est le faite de rajouter dans mon document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


ou le faite que ms ne prend pas en compte dans le contenu l'espace du padding
Un peu les deux en réalité car je soupçonne que tu rencontres des problèmes dans ta page dû au modèle de boîte comme expliqué dans l'article d'Openweb:
Gérer les modèles de boîtes CSS standard et Microsoft a écrit :

Le DocType switching : forcer l'une ou l'autre interprétation des dimensions

Le résultat d'un positionnement précis de plusieurs boîtes adjacentes peut donc être très différent selon le calcul effectué. Comment savoir quel modèle de boîte sera appliqué par quel navigateur ?

* les navigateurs périmés type IE 4.x et Netscape 4.x ne sont pas à prendre en compte puisqu'ils n'ont pas d'implémentation suffisante des propriétés CSS ;

* IE 5.x Windows ne connaît que le modèle Microsoft ;

*les navigateurs récents (IE 5 Macintosh, Netscape 6+ et autres navigateurs basés sur Gecko, Opera 7.x…) exploitent la technique du DocType Switching, qui permet ici de choisir le modèle appliqué, en fonction de la Déclaration de Type de Document (DTD) spécifiée en tête de la page à afficher. Pour résumer, ces navigateurs récents opteront pour :

o le modèle Microsoft en l'absence de DTD, ou en présence d'une DTD HTML 4.01 transitional sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ;

o le modèle Standard en présence d'une DTD HTML strict sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Ou d'une DTD HTML 4.01 transitional sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Ou d'une DTD XHTML quelle qu'elle soit, sur le modèle : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ou <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> .
Sujet clos
Aller à