28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problèmes de mise en page généraux (div)

Bonsoir à tous,

Je m'occupe en ce moment en créant une site web personnel pour un petite communauté de joueurs. J'ai appris à utiliser HTML, CSS et PHP (faible pour php) via les tutoriaux alsa et du site du zéro. Mes connaissances sont donc "basiques" mais quelques peu creusées tout de même.

Si certains donc, se sentent la force de m'apporter leur aide (soit moyens de contacts privés pour leur envoyer mon dossier, serveur FTP pour les rendre/qu'il les rendent accessible à tous, hébérgement temporaire,etc...) mes problèmes sont les suivants:

--> utilisation de la propriété @font face
--> mise en page au rendu non attendu selon le format d'écran
--> inclusion des pages appelées dans la page index (connaissances php trop faibles)
--> alternative pour les navigateurs ne supportant pas le css3 (-background-gradient)

D'avance merci
Modifié par Justaman (21 Jan 2011 - 16:40)
C'est encore moi, désolé pour le triple post ^^
J'ai bossé toute la nuit et je suis enfin arrivé à réglé mon problème d'affichage, ou presque...

J'ai créé une div "corps" qui contient la div "left" et la div "right".
La div "left" à une largeur de 28% par rapport à "corps".
La div "right" à une largeur de 68% par rapport à "corps".

Je voudrais que ces 2 div soient une à coté de l'autre dans ma div "corps", la div "left" alignée à gauche, la "right" à droite bien entendu, le tout laissant forcément un espace de 4% entre les 2.

J'ai testé des "position" (absolute, relative) des "display", des "float" ou encore de remplacer mes 2 div intérieures par des <span>, mais rien y fait ! Ma div droite se place bien à droite mais sous le cadre de la div "corps".

Help please !

	<!DOCTYPE html>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="description" content="Coalition du site Hordes.fr "/>
	<link rel="stylesheet" type="text/css" href="style/style.css">
	<link rel="stylesheet" type="text/css" href="style/font.css">
	<!--[if IE]><link rel="stylesheet" type="text/css" href="style/styleie.css"><![endif]-->
	

<head>
	<title>Page de notre coalition</title>	
	<a href="#"><div id="header"><table><tr><td>Coalition des chacals miteux</table></div></a>
	<!--[if IE]><?php include('advert.php'); ?><![endif]-->
</head>
<body>
<div id="corps">
	<div id="left">
		<!--  login  -->	
		<?php include('login.php') ?>
		<!--  fin du login  -->
	</div>

	<div id="right">
	<!--  menu  -->
		<?php include('menu.php'); ?>
	<!--  fin du menu  -->	
	<!-- article -->
		<?php include('article.php'); ?>  
		<?php include('article2.php'); ?>
		<?php include('article.php'); ?>
		<?php include('top.php'); ?>
	</div>
</div>
		<?php include('footer.php'); ?>
		<?php include('compteur.php'); ?>
</body>


#corps
{
	width: 97%;
	height: 100%;
	border: 1px solid black;
	margin: auto;
	text-align: center;
	margin-top: 2%;
	margin-bottom: 2%;
}

#left
{
	min-height: 800px;
	width: 28%;
	margin-top:0px;
	background-color: #A67E2E;
	border: 0px solid #663E10;
	-moz-border-radius: 15px; /* coins arrondis firefox */
	-webkit-border-radius:10px; /* coins arrondis chrome */
	border-radius:15px; /* coins arrondis IE */
	-moz-box-shadow: 5px 5px 8px #663E10;	
}

#right
{
	height: 100%;
        min-height: 600px;
	width: 68%;
	display: block;
	float: right;
	margin-top: 0px;
	background-color: #A67E2E;
	border: 0px solid #663E10;
	-moz-border-radius: 15px; /* coins arrondis firefox */
	-webkit-border-radius:10px; /* coins arrondis chrome */
	border-radius:15px; /* coins arrondis IE */
	-moz-box-shadow: 5px 5px 8px #663E10;	
}


Si vous avez besoin de code supplémentaire n'hésitez pas à me le faire savoir, d'avance merci pour votre aide !
Modifié par Justaman (21 Jan 2011 - 07:41)
Je vous ai copier mon dernier test désespéré, il va de soit que le "display: block" n'est certainement pas la solution, à l'origine c'était un "position: relative".

(on ne sait pas supprimer ces propres messages, j'ai donc édité le tout pour rendre plus lisibles et supprimer l'inutile, j'indique donc dans celui ci une notification que j'aurai voulu rajouté plus haut après avoir supprimer cette réponse ci. Si un modérateur peut ajouté le texte ci dessus dans le message du haut et supprimer cette réponse, merci)
Modifié par Justaman (21 Jan 2011 - 07:45)
C'est parfait !

Merci beaucoup ! J'ai cherché toute la nuit pour résoudre ca, je me souviens l'avoir testé mais sans doute sans avoir enlevé une autre ligne d'essai (comme un display ou un absolute) !
C'était pourtant si simple !

Pour ceux qui liront ca plus tard j'ai également du virer le margin auto de gauche et le display block.
Ca à foutu un peu le bousouf en dehors de la div corps (mon footer s'est décalé !) mais j'ai réglé le problème en le mettant dans le corps et en adaptant son css.
Mille fois merci !

(je ne vois pas l'option mais sujet résolu)
Modifié par Justaman (21 Jan 2011 - 13:52)
Sujet clos
Aller à