Site "one page" problème résolution

Résolu
Le_médiamaticien Messages postés 8 Statut Membre -  
Le_médiamaticien Messages postés 8 Statut Membre -
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   Statut Membre Dernière intervention   208
 
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 128 Statut Membre 14
 
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 Statut Membre
 
ok, je vais essayer ça !

Merci bien
0
Le_médiamaticien Messages postés 8 Statut Membre
 
ça ne marche malheureusement pas mieux.
0
Réponse 3 / 5
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription   Statut Membre Dernière intervention   208
 
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 Statut Membre
 
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   Statut Membre Dernière intervention   208
 
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 Statut Membre
 
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

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses