Header Jquery mobile

Version imprimable

25/11/2013, 17h15
Jo94230

1 pièce(s) jointe(s)

Header Jquery mobile

Bonjour à tous, je me tourne vers vous car je ne trouve pas de solutions sur le net...

Je dois intégrer un header un peu complexe à une web app codé en jquery mobile.
En gros, là je l'ai épuré au maximum, mais normalement il y a une trame composée de textes sur le fond, et un logo au milieu du cercle principal.

Mon problème est que je n'arrive pas à faire en sorte que le header s'adapte à la taille de mon écran sans se déformer complètement... Vous pensez que c'est possible?
25/11/2013, 17h55
Bovino

Citation:

Mon problème est que je n'arrive pas à faire en sorte que le header s'adapte à la taille de mon écran sans se déformer complètement... Vous pensez que c'est possible?

Oui, je crois que c'est possible effectivement que tu n'y arrives pas... :mrgreen:

Plus sérieusement, il faudra donner un minimum de code si tu veux que l'on t'aide. ;)

2 pièce(s) jointe(s)

Problème résolu merci quand même ! :)

Edit : J'ai un autre soucis maintenant... Je n'arrive pas a faire en sorte que mon lien (le back) se place et se transforme en même temps que mon header.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portofolio</title>
<link type="text/css" rel="stylesheet" href="styles.css"/>
</head>
 
<body> 
	<div class="header">
		<img id="head" src="img/header-bkg3.png" ><a id="back" href="#"><img src="img/back.png" alt="back"/></a>
	</div>
</div>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.header #head{
    position:absolu;
    size:100%;
	height: 100%;
	width: 100%;
	z-index: 2;
}
.header #back
{
	position: absolu;
	left: 50px;
    size:100%;
	height: 100%;
	width: 100%;
	z-index: 1;
 
}

26/11/2013, 07h47
Bovino
Code:

1 2 position:absolu; size:100%;
C'est sûr que si tu inventes des propriétés ou des valeurs CSS, ça n'aide pas le navigateur à te comprendre...

2 pièce(s) jointe(s)

Oui, j'ai corrigé ca. Etant débutant en Css ça deviens vite compliqué de faire quelque chose qui tienne la route en "responsive" (c'est pour une web app, donc il faut que cela soit adaptable au tablette pour le format le plus grand)...

En gros, il me faut quelques chose d'assez simple pourtant.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><head>
<link type="text/css" rel="stylesheet" href="styles.css"/>
<style type="text/css">a:link{text-decoration:none}</style>
</head>
<!-------------------------------------------------------------------------------->
<!--DEBUT DE LA FENETRE CATEGORIES------------------------------------------------------>
<!-------------------------------------------------------------------------------->
<div data-role="page" id="categories"  >
   <div data-role="header" class="heade" ><img id="head" src="img/header-bkg3.png" />
   </div>
   <!-- /header -->
   <div class="categories" id="menu" data-role="content" >
      <!--Affichage des categories-->
      <ul data-role="listview" data-inset="true" >
         <li>
            <a class="needsclick" href="#produitscat1" data-transition="none">
               <h2>Nos coups de</h2>
            </a>
         </li>
         <li>
            <a class="needsclick" href="#produitscat2" data-transition="none">
               <h2>Lapin blanc</h2>
            </a>
         </li>
         <li>
            <a class="needsclick" href="#produitscat3" data-transition="none">
               <h2>Lapin noir</h2>
            </a>
         </li>
         <li>
            <a class="needsclick" href="#produitscat4" data-transition="none">
               <h2>Lapin vert</h2>
            </a>
         </li>
      </ul>
   </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.heade #head{
    position:auto;
    height: 100%;
    width: 100%;
    z-index: 2;
    margin-bottom: -150px;
}
 
.categories{
    text-decoration: none;
    font-size: 100%;
    font-family: Trebuchet MS;
}
 
#menu
{
    position: auto;
 
}
 
#menu ul li {
 
    display: block;
    list-style-type: none;
    border-top: 1px solid;
    height: 100%;
    width: 100%;
 
}

J'arrive pas à faire en sorte que mon texte "se modifie" en même temps que mon header.

En gros mon header ça passe, mais mon texte suit pas, et en plus il se décale au fur et à mesure que je modifie la taille de la fenêtre.