28220 sujets

CSS et mise en forme, CSS3

Bonsoir j'ai un problème d'affichage de mon site en 800x600.

La partie gauche du site est complètement tronquée ainsi que le menu: ils sont innacessible. Smiley bawling

je ne vois pas ce qu'il va pas et pourquoi surtout je n'ai pas un scroll horizontal qui se met en place. Smiley eyecrazy

Voici dans le CSS la partie mise en page générale
/* --------------------------- Mise en page générale --------------------------- */

* { padding: 0;	margin: 0; }

body {
	font-size: 11px;
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	}

#header {
	height: 130px;
	background: url(Images/ToutesPages/CadreHeader.jpg);
	}

#conteneur {
	position: absolute;
	width: 1000px;
	left: 50%;
	margin-left: -500px;
	}

html>body #main {
	height: auto;
	min-height: 700px;
	}

#main {
	width: 1000px;
	height: 700px;
	background: url(Images/ToutesPages/CadreMilieu.jpg) repeat-y;
	}

html>body #navigation {
	height: auto;
	min-height: 700px;
	}

#navigation {
	width: 200px;
	height: 700px;
	float: left;
	padding: 35px 0px 0px 0px;
	background: url(Images/ToutesPages/PenDuick.jpg) 10px 60px no-repeat;
	}

html>body #centre {
	height: auto;
	min-height: 700px;
	}	

#centre {
	height: 700px;
	margin-left: 200px;
	padding: 30px 0px 10px 0px;
	}
	
#footer {
	height: 28px;
	padding: 1px 15px 0px 15px;
	background: url(Images/ToutesPages/CadreBas.jpg) no-repeat;
	}


Si quelqu'un peut m'eclairer sur la question je suis impatient de connaitre la réponse ! Smiley cligne
Modifié par GuizBizet (15 Apr 2005 - 19:35)
bonsoir,

je ne voudrais pas dire de betise mais a la lecture de ton css apparait ceci

#conteneur {
position: absolute;
width: 1000px; 
left: 50%;
margin-left: -500px;
}


avec un
width: 800px;
ça marcherait surement mieux enfin... je crois et tant que tu y est, change la valeur du width dans le #main
Modifié par ganou66 (14 Apr 2005 - 23:30)
salut ganou66

merci de ta réponse mais je veux que mon site fasse 1000px de large par contre je veux aussi qu'il soit consultable en 800x600 Smiley cligne

or là tu me propose de mettre mon site en 800px. Smiley confus

En fait surtout ce qu je ne comprends pas c'est qu'il n'y a pas de scroll horizontal Smiley ohwell
Le problème viens des marges négatives, quand tu utilise ce genre de propriété les blocs ne sont plus pris en compte dans la taille du contenu et donc les barre de défillement n'apparaise plus.

Pour ce que j'en sais le seul moyen est de ne pas utiliser de marge néégatives (je sais ça va pas trop t'aider...).
désolé d'être "chiant" Smiley cligne mais j'aimerais que mon site reste toujours centré or avec ta soluce Yereby ce n'est pas le cas Smiley sweatdrop
GuizBizet a écrit :
désolé d'être "chiant" Smiley cligne mais j'aimerais que mon site reste toujours centré or avec ta soluce Yereby ce n'est pas le cas Smiley sweatdrop

Bonjour,
Je viens pourtant de tester à l'instant avec:


#conteneur {
width:1000px;
margin:auto;
}

Et ça fonctionne Smiley cligne
Igor,

C'est super bizarre que ça marche pour toi et pas pour moi, je viens de re-tester et chez moi ça marche pas mon site reste collé à gauche. Smiley eek


Pour info je sais pas si cela a une importance je suis sous XP et IE 6 SP1 (au bureau)
Modifié par GuizBizet (15 Apr 2005 - 16:30)
Salut,

je ne pense pas que tu puisse faire en sorte d'avoir un site de 1000px de large en étant compatible pour le 800x600 !

Pour qu'il le soit il faudrait soit :
> Que tu fasses ton site en largeur fixe de 760px
> Que tu fasse ton site en pourcentage pour occuper par exemple 80% de la largeur d'un ecran !

Il va donc falloir que tu fasse un choix, en gardant à l'esprit que les 800x600 font encore 20% des connexions d'un site.

Et enfin moi je vois bien un scroll horizontal en 800x600 que ce soit avec Mozilla ou Internet Explorer sous PC !
salut,

Guizbizet, je ne vois pas comment tu peux aligner un element de 1000px dans un espace de 800px. c'est physiquement impossible.

Ce que tu veux peut etre dire c'est que tu veux avoir un scroll pour aller a droite et a gauche avec ton position:absolute. Si c'est ca je te conseille de l'eviter, et de mettre un margin:auto et de toute facon ce n'est pas possible, tu ne pourra pas avoir de scrolls.

Avec le margin:auto, il sera aligne au milieu pour toutes les resolutions supérieures a 1000px, et aligne a gauche pour les inferieures.

Tout ca c'est bien sur si tu veux absolument faire ton site avec 1000px de large.
Merci à tous de votre aide

C'est résolu avec ça

body {
	font-size: 11px;
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	[b]text-align: center;[/b]
	}

#conteneur {
[b]	margin-left: auto;
	margin-right: auto;
	width: 1000px;
	text-align: left;[/b]
	}


Je vais tester ce soir sous FF

merci Smiley cligne
Sujet résolu. Smiley biggrin

En fait la solution d'igor marche mais j'avais
<?xml version="1.0" encoding="iso-8859-1"?>

avant mon doctype qui foutait la m......de Smiley fache

le code final pour le conteneur est donc
#conteneur {
width:1000px;
margin:auto;
}


merci Smiley cligne
GuizBizet a écrit :
Sujet résolu. Smiley biggrin

En fait la solution d'igor marche


Qui se trouve être surtout celle de YerebY Smiley biggrin