Header Jquery mobile

**Jo94230** · 25/11/2013, 17h15

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?

**Bovino** · 25/11/2013, 17h55

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...

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

**Jo94230** · 25/11/2013, 22h20

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
 
}

**Bovino** · 26/11/2013, 07h47

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**Jo94230** · 26/11/2013, 23h31

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Header Jquery mobile

CSS

Discussions similaires

Partager

Partager