28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Debutant en css

Pages :
Bonjour,

Voilà je début en full css. Quand je mets dans mon fichier float:right; ou left mon image de fond du conteneur disparait. Je dit bien que je débute.

Voici mon code de ma page :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>

<link href="marketing_v2.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
	<div id="conteneur">
		<div id="cadre_form">
			<div class="bloc_form"> formulaire
        	</div>
		</div>
		<div id="cadre_prod"> 
    		<div class="bloc_prod">Cadre Droit
        	</div>
		</div>
	</div>

</body>
</html>


Et voici mon fichier css Smiley confus 



body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	background: url(images/fond.jpg);
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
}

#conteneur {
	background:url(images/contenu.png) top center;
	background-repeat:repeat-y;
	margin:0px;
	
}


#cadre_form {
	float:left;
}

.bloc_form {
	background: url(images/cadre_f.png) no-repeat top left;
	height:165px;
	width:350px;
	margin:5px 0 0 40px;
	

}

#cadre_prod {
	float:right;	
}

.bloc_prod {
	background:url(images/cadre_p.png) no-repeat top left;
	width:597px;
	height:299px;
	margin: 5px 50px;

}



Merci pour votre aide.
Modifié par byters (22 Jul 2009 - 22:29)
Un détail important mais qui n'a pas de rapport avec ta question :
Tu ne dois rien mettre avant ton doctype. Donc la première ligne dans ton code et qui est avant le doctype ne devrait pas être là. De plus c'est une en-tête de fichier XML donc rien à faire là Smiley cligne
a écrit :
Un détail important mais qui n'a pas de rapport avec ta question :
Tu ne dois rien mettre avant ton doctype. Donc la première ligne dans ton code et qui est avant le doctype ne devrait pas être là. De plus c'est une en-tête de fichier XML donc rien à faire là Smiley cligne .
.

Pourtant d'après ce tutoriel l'auteur nous dit ceci :

a écrit :
La déclaration XML, à placer avant le doctype, fait basculer certains navigateurs dans le modèle de boite (erroné) de Microsoft (mode Quirks).
Le tutoriel dit justement qu'il ne faut pas mettre ce genre de déclaration avant le doctype.
Il faut éviter que le navigateur bascule en mode Quirks qui est souvent à l'origine de problème de mise en forme sous IE dont on ne comprend pas pourquoi ça ne marche pas alors que ça devrait.

On ne met cette déclaration xml que pour un fichier xml. Ici c'est du xHTML donc on ne la met pas. LA déclaration est faite par la ligne :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



Pour la petite histoire, le mode Quirks de IE est un mode de compatibilité pour les vieux programme développé pour les "très" anciennes version de IE et qui ne fonctionne plus sous les nouvelles version sans ce mode.
Modifié par moust (19 Jul 2009 - 19:03)
Bonjour à tous,

Merci pour tous vos posts. Donc j'ai résolu le problème et à savoir pour une personne qui aurait le même problème que moi <br clear="all" /> lorsque vous le passez au validator xhtml apparemment il ne serait pas valide mais j'ai trouvé ceci qui le remplace. Il serai de faire dans un div une classe <div class="nom_de_la_class"></div> puis dans votre css vous mettez
.nom_de_la_class {
clear:both;
}

Pour ce qui est de la ligne au dessus du Doctype si vous faite du xhtml elle est demandé pour que votre page soit prise en compte par le validator voir le lien ci-dessous de selfhtml
http://fr.selfhtml.org/html/generalites/ossature.htm#xhtml

et pour des pages php voici la ligne :
<?php
header('Content-Type: text/html; charset=utf-8');
?>

Maintenant j'ai un problème à résoudre j'ai deux images à superposer sur 50 ou 30px de l'image inférieur comment faire ? et aussi de les mettres à droites les images concernés ce sont :



Voici mon code 
#cadre_prod {
	float:right;	
}

.bloc_prod {
	background:url(images/cadre_p.png) no-repeat top left;
	width:597px;
	height:299px;
	margin: 5px 5px;

}

#sous_cadre {
	float:right;
}

.bloc_sscadre {
	background:url(images/cadre_d.png) no-repeat left;
	width:271px;
	height:422px;
	
}


Et mon xhtml :

<div id="cadre_prod"> 
    		<div class="bloc_prod">Cadre Droit
        	</div>
		</div>
        <div id="sous_cadre">
        	<div class="bloc_sscadre">sscadre
            </div>
        </div>


Pour voir l'image cliquez dessus :

upload/6851-Capture.PNG

Mes images concerné sons cadre droit et ss cadre mais ss cadre est à droite je ne vois pas pourquoi et j'aimerais le faire monter sur l'image cadre droit d'environ 30px.

Il me semble que c'est possible mais je ne vois pas comment.

Merci de votre aide.


PS j'allais oublier mon images du centre dans les navigateur IE8 Chrome et Firefox.
Mais dans dreamweaver il ne l'ai pas il est à gauche avec les 3 autres images

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	background: url(images/fond.jpg);
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
}

#conteneur {
	background:url(images/contenu.png) repeat-y;
	width:980px;
	margin:0 auto;
	
}
clear est une propriété css, tu peux pas la mettre comme ça dans une balise html. C'est pour ça que tu as du passer par une classe.
L'autre solution aurait été celle-ci :
<br style="clear:all;" />


Pour ton problème de superposition d'image, il va te falloir les positionner en absolute. Sinon les images se mettront forcément côte à côte.
Bonjour,

J'ai bien mis en absolu mon image elle superpose bien l'autre super.

Mais, et oui il y a un mais, mon fond n'a pas suivit. Pourquoi ?

Voici le code css que j'ai rajouté :



#sous_cadre {
	float:right;
}

.bloc_sscadre {
	background:url(images/cadre_d.png) no-repeat;
	position:absolute;
	width:271px;
	height:422px;
	margin:250px 0 0 320px;
	
}


Et voici la partie concerné xhtml

<div id="sous_cadre">
        	<div class="bloc_sscadre">sscadre
            </div>
      </div>


J'ai testé en enlevant le float ca fonctionne tout de même. En ai-je besoin ?

Sur mes pages avec IE8 Firefox Chrome mon image du contenu est bien centré mais pas dans dreamweaver.

Comment remédier à ca ?

Merci
Ton fond devrait suivre normalement. On peut avoir un aperçu en ligne ?

Le float n'est pas nécessaire effectivement.

Ne te fies pas au rendu de Dreamweaver, ce n'est pas une référence. Si ça s'affiche comme tu le souhaite dans les navigateurs IE(6-7-8), Safari, Firefox et Chrome alors c'est parfait.
J'ai du mal à repérer ce que tu souhaite au milieu de tous tes blocs Smiley murf

Ton problème ne serait-il pas du à ton paramètre margin dans .bloc_sscadre ?
.bloc_sscadre {
	background:url(images/cadre_d.png) no-repeat; /* Mon Image qui est le cadre */
	position:absolute; /* Positionnement */
	width:271px;
	height:422px;
	margin:250px 0 0 320px; /* 250px du haut du cadre supérieur 0 de droite 0 du bas et 320px pour bien positionner mon cadre vers la droite */


Des blocs il n'y en a pas tellement seulement 3 Smiley ravi
Administrateur
moust a écrit :
Ne te fies pas au rendu de Dreamweaver, ce n'est pas une référence. Si ça s'affiche comme tu le souhaite dans les navigateurs IE(6-7-8), Safari, Firefox et Chrome alors c'est parfait.

Mais pas dans cet ordre-là, plutôt (Safari, Firefox et Chrome et Opera) d'abord puis IE8 puis enfin IE7/IE6.
Jamais faire un site pour IE (6 et7), ce sera la même catastrophe que d'utiliser l'aperçu de DW ...
Je ne les ai pas cités dans l'ordre.

Quand à faire une version pour IE6/7 c'est nécésaire quand on voit les statistiques d'utilisation (surtout 7) Smiley bawling

Byters -> quel est le bloc sensé être dessus et lequel dessus ? A quoi ça doit ressembler ?
Bonjour,

oui voici un lien celui que je suis entrain de refaire oui refaire mais en full css. Pour essayer et comprendre mieux le css. http://www.diffuse-net.com/test/ . Mon site au final est celui ci http://www.marketing-affilie.com il est en php avec feuille de style. Il sera à l'identique. Mais je me demande si je ne vais pas rencontrer un problème avec ma barre de menu. Qui je pense () mon dernier obstacle.

Alors pourquoi le refaire me diriez-vous ?

1) faire un site en full css dans un premier temps.
2) puis le remettre en php du à toutes les fonctions que j'ai et qui son en php.
3) le mettre en à la norme W3C. Car j'ai encore des erreurs mais je pense savoir d'où ca vient. je suis toujours pointilleux sur mes créations Smiley cligne

Voilà je pense que vous avez le nécessaire en info.

Cordialement,
Bruno
Comme ça semble être ce que tu veux :


<div id="conteneur">
	<div id="cadre_form">
		<div class="bloc_form"> formulaire</div>
	</div>
	<div id="cadre_prod"> 
    		<div class="bloc_prod">Cadre Droit</div>
		<div id="sous_cadre">
        		<div class="bloc_sscadre">sscadre</div>
		</div>
	</div>
	<div class="clear"></div>
</div>





#conteneur {
	background:url(images/contenu.png) repeat-y;
	width:980px;
	margin:0 auto;
	
}

.clear {
	clear:both;	
}

#cadre_form {
	float:left;
}

.bloc_form {
	background: url(images/cadre_f.png) no-repeat top left;
	height:165px;
	width:350px;
	margin-top:5px;

}

#cadre_prod {
	float:right;	
}

.bloc_prod {
	background:url(images/cadre_p.png) no-repeat top left;
	width:597px;
	height:299px;
	margin: 5px 5px;

}

#sous_cadre {
	float:right;
}

.bloc_sscadre {
	background:url(images/cadre_d.png) no-repeat;
	width:271px;
	height:422px;
}
bonjour,

Ca je l'avais fait mais mon ss_cadre vient à gauche donc j'ai rajouté ceci :

#sous_cadre {
	float:right;
}

.bloc_sscadre {
	background:url(images/cadre_d.png) no-repeat;
	position:absolute; /* rajout de position absolute */
	width:271px;
	height:422px;
	margin:250px 0 0 320px; /* rajout de la marge du haut et de gauche */
	
}


Mais là le background de mon contenu ne descend plus mais si j'enlève la position absolute c'est ok. je pense qu'il doit passer par dessus l'image du conteneur hors je veux que seulement que cette image (du sous cadre passe par dessus celle du cadre et que l'image du background continue son repeat. Le résultat actuelle est sur http://www.diffuse-net.com/test/ .

Merci
Je ne vois pas la différence entre ce que tu demande et l'état quand tu enlèves le position:absolute eet que tu repositionnes block_sscadre avec les marge. Smiley murf
Bonjour,

Voici c-idessous une image de mon résultat on peut voir 2 cadres en haut et un 3eme cadre à Droite qui chevauche légèrement celui du dessus qui est normal mais si tu regarde bien le fond de couleur blanche s'arrête en repeat après les cadres du haut, hors comme je lui est demandé un repeat Y qu'il puisse continuer puisque j'ai rajouter un 3eme cadre qui déscend bien en dessous de la ligne verte.

upload/6851-Capture.PNG
Pages :
Sujet clos
Aller à