Sujet Précédent Sujet Suivant

Site "one page" problème résolution

Résolu/Fermé
Le_médiamaticien Messages postés 8 Date d'inscription jeudi 9 août 2012 Statut Membre Dernière intervention 22 août 2012 - 9 août 2012 à 09:52
Le_médiamaticien Messages postés 8 Date d'inscription jeudi 9 août 2012 Statut Membre Dernière intervention 22 août 2012 - 9 août 2012 à 13:53
Bonjour,
Je suis nouveau sur ce forum ( et c'est d'ailleurs sur le premier que je m'inscris), veuillez donc être indulgents sur les erreurs que je pourrais commettre.

Alors voilà, je suis en train de travailler sur un site que je réalise en "one page". Le site est divisé en deux partie une gauche de 18% et une droite de 78%. A gauche se trouve le menu ainsi que le logo et à droite le contenu. La partie gauche est fixe.

La partie droite à un background qui forme une sorte d'ovale qui part du bas gauche au haut droit. Il est répété. Les différents contenu sont placés les un sous les autres et doivent rentrer à l'intérieur de l'ovale qui lui correspond. Pour cela j'ai mis des dimensions en pourcentage qui sépare les contenus et ainsi qu'ils puissent rentrer dans leurs ovale. Je l'ai d'abord conçu pour une résolution de 1280 x 960.

Mon problème le voici :

Lorsque je change de résolution par exemple en 1400 x 1050 : les polices sont trop petites et mes contenus ne sont plus séparé par les même dimensions ce qui provoque le faite que mes contenus sorte de leurs ovales respectifs et le site devient donc in-navigable.

Auriez-vous la solution miracle ?






A voir également:

5 réponses

Réponse 1 / 5
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
9 août 2012 à 10:36
Bonjour je pense comprendre le probleme, pourrions nous voir le site ou un Screenshots ainsi que le code
0
Réponse 2 / 5
Tralala8 Messages postés 120 Date d'inscription mercredi 17 août 2011 Statut Membre Dernière intervention 12 février 2013 14
9 août 2012 à 11:11
Bonjour,

Pour être certain que le site ne bouge pas lors d'un changement de résolution, mieux vaut utiliser des dimensions en pixels et non en %.

Les pixels seront toujours fixes alors que les % s'adapteront à la taille de l'écran (et exploseront presque toujours le design).
0
Le_médiamaticien Messages postés 8 Date d'inscription jeudi 9 août 2012 Statut Membre Dernière intervention 22 août 2012
9 août 2012 à 11:34
ok, je vais essayer ça !

Merci bien
0
Le_médiamaticien Messages postés 8 Date d'inscription jeudi 9 août 2012 Statut Membre Dernière intervention 22 août 2012
9 août 2012 à 11:42
ça ne marche malheureusement pas mieux.
0
Réponse 3 / 5
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
9 août 2012 à 11:22
un petit tuto


--http://www.siteduzero.com/tutoriel-3-438531-initiation-a-la-creation-d-un-design-extensible.html

"Un homme azerty en vaut deux"
0
Réponse 4 / 5
Le_médiamaticien Messages postés 8 Date d'inscription jeudi 9 août 2012 Statut Membre Dernière intervention 22 août 2012
9 août 2012 à 11:30
Voici mon site simplifié :

premiere page:
http://img40.imageshack.us/img40/1729/page1iz.png

seconde page:
http://img838.imageshack.us/img838/8602/40101703.png

Code HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="style/style1.css"/>


<body>




	
	
		<img class="logo" src="" width="242" height="46"/>
		
		<h1>LOGO</h1>
		
		
		<!---MENU-->
		
		
		<div id="navigation">
			<ul id="sliding-navigation"> 
        		<li><a href="#about_entier" >About</a></li>  
        		<li><a href="#contenu">Contenu1</a></li>  
       	 	<li ><a href="#products" >Products</a></li>  
        		<li ><a href="#services" >Services</a></li>  
        		<li > <a href="#contact" >Contact</a></li>  
   	 	</ul> 
    
   	</div>
   	<!---fin MENU-->
   	<div id="langue">
		<p> <a href="" >EN</a> | <a href="" >DE</a> | <a href="" >FR</a></p>		
		   	
   	</div>
   	
   	
   <div id="droite">	
   	<!-----------------------------------------------about----------------------------------------------------------------
   	-->
   		<div id="about_entier">
		
			<div id="about">
				<h2 >TITRE </h2>
			</div>
		
			<div id="about2">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
				Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
				 when an unknown printer took a galley of type and scrambled it to make a type specimen book.
				  It has survived not only five centuries, 
				but also the leap into electronic typesetting, remaining essentially unchanged. 
				It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
				and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</p>
			</div>
			
			</div>
			<!-----------------------------------------------Contenu1------------------------------------------------------------------>
		

		<div id="contenu1_entier">
		
				<div id="contenu">
				<h2 >Contenu1 </h2>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
				Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
				 when an unknown printer took a galley of type and scrambled it to make a type specimen book.
				  It has survived not only five centuries, 
				but also the leap into electronic typesetting, remaining essentially unchanged. 
				It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
				and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</p>
				</div>
   	
   	</div>
   	
   	
   	
   	
   </div>


Code Css : 
h1{
	position:fixed;
	margin-left: 7%;
	margin-top: 8.5%;
	}
h3{
	color:#000000;
	font-size:80%;
	}

.logo{
	margin:50px 0 0 50px;
	position: fixed;
	z-index: 1;
	
	}

p{
	font-size:14px;
	color:#7e8083;
	}
	
	#navigation{
		position: fixed;
		margin-top: 20%;
		width: 20%;
		}
		
#navigation li{
	list-style-type: none;

	
	}
#navigation li a{
	text-decoration: none;
	color: #7f8082;
	}
		
#navigation li a:hover{
	color:#81cbb4;
	text-shadow: 0 0 7px rgba(0,0,0,1);
	width: 30px;
}

#langue{
	position: fixed;
	float: right;
	margin-left: 92%;	
	}	
#langue a{
	text-decoration: none;
	color: #7e8083;	
	
	}
	
	#langue a:hover{
	text-decoration: none;
	color: #81cbb4;	
	
	}
	
	#gauche{
	float: left;	
	border-style: solid;
	width: 20%;
	}


#droite{
	float: right;	
	border-style: solid;
	width: 80%;

	background-image: url("../Image/background.png");	
	background-repeat: repeat-y;
	background-size:  100%;/*
  -webkit-background-size: 100%;    c'est dû CSS3
  -o-background-size: 100%; 
  -moz-background-size: 100%;*/
	
	}
	
	
	
	/*-----------------------------------------------ABOUT-------------------------------------*/
	#about_entier{

		padding-top: 15%;
		float:left;
		width:92%;
		color:#81cbb4;
		margin-bottom: 1%;
		border:solid;
		margin-left: 8%;
		min-height: 100%;
		}
	
	
	#about h2{
		color:#81cbb4;
		}
	#about{
	margin-bottom: 10%;
	margin-left: 50%;
	float: left;
	height: auto;

	}

	#about2{
	font-size: 28px;
	margin-left: 25%;
	width: 50%;
	border:solid;
	margin-bottom: 58%;
	float: left;


	}
	
	/*-----------------------------------------------Contenu1-------------------------------------*/




/*-------------------1----------------------------*/

	#contenu1_entier{
		float:right;
		width:80%;
		height:50%;
		border:solid;
		color:#81cbb10;
		margin-bottom: 5%;
		margin-bottom: 70%;
	}
	


#contenu{
	border:solid;
	margin-right: 30%;
	height:100%;
	margin-bottom: 70%;
	height: 40%;
	padding-top: 5%;
	margin-left: 50%;

	
	}


En espérant que ça soit plus clair et désolé pour l'indentation.
0
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
9 août 2012 à 11:49
comme a dit Tralala8 essayer avec des pixel et ca devrai etre bon, il y a moyen de tester en faisant des zoom et dezoom ctrl + molette de la souris
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Le_médiamaticien Messages postés 8 Date d'inscription jeudi 9 août 2012 Statut Membre Dernière intervention 22 août 2012
9 août 2012 à 13:53
Merci pour vos réponses, vous m'avez pas mal aidé.
Pour finir je vais plutôt mettre un background différent pour chaque div contenu et ainsi éviter les débordements. Et j'utiliserais plus les pixels que les pourcentages.
0

Discussions similaires

One Piece Kai en streaming ?
Narutimate24 -
Corba -

13 réponses
'Votre colis est dans le site de livraison qui dessert votre adresse' que faire
relakztek82 -
Unemeuf -

25 réponses
[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

19 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
senda -

8 réponses
Télécharger épisodes One Piece
quentin961 -
madmyke -

2 réponses