Css adapté a ma page

emi77450 Messages postés 78 Statut Membre -  
stef_03 Messages postés 31 Statut Membre -
Bonjour,

Je débute en CSS et HTML et je n'ai ni fait de Javascript ni fait de PHP ( ni de responsive design )

j'essaye de rendre ma page adaptée a fenêtre réduite mais je fait une catastrophe ....
j'essaye aussi de mettre mes px en % pour moins faire planter mais cela deviens une catastrophe...

Voici ma page comme je la veux en grand écran :



Voici ma page en petit ecran comme je ne la veux pas , vous vous doutez :





Pouvez vous m'aider je suis désespéré j'ai tout essayé ça marche pas ...




voici mon HTML : 






<html>
    <head>
        <meta charset="utf-8" />
		<link href="Feuille CSS.css" rel="stylesheet" type="text/css" />
        <title>Manabu</title>
    </head>

    <body>
	<div id="header">
		<img id="logo" src="cdc12.png" height="120" href="accueil.html" />
		<div id="connexion">
		<p>MON COMPTE :</p>
				<input type="text"name="E-mail"size="taille" maxlength="taille_maximum" value="E-mail">
				<input type="password" value="Mot de passe" />
				<p><input type="submit" value="Ok" /></p>

		</div>
	</div>	
	<div id="menu">
			<ul>
			
				<li>
					<a href="#">Accueil</a>
				</li>
				<li>
					<a href="#">Leçons</a>
						<ul>
							<li><a href="#">Salutation</a></li>
							<li><a href="#">Phrases Types</a></li>
							<li><a href="#">Couleurs</a></li>
							<li><a href="#">Nombres</a></li><li>
							<li><a href="#">La nourriture</a></li>
							<li><a href="#">Les animaux</a></li>
							<li><a href="#">Voeux et fêtes</a></li>
							<li><a href="#">Vêtements et accessoires</a></li>
							<li><a href="#">Le corps Humain</a></li>
							<li><a href="#">La Famille</a></li>
							<li><a href="#">Les Objets</a></li>
							<li><a href="#">Dans la Maison</a></li>
							<li><a href="#">A l'Exterieur</a></li>
							<li><a href="#">La nature</a></li>
						</ul>
				</li> 
				<li>
					<a href="#">Alphabet</a>
						<ul>
							<li><a href="#">Hiragana</a></li>
							<li><a href="#">Katakana</a></li>
							<li><a href="#">Kanjis</a></li>
							
						</ul>
				</li>
				<li>
					<a href="#">Dictionnaire</a>
				</li>
				<li>
					<a href="#">Culture</a>
						<ul>
							<li><a href="#">Le Japon : Géographie</a></li>
							<li><a href="#">Cuisine</a></li>
							<li><a href="#">Manga/Anime</a></li>
							<li><a href="#">Cosplay</a></li>
							<li><a href="#">Mode</a></li>
							<li><a href="#">Tradition</a></li>
							<li><a href="#">Fêtes</a></li>
							<li><a href="#">Catastrophe naturelles</a></li>
							<li><a href="#">Les Arts Japonais</a></li>
							<li><a href="#">Les sports Japonais</a></li>
							<li><a href="#">Les salons en France</a></li>
							
						</ul>
				</li>
				<li>
					<a href="#">Quizz</a>
						<ul>
							<li><a href="#">Salutation</a></li>
							<li><a href="#">Phrases Types</a></li>
							<li><a href="#">Couleurs</a></li>
							<li><a href="#">Nombres</a></li><li>
							<li><a href="#">La nourriture</a></li>
							<li><a href="#">Les animaux</a></li>
							<li><a href="#">Voeux et fêtes</a></li>
							<li><a href="#">Vêtements et accessoires</a></li>
							<li><a href="#">Le corps Humain</a></li>
							<li><a href="#">La Famille</a></li>
							<li><a href="#">Les Objets</a></li>
							<li><a href="#">Dans la Maison</a></li>
							<li><a href="#">A l'Exterieur</a></li>
							<li><a href="#">La nature</a></li>
							<li><a href="#">La Culture</a></li>
							<li><a href="#">Spécial Manga</a></li>
							
						</ul>
				</li>
				<li>
					<a href="#">F.A.Q.</a>
				</li>
				<li>
					<a href="#">Contact</a>
				</li>
				<li>
					<a href="#">Plan du Site</a>
				</li>
			</ul>
		</div>
	</div>
		
    </body>
</html>


et mon CSS : 
@charset " UTF-8";

body {
color:black;
background-color:#ff3333;
margin:0;
}

div#header {

width:55%;
height:14%;
background-color:pink;
top:50%;
left:50%;
margin:0 auto 0 auto;
}

div#connexion {
margin-top: -13%;
width:38%;
height:89%;
background-color:#cccccc;
outline: 2px solid #000000;
top:50%;
left:50%;
margin-left:60%;
}

div#connexion input[type="text"] {
margin-left: 8%;
}

div#connexion input[type="submit"] {

margin-left: 90%;
}




#logo  {
margin-top : 0.5%;
margin-left: 2%;
}

div#menu {
position:absolute;
background-color:pink;
width: 55% ;
height: 120% ;  /* Ici on peut agrandir la page vers le bas*/
top:50%;
left:50%;
margin-top:-18%;
margin-left:-27.5%;
}

#menu ul { 
margin:0;
padding:0; 
list-style-type:none; 
text-align:center;
text-shadow: 2px 2px 4px #000000;
} 
#menu li { 
float:left; 
margin:auto; 
padding:0; 
background-color:#980000;
} 
#menu li a { 
display:block; 
width:100px;
padding:8px;
color:white; 
text-decoration:none; 
}
#menu li a:hover { 
color:#ff0000; 
} 
#menu ul li ul { 
display:none; 
} 
#menu ul li:hover ul {
display:block; 
} 
#menu li:hover ul li { 
float:none; 
} 
#menu li ul { 
position:absolute; 
}
A voir également:

1 réponse

Réponse 1 / 1
stef_03 Messages postés 31 Statut Membre 3
 
Salut,

Évite de mettre des % et utilise plutôt des pixels pour ta mise en page.

Pour adapter ta page a plusieurs résolution jette un coup d'oeil par la :

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-utilisez-le-responsive-design-avec-les-media-queries
0

Discussions similaires

connection ok mais aucune page ne s'affiche
gandounet -
fabiennetitou -

10 réponses
comment revenir à ma page d'accueil "google.fr" ?
sirioja3 -
kaneagle -

5 réponses