28172 sujets

CSS et mise en forme, CSS3

[résolu]Pb de zoom

Bonjour,
je débute en CSS, merci d'être indulgent Smiley biggrin

Voila j'ai un petit problème au niveau de mon CSS, dès que je zoom ou que je dé-zoom,
tout part en cacahuète comme ci :

upload/38301-2011-06-14.png


Quelqu'un aurait-il une idée,svp? Smiley biggrin

Merci.


*Nota: ceci n'est qu'un vulgaire exemple réalisé rapidement , mais j'ai le même problème avec un autre site. Smiley eek
Modifié par outstore (15 Jun 2011 - 22:10)
jb_gfx a écrit :
Le problème vient de ton bloc vert qui se décale vers la droite.


Tout d'abord merci pour ta réponse.

Une dernière petite question comment résoudre le problème? Smiley cligne

Car se n'est pas que le bloc de droite qui bouge c'est tout l'ensemble ! Smiley decu
Bonjour outstore,

Je suis au regret de t'annoncer que notre dernière grenouille devineresse s'est suicidée en sautant de son échelle. Nous ne sommes donc pas en mesure de visualiser le code ta page.

Il va donc falloir que tu fasse toi même un copier coller de ce code (HTML + CSS) ou nous fournisse un lien.
Laurie-Anne a écrit :
Bonjour outstore,

Je suis au regret de t'annoncer que notre dernière grenouille devineresse s'est suicidée en sautant de son échelle. Nous ne sommes donc pas en mesure de visualiser le code ta page.

Il va donc falloir que tu fasse toi même un copier coller de ce code (HTML + CSS) ou nous fournisse un lien.


Voici mon code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
        <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
        <title>TEST</title>
    </head>
    <body>
        <div class="header">
                <h1>TEXTE DE L EN-TETE</h1>
        </div>
        <div class="global">
            <div class="col_gauche">
                <b>Text de Gauche</b>
                <ul>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                </ul>
            </div>
            <div class="centre">
                <?php
                if (isset ($_SESSION['auth'])&&($_SESSION['auth']=="ok")){
                    echo 'WELCOME TO THE THIRD DIMENSION';
                    echo '<a href="logout.php">Logout</a>';
                }
                else{
                    echo'<form class="form" action="auth.php" method="post">
                        <fieldset><legend>Login to test !!! </legend>
                        <b>Name: </b><input class="input" type="text" name="login" value=""/>
                        <b>Password: </b><input class="input" type="password" name="pass" value=""/>
                        <input type="submit" value="go"/>
                        </fieldset>
                    </form>';
                }
                ?>
                    
            </div>
            <div class="col_droite">
                <b>Text de Droite</b>
                <ul>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                </ul>
            </div>
    </div>
        <div class="footer">
                <b>TEXTE DE PIED DE PAGE</b>
        </div>
    </body>
</html>


voici mon code CSS :

/* 
    Document   : style
    Created on : 11 mai 2011, 14:42:02
    Author     : LIT
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation  http://www.w3.org/TR/REC-CSS2/
 
*/

body{
    background-color: grey;
    
}
/*Propriétés du centre*/
.centre{
    float:none;
    background-color: orange;
    width:610px;
    height: 250px;
    margin-left: 26%;
    position: fixed;
}

.form{
    background-color: whitesmoke;
    -moz-opacity:75%;
}
.input{
    background-color: greenyellow;
}

/*Propriétés du header*/
.header{
    float:none;
    background-color:#00cccc;
    width: 1024px;
    height: 100px;
    margin-left:10%;
}
.hearder,h1{
    font-family: verdana;
    font-size:24px;
    margin-left: 35%;
    padding-top: 2.5%;
}
/*Propriétés de la colonne de gauche*/
.col_gauche{
    float: left;
    background-color: red;
    width: 200px;
    margin-left: 10%;
}
/*Propriétés de la colonne de droite*/
.col_droite{
    float: right;
    background-color: greenyellow;
    width: 200px;
    margin-right: 9%;
}
.footer{
    margin-top: 800px;
}
Première chose à faire : utiliser un doctype complet, histoire de partir sur une base saine.

Pour ce qui est du problème, je regarderais du côté des marges en %, mélangés à des largeurs en px, ce n'est pas une bonne idée.
merci laurie-anne pour cette réponse,

je verrai pour appliquer ces modifications dès que j'aurai un peu de temps libre ^^
Merci,Je viens d'appliquer les changements , problème résolu ^^

merci

PS: merci de clore ce topic
Modifié par outstore (15 Jun 2011 - 17:45)
Bonjour outsdoor,

j'ai corrigé tous tes bugs et voici le résultat :

<!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" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset="ISO-8859-15">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head> 

<body>
<div class="global">
	<div class="header">
		<h1>Texte de l'en-tête</h1>
	</div>
	
	<div class="col_gauche">
		<h1>Text de Gauche</h1>
		<ul>
			<li>Menu 1</li>
			<li>Menu 2</li>
			<li>Menu 3</li>
			<li>Menu 4</li>
			<li>Menu 5</li>
			<li>Menu 6</li>
		</ul>
	</div> 

	<div class="col_droite">
		<h1>Text de Droite</h1>
		<ul>
			<li>Menu a</li>
			<li>Menu b</li>
			<li>Menu c</li>
			<li>Menu d</li>
			<li>Menu e</li>
			<li>Menu f</li>
		</ul>
	</div> 

	<div class="milieu">
		<form name="login" action="auth.php" method="post">
			<fieldset>
				<legend>Login to test !!!</legend>
				
				<label>Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;</label>
				<input type="text" name="login" value="" />
						
				<label>Password&nbsp;:&nbsp;</label>
				<input type="password" name="pass" value="" />
						
				<input type="submit" name="lance" value="go" />
			</fieldset>
		</form>
	</div>		

	<div class="footer"> 
		<b>Texte du pied de page !</b> 
	</div>
</div> 
</body> 
</html>



* {
			margin					: 0;
			border					: none; 
			padding					: 0;
	}

body {
			background-color		: grey;
			margin					: 25px auto;
	}

.global {
			background-color		: orange;
			margin					: 10%;
	}

.header { 
			background-color		: #00cccc;
			text-align				: center;
			padding					: 10px;
	}

.hearder h1 { 
			font-family				: verdana;
			font-size				: 24px;
	}

.col_gauche {
			float					: left;
			background-color		: red;
			width					: 200px;
			padding					: 10px;
	}

.col_gauche h1 {
			font-size				: 1.2em;
			color					: white;
	}

.col_gauche li {
			list-style-type			: none;
	}

.col_droite {
			float					: right;
			background-color		: greenyellow;
			width					: 200px;
			padding					: 10px;
	}

.col_droite h1 {
			font-size				: 1.2em;
			color					: white;
	}

.col_droite li {
			list-style-type			: none;
	}

.milieu {
			background-color		: orange;
	}

form {
			background-color		: whitesmoke;
	}

fieldset {
			display					: block;
			border					: 3px solid grey;
			width					: 500px;
			margin					: 10px auto;
			padding					: 10px;

			-o-border-radius		: 15px;
			-ms-border-radius		: 15px;
			-moz-border-radius		: 15px;
			-webkit-border-radius	: 15px;
}
	
legend {
			background-color		: yellow;
	}

label {
			background-color		: lightblue;
	}

input {
			background-color		: lightgreen;
	}

input[name="lance"] {
			background-color		: yellow;
	}

.footer {
			background-color		: lightyellow;
			clear					: both;
			padding					: 10px;
			height					: 50px;
	}


J'espère t'avoir un peu aidé !

@+
Merci a toi artemus2.4 , mais mon probleme était deja resolu Smiley smile


Outstore
Modifié par outstore (16 Jun 2011 - 08:47)
Sujet clos
Aller à